SHA1
--- a/.env
+++ b/.env
@@ -3,6 +3,6 @@ VITE_PORT = 8080
 
															 # open 运行 npm run dev 时自动打开浏览器
														
 
															 VITE_OPEN = false
														
 
															-
														
 
															+BROWSER = Google Chrome.app
														
 
															 # public path 配置线上环境路径（打包）、本地通过 http-server 访问时，请置空即可
														
 
															 VITE_PUBLIC_PATH = /web
														
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -1,12 +1,14 @@
 
															 module.exports = {
														
 
															+	singleAttributePerLine: false,
														
 
															+	htmlWhitespaceSensitivity: 'ignore',
														
 
															 	// 一行最多多少个字符
														
 
															 	printWidth: 150,
														
 
															 	// 指定每个缩进级别的空格数
														
 
															 	tabWidth: 2,
														
 
															 	// 使用制表符而不是空格缩进行
														
 
															-	useTabs: true,
														
 
															+	useTabs: false,
														
 
															 	// 在语句末尾打印分号
														
 
															-	semi: true,
														
 
															+	semi: false,
														
 
															 	// 使用单引号而不是双引号
														
 
															 	singleQuote: true,
														
 
															 	// 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
														
@@ -19,6 +21,7 @@ module.exports = {
 
															 	bracketSpacing: true,
														
 
															 	// jsx 标签的反尖括号需要换行
														
 
															 	jsxBracketSameLine: false,
														
 
															+	bracketSameLine: true,
														
 
															 	// 在单独的箭头函数参数周围包括括号 always：(x) => x \ avoid：x => x
														
 
															 	arrowParens: 'always',
														
 
															 	// 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
														
--- a/index.html
+++ b/index.html
@@ -17,7 +17,7 @@
 
															 	</head>
														
 
															 	<body>
														
 
															 		<div id="app"></div>
														
 
															-		<script type="text/javascript">
														
 
															+		<!-- <script type="text/javascript">
														
 
															 			// let _hmt = _hmt || [];
														
 
															 			(function () {
														
 
															                 let hm = document.createElement('script');
														
@@ -25,8 +25,8 @@
 
															                 let s = document.getElementsByTagName('script')[0];
														
 
															 				s.parentNode.insertBefore(hm, s);
														
 
															 			})();
														
 
															-		</script>
														
 
															+		</script> -->
														
 
															 		<script type="module" src="/src/main.ts"></script>
														
 
															-		<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=wsijQt8sLXrCW71YesmispvYHitfG9gv&s=1"></script>
														
 
															+		<!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=wsijQt8sLXrCW71YesmispvYHitfG9gv&s=1"></script> -->
														
 
															 	</body>
														
 
															 </html>
														
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
 
															 		"echarts": "^5.4.1",
														
 
															 		"echarts-gl": "^2.0.9",
														
 
															 		"echarts-wordcloud": "^2.1.0",
														
 
															-		"element-plus": "^2.3.9",
														
 
															+		"element-plus": "^2.4.4",
														
 
															 		"element-tree-line": "^0.2.1",
														
 
															 		"font-awesome": "^4.7.0",
														
 
															 		"js-cookie": "^3.0.1",
														
@@ -38,6 +38,7 @@
 
															 		"pinia-plugin-persist": "^1.0.0",
														
 
															 		"postcss": "^8.4.21",
														
 
															 		"print-js": "^1.6.0",
														
 
															+		"process": "^0.11.10",
														
 
															 		"qrcodejs2-fixes": "^0.0.2",
														
 
															 		"qs": "^6.11.0",
														
 
															 		"screenfull": "^6.0.2",
														
--- a/src/assets/ansjer_image.png
+++ b/src/assets/ansjer_image.png
--- a/src/components/DateRangePicker/index.vue
+++ b/src/components/DateRangePicker/index.vue
@@ -14,10 +14,17 @@
 
															       :clearable="false"
														
 
															       :popper-options="{placement: props.popperPlacement}"
														
 
															       @change="changedValue"
														
 
															+
														
 
															     />
														
 
															   </div>
														
 
															 </template>
														
 
															+<script lang="ts">
														
 
															+import { useShopInfo } from '/@/stores/shopInfo'
														
 
															+const timezoneDefault = useShopInfo().profile.time_zone
														
 
															+export default {}
														
 
															+</script>
														
 
															+
														
 
															 <script setup lang="ts">
														
 
															 import { ref, onMounted } from 'vue'
														
 
															 import dayjs, { Dayjs } from 'dayjs'
														
@@ -28,7 +35,7 @@ defineOptions({
 
															 const props = defineProps({
														
 
															   modelValue: {type: Array, required: true },
														
 
															-  timezone: { type: String, required: true },
														
 
															+  timezone: { type: String, default: timezoneDefault },
														
 
															   popperPlacement: { type: String, default: 'bottom-start' }
														
 
															 })
														
@@ -116,4 +123,4 @@ const shortcuts = [
 
															 <style scoped>
														
 
															-</style>
														
 
															+</style>
														
--- a/src/components/DynamicTime/index.vue
+++ b/src/components/DynamicTime/index.vue
@@ -1,5 +1,5 @@
 
															 <template>
														
 
															-  <p>时区：{{ curTime }}</p>
														
 
															+  <p style="white-space: nowrap">时区：{{ curTime }}</p>
														
 
															 </template>
														
 
															 <script lang="ts" setup>
														
--- a/src/components/MetricsCards/index.vue
+++ b/src/components/MetricsCards/index.vue
@@ -2,7 +2,7 @@
 
															   <div class="metrics-cards">
														
 
															     <MCard
														
 
															      v-model="info.metric"
														
 
															-     :metric-items="allMetricItems"
														
 
															+     :metric-items="props.metricItems"
														
 
															      :color="info.color"
														
 
															      v-for="info in displayMetrics"
														
 
															      @change-metric="changedMetric"
														
@@ -11,47 +11,54 @@
 
															 </template>
														
 
															 <script lang="ts" setup>
														
 
															-import { ref, withDefaults, Ref, onBeforeMount, watch, computed,ComputedRef } from 'vue'
														
 
															+import { ref, Ref, onBeforeMount, watch, onMounted, computed } from 'vue'
														
 
															 import MCard from './mCard.vue'
														
 
															+import XEUtils from 'xe-utils';
														
 
															-interface ModelData {
														
 
															-  metric: string,
														
 
															-  color: string
														
 
															-}
														
 
															 interface Props {
														
 
															-  modelValue: ModelData[],
														
 
															+  modelValue: ShowMetric[],
														
 
															   metricItems: MetricData[],
														
 
															-  colors?: string[]
														
 
															 }
														
 
															 const colorsMap: { [key: string]: boolean } = {}
														
 
															-const props = withDefaults(defineProps<Props>(), { colors: () => ["aqua", "orange", "blue"] })
														
 
															+const props = defineProps<Props>()
														
 
															 const emits = defineEmits(['change', 'update:modelValue'])
														
 
															-const allMetricItems = ref(props.metricItems)
														
 
															+// const allMetricItems = ref(props.metricItems)
														
 
															 const selectedMetric = ref(props.modelValue)
														
 
															 const displayMetrics: Ref<{metric:string, color?: string}[]> = ref([])
														
 
															-onBeforeMount(()=> {
														
 
															-  for (const color of props.colors) {
														
 
															-    colorsMap[color] = false
														
 
															+const metricMap = computed(():{[key: string]: string} => {
														
 
															+  const tmp:{[key: string]: string} = {}
														
 
															+  for (const info of props.metricItems) {
														
 
															+    tmp[info.value] = info.label
														
 
															   }
														
 
															-  const tmp:{[key: string]: boolean} = {}
														
 
															+  return tmp
														
 
															+})
														
 
															+onBeforeMount(()=> {
														
 
															+  const dup:{[key: string]: boolean} = {}
														
 
															+  // 初始显示图线的三个维度
														
 
															   for (const info of selectedMetric.value) {
														
 
															     displayMetrics.value.push({ metric: info.metric, color: info.color })
														
 
															-    tmp[info.metric] = true
														
 
															-  }
														
 
															-  for (const info of allMetricItems.value) {
														
 
															-    if (info.disabled && !tmp[info.value]) { displayMetrics.value.push({ metric: info.value }) }
														
 
															+    dup[info.metric] = true
														
 
															+    if (info.color) { colorsMap[info.color] = true }
														
 
															   }
														
 
															 })
														
 
															 const getColor = () => {
														
 
															   for (const [k,v] of Object.entries(colorsMap)) {
														
 
															-    if (!v) return k
														
 
															+    if (!v) {
														
 
															+      colorsMap[k] = true
														
 
															+      return k
														
 
															+    }
														
 
															   }
														
 
															   return ""
														
 
															 }
														
 
															-const changedMetric = (oldVal: string, newVal: string) => {
														
 
															-  for (const info of allMetricItems.value) {
														
 
															+const unsetColor = (color: string ) => {
														
 
															+  if (XEUtils.has(colorsMap, color)) {
														
 
															+    colorsMap[color] = false
														
 
															+  }
														
 
															+}
														
 
															+const changedMetric = (newVal: string, oldVal: string) => {
														
 
															+  for (const info of props.metricItems) {
														
 
															     if (info.value === newVal) {
														
 
															       info.disabled = true 
														
 
															     } else if (info.value === oldVal) {
														
@@ -61,6 +68,7 @@ const changedMetric = (oldVal: string, newVal: string) => {
 
															   const index = selectedMetric.value.findIndex( info => info.metric === oldVal)
														
 
															   if (index > -1) {
														
 
															     selectedMetric.value[index].metric = newVal
														
 
															+    selectedMetric.value[index].label = metricMap.value[newVal]
														
 
															     emits('update:modelValue', selectedMetric.value)
														
 
															     emits('change', selectedMetric.value)
														
 
															   }
														
@@ -71,16 +79,16 @@ const clickCard = (metric: string) => {
 
															     if (selectedMetric.value.length <= 1 ) return
														
 
															     const tmp = selectedMetric.value[index]
														
 
															     selectedMetric.value.splice(index, 1)
														
 
															-    colorsMap[tmp.color] = false
														
 
															+    unsetColor(tmp.color)
														
 
															     emits('update:modelValue', selectedMetric.value)
														
 
															     emits('change', selectedMetric.value)
														
 
															   } else {  // 不存在则添加
														
 
															     if (selectedMetric.value.length === 3) { 
														
 
															       selectedMetric.value[2].metric = metric
														
 
															+      selectedMetric.value[2].label = metricMap.value[metric]
														
 
															     } else {
														
 
															       const color = getColor()
														
 
															-      colorsMap[color] = true
														
 
															-      selectedMetric.value.push({ metric: metric, color: color})
														
 
															+      selectedMetric.value.push({ metric: metric, color: color, label: metricMap.value[metric]})
														
 
															     }
														
 
															     emits('update:modelValue', selectedMetric.value)
														
 
															     emits('change', selectedMetric.value)
														
@@ -101,6 +109,33 @@ watch(selectedMetric.value, () => {
 
															   }
														
 
															 })
														
 
															+watch(
														
 
															+  props.metricItems,
														
 
															+  () => {
														
 
															+    const dup:{[key: string]: boolean} = {}
														
 
															+    for (const info of displayMetrics.value) { dup[info.metric] = true }
														
 
															+    let needNum = 6 - displayMetrics.value.length
														
 
															+    if (needNum > 0) {  
														
 
															+      // 从所有维度中选择剩余
														
 
															+      for (const info of props.metricItems) {
														
 
															+        if (!dup[info.value]) {
														
 
															+          displayMetrics.value.push({ metric: info.value })
														
 
															+          dup[info.value] = true
														
 
															+          needNum --
														
 
															+          if (needNum === 0) break
														
 
															+        }
														
 
															+      }
														
 
															+    }
														
 
															+    for (const info of props.metricItems) {
														
 
															+      if (dup[info.value]) {
														
 
															+        info.disabled = true
														
 
															+      } else {
														
 
															+        info.disabled = false
														
 
															+      }  
														
 
															+    }
														
 
															+  }
														
 
															+)
														
 
															+
														
 
															 </script>
														
 
															 <style scoped>
														
--- a/src/components/MetricsCards/mCard.vue
+++ b/src/components/MetricsCards/mCard.vue
@@ -5,11 +5,11 @@
 
															     <div class="metric-value">{{ selectedData?.metricVal }}</div>
														
 
															     <div class="metric-pre">
														
 
															       <span>{{ selectedData?.preVal }}&nbsp;&nbsp;</span>
														
 
															-      <el-icon>
														
 
															-        <!-- <Bottom class="green"/> -->
														
 
															-        <Top class="green"/>
														
 
															+      <el-icon v-show="selectedData?.gapVal" style="display: inline-block; padding-top: 2px">
														
 
															+        <Top :class="colorClass" v-if="isBoost"/>
														
 
															+        <Bottom :class="colorClass" v-else/>
														
 
															       </el-icon>
														
 
															-      <span class="green">{{ selectedData?.gapVal }}</span>
														
 
															+      <span :class="colorClass">{{ selectedData?.gapVal ? selectedData?.gapVal + '%' : '' }}</span>
														
 
															     </div>
														
 
															   </el-card>
														
 
															 </template>
														
@@ -30,9 +30,9 @@ interface Props {
 
															 const props = defineProps<Props>()
														
 
															 const emits = defineEmits(["update:modelValue", "change-metric"])
														
 
															 const metric = ref(props.modelValue)
														
 
															-const changeMetric = (oldVal: string, newVal: string) => {
														
 
															+const changeMetric = ( newVal: string, oldVal: string) => {
														
 
															   emits('update:modelValue', newVal)
														
 
															-  emits('change-metric', oldVal, newVal)
														
 
															+  emits('change-metric', newVal, oldVal)
														
 
															 }
														
 
															 const selectedData = computed(():MetricData|null => {
														
 
															   const info = props.metricItems.find(item => item.value === metric.value)
														
@@ -44,6 +44,10 @@ const boardTopStyle = computed(() => {
 
															   if (props.color) { style_["border-top-color"] = props.color }
														
 
															   return style_
														
 
															 })
														
 
															+const isBoost = computed(():boolean => {
														
 
															+  return (selectedData.value?.gapVal ?? -1) > 0
														
 
															+})
														
 
															+const colorClass = computed((): "green"|"red" => isBoost.value ? "green": "red")
														
 
															 </script>
														
--- a/src/components/TextSelector/index.vue
+++ b/src/components/TextSelector/index.vue
@@ -1,5 +1,5 @@
 
															 <template>
														
 
															-  <el-dropdown class="el-dropdown-link" @command="handleCommand" trigger="click">
														
 
															+  <el-dropdown class="el-dropdown-link" @command="handleCommand" trigger="click" placement="bottom-start">
														
 
															     <span @click.stop>
														
 
															       {{ displayLabel }}
														
 
															       <el-icon>
														
@@ -7,7 +7,7 @@
 
															       </el-icon>
														
 
															     </span>
														
 
															     <template #dropdown>
														
 
															-      <el-dropdown-menu>
														
 
															+      <el-dropdown-menu class="dropdown-menu-scroll">
														
 
															         <el-dropdown-item v-for="info in options" :command="info.value" :disabled="info.disabled"> {{ info.label }}</el-dropdown-item>
														
 
															       </el-dropdown-menu>
														
 
															     </template>
														
@@ -34,7 +34,7 @@ const handleCommand = (command: string) => {
 
															   const oldVal = data.value
														
 
															   data.value = command
														
 
															   emits('update:modelValue', command)
														
 
															-  emits('change', oldVal, command)
														
 
															+  emits('change', command, oldVal)
														
 
															 }
														
 
															 </script>
														
@@ -46,4 +46,8 @@ const handleCommand = (command: string) => {
 
															   /* display: flex;
														
 
															   align-items: center; */
														
 
															 }
														
 
															+.dropdown-menu-scroll {
														
 
															+  max-height: 300px; /* 根据需要调整最大高度 */
														
 
															+  overflow-y: auto;
														
 
															+}
														
 
															 </style>
														
--- a/src/components/TimerBidTable/index.vue
+++ b/src/components/TimerBidTable/index.vue
@@ -0,0 +1,290 @@
 
															+<template>
														
 
															+  <div class="calendar">
														
 
															+    <table class="calendar-table calendar-table-hour">
														
 
															+      <thead class="calendar-head">
														
 
															+        <tr>
														
 
															+          <th rowspan="8" class="week-td">星期 / 时间</th>
														
 
															+          <th colspan="12">00:00 - 12:00</th>
														
 
															+          <th colspan="12">12:00 - 24:00</th>
														
 
															+          <th colspan="4" rowspan="2" class="week-td" style="display: none">小时</th>
														
 
															+        </tr>
														
 
															+        <tr>
														
 
															+          <th colspan="1" v-for="(_, i) in 24" :key="i">{{ i }}</th>
														
 
															+        </tr>
														
 
															+      </thead>
														
 
															+      <tbody>
														
 
															+        <template v-for="(hoursList, week) in items">
														
 
															+          <tr>
														
 
															+            <th>{{ WeekMap[week] }}</th>
														
 
															+            <td
														
 
															+              v-for="(info, hour) in hoursList"
														
 
															+              :key="hour"
														
 
															+              @mousedown="handleMouseDown(week, hour, $event)"
														
 
															+              @mouseover="handleMouseMove(week, hour)"
														
 
															+              @mouseup="handleMouseUp"
														
 
															+              :style="getTdStyle(info)">
														
 
															+              <span class="cell-text"> {{ info.value ? info.value : '' }} </span>
														
 
															+            </td>
														
 
															+          </tr>
														
 
															+        </template>
														
 
															+        <tr>
														
 
															+          <th colspan="28" class="clear-bar">
														
 
															+            <span class="middle">可拖动鼠标选择时间段</span>
														
 
															+            <el-button class="hover-link fr" link @click="resetAllBid" :disabled="disabled">全部重置</el-button>
														
 
															+          </th>
														
 
															+        </tr>
														
 
															+      </tbody>
														
 
															+    </table>
														
 
															+
														
 
															+    <el-dialog v-model="dialogVisible" title="修改出价系数" width="30%" :close-on-click-modal="false" :before-close="closeDialog">
														
 
															+      <el-input-number v-model="bid" :min="0" :max="100" :step="0.1" controls-position="right" />
														
 
															+      <template #footer>
														
 
															+        <span class="dialog-footer">
														
 
															+          <el-button @click="cancelBid">取消</el-button>
														
 
															+          <el-button type="primary" @click="submitBid">确认</el-button>
														
 
															+        </span>
														
 
															+      </template>
														
 
															+    </el-dialog>
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<script lang="ts" setup>
														
 
															+import { ref, onMounted, watch, reactive } from 'vue'
														
 
															+
														
 
															+interface Props {
														
 
															+  data: number[][]
														
 
															+  disabled: boolean
														
 
															+}
														
 
															+const props = withDefaults(defineProps<Props>(), {
														
 
															+  disabled: false,
														
 
															+})
														
 
															+const bidData = ref(props.data)
														
 
															+
														
 
															+const mouseDown = ref(false)
														
 
															+const startRowIndex = ref(0)
														
 
															+const startColIndex = ref(0)
														
 
															+const items = ref([])
														
 
															+const WeekMap = {
														
 
															+  0: '星期一',
														
 
															+  1: '星期二',
														
 
															+  2: '星期三',
														
 
															+  3: '星期四',
														
 
															+  4: '星期五',
														
 
															+  5: '星期六',
														
 
															+  6: '星期日',
														
 
															+}
														
 
															+const dialogVisible = ref(false)
														
 
															+const bid = ref(0)
														
 
															+const selectedItems = ref({})
														
 
															+
														
 
															+const getTdStyle = (info: any) => {
														
 
															+  if (props.disabled) {
														
 
															+    return { cursor: 'not-allowed', background: '#fff' }
														
 
															+  }
														
 
															+  return { background: info.selected ? '#ccdbff' : '' }
														
 
															+}
														
 
															+
														
 
															+for (let i = 0; i < 7; i++) {
														
 
															+  selectedItems.value[i] = []
														
 
															+  const tmp = []
														
 
															+  for (let j = 0; j < 24; j++) {
														
 
															+    tmp.push({ value: bidData.value.length === 0 ? 0 : bidData.value[i][j], selected: false })
														
 
															+  }
														
 
															+  items.value.push(tmp)
														
 
															+}
														
 
															+
														
 
															+watch(
														
 
															+  () => props.data,
														
 
															+  () => {
														
 
															+    // console.log(100, 'watch', props.data)
														
 
															+    if (props.data.length === 0) {
														
 
															+      for (let i = 0; i < 7; i++) {
														
 
															+        const tmp = []
														
 
															+        for (let j = 0; j < 24; j++) {
														
 
															+          tmp.push(0)
														
 
															+        }
														
 
															+        props.data.push(tmp)
														
 
															+      }
														
 
															+    }
														
 
															+    for (let i = 0; i < 7; i++) {
														
 
															+      for (let j = 0; j < 24; j++) {
														
 
															+        items.value[i][j].value = props.data[i][j]
														
 
															+      }
														
 
															+    }
														
 
															+    bidData.value = props.data
														
 
															+  },
														
 
															+  { immediate: true }
														
 
															+)
														
 
															+
														
 
															+const handleMouseDown = (rowIndex: number, colIndex: number, event: any) => {
														
 
															+  if (props.disabled) return
														
 
															+  if (event.button === 0) {
														
 
															+    mouseDown.value = true
														
 
															+    startRowIndex.value = rowIndex
														
 
															+    startColIndex.value = colIndex
														
 
															+    items.value[rowIndex][colIndex].selected = true
														
 
															+    selectedItems.value[rowIndex].push(colIndex)
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+const handleMouseUp = (event: any) => {
														
 
															+  if (props.disabled) return
														
 
															+  if (event.button === 0) {
														
 
															+    mouseDown.value = false
														
 
															+    startColIndex.value = 0
														
 
															+    startRowIndex.value = 0
														
 
															+    dialogVisible.value = true
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+const handleMouseMove = (rowIndex: number, colIndex: number) => {
														
 
															+  if (props.disabled) return
														
 
															+  if (mouseDown.value) {
														
 
															+    selectCell(rowIndex, colIndex)
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+const selectCell = (rowIndex: number, colIndex: number) => {
														
 
															+  if (props.disabled) return
														
 
															+  const rowStart = Math.min(startRowIndex.value, rowIndex)
														
 
															+  const rowEnd = Math.max(startRowIndex.value, rowIndex)
														
 
															+  const cellStart = Math.min(startColIndex.value, colIndex)
														
 
															+  const cellEnd = Math.max(startColIndex.value, colIndex)
														
 
															+
														
 
															+  for (let i = rowStart; i <= rowEnd; i++) {
														
 
															+    for (let j = cellStart; j <= cellEnd; j++) {
														
 
															+      items.value[i][j].selected = true
														
 
															+      selectedItems.value[i].push(j)
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+const submitBid = () => {
														
 
															+  // console.log(151, 'submitBid', bidData)
														
 
															+  for (const row of Object.keys(selectedItems.value)) {
														
 
															+    for (const col of selectedItems.value[row]) {
														
 
															+      items.value[row][col].value = bid.value
														
 
															+      bidData.value[row][col] = bid.value
														
 
															+    }
														
 
															+  }
														
 
															+  clearSelectedItems()
														
 
															+  clearCellBackgroundColor()
														
 
															+  dialogVisible.value = false
														
 
															+}
														
 
															+
														
 
															+const cancelBid = () => {
														
 
															+  clearSelectedItems()
														
 
															+  clearCellBackgroundColor()
														
 
															+  dialogVisible.value = false
														
 
															+}
														
 
															+
														
 
															+const clearCellBackgroundColor = () => {
														
 
															+  for (const hoursList of items.value) {
														
 
															+    for (const info of hoursList) {
														
 
															+      info.selected = false
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+const clearSelectedItems = () => {
														
 
															+  for (var i = 0; i < 7; i++) {
														
 
															+    selectedItems.value[i] = []
														
 
															+  }
														
 
															+}
														
 
															+const resetAllBid = () => {
														
 
															+  for (let i = 0; i < 7; i++) {
														
 
															+    for (let j = 0; j < 24; j++) {
														
 
															+      items.value[i][j].value = 0
														
 
															+      items.value[i][j].selected = false
														
 
															+      bidData.value[i][j] = 0
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+const closeDialog = (done: Function) => {
														
 
															+  // console.log("closeDialog")
														
 
															+  cancelBid()
														
 
															+  done()
														
 
															+}
														
 
															+</script>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+.calendar {
														
 
															+  background-color: #fff;
														
 
															+  -webkit-user-select: none;
														
 
															+  position: relative;
														
 
															+  display: inline-block;
														
 
															+
														
 
															+  .calendar-table {
														
 
															+    border-collapse: collapse;
														
 
															+  }
														
 
															+
														
 
															+  .week-td {
														
 
															+    width: 90px;
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+table {
														
 
															+  display: table;
														
 
															+  border-collapse: separate;
														
 
															+  box-sizing: border-box;
														
 
															+  text-indent: initial;
														
 
															+  border-spacing: 2px;
														
 
															+  border-color: gray;
														
 
															+
														
 
															+  thead {
														
 
															+    display: table-header-group;
														
 
															+    vertical-align: middle;
														
 
															+    border-color: inherit;
														
 
															+  }
														
 
															+
														
 
															+  tr {
														
 
															+    border: 1px solid #e0e5f4;
														
 
															+    font-size: 12px;
														
 
															+    text-align: center;
														
 
															+    line-height: 32px;
														
 
															+    color: rgba(0, 0, 0, 0.5);
														
 
															+
														
 
															+    th {
														
 
															+      min-width: 40px;
														
 
															+      border: 1px solid #e0e5f4;
														
 
															+      font-size: 12px;
														
 
															+      text-align: center;
														
 
															+      line-height: 32px;
														
 
															+      background: #f7f8fa;
														
 
															+    }
														
 
															+
														
 
															+    td {
														
 
															+      border: 1px solid #e0e5f4;
														
 
															+      font-size: 12px;
														
 
															+      text-align: center;
														
 
															+      line-height: 32px;
														
 
															+      min-width: 40px;
														
 
															+
														
 
															+      &:hover {
														
 
															+        background: #ccdbff;
														
 
															+        cursor: pointer;
														
 
															+      }
														
 
															+
														
 
															+      .cell-text {
														
 
															+        color: black;
														
 
															+      }
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+.clear-bar {
														
 
															+  line-height: 32px;
														
 
															+  padding: 0 12px;
														
 
															+
														
 
															+  .hover-link {
														
 
															+    color: #1c6bde;
														
 
															+    font-size: 13px;
														
 
															+    margin-top: 7px;
														
 
															+  }
														
 
															+  .fr {
														
 
															+    float: right;
														
 
															+  }
														
 
															+  .middle {
														
 
															+    float: center;
														
 
															+  }
														
 
															+}
														
 
															+</style>
														
--- a/src/components/TimerBudgetTable/index.vue
+++ b/src/components/TimerBudgetTable/index.vue
@@ -0,0 +1,407 @@
 
															+<template>
														
 
															+  <div style="width: 100%">
														
 
															+    <el-row justify-content="start">
														
 
															+      <el-col :span="4">
														
 
															+        <span style="background-color: #11acf5; color: #fff">
														
 
															+          <el-icon style="display: inline-block; padding-top: 2.5px"><Bottom /></el-icon>
														
 
															+        </span>
														
 
															+        <span>基于原始预算降低（百分比）</span>
														
 
															+      </el-col>
														
 
															+      <el-col :span="4">
														
 
															+        <span style="background-color: #11acf5; color: #fff">
														
 
															+          <el-icon style="display: inline-block; padding-top: 2.5px"><Top /></el-icon>
														
 
															+        </span>
														
 
															+        <span>基于原始预算升高（百分比）</span>
														
 
															+      </el-col>
														
 
															+      <el-col :span="4">
														
 
															+        <span style="background-color: #3fd4cf; color: #fff">
														
 
															+          <el-icon style="display: inline-block; padding-top: 2.5px"><Bottom /></el-icon>
														
 
															+        </span>
														
 
															+        <span>基于原始预算降低（数值）</span>
														
 
															+      </el-col>
														
 
															+      <el-col :span="4">
														
 
															+        <span style="background-color: #3fd4cf; color: #fff">
														
 
															+          <el-icon style="display: inline-block; padding-top: 2.5px"><Top /></el-icon>
														
 
															+        </span>
														
 
															+        <span>基于原始预算升高（数值）</span>
														
 
															+      </el-col>
														
 
															+      <el-col :span="4">
														
 
															+        <span style="background-color: #3359b5; color: #fff">
														
 
															+          <el-icon style="display: inline-block; padding-top: 2.5px"></el-icon>
														
 
															+        </span>
														
 
															+        <span>固定预算</span>
														
 
															+      </el-col>
														
 
															+    </el-row>
														
 
															+    <div class="calendar">
														
 
															+      <table class="calendar-table calendar-table-hour">
														
 
															+        <thead class="calendar-head">
														
 
															+          <tr>
														
 
															+            <th rowspan="8" class="week-td">星期 / 时间</th>
														
 
															+            <th colspan="12">00:00 - 12:00</th>
														
 
															+            <th colspan="12">12:00 - 24:00</th>
														
 
															+            <th colspan="4" rowspan="2" class="week-td" style="display: none">小时</th>
														
 
															+          </tr>
														
 
															+          <tr>
														
 
															+            <th colspan="1" v-for="(_, i) in 24" :key="i">{{ i }}</th>
														
 
															+          </tr>
														
 
															+        </thead>
														
 
															+        <tbody class="calendar-body">
														
 
															+          <template v-for="(hoursList, week) in items">
														
 
															+            <tr>
														
 
															+              <th class="td-normal">{{ WeekMap[week] }}</th>
														
 
															+              <td
														
 
															+                class="un-selected"
														
 
															+                v-for="(info, hour) in hoursList"
														
 
															+                :key="hour"
														
 
															+                @mousedown="handleMouseDown(week, hour, $event)"
														
 
															+                @mouseover="handleMouseMove(week, hour)"
														
 
															+                @mouseup="handleMouseUp"
														
 
															+                :style="getTdStyle(info)">
														
 
															+                {{ getCellText(info) }}
														
 
															+                <el-icon v-if="info.type !== 'FixBudget'" style="display: inline-block; padding-top: 2px">
														
 
															+                  <Top v-if="info.type === 'UpPercent' || info.type === 'UpNumber'" />
														
 
															+                  <Bottom v-if="info.type === 'DownPercent' || info.type === 'DownNumber'" />
														
 
															+                </el-icon>
														
 
															+              </td>
														
 
															+            </tr>
														
 
															+          </template>
														
 
															+          <tr>
														
 
															+            <th colspan="28" class="clear-bar">
														
 
															+              <span class="middle">可拖动鼠标选择时间段</span>
														
 
															+              <el-button class="hover-link fr" link @click="resetAllBid" :disabled="disabled">全部重置</el-button>
														
 
															+            </th>
														
 
															+          </tr>
														
 
															+        </tbody>
														
 
															+      </table>
														
 
															+    </div>
														
 
															+
														
 
															+    <el-dialog v-model="dialogVisible" :close-on-click-modal="false" title="编辑" width="30%" :before-close="closeDialog" :append-to-body="true">
														
 
															+      <el-form :model="formData" ref="formRef" :inline="true">
														
 
															+        <el-form-item prop="type">
														
 
															+          <el-select v-model="formData.type" @change="changeKind" style="width: 250px">
														
 
															+            <el-option v-for="item in KindEnum" :key="item.value" :label="item.label" :value="item.value" />
														
 
															+          </el-select>
														
 
															+        </el-form-item>
														
 
															+        <el-form-item prop="value" v-if="formData.type !== ''" :rules="{ validator: checkValue, trigger: 'blur' }">
														
 
															+          <InputFloat v-model="formData.value" :prefix="isNumber ? '$' : ''" :suffix="!isNumber ? '%' : ''"></InputFloat>
														
 
															+        </el-form-item>
														
 
															+      </el-form>
														
 
															+      <template #footer>
														
 
															+        <div class="dialog-footer">
														
 
															+          <el-button @click="cancelBid">取消</el-button>
														
 
															+          <el-button type="primary" @click="submitBid">确认</el-button>
														
 
															+        </div>
														
 
															+      </template>
														
 
															+    </el-dialog>
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<script lang="ts" setup>
														
 
															+import { ref, onMounted, watch, Ref } from 'vue'
														
 
															+import InputFloat from '/@/components/input-float/index.vue'
														
 
															+import XEUtils from 'xe-utils'
														
 
															+
														
 
															+interface Props {
														
 
															+  data: { value: string; type: string }[][]
														
 
															+  disabled?: boolean
														
 
															+}
														
 
															+interface FormData {
														
 
															+  type: string
														
 
															+  value: string
														
 
															+}
														
 
															+const props = defineProps<Props>()
														
 
															+
														
 
															+const mouseDown = ref(false)
														
 
															+const startRowIndex = ref(0)
														
 
															+const startColIndex = ref(0)
														
 
															+const items = ref([])
														
 
															+const WeekMap = {
														
 
															+  0: '星期一',
														
 
															+  1: '星期二',
														
 
															+  2: '星期三',
														
 
															+  3: '星期四',
														
 
															+  4: '星期五',
														
 
															+  5: '星期六',
														
 
															+  6: '星期日',
														
 
															+}
														
 
															+const dialogVisible = ref(false)
														
 
															+const selectedItems = ref({})
														
 
															+
														
 
															+const KindEnum = [
														
 
															+  { label: '无需调整预算', value: '' },
														
 
															+  { label: '固定预算', value: 'FixBudget', color: '#3359b5' },
														
 
															+  { label: '基于原始预算降低（百分比）', value: 'DownPercent', color: '#11acf5' },
														
 
															+  { label: '基于原始预算升高（百分比）', value: 'UpPercent', color: '#11acf5' },
														
 
															+  { label: '基于原始预算降低（数值）', value: 'DownNumber', color: '#3fd4cf' },
														
 
															+  { label: '基于原始预算升高（数值）', value: 'UpNumber', color: '#3fd4cf' },
														
 
															+]
														
 
															+
														
 
															+const formData: Ref<FormData> = ref({ type: 'FixBudget', value: '1.00' })
														
 
															+const isNumber = ref(true)
														
 
															+const formRef = ref()
														
 
															+
														
 
															+const checkValue = (rule: any, value: string, callback: any) => {
														
 
															+  if (formData.value.type === 'FixBudget') {
														
 
															+    if (XEUtils.toNumber(value) < 1) {
														
 
															+      return new Error('固定预算必须大于1')
														
 
															+    }
														
 
															+  } else {
														
 
															+    if (XEUtils.toNumber(value) <= 0) {
														
 
															+      return new Error('数值必须大于0')
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+for (let i = 0; i < 7; i++) {
														
 
															+  selectedItems.value[i] = []
														
 
															+  const tmp = []
														
 
															+  for (let j = 0; j < 24; j++) {
														
 
															+    let type = ''
														
 
															+    let value = ''
														
 
															+    if (props.data.length !== 0) {
														
 
															+      type = props.data[i][j].type
														
 
															+      value = props.data[i][j].value
														
 
															+    }
														
 
															+    tmp.push({ type, value })
														
 
															+  }
														
 
															+  items.value.push(tmp)
														
 
															+}
														
 
															+
														
 
															+const getCellBackgroundColor = (row: any) => {
														
 
															+  if (row.selected) return '#ccdbff'
														
 
															+  if (row.type) return KindEnum.find((item) => item.value === row.type).color
														
 
															+  return ''
														
 
															+}
														
 
															+
														
 
															+const getTdStyle = (info: any) => {
														
 
															+  if (props.disabled) {
														
 
															+    let backgroundColor = ''
														
 
															+    if (info.type) {
														
 
															+      backgroundColor = KindEnum.find((item) => item.value === info.type).color
														
 
															+    } else {
														
 
															+      backgroundColor = '#fff'
														
 
															+    }
														
 
															+    return { cursor: 'not-allowed', background: backgroundColor }
														
 
															+  }
														
 
															+  return { background: getCellBackgroundColor(info) }
														
 
															+}
														
 
															+
														
 
															+watch(
														
 
															+  () => props.data,
														
 
															+  () => {
														
 
															+    // console.log(191, props.data)
														
 
															+    if (props.data.length === 0) {
														
 
															+      for (let i = 0; i < 7; i++) {
														
 
															+        const tmp = []
														
 
															+        for (let j = 0; j < 24; j++) {
														
 
															+          tmp.push({ type: '', value: '' })
														
 
															+        }
														
 
															+        props.data.push(tmp)
														
 
															+      }
														
 
															+    }
														
 
															+    for (let i = 0; i < 7; i++) {
														
 
															+      for (let j = 0; j < 24; j++) {
														
 
															+        items.value[i][j].type = props.data[i][j].type
														
 
															+        items.value[i][j].value = props.data[i][j].value
														
 
															+      }
														
 
															+    }
														
 
															+  },
														
 
															+  { deep: true, immediate: true }
														
 
															+)
														
 
															+
														
 
															+const changeKind = () => {
														
 
															+  if (formData.value.type === 'DownPercent' || formData.value.type === 'UpPercent') {
														
 
															+    isNumber.value = false
														
 
															+  } else {
														
 
															+    isNumber.value = true
														
 
															+  }
														
 
															+  formRef.value.clearValidate('value')
														
 
															+}
														
 
															+
														
 
															+const getCellText = (row: any) => {
														
 
															+  if (row.type === 'DownPercent' || row.type === 'UpPercent') return row.value + '%'
														
 
															+  if (row.value) return '$' + row.value
														
 
															+  return ''
														
 
															+}
														
 
															+
														
 
															+const handleMouseDown = (rowIndex: number, colIndex: number, event: any) => {
														
 
															+  if (props.disabled) return
														
 
															+  if (event.button === 0) {
														
 
															+    mouseDown.value = true
														
 
															+    startRowIndex.value = rowIndex
														
 
															+    startColIndex.value = colIndex
														
 
															+    items.value[rowIndex][colIndex].selected = true
														
 
															+    selectedItems.value[rowIndex].push(colIndex)
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+const handleMouseUp = (event: any) => {
														
 
															+  if (props.disabled) return
														
 
															+  if (event.button === 0) {
														
 
															+    mouseDown.value = false
														
 
															+    startColIndex.value = 0
														
 
															+    startRowIndex.value = 0
														
 
															+    dialogVisible.value = true
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+const handleMouseMove = (rowIndex: number, colIndex: number) => {
														
 
															+  if (props.disabled) return
														
 
															+  if (mouseDown.value) {
														
 
															+    selectCell(rowIndex, colIndex)
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+const selectCell = (rowIndex: number, colIndex: number) => {
														
 
															+  if (props.disabled) return
														
 
															+  const rowStart = Math.min(startRowIndex.value, rowIndex)
														
 
															+  const rowEnd = Math.max(startRowIndex.value, rowIndex)
														
 
															+  const cellStart = Math.min(startColIndex.value, colIndex)
														
 
															+  const cellEnd = Math.max(startColIndex.value, colIndex)
														
 
															+
														
 
															+  for (let i = rowStart; i <= rowEnd; i++) {
														
 
															+    for (let j = cellStart; j <= cellEnd; j++) {
														
 
															+      items.value[i][j].selected = true
														
 
															+      selectedItems.value[i].push(j)
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+const submitBid = () => {
														
 
															+  if (formData.value.type === '') {
														
 
															+    for (const row of Object.keys(selectedItems.value)) {
														
 
															+      for (const col of selectedItems.value[row]) {
														
 
															+        props.data[row][col].type = ''
														
 
															+        props.data[row][col].value = ''
														
 
															+      }
														
 
															+    }
														
 
															+  } else {
														
 
															+    for (const row of Object.keys(selectedItems.value)) {
														
 
															+      for (const col of selectedItems.value[row]) {
														
 
															+        props.data[row][col].type = formData.value.type
														
 
															+        props.data[row][col].value = formData.value.value
														
 
															+      }
														
 
															+    }
														
 
															+  }
														
 
															+  clearSelectedItems()
														
 
															+  clearCellBackgroundColor()
														
 
															+  dialogVisible.value = false
														
 
															+}
														
 
															+
														
 
															+const cancelBid = () => {
														
 
															+  clearSelectedItems()
														
 
															+  clearCellBackgroundColor()
														
 
															+  dialogVisible.value = false
														
 
															+}
														
 
															+
														
 
															+const closeDialog = (done: Function) => {
														
 
															+  cancelBid()
														
 
															+  done()
														
 
															+}
														
 
															+
														
 
															+const clearCellBackgroundColor = () => {
														
 
															+  for (const hoursList of items.value) {
														
 
															+    for (const info of hoursList) {
														
 
															+      info.selected = false
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+const clearSelectedItems = () => {
														
 
															+  for (var i = 0; i < 7; i++) {
														
 
															+    selectedItems.value[i] = []
														
 
															+  }
														
 
															+}
														
 
															+const resetAllBid = () => {
														
 
															+  for (let i = 0; i < 7; i++) {
														
 
															+    for (let j = 0; j < 24; j++) {
														
 
															+      items.value[i][j].value = 0
														
 
															+      items.value[i][j].selected = false
														
 
															+      props.data[i][j].type = ''
														
 
															+      props.data[i][j].value = ''
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+</script>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+.calendar {
														
 
															+  background-color: #fff;
														
 
															+  -webkit-user-select: none;
														
 
															+  position: relative;
														
 
															+  display: inline-block;
														
 
															+
														
 
															+  .calendar-table {
														
 
															+    border-collapse: collapse;
														
 
															+  }
														
 
															+
														
 
															+  .week-td {
														
 
															+    width: 90px;
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+table {
														
 
															+  display: table;
														
 
															+  border-collapse: separate;
														
 
															+  box-sizing: border-box;
														
 
															+  text-indent: initial;
														
 
															+  border-spacing: 2px;
														
 
															+  border-color: gray;
														
 
															+
														
 
															+  thead {
														
 
															+    display: table-header-group;
														
 
															+    vertical-align: middle;
														
 
															+    border-color: inherit;
														
 
															+  }
														
 
															+
														
 
															+  tr {
														
 
															+    border: 1px solid #e0e5f4;
														
 
															+    font-size: 12px;
														
 
															+    text-align: center;
														
 
															+    line-height: 32px;
														
 
															+    color: rgba(0, 0, 0, 0.5);
														
 
															+
														
 
															+    th {
														
 
															+      min-width: 40px;
														
 
															+      border: 1px solid #e0e5f4;
														
 
															+      font-size: 12px;
														
 
															+      text-align: center;
														
 
															+      line-height: 32px;
														
 
															+      background: #f7f8fa;
														
 
															+    }
														
 
															+
														
 
															+    td {
														
 
															+      border: 1px solid #e0e5f4;
														
 
															+      font-size: 12px;
														
 
															+      text-align: center;
														
 
															+      line-height: 32px;
														
 
															+      min-width: 40px;
														
 
															+      color: #fff;
														
 
															+      &:hover {
														
 
															+        background: #ccdbff;
														
 
															+        cursor: pointer;
														
 
															+      }
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+.clear-bar {
														
 
															+  line-height: 32px;
														
 
															+  padding: 0 12px;
														
 
															+
														
 
															+  .hover-link {
														
 
															+    color: #1c6bde;
														
 
															+    font-size: 13px;
														
 
															+    margin-top: 7px;
														
 
															+  }
														
 
															+  .fr {
														
 
															+    float: right;
														
 
															+  }
														
 
															+  .middle {
														
 
															+    float: center;
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+.cell-text {
														
 
															+  color: #fff;
														
 
															+}
														
 
															+</style>
														
--- a/src/components/cardComponents/ShowCard.vue
+++ b/src/components/cardComponents/ShowCard.vue
@@ -1,35 +1,36 @@
 
															 <template>
														
 
															-    <div style="height: 350px;">
														
 
															-        <el-row>
														
 
															-            <el-col :span="6">
														
 
															-                <el-card :body-style="{ padding: '0px' }">
														
 
															-                    <div style="display: flex; align-items: center;">
														
 
															-                        <div><img class="cardImg" :src="cardImage" alt="Card Image" style="height: 100px; border-radius: 50%;"/></div>
														
 
															-                        <div>
														
 
															-                            <div style="color:#909399;">{{ cardTitle }}</div>
														
 
															-                            <div style="font-weight: bold;font-size: large">{{ cardMiddle }}</div>
														
 
															-                            <div>
														
 
															-                                <span style="color:#909399;">{{ cardBottom }}</span> ⬇️
														
 
															-                                <span style="color:orangered;">{{ `${cardBottomRight}%` }}</span>
														
 
															-                            </div>
														
 
															-                        </div>
														
 
															-                    </div>
														
 
															-
														
 
															-                </el-card>
														
 
															-            </el-col>
														
 
															-        </el-row>
														
 
															-    </div>
														
 
															+  <div style="height: 110px; width:24%; flex:1;min-width: 260px;">
														
 
															+    <el-card :body-style="{ padding: '0px' }">
														
 
															+      <div style="display: flex; align-items: center;">
														
 
															+        <div><img class="cardImg" :src="cardImage" alt="Card Image" style="height: 100px; border-radius: 50%;  "/></div>
														
 
															+        <div>
														
 
															+          <div style="color:#909399;">{{ cardTitle }}</div>
														
 
															+          <div style="font-weight: bold;font-size: large">{{ cardMiddle }}</div>
														
 
															+          <div>
														
 
															+            <span style="color:#909399;">{{ cardBottom }}</span> ⬇️
														
 
															+            <span style="color:orangered;">{{ `${ cardBottomRight }%` }}</span>
														
 
															+          </div>
														
 
															+        </div>
														
 
															+      </div>
														
 
															+    </el-card>
														
 
															+  </div>
														
 
															 </template>
														
 
															 <script setup>
														
 
															+import { toRefs, watchEffect } from "vue"
														
 
															+
														
 
															 const props = defineProps({
														
 
															-    cardData: {
														
 
															-        type: Object,
														
 
															-        required: true,
														
 
															-    },
														
 
															+  cardData: {
														
 
															+    type: Object,
														
 
															+    required: true,
														
 
															+  },
														
 
															+})
														
 
															+const { cardImage, cardTitle, cardMiddle, cardBottom, cardBottomRight } = toRefs(props.cardData)
														
 
															+
														
 
															+watchEffect(() => {
														
 
															+  console.log(111, props.cardData)
														
 
															 })
														
 
															-const { cardImage, cardTitle, cardMiddle, cardBottom, cardBottomRight } = props.cardData
														
 
															 </script>
														
--- a/src/components/conditionBuilder/condition-group.vue
+++ b/src/components/conditionBuilder/condition-group.vue
@@ -0,0 +1,201 @@
 
															+<template>
														
 
															+  <div class="condition-group-item-wrap">
														
 
															+    <div>
														
 
															+      <el-form :model="formData" ref="formRef" label-suffix="：" label-position="right" label-width="100px" :inline="true">
														
 
															+        <el-form-item label="数据周期" required props="day">
														
 
															+          <el-select v-model="formData.day" @change="formData.exceptDay = 0">
														
 
															+            <el-option v-for="item in periodEnum" :key="item.value" :label="item.label" :value="item.value"> </el-option>
														
 
															+          </el-select>
														
 
															+        </el-form-item>
														
 
															+        <el-form-item label="排除" required props="exceptDay">
														
 
															+          <el-select v-model="formData.exceptDay">
														
 
															+            <el-option
														
 
															+              v-for="item in excludeEnum"
														
 
															+              :key="item.value"
														
 
															+              :label="item.label"
														
 
															+              :value="item.value"
														
 
															+              :disabled="formData.day <= item.value">
														
 
															+            </el-option>
														
 
															+          </el-select>
														
 
															+        </el-form-item>
														
 
															+      </el-form>
														
 
															+      <el-form
														
 
															+        v-for="(conditionInfo, index) of formData.items"
														
 
															+        :model="conditionInfo"
														
 
															+        :inline="true"
														
 
															+        label-position="right"
														
 
															+        label-width="100px"
														
 
															+        ref="ruleFormRef"
														
 
															+        :key="conditionInfo.dataType">
														
 
															+        <el-form-item :required="index === 0" prop="dataType">
														
 
															+          <template #label>
														
 
															+            <span v-if="index === 0">条件：</span>
														
 
															+            <span class="and-span" v-else>&</span>
														
 
															+          </template>
														
 
															+          <el-select v-model="conditionInfo.dataType" style="width: 140px" @change="conditionInfo.num = ''">
														
 
															+            <el-option
														
 
															+              v-for="item in candidateFields"
														
 
															+              :key="item.value"
														
 
															+              :disabled="selectedFields[item.value] ? true : false"
														
 
															+              :label="item.label"
														
 
															+              :value="item.value">
														
 
															+            </el-option>
														
 
															+          </el-select>
														
 
															+        </el-form-item>
														
 
															+        <el-form-item prop="dayType">
														
 
															+          <el-select v-model="conditionInfo.dayType" style="width: 80px">
														
 
															+            <el-option label="总计" value="sum"></el-option>
														
 
															+            <el-option label="均值" value="avg"></el-option>
														
 
															+          </el-select>
														
 
															+        </el-form-item>
														
 
															+        <el-form-item prop="symbol">
														
 
															+          <el-select v-model="conditionInfo.symbol" style="width: 120px">
														
 
															+            <el-option label="大于" value="gt"></el-option>
														
 
															+            <el-option label="大于等于" value="gte"></el-option>
														
 
															+            <el-option label="小于" value="lt"></el-option>
														
 
															+            <el-option label="小于等于" value="lte"></el-option>
														
 
															+            <el-option label="等于" value="eq"></el-option>
														
 
															+            <el-option label="包含" value="in"></el-option>
														
 
															+            <el-option label="范围内" value="between"></el-option>
														
 
															+            <el-option label="范围外" value="not_between"></el-option>
														
 
															+          </el-select>
														
 
															+        </el-form-item>
														
 
															+        <el-form-item prop="num" :rules="[{ validator: checkRight, trigger: 'blur' }]">
														
 
															+          <InputFloat
														
 
															+            v-model="conditionInfo.num"
														
 
															+            :prefix="findPrefix(conditionInfo.dataType)"
														
 
															+            :suffix="findSuffix(conditionInfo.dataType)"
														
 
															+            style="width: 200px">
														
 
															+          </InputFloat>
														
 
															+        </el-form-item>
														
 
															+        <el-form-item>
														
 
															+          <el-button @click="deleteCondition(index)" type="danger" :icon="Delete" v-show="formData.items.length > 1" link></el-button>
														
 
															+        </el-form-item>
														
 
															+      </el-form>
														
 
															+      <el-button link type="primary" @click="addCondition" :icon="Plus" style="margin-left: 100px; color:blue" v-show="showAddCondiBtn">添加条件</el-button>
														
 
															+    </div>
														
 
															+    <el-button type="danger" @click="deleteConditionGroup" :icon="Delete" v-show="showDelGroupBtn">删除组</el-button>
														
 
															+  </div>
														
 
															+  <el-divider border-style="dashed" class="condition-group-divider"> 或 </el-divider>
														
 
															+</template>
														
 
															+
														
 
															+<script lang="ts" setup>
														
 
															+import { ref, reactive, computed } from 'vue'
														
 
															+import { Delete, Plus } from '@element-plus/icons-vue'
														
 
															+import InputFloat from '/@/components/input-float/index.vue'
														
 
															+
														
 
															+interface Props {
														
 
															+  candidateFields: CandidateField[]
														
 
															+  data: ConditionGroupItem
														
 
															+  showDelGroupBtn: boolean
														
 
															+}
														
 
															+const emits = defineEmits(['deleteGroup'])
														
 
															+const periodEnum = [
														
 
															+  { label: '昨天', value: 1 },
														
 
															+  { label: '过去7天', value: 7 },
														
 
															+  { label: '过去14天', value: 14 },
														
 
															+  { label: '过去30天', value: 30 },
														
 
															+  { label: '过去60天', value: 60 },
														
 
															+  { label: '过去90天', value: 90 },
														
 
															+]
														
 
															+const excludeEnum = [
														
 
															+  { label: '不排除', value: 0 },
														
 
															+  { label: '昨天', value: 1 },
														
 
															+  { label: '最近2天', value: 2 },
														
 
															+  { label: '最近3天', value: 3 },
														
 
															+  { label: '最近7天', value: 7 },
														
 
															+  { label: '最近14天', value: 14 },
														
 
															+]
														
 
															+const props = defineProps<Props>()
														
 
															+const formRef = ref()
														
 
															+const ruleFormRef = ref()
														
 
															+const formData = reactive(props.data)
														
 
															+const checkRight = (rule: any, value: string, callback: any) => {
														
 
															+  if (value === '0.00' || value === '') {
														
 
															+    callback(new Error('请输入大于0的数值！'))
														
 
															+  } else {
														
 
															+    callback()
														
 
															+  }
														
 
															+}
														
 
															+const validate = async () => {
														
 
															+  let ret = []
														
 
															+  for (const info of ruleFormRef.value) {
														
 
															+    await info.validate((valid:any, fields:string) => {
														
 
															+      ret.push(valid)
														
 
															+      if(!valid) return false
														
 
															+    })
														
 
															+  }
														
 
															+  return ret
														
 
															+}
														
 
															+const showAddCondiBtn = computed(() => {
														
 
															+  return formData.items.length < props.candidateFields.length
														
 
															+})
														
 
															+const selectedFields = computed(() => {
														
 
															+  const ret = {}
														
 
															+  for (const info of formData.items) {
														
 
															+    ret[info.dataType] = true
														
 
															+  }
														
 
															+  return ret
														
 
															+})
														
 
															+const addCondition = () => {
														
 
															+  for (const item of props.candidateFields) {
														
 
															+    if (!selectedFields.value[item.value]) {
														
 
															+      formData.items.push({
														
 
															+        dataType: item.value,
														
 
															+        dayType: 'sum',
														
 
															+        symbol: 'gte',
														
 
															+        num: '',
														
 
															+      })
														
 
															+      break
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+const findPrefix = (dataType: string) => {
														
 
															+  return props.candidateFields.find((item) => item.value === dataType).prefix ?? ''
														
 
															+}
														
 
															+const findSuffix = (dataType: string) => {
														
 
															+  return props.candidateFields.find((item) => item.value === dataType).suffix ?? ''
														
 
															+}
														
 
															+const deleteCondition = (index: number) => {
														
 
															+  formData.items.splice(index, 1)
														
 
															+}
														
 
															+const deleteConditionGroup = () => {
														
 
															+  emits('deleteGroup')
														
 
															+}
														
 
															+
														
 
															+defineExpose({validate})
														
 
															+</script>
														
 
															+
														
 
															+<style scoped>
														
 
															+.condition-group-item-wrap {
														
 
															+  background: #f4f7fe;
														
 
															+  padding: 10px;
														
 
															+  display: flex;
														
 
															+  justify-content: space-between;
														
 
															+  align-items: center;
														
 
															+  /* position: relative; */
														
 
															+}
														
 
															+.condition-group-period {
														
 
															+  display: flex;
														
 
															+  justify-content: flex-start;
														
 
															+  gap: 20px;
														
 
															+}
														
 
															+.condition-item {
														
 
															+  display: flex;
														
 
															+  flex-wrap: wrap;
														
 
															+  gap: 10px;
														
 
															+}
														
 
															+.and-span {
														
 
															+  display: inline-block;
														
 
															+  width: 20px;
														
 
															+  height: 20px;
														
 
															+  background: #fff;
														
 
															+  text-align: center;
														
 
															+  line-height: 20px;
														
 
															+  border-radius: 50%;
														
 
															+  margin: auto 0;
														
 
															+}
														
 
															+div.condition-group-divider:last-of-type {
														
 
															+  display: none;
														
 
															+}
														
 
															+</style>
														
--- a/src/components/conditionBuilder/condition-group2.vue
+++ b/src/components/conditionBuilder/condition-group2.vue
@@ -0,0 +1,265 @@
 
															+<template>
														
 
															+  <div class="condition-group-item-wrap">
														
 
															+    <div>
														
 
															+      <el-form :model="formData" ref="formRef" label-suffix="：" label-position="right" label-width="100px" :disabled="disabled">
														
 
															+        <el-form-item label="数据周期" required prop="day">
														
 
															+          <el-select v-model="formData.day" @change="formData.exceptDay = 0">
														
 
															+            <el-option v-for="item in periodEnum" :key="item.value" :label="item.label" :value="item.value"></el-option>
														
 
															+          </el-select>
														
 
															+        </el-form-item>
														
 
															+        <el-form-item label="排除" required prop="exceptDay">
														
 
															+          <el-select v-model="formData.exceptDay">
														
 
															+            <el-option v-for="item in excludeEnum" :key="item.value" :label="item.label" :value="item.value" :disabled="formData.day <= item.value">
														
 
															+            </el-option>
														
 
															+          </el-select>
														
 
															+        </el-form-item>
														
 
															+        <el-form-item
														
 
															+          v-for="(conditionInfo, index) of formData.items"
														
 
															+          :key="conditionInfo.dataType"
														
 
															+          :prop="getFormProp(conditionInfo, index)"
														
 
															+          :rules="{ validator: checkRight, trigger: getFormTrigger(conditionInfo) }">
														
 
															+          <template #label>
														
 
															+            <span v-if="index === 0">条件：</span>
														
 
															+            <span class="and-span" v-else>&</span>
														
 
															+          </template>
														
 
															+          <div style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap">
														
 
															+            <el-select v-model="conditionInfo.dataType" style="width: 140px" @change="changeDataType(conditionInfo)">
														
 
															+              <el-option
														
 
															+                v-for="item in candidateFields"
														
 
															+                :key="item.value"
														
 
															+                :disabled="selectedFields[item.value] ? true : false"
														
 
															+                :label="item.label"
														
 
															+                :value="item.value">
														
 
															+              </el-option>
														
 
															+            </el-select>
														
 
															+            <el-select
														
 
															+              v-model="conditionInfo.dayType"
														
 
															+              style="width: 80px"
														
 
															+              v-show="conditionInfo.symbol !== 'in' && conditionInfo.symbol !== 'not_in'">
														
 
															+              <el-option label="总计" value="sum"></el-option>
														
 
															+              <el-option label="均值" value="avg"></el-option>
														
 
															+            </el-select>
														
 
															+            <el-select v-model="conditionInfo.symbol" style="width: 120px">
														
 
															+              <el-option v-for="info in getSymbolOptions(conditionInfo.dataType)" :label="info.label" :value="info.value" :key="info.value">
														
 
															+              </el-option>
														
 
															+            </el-select>
														
 
															+            <template v-if="conditionInfo.symbol === 'in' || conditionInfo.symbol === 'not_in'">
														
 
															+              <el-select v-if="getFieldInfo(conditionInfo.dataType).options" v-model="conditionInfo.values" multiple collapse-tags>
														
 
															+                <el-option
														
 
															+                  v-for="info in getFieldInfo(conditionInfo.dataType).options"
														
 
															+                  :label="info.label"
														
 
															+                  :value="info.value"
														
 
															+                  :key="info.value"></el-option>
														
 
															+              </el-select>
														
 
															+              <div v-else style="width: 90%">
														
 
															+                <TagsInput :data="conditionInfo.values" placeholder="请输入至少一个关键词，多个关键词用换行符分隔" :disabled="disabled"></TagsInput>
														
 
															+              </div>
														
 
															+            </template>
														
 
															+            <template v-else-if="conditionInfo.symbol === 'between' || conditionInfo.symbol === 'not_between'">
														
 
															+              <RangeFloat :ranges="conditionInfo.ranges" :prefix="findPrefix(conditionInfo.dataType)" :suffix="findSuffix(conditionInfo.dataType)">
														
 
															+              </RangeFloat>
														
 
															+            </template>
														
 
															+            <InputFloat
														
 
															+              v-else
														
 
															+              v-model="conditionInfo.num"
														
 
															+              :prefix="findPrefix(conditionInfo.dataType)"
														
 
															+              :suffix="findSuffix(conditionInfo.dataType)"
														
 
															+              style="width: 200px">
														
 
															+            </InputFloat>
														
 
															+            <el-button @click="deleteCondition(index)" type="danger" :icon="Delete" v-show="formData.items.length > 1" link></el-button>
														
 
															+          </div>
														
 
															+        </el-form-item>
														
 
															+      </el-form>
														
 
															+      <el-button
														
 
															+        link
														
 
															+        type="primary"
														
 
															+        @click="addConditionItem"
														
 
															+        :icon="Plus"
														
 
															+        :style="{'margin-left': '100px', color: disabled ? '': 'blue'}"
														
 
															+        v-show="showAddCondiBtn"
														
 
															+        :disabled="disabled">
														
 
															+        添加条件
														
 
															+      </el-button>
														
 
															+    </div>
														
 
															+    <el-button type="danger" @click="deleteConditionGroup" :icon="Delete" v-show="showDelGroupBtn">删除组</el-button>
														
 
															+  </div>
														
 
															+  <el-divider border-style="dashed" class="condition-group-divider"> 或 </el-divider>
														
 
															+</template>
														
 
															+
														
 
															+<script lang="ts" setup>
														
 
															+import { ref, reactive, computed, watch } from 'vue'
														
 
															+import { Delete, Plus } from '@element-plus/icons-vue'
														
 
															+import InputFloat from '/@/components/input-float/index.vue'
														
 
															+import TagsInput from '/@/components/tags-input/index.vue'
														
 
															+import RangeFloat from '/@/components/range-float/index.vue'
														
 
															+import { useSymbolOptions } from './utils'
														
 
															+import XEUtils from 'xe-utils'
														
 
															+
														
 
															+interface Props {
														
 
															+  candidateFields: CandidateField[]
														
 
															+  data: ConditionGroupItem
														
 
															+  showDelGroupBtn: boolean
														
 
															+  disabled: boolean
														
 
															+}
														
 
															+const emits = defineEmits(['deleteGroup'])
														
 
															+const periodEnum = [
														
 
															+  { label: '昨天', value: 1 },
														
 
															+  { label: '过去7天', value: 7 },
														
 
															+  { label: '过去14天', value: 14 },
														
 
															+  { label: '过去30天', value: 30 },
														
 
															+  { label: '过去60天', value: 60 },
														
 
															+  { label: '过去90天', value: 90 },
														
 
															+]
														
 
															+const excludeEnum = [
														
 
															+  { label: '不排除', value: 0 },
														
 
															+  { label: '昨天', value: 1 },
														
 
															+  { label: '最近2天', value: 2 },
														
 
															+  { label: '最近3天', value: 3 },
														
 
															+  { label: '最近7天', value: 7 },
														
 
															+  { label: '最近14天', value: 14 },
														
 
															+]
														
 
															+
														
 
															+const props = withDefaults(defineProps<Props>(), {
														
 
															+  disabled: false,
														
 
															+})
														
 
															+const formRef = ref()
														
 
															+const formData = ref(props.data)
														
 
															+const { getSymbolOptions, getFieldInfo } = useSymbolOptions(props.candidateFields)
														
 
															+
														
 
															+const getFormProp = (conditionInfo: ConditionItem, index: number) => {
														
 
															+  if (['between', 'not_between'].includes(conditionInfo.symbol)) {
														
 
															+    return `items[${index}].ranges`
														
 
															+  }
														
 
															+  if (['in', 'not_in'].includes(conditionInfo.symbol)) {
														
 
															+    return `items[${index}].values`
														
 
															+  }
														
 
															+  return `items[${index}].num`
														
 
															+}
														
 
															+const getFormTrigger = (conditionInfo: ConditionItem) => {
														
 
															+  const fieldInfo = getFieldInfo(conditionInfo.dataType)
														
 
															+  if (fieldInfo.options && fieldInfo.options.length > 0) return 'change'
														
 
															+  return 'blur'
														
 
															+}
														
 
															+
														
 
															+const checkRight = (rule: any, value: string | string[], callback: any) => {
														
 
															+  // console.log(139, rule, value)
														
 
															+  if (rule.field.includes('num')) {
														
 
															+    if (XEUtils.toNumber(value) <= 0 ) {
														
 
															+      callback(new Error('请输入大于0的数值！'))
														
 
															+    }
														
 
															+  } else if (rule.field.includes('values')) {
														
 
															+    if (value.length === 0) {
														
 
															+      callback(new Error('必填项'))
														
 
															+    }
														
 
															+  } else if (rule.field.includes('ranges')) {
														
 
															+    for (const val of value) {
														
 
															+      if (XEUtils.toNumber(val) <= 0) {
														
 
															+        callback(new Error('请输入大于0的数值！'))
														
 
															+        break
														
 
															+      }
														
 
															+    }
														
 
															+    if (XEUtils.toNumber(value[0]) >= XEUtils.toNumber(value[1])) {
														
 
															+      callback(new Error('起始值必须小于终止值!'))
														
 
															+    }
														
 
															+  }
														
 
															+  callback()
														
 
															+}
														
 
															+const validate = async () => {
														
 
															+  let ret = false
														
 
															+  await formRef.value.validate((valid: any) => {
														
 
															+    ret = valid
														
 
															+  })
														
 
															+  return ret
														
 
															+}
														
 
															+const showAddCondiBtn = computed(() => {
														
 
															+  return formData.value.items.length < props.candidateFields.length
														
 
															+})
														
 
															+const selectedFields = computed(() => {
														
 
															+  const ret = {}
														
 
															+  for (const info of formData.value.items) {
														
 
															+    ret[info.dataType] = true
														
 
															+  }
														
 
															+  return ret
														
 
															+})
														
 
															+const buildConditionItem = (field: string) => {
														
 
															+  const symbol = getSymbolOptions(field)[0].value
														
 
															+  return {
														
 
															+    dataType: field,
														
 
															+    dayType: symbol === 'in' || symbol === 'not_in' ? '' : 'sum',
														
 
															+    symbol: symbol,
														
 
															+    num: '',
														
 
															+    ranges: [],
														
 
															+    values: [],
														
 
															+  }
														
 
															+}
														
 
															+const addConditionItem = () => {
														
 
															+  for (const item of props.candidateFields) {
														
 
															+    if (!selectedFields.value[item.value]) {
														
 
															+      formData.value.items.push(buildConditionItem(item.value))
														
 
															+      break
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+// const changeSymbol = (conditionInfo: ConditionItem) => {
														
 
															+//   if(conditionInfo.symbol === 'between' || conditionInfo.symbol === 'not_between') {
														
 
															+//     if (conditionInfo.values.length !== 2) {
														
 
															+//       conditionInfo.values.splice(0, conditionInfo.values.length)
														
 
															+//     }
														
 
															+//   }
														
 
															+// }
														
 
															+const changeDataType = (conditionInfo: ConditionItem) => {
														
 
															+  conditionInfo.symbol = getSymbolOptions(conditionInfo.dataType)[0].value
														
 
															+  conditionInfo.num = ''
														
 
															+  // conditionInfo.ranges[0] = ''
														
 
															+  // conditionInfo.ranges[1] = ''
														
 
															+  conditionInfo.ranges.splice(0, conditionInfo.ranges.length)
														
 
															+  conditionInfo.values.splice(0, conditionInfo.values.length)
														
 
															+}
														
 
															+
														
 
															+const findPrefix = (dataType: string) => {
														
 
															+  return props.candidateFields.find((item) => item.value === dataType).prefix ?? ''
														
 
															+}
														
 
															+const findSuffix = (dataType: string) => {
														
 
															+  return props.candidateFields.find((item) => item.value === dataType).suffix ?? ''
														
 
															+}
														
 
															+const deleteCondition = (index: number) => {
														
 
															+  formData.value.items.splice(index, 1)
														
 
															+}
														
 
															+const deleteConditionGroup = () => {
														
 
															+  emits('deleteGroup')
														
 
															+}
														
 
															+
														
 
															+watch(
														
 
															+  () => props.data,
														
 
															+  () => {
														
 
															+    formData.value = props.data
														
 
															+  },
														
 
															+  { deep: true }
														
 
															+)
														
 
															+
														
 
															+defineExpose({ validate })
														
 
															+</script>
														
 
															+
														
 
															+<style scoped>
														
 
															+.condition-group-item-wrap {
														
 
															+  background: #f4f7fe;
														
 
															+  padding: 10px;
														
 
															+  display: flex;
														
 
															+  justify-content: space-between;
														
 
															+  align-items: center;
														
 
															+  /* position: relative; */
														
 
															+}
														
 
															+.and-span {
														
 
															+  display: inline-block;
														
 
															+  width: 20px;
														
 
															+  height: 20px;
														
 
															+  background: #fff;
														
 
															+  text-align: center;
														
 
															+  line-height: 20px;
														
 
															+  border-radius: 50%;
														
 
															+  margin: auto 0;
														
 
															+}
														
 
															+div.condition-group-divider:last-of-type {
														
 
															+  display: none;
														
 
															+}
														
 
															+</style>
														
--- a/src/components/conditionBuilder/index.vue
+++ b/src/components/conditionBuilder/index.vue
@@ -0,0 +1,100 @@
 
															+<template>
														
 
															+  <div>
														
 
															+    <div :class="titleClass">条件</div>
														
 
															+    <ConditionGroup
														
 
															+      ref="condiGroupRef"
														
 
															+      :disabled="disabled"
														
 
															+      v-for="(info, index) of condiGroups"
														
 
															+      :candidate-fields="candidateFields"
														
 
															+      :data="info"
														
 
															+      :key="info.key"
														
 
															+      :showDelGroupBtn="condiGroups.length > 1 && !disabled"
														
 
															+      @delete-group="delGroup(info.key)" />
														
 
															+  </div>
														
 
															+  <el-button type="success" @click="addConditionGroup" style="margin: 5px auto; display: block" :disabled="disabled">添加条件组</el-button>
														
 
															+</template>
														
 
															+
														
 
															+<script lang="ts" setup>
														
 
															+import { ref, watch } from 'vue'
														
 
															+import ConditionGroup from './condition-group2.vue'
														
 
															+import { useSymbolOptions } from '/@/components/conditionBuilder/utils'
														
 
															+import XEUtils from 'xe-utils'
														
 
															+
														
 
															+interface Props {
														
 
															+  candidateFields: CandidateField[]
														
 
															+  data: ConditionGroupItem[]
														
 
															+  disabled: boolean
														
 
															+  titleClass: string
														
 
															+}
														
 
															+const props = withDefaults(defineProps<Props>(), {
														
 
															+  disabled: false,
														
 
															+  titleClass: 'asj-h3',
														
 
															+  candidateFields: () => {
														
 
															+    return [
														
 
															+      { label: '曝光量', value: 'impressions' },
														
 
															+      { label: '点击量', value: 'clicks' },
														
 
															+      { label: '花费', value: 'spend', prefix: '$' },
														
 
															+      { label: '点击率', value: 'ctr', suffix: '%' },
														
 
															+      { label: '单次点击费用', value: 'cpc', prefix: '$' },
														
 
															+      { label: '转化率', value: 'cr', suffix: '%' },
														
 
															+      { label: '广告订单数', value: 'order' },
														
 
															+      { label: '广告销售额', value: 'sale', prefix: '$' },
														
 
															+      { label: 'ACOS', value: 'acos', suffix: '%' }
														
 
															+    ]
														
 
															+  },
														
 
															+})
														
 
															+const condiGroups = ref(props.data)
														
 
															+const condiGroupRef = ref()
														
 
															+const { getSymbolOptions } = useSymbolOptions(props.candidateFields)
														
 
															+
														
 
															+const buildConditionGroup = () => {
														
 
															+  const field = props.candidateFields[0].value
														
 
															+  const symbol = getSymbolOptions(field)[0].value
														
 
															+  return {
														
 
															+    key: Math.random().toString(36).substring(2),
														
 
															+    day: 1,
														
 
															+    exceptDay: 0,
														
 
															+    items: [
														
 
															+      {
														
 
															+        dataType: field,
														
 
															+        dayType: symbol === 'in' || symbol === 'not_in' ? '' : 'sum',
														
 
															+        symbol: symbol,
														
 
															+        num: '',
														
 
															+        ranges: [],
														
 
															+        values: [],
														
 
															+      },
														
 
															+    ],
														
 
															+  }
														
 
															+}
														
 
															+const addConditionGroup = () => {
														
 
															+  condiGroups.value.push(buildConditionGroup())
														
 
															+}
														
 
															+if (condiGroups.value.length === 0) {
														
 
															+  addConditionGroup()
														
 
															+}
														
 
															+
														
 
															+const delGroup = (key: string) => {
														
 
															+  XEUtils.remove(condiGroups.value, (item) => item.key === key)
														
 
															+}
														
 
															+const validate = async () => {
														
 
															+  const ret = []
														
 
															+  if (!condiGroupRef.value) return ret
														
 
															+  for (const info of condiGroupRef.value) {
														
 
															+    ret.push(await info.validate())
														
 
															+  }
														
 
															+  // console.log(52, ret)
														
 
															+  return ret
														
 
															+}
														
 
															+
														
 
															+watch(
														
 
															+  () => props.data,
														
 
															+  () => {
														
 
															+    condiGroups.value = props.data
														
 
															+  },
														
 
															+  { deep: true }
														
 
															+)
														
 
															+
														
 
															+defineExpose({ validate, addConditionGroup })
														
 
															+</script>
														
 
															+
														
 
															+<style scoped></style>
														
--- a/src/components/conditionBuilder/type.d.ts
+++ b/src/components/conditionBuilder/type.d.ts
@@ -0,0 +1,24 @@
 
															+declare interface ConditionItem {
														
 
															+  dataType: string,
														
 
															+  dayType: string,
														
 
															+  symbol: string,
														
 
															+  num: string,
														
 
															+  values: string[],
														
 
															+  ranges: string[]
														
 
															+}
														
 
															+
														
 
															+declare interface ConditionGroupItem {
														
 
															+  key: string,
														
 
															+  day: number,
														
 
															+  exceptDay: number,
														
 
															+  items: ConditionItem[]
														
 
															+}
														
 
															+
														
 
															+declare interface CandidateField {
														
 
															+  label: string,
														
 
															+  value: string,
														
 
															+  prefix?: string,
														
 
															+  suffix?: string,
														
 
															+  type?: string,
														
 
															+  options?: {[key: string]: any}[]
														
 
															+}
														
--- a/src/components/conditionBuilder/utils.ts
+++ b/src/components/conditionBuilder/utils.ts
@@ -0,0 +1,30 @@
 
															+import XEUtils from 'xe-utils'
														
 
															+
														
 
															+export const useSymbolOptions = (candidateFields: CandidateField[]) => {
														
 
															+  const SymbolOptionsList = [
														
 
															+    { label: '大于', value: 'gt' },
														
 
															+    { label: '大于等于', value: 'gte' },
														
 
															+    { label: '小于', value: 'lt' },
														
 
															+    { label: '小于等于', value: 'lte' },
														
 
															+    { label: '等于', value: 'eq' },
														
 
															+    { label: '范围内', value: 'between' },
														
 
															+    { label: '范围外', value: 'not_between' },
														
 
															+    // { label: '包含', value: 'in' },
														
 
															+    // { label: '不包含', value: 'not_in' }
														
 
															+  ]
														
 
															+
														
 
															+  const getFieldInfo = (field: string) => {
														
 
															+    return XEUtils.find(candidateFields, (item) => item.value === field)
														
 
															+  }
														
 
															+
														
 
															+  const getSymbolOptions = (field: string) => {
														
 
															+    const FieldInfo = getFieldInfo(field)
														
 
															+    if (FieldInfo.type === 'array')
														
 
															+      return [
														
 
															+        { label: '包含', value: 'in' },
														
 
															+        { label: '不包含', value: 'not_in' },
														
 
															+      ]
														
 
															+    return SymbolOptionsList
														
 
															+  }
														
 
															+  return { getSymbolOptions, getFieldInfo }
														
 
															+}
														
--- a/src/components/dataCompare/index.vue
+++ b/src/components/dataCompare/index.vue
@@ -0,0 +1,56 @@
 
															+<template>
														
 
															+  <p>{{ props.value === null || props.value === 0 ? '--' : props.value }}</p>
														
 
															+  <el-popover
														
 
															+    effect="dark"
														
 
															+    :width="260">
														
 
															+    <template #reference>
														
 
															+      <p :class="colorClass" v-show="props.showCompare">
														
 
															+        <template v-if="props.gapVal">
														
 
															+          <el-icon style="display: inline-block; padding-top: 2px">
														
 
															+            <Top v-if="props.gapVal > 0"/>
														
 
															+            <Bottom v-if="props.gapVal < 0"/>
														
 
															+          </el-icon>
														
 
															+        </template>
														
 
															+        <span>{{ props.gapVal ? props.gapVal.toFixed(2) + '%' : '--'}}</span>
														
 
															+      </p>
														
 
															+    </template>
														
 
															+    <p>对比周期：{{ compareDate[0] }} ~ {{ compareDate[1] }}</p>
														
 
															+    <p>对比值：{{ props.prevVal }}</p>
														
 
															+  </el-popover>
														
 
															+</template>
														
 
															+
														
 
															+<script lang="ts" setup>
														
 
															+import { ref, computed, Prop } from 'vue'
														
 
															+import { getCompareDate } from '/@/views/adManage/utils/tools.js'
														
 
															+
														
 
															+interface Props {
														
 
															+  field: string,
														
 
															+  value: number,
														
 
															+  prevVal: number,
														
 
															+  gapVal: number,
														
 
															+  dateRange: string[],
														
 
															+  showCompare: boolean
														
 
															+}
														
 
															+
														
 
															+const props = defineProps<Props>()
														
 
															+const compareDate = computed(() => {
														
 
															+  return getCompareDate(props.dateRange)
														
 
															+})
														
 
															+
														
 
															+const colorClass = computed(() => {
														
 
															+  if (props.gapVal) {
														
 
															+    return props.gapVal > 0 ? 'green' :'red'
														
 
															+  }
														
 
															+  return ''
														
 
															+})
														
 
															+
														
 
															+</script>
														
 
															+
														
 
															+<style scoped>
														
 
															+.green {
														
 
															+  color: rgb(24, 172, 54)
														
 
															+}
														
 
															+.red {
														
 
															+  color: red;
														
 
															+}
														
 
															+</style>
														
--- a/src/components/echartsComponents/BarChart.vue
+++ b/src/components/echartsComponents/BarChart.vue
@@ -0,0 +1,164 @@
 
															+<template>
														
 
															+    <div style="margin-left: 45%">
														
 
															+        <span style="background: rgb(176,234,232); width: 18px; height: 10px; margin-top: 8px; display: inline-block; border-radius: 3px;"></span>
														
 
															+        <TextSelector :modelValue="modelValue" :options="options" style="margin-top: 5px; margin-left: 8px;"/>
														
 
															+        <span style="background: rgb(234,207,135); width: 18px; height: 10px; margin-top: 8px; margin-left: 20px; display: inline-block; border-radius: 3px;"></span>
														
 
															+        <TextSelector :modelValue="modelValue" :options="options" style="margin-top: 5px; margin-left: 8px;"/>
														
 
															+    </div>
														
 
															+    <div ref="barRef" style="height: 400px;"></div>
														
 
															+</template>
														
 
															+
														
 
															+<script lang="ts" setup>
														
 
															+import {ref, onMounted, onBeforeUnmount} from 'vue'
														
 
															+import * as echarts from 'echarts'
														
 
															+import TextSelector from '/@/components/TextSelector/index.vue'
														
 
															+
														
 
															+// defineOptions({
														
 
															+//     name: 'DataTendencyChart'
														
 
															+// })
														
 
															+
														
 
															+let chartObj: any
														
 
															+const barRef = ref()
														
 
															+
														
 
															+function resizeChart() {
														
 
															+    chartObj.resize()
														
 
															+}
														
 
															+
														
 
															+function addResize() {
														
 
															+    window.addEventListener('resize', resizeChart)
														
 
															+}
														
 
															+
														
 
															+function removeResize() {
														
 
															+    window.removeEventListener('resize', resizeChart)
														
 
															+}
														
 
															+
														
 
															+onMounted(() => {
														
 
															+    initLine()
														
 
															+    addResize()
														
 
															+})
														
 
															+onBeforeUnmount(() => {
														
 
															+    if (chartObj) {
														
 
															+        chartObj.dispose()
														
 
															+        chartObj = null
														
 
															+    }
														
 
															+    removeResize()
														
 
															+})
														
 
															+
														
 
															+function initLine() {
														
 
															+    chartObj = echarts.init(barRef.value)
														
 
															+    const option = {
														
 
															+        tooltip: {
														
 
															+            trigger: 'axis',
														
 
															+            axisPointer: {
														
 
															+                type: 'cross',
														
 
															+                label: {
														
 
															+                    backgroundColor: '#6a7985'
														
 
															+                }
														
 
															+            }
														
 
															+        },
														
 
															+        toolbox: {
														
 
															+            feature: {
														
 
															+                saveAsImage: {yAxisIndex: 'none'}
														
 
															+            }
														
 
															+        },
														
 
															+        grid: {
														
 
															+            top: 70, right: 60, bottom: 30, left: 55,
														
 
															+
														
 
															+        },
														
 
															+        xAxis: [
														
 
															+            {
														
 
															+                type: 'category',
														
 
															+                boundaryGap: true,
														
 
															+                data: ['商品', '品类', '关键词-精准', '关键词-广泛', '关键词-词组'],
														
 
															+            }
														
 
															+        ],
														
 
															+        yAxis: [
														
 
															+            {
														
 
															+                type: 'value',
														
 
															+                name: '数据1',
														
 
															+                axisLabel: {
														
 
															+                    formatter: '{value} 单位1'
														
 
															+                },
														
 
															+                axisLine: {
														
 
															+                    show: true
														
 
															+                }
														
 
															+            },
														
 
															+            {
														
 
															+                type: 'value',
														
 
															+                name: '数据2',
														
 
															+                splitLine: {
														
 
															+                    show: false
														
 
															+                },
														
 
															+                axisLabel: {
														
 
															+                    formatter: '{value} 单位2'
														
 
															+                },
														
 
															+                axisLine: {
														
 
															+                    show: true
														
 
															+                }
														
 
															+            }
														
 
															+        ],
														
 
															+        series: [
														
 
															+            {
														
 
															+                name: '数据1',
														
 
															+                type: 'bar',
														
 
															+                // tooltip: {
														
 
															+                //   valueFormatter: function (value) {
														
 
															+                //     return value + ' ml';
														
 
															+                //   }
														
 
															+                // },
														
 
															+                barWidth: '30%',
														
 
															+                data: [15, 24, 21, 26, 34],
														
 
															+                yAxisIndex: 0,
														
 
															+                itemStyle: {
														
 
															+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
														
 
															+                        {offset: 0, color: 'rgba(111, 209, 206, 0.8)'},
														
 
															+                        {offset: 1, color: 'rgba(111, 209, 206, 0.1)'},
														
 
															+                    ]),
														
 
															+                    //柱状图圆角
														
 
															+                    borderRadius: [15, 15, 0, 0],
														
 
															+                },
														
 
															+            },
														
 
															+            {
														
 
															+                name: '数据2',
														
 
															+                type: 'bar',
														
 
															+                barWidth: '30%',
														
 
															+                data: [10, 16, 28, 21, 30],
														
 
															+                yAxisIndex: 1,
														
 
															+                itemStyle: {
														
 
															+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
														
 
															+                        {offset: 0, color: '#ebb14d'},
														
 
															+                        {offset: 1, color: 'rgba(111, 209, 206, 0.1)'},
														
 
															+                    ]),
														
 
															+                    //柱状图圆角
														
 
															+                    borderRadius: [15, 15, 0, 0],
														
 
															+                },
														
 
															+            },
														
 
															+        ],
														
 
															+    }
														
 
															+    chartObj.setOption(option)
														
 
															+}
														
 
															+
														
 
															+defineExpose({resizeChart})
														
 
															+
														
 
															+// 下拉框相关
														
 
															+const options = [
														
 
															+    {
														
 
															+        value: '花费',
														
 
															+        label: '花费',
														
 
															+    },
														
 
															+    {
														
 
															+        value: 'Option2',
														
 
															+        label: 'Option2',
														
 
															+    },
														
 
															+    {
														
 
															+        value: 'Option3',
														
 
															+        label: 'Option3',
														
 
															+    }
														
 
															+]
														
 
															+const modelValue = ref(options[0].value)
														
 
															+
														
 
															+</script>
														
 
															+
														
 
															+<style scoped>
														
 
															+
														
 
															+</style>
														
--- a/src/components/echartsComponents/BarLineChart.vue
+++ b/src/components/echartsComponents/BarLineChart.vue
@@ -1,176 +1,202 @@
 
															 <template>
														
 
															-    <div id="barLine" ref="barLine" style="height: 400px;"></div>
														
 
															+    <div ref="barLine" style="height: 400px;"></div>
														
 
															 </template>
														
 
															-<script>
														
 
															-import { onMounted, onBeforeUnmount, ref, } from 'vue'
														
 
															+<script setup>
														
 
															+import {onMounted, onBeforeUnmount, ref} from 'vue'
														
 
															 import * as echarts from 'echarts'
														
 
															-export default {
														
 
															-    props: ['barLineData'],
														
 
															+const props = defineProps({
														
 
															+    barLineData: {type: Object}
														
 
															+})
														
 
															+let lineChart = ref()
														
 
															+const barLine = ref()
														
 
															-    setup(props, context) {
														
 
															-        let lineChart = ref()
														
 
															+onMounted(() => {
														
 
															+    lineChart = echarts.init(barLine.value)
														
 
															+    updateChart()
														
 
															+    addResize()  // 监听窗口大小变化，调整图表大小
														
 
															+    setTimeout(() => {
														
 
															+        resizeChart()
														
 
															+    }, 0)
														
 
															+})
														
 
															+onBeforeUnmount(() => {
														
 
															+    if (lineChart) {
														
 
															+        lineChart.dispose()
														
 
															+        lineChart = null
														
 
															+    }
														
 
															+    removeResize()   // 在组件销毁前移除事件监听，避免内存泄漏
														
 
															+})
														
 
															+// 获取图像数据 lieChartData
														
 
															+let chartData = props.barLineData
														
 
															-        onMounted(() => {
														
 
															-            lineChart = echarts.init(document.getElementById('barLine'))
														
 
															-            updateChart()
														
 
															-            window.addEventListener('resize', resizeChart)  // 监听窗口大小变化，调整图表大小
														
 
															-            setTimeout(() => {
														
 
															-                resizeChart()
														
 
															-            },0)
														
 
															-        })
														
 
															-        onBeforeUnmount(() => {
														
 
															-            window.removeEventListener('resize', resizeChart)   // 在组件销毁前移除事件监听，避免内存泄漏
														
 
															-        })
														
 
															-        // 获取图像数据 lieChartData
														
 
															-        let chartData = props.barLineData
														
 
															-
														
 
															-        function updateChart() {
														
 
															-            const option = {
														
 
															-                // title: {
														
 
															-                //   text: chartData.title,
														
 
															+function updateChart() {
														
 
															+    const option = {
														
 
															+        tooltip: {
														
 
															+            trigger: 'axis',
														
 
															+            axisPointer: {
														
 
															+                type: 'cross',
														
 
															+                label: {
														
 
															+                    backgroundColor: '#6a7985'
														
 
															+                }
														
 
															+            }
														
 
															+        },
														
 
															+        // legend: {data: ['数据1', '数据2'], right: '50%',left: '50%'},
														
 
															+        // toolbox: {
														
 
															+        //     feature: {
														
 
															+        //         saveAsImage: { yAxisIndex: 'none' }
														
 
															+        //     }
														
 
															+        // },
														
 
															+        grid: {
														
 
															+            top: 50, right: 150, bottom: 30, left: 55,
														
 
															+        },
														
 
															+        xAxis: [
														
 
															+            {
														
 
															+                type: 'category',
														
 
															+                boundaryGap: true,
														
 
															+                data: chartData.xData,
														
 
															+            }
														
 
															+        ],
														
 
															+        yAxis: [
														
 
															+            {
														
 
															+                type: 'value',
														
 
															+                name: 'ACOS',
														
 
															+                splitLine: {
														
 
															+                    show: true // 设置显示分割线
														
 
															+                },
														
 
															+                axisLabel: {
														
 
															+                    formatter: '{value} 单位1'
														
 
															+                },
														
 
															+                axisLine: {
														
 
															+                    show: true
														
 
															+                }
														
 
															+            },
														
 
															+            {
														
 
															+                type: 'value',
														
 
															+                name: '点击率',
														
 
															+                position: 'right',
														
 
															+                splitLine: {
														
 
															+                    show: false
														
 
															+                },
														
 
															+                axisLabel: {
														
 
															+                    formatter: '{value} 单位2'
														
 
															+                },
														
 
															+                axisLine: {
														
 
															+                    show: true
														
 
															+                }
														
 
															+            },
														
 
															+            {
														
 
															+                type: 'value',
														
 
															+                position: 'right',
														
 
															+                offset: 80,
														
 
															+                name: '订单数',
														
 
															+                splitLine: {
														
 
															+                    show: false
														
 
															+                },
														
 
															+                axisLabel: {
														
 
															+                    formatter: '{value} 单位3'
														
 
															+                },
														
 
															+                axisLine: {
														
 
															+                    show: true
														
 
															+                }
														
 
															+            }
														
 
															+        ],
														
 
															+        series: [
														
 
															+            {
														
 
															+                name: '柱状图',
														
 
															+                type: 'bar',
														
 
															+                // tooltip: {
														
 
															+                //   valueFormatter: function (value) {
														
 
															+                //     return value + ' ml';
														
 
															+                //   }
														
 
															                 // },
														
 
															-                tooltip: {
														
 
															-                    trigger: 'axis',
														
 
															-                    axisPointer: {
														
 
															-                        type: 'cross',
														
 
															-                        label: {
														
 
															-                            backgroundColor: '#6a7985'
														
 
															-                        }
														
 
															-                    }
														
 
															+                barWidth: '30%',
														
 
															+                data: chartData.barData,
														
 
															+                yAxisIndex: 0,
														
 
															+                itemStyle: {
														
 
															+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
														
 
															+                        {offset: 0, color: 'rgba(111, 209, 206, 0.8)'},
														
 
															+                        {offset: 1, color: 'rgba(111, 209, 206, 0.1)'},
														
 
															+                    ]),
														
 
															+                    //柱状图圆角
														
 
															+                    borderRadius: [15, 15, 0, 0],
														
 
															                 },
														
 
															-                // legend: {data: ['数据1', '数据2'], right: '50%',left: '50%'},
														
 
															-                toolbox: {
														
 
															-                    feature: {
														
 
															-                        saveAsImage: { yAxisIndex: 'none' }
														
 
															-                    }
														
 
															+            },
														
 
															+            {
														
 
															+                name: '数据1',
														
 
															+                type: 'line',
														
 
															+                symbolSize: 6,
														
 
															+                symbol: 'circle',
														
 
															+                smooth: true,
														
 
															+                data: chartData.yData1,
														
 
															+                yAxisIndex: 1,
														
 
															+                lineStyle: {color: '#fe9a8b'},
														
 
															+                itemStyle: {color: '#fe9a8b', borderColor: '#fe9a8b'},
														
 
															+                areaStyle: {
														
 
															+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
														
 
															+                        {offset: 0, color: '#fe9a8bb3'},
														
 
															+                        {offset: 1, color: '#fe9a8b03'},
														
 
															+                    ]),
														
 
															                 },
														
 
															-                grid: {
														
 
															-                    top: 70, right: 60, bottom: 30, left: 55,
														
 
															-
														
 
															+            },
														
 
															+            {
														
 
															+                name: '数据2',
														
 
															+                type: 'line',
														
 
															+                symbolSize: 6,
														
 
															+                symbol: 'circle',
														
 
															+                smooth: true,
														
 
															+                data: chartData.yData2,
														
 
															+                yAxisIndex: 2,
														
 
															+                lineStyle: {color: '#9E87FF'},
														
 
															+                itemStyle: {color: '#9E87FF', borderColor: '#9E87FF'},
														
 
															+                areaStyle: {
														
 
															+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
														
 
															+                        {offset: 0, color: '#9E87FFb3'},
														
 
															+                        {offset: 1, color: '#9E87FF03'},
														
 
															+                    ]),
														
 
															                 },
														
 
															-                xAxis: [
														
 
															-                    {
														
 
															-                        type: 'category',
														
 
															-                        boundaryGap: true,
														
 
															-                        data: chartData.xData,
														
 
															-                    }
														
 
															-                ],
														
 
															-                yAxis: [
														
 
															-                    {
														
 
															-                        type: 'value',
														
 
															-                        // name: yTitle1,
														
 
															-                        splitLine: {
														
 
															-                            show: true // 设置显示分割线
														
 
															+                emphasis: {
														
 
															+                    itemStyle: {
														
 
															+                        color: {
														
 
															+                            type: 'radial',
														
 
															+                            x: 0.5,
														
 
															+                            y: 0.5,
														
 
															+                            r: 0.5,
														
 
															+                            colorStops: [
														
 
															+                                {offset: 0, color: '#9E87FF'},
														
 
															+                                {offset: 0.4, color: '#9E87FF'},
														
 
															+                                {offset: 0.5, color: '#fff'},
														
 
															+                                {offset: 0.7, color: '#fff'},
														
 
															+                                {offset: 0.8, color: '#fff'},
														
 
															+                                {offset: 1, color: '#fff'},
														
 
															+                            ],
														
 
															                         },
														
 
															-                        axisLabel: {
														
 
															-                            formatter: '{value} 单位1'
														
 
															-                        }
														
 
															+                        borderColor: '#9E87FF',
														
 
															+                        borderWidth: 2,
														
 
															                     },
														
 
															-                    {
														
 
															-                        type: 'value',
														
 
															-                        // name: yTitle2,
														
 
															-                        splitLine: {
														
 
															-                            show: false
														
 
															-                        },
														
 
															-                        axisLabel: {
														
 
															-                            formatter: '{value} 单位2'
														
 
															-                        }
														
 
															-                    }
														
 
															-                ],
														
 
															-                series: [
														
 
															-                    {
														
 
															-                        name: '柱状图',
														
 
															-                        type: 'bar',
														
 
															-                        // tooltip: {
														
 
															-                        //   valueFormatter: function (value) {
														
 
															-                        //     return value + ' ml';
														
 
															-                        //   }
														
 
															-                        // },
														
 
															-                        barWidth: '30%',
														
 
															-                        data: chartData.barData,
														
 
															-                        yAxisIndex: 1,
														
 
															-                        itemStyle: {
														
 
															-                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
														
 
															-                                { offset: 0, color: 'rgba(111, 209, 206, 0.8)' },
														
 
															-                                { offset: 1, color: 'rgba(111, 209, 206, 0.1)' },
														
 
															-                            ]),
														
 
															-                            //柱状图圆角
														
 
															-                            borderRadius: [15, 15, 0, 0],
														
 
															-                        },
														
 
															-                    },
														
 
															-                    {
														
 
															-                        name: '数据1',
														
 
															-                        type: 'line',
														
 
															-                        symbolSize: 6,
														
 
															-                        symbol: 'circle',
														
 
															-                        smooth: true,
														
 
															-                        data: chartData.yData1,
														
 
															-                        yAxisIndex: 0,
														
 
															-                        lineStyle: { color: '#fe9a8b' },
														
 
															-                        itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' },
														
 
															-                        areaStyle: {
														
 
															-                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
														
 
															-                                { offset: 0, color: '#fe9a8bb3' },
														
 
															-                                { offset: 1, color: '#fe9a8b03' },
														
 
															-                            ]),
														
 
															-                        },
														
 
															-                    },
														
 
															-                    {
														
 
															-                        name: '数据2',
														
 
															-                        type: 'line',
														
 
															-                        symbolSize: 6,
														
 
															-                        symbol: 'circle',
														
 
															-                        smooth: true,
														
 
															-                        data: chartData.yData2,
														
 
															-                        yAxisIndex: 1,
														
 
															-                        lineStyle: { color: '#9E87FF' },
														
 
															-                        itemStyle: { color: '#9E87FF', borderColor: '#9E87FF' },
														
 
															-                        areaStyle: {
														
 
															-                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
														
 
															-                                { offset: 0, color: '#9E87FFb3' },
														
 
															-                                { offset: 1, color: '#9E87FF03' },
														
 
															-                            ]),
														
 
															-                        },
														
 
															-                        emphasis: {
														
 
															-                            itemStyle: {
														
 
															-                                color: {
														
 
															-                                    type: 'radial',
														
 
															-                                    x: 0.5,
														
 
															-                                    y: 0.5,
														
 
															-                                    r: 0.5,
														
 
															-                                    colorStops: [
														
 
															-                                        { offset: 0, color: '#9E87FF' },
														
 
															-                                        { offset: 0.4, color: '#9E87FF' },
														
 
															-                                        { offset: 0.5, color: '#fff' },
														
 
															-                                        { offset: 0.7, color: '#fff' },
														
 
															-                                        { offset: 0.8, color: '#fff' },
														
 
															-                                        { offset: 1, color: '#fff' },
														
 
															-                                    ],
														
 
															-                                },
														
 
															-                                borderColor: '#9E87FF',
														
 
															-                                borderWidth: 2,
														
 
															-                            },
														
 
															-                        },
														
 
															-                    },
														
 
															-                ],
														
 
															-            }
														
 
															-            lineChart.setOption(option)
														
 
															-        }
														
 
															+                },
														
 
															+            },
														
 
															+        ],
														
 
															+    }
														
 
															+    lineChart.setOption(option)
														
 
															+}
														
 
															-        // 自适应调整窗口
														
 
															-        function resizeChart() {
														
 
															-            if (lineChart) {
														
 
															-                lineChart.resize()
														
 
															-            }
														
 
															-        }
														
 
															+// 自适应调整窗口
														
 
															+function resizeChart() {
														
 
															+    if (lineChart) {
														
 
															+        lineChart.resize()
														
 
															+    }
														
 
															+}
														
 
															-        return {}
														
 
															-    },
														
 
															+function addResize() {
														
 
															+    window.addEventListener('resize', resizeChart)
														
 
															+}
														
 
															+function removeResize() {
														
 
															+    window.removeEventListener('resize', resizeChart)
														
 
															 }
														
 
															+defineExpose({resizeChart, updateChart})
														
 
															 </script>
														
--- a/src/components/echartsComponents/PieBarChart.vue
+++ b/src/components/echartsComponents/PieBarChart.vue
@@ -0,0 +1,214 @@
 
															+<template>
														
 
															+    <div>
														
 
															+        <el-row :gutter="5">
														
 
															+            <el-col :span="8">
														
 
															+                <div>
														
 
															+                    <!--<span>{{ modelValue }}</span>-->
														
 
															+                    <TextSelector :modelValue="modelValue" :options="options" style="margin-top: 5px"/>
														
 
															+                </div>
														
 
															+
														
 
															+                <div ref="pie" style="height: 400px;"></div>
														
 
															+            </el-col>
														
 
															+            <el-col :span="16">
														
 
															+                <div style="margin-left: 40%">
														
 
															+                    <span style="background: rgb(176,234,232); width: 18px; height: 10px; margin-top: 8px; display: inline-block; border-radius: 3px;"></span>
														
 
															+                    <TextSelector :modelValue="modelValue" :options="options" style="margin-top: 5px; margin-left: 8px;"/>
														
 
															+                    <span style="background: rgb(234,207,135); width: 18px; height: 10px; margin-top: 8px; margin-left: 20px; display: inline-block; border-radius: 3px;"></span>
														
 
															+                    <TextSelector :modelValue="modelValue" :options="options" style="margin-top: 5px; margin-left: 8px;"/>
														
 
															+                </div>
														
 
															+                <div ref="bar" style="height: 400px;"></div>
														
 
															+            </el-col>
														
 
															+        </el-row>
														
 
															+    </div>
														
 
															+</template>
														
 
															+
														
 
															+<script setup>
														
 
															+import { onMounted, ref } from "vue"
														
 
															+import * as echarts from "echarts"
														
 
															+import TextSelector from '/@/components/TextSelector/index.vue'
														
 
															+
														
 
															+let props = defineProps({
														
 
															+    pieBarChartData: {
														
 
															+        type: Object,
														
 
															+    }
														
 
															+})
														
 
															+
														
 
															+let pieChart = ref()
														
 
															+let barChart = ref()
														
 
															+const pie = ref()
														
 
															+const bar = ref()
														
 
															+
														
 
															+onMounted(() => {
														
 
															+    barChart = echarts.init(bar.value)
														
 
															+    pieChart = echarts.init(pie.value)
														
 
															+    setChartData()
														
 
															+    window.addEventListener('resize', resizeChart)  // 监听窗口大小变化，调整图表大小
														
 
															+    setTimeout(() => {
														
 
															+        resizeChart()
														
 
															+    }, 0)
														
 
															+})
														
 
															+
														
 
															+function setChartData() {
														
 
															+    // 柱状图配置
														
 
															+    const option = {
														
 
															+        tooltip: {
														
 
															+            trigger: 'axis',
														
 
															+            axisPointer: {
														
 
															+                type: 'cross',
														
 
															+                label: {
														
 
															+                    backgroundColor: '#6a7985'
														
 
															+                }
														
 
															+            }
														
 
															+        },
														
 
															+        // legend: {data: ['数据1', '数据2'],},
														
 
															+        toolbox: {
														
 
															+            feature: {
														
 
															+                saveAsImage: { yAxisIndex: 'none' }
														
 
															+            }
														
 
															+        },
														
 
															+        grid: {
														
 
															+            top: 70, right: 60, bottom: 30, left: 55,
														
 
															+
														
 
															+        },
														
 
															+        xAxis: [
														
 
															+            {
														
 
															+                type: 'category',
														
 
															+                boundaryGap: true,
														
 
															+                data: ['商品', '品类', '关键词-精准', '关键词-广泛', '关键词-词组'],
														
 
															+            }
														
 
															+        ],
														
 
															+        yAxis: [
														
 
															+            {
														
 
															+                type: 'value',
														
 
															+                name: '数据1',
														
 
															+                axisLabel: {
														
 
															+                    formatter: '{value} 单位1'
														
 
															+                },
														
 
															+                axisLine: {
														
 
															+                    show: true
														
 
															+                }
														
 
															+            },
														
 
															+            {
														
 
															+                type: 'value',
														
 
															+                name: '数据2',
														
 
															+                splitLine: {
														
 
															+                    show: false
														
 
															+                },
														
 
															+                axisLabel: {
														
 
															+                    formatter: '{value} 单位2'
														
 
															+                },
														
 
															+                axisLine: {
														
 
															+                    show: true
														
 
															+                }
														
 
															+            }
														
 
															+        ],
														
 
															+        series: [
														
 
															+            {
														
 
															+                name: '数据1',
														
 
															+                type: 'bar',
														
 
															+                // tooltip: {
														
 
															+                //   valueFormatter: function (value) {
														
 
															+                //     return value + ' ml';
														
 
															+                //   }
														
 
															+                // },
														
 
															+                barWidth: '30%',
														
 
															+                data: props.pieBarChartData.barData[0],
														
 
															+                yAxisIndex: 0,
														
 
															+                itemStyle: {
														
 
															+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
														
 
															+                        { offset: 0, color: 'rgba(111, 209, 206, 0.8)' },
														
 
															+                        { offset: 1, color: 'rgba(111, 209, 206, 0.1)' },
														
 
															+                    ]),
														
 
															+                    // 柱状图圆角
														
 
															+                    borderRadius: [15, 15, 0, 0],
														
 
															+                },
														
 
															+            },
														
 
															+            {
														
 
															+                name: '数据2',
														
 
															+                type: 'bar',
														
 
															+                barWidth: '30%',
														
 
															+                data: props.pieBarChartData.barData[1],
														
 
															+                yAxisIndex: 1,
														
 
															+                itemStyle: {
														
 
															+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
														
 
															+                        { offset: 0, color: '#ebb14d' },
														
 
															+                        { offset: 1, color: 'rgba(111, 209, 206, 0.1)' },
														
 
															+                    ]),
														
 
															+                    // 柱状图圆角
														
 
															+                    borderRadius: [15, 15, 0, 0],
														
 
															+                },
														
 
															+            },
														
 
															+        ],
														
 
															+    }
														
 
															+    barChart.setOption(option)
														
 
															+    // 饼图配置
														
 
															+    const option2 = {
														
 
															+        tooltip: {
														
 
															+            trigger: 'item',
														
 
															+        },
														
 
															+        series: [
														
 
															+            {
														
 
															+                name: 'Access From',
														
 
															+                type: 'pie',
														
 
															+                radius: ['25%', '50%'],
														
 
															+                avoidLabelOverlap: false,
														
 
															+                itemStyle: {
														
 
															+                    borderWidth: 1, // 设置边框的宽度
														
 
															+                    borderColor: '#fff', // 将边框颜色设置为白色或图表背景颜色
														
 
															+                },
														
 
															+                emphasis: {
														
 
															+                    label: {
														
 
															+                        show: true,
														
 
															+                        // fontSize: 40,
														
 
															+                        fontWeight: 'bold'
														
 
															+                    }
														
 
															+                },
														
 
															+                label: {
														
 
															+                    normal: {
														
 
															+                        show: true,
														
 
															+                        position: 'outside',
														
 
															+                        // formatter: '{b}: {c} ({d}%)' // b为数据名，c为数据值，d为百分比
														
 
															+                    }
														
 
															+                },
														
 
															+                labelLine: {
														
 
															+                    normal: {
														
 
															+                        show: true
														
 
															+                    }
														
 
															+                },
														
 
															+                data: props.pieBarChartData.pieData
														
 
															+            }
														
 
															+        ]
														
 
															+    }
														
 
															+    pieChart.setOption(option2)
														
 
															+    resizeChart()
														
 
															+}
														
 
															+
														
 
															+function resizeChart() {
														
 
															+    barChart.resize()
														
 
															+    pieChart.resize()
														
 
															+}
														
 
															+
														
 
															+defineExpose({ resizeChart })
														
 
															+
														
 
															+// 下拉框相关
														
 
															+const options = [
														
 
															+    {
														
 
															+        value: '花费',
														
 
															+        label: '花费',
														
 
															+    },
														
 
															+    {
														
 
															+        value: 'Option2',
														
 
															+        label: 'Option2',
														
 
															+    },
														
 
															+    {
														
 
															+        value: 'Option3',
														
 
															+        label: 'Option3',
														
 
															+    }
														
 
															+]
														
 
															+const modelValue = ref(options[0].value)
														
 
															+
														
 
															+</script>
														
 
															+
														
 
															+<style scoped>
														
 
															+
														
 
															+</style>
														
--- a/src/components/echartsComponents/ScatterChart.vue
+++ b/src/components/echartsComponents/ScatterChart.vue
@@ -0,0 +1,56 @@
 
															+<template>
														
 
															+    <div>
														
 
															+        <div id="scatter" style="height: 400px;"></div>
														
 
															+    </div>
														
 
															+</template>
														
 
															+
														
 
															+<script setup>
														
 
															+import { onBeforeUnmount, onMounted, ref } from "vue"
														
 
															+import * as echarts from "echarts"
														
 
															+
														
 
															+let scatterChart = ref()
														
 
															+onMounted(() => {
														
 
															+    scatterChart = echarts.init(document.getElementById('scatter'))
														
 
															+    setChartData()
														
 
															+    window.addEventListener('resize', resizeChart)  // 监听窗口大小变化，调整图表大小
														
 
															+    setTimeout(() => {
														
 
															+        resizeChart()
														
 
															+    },0)
														
 
															+})
														
 
															+onBeforeUnmount(() => {
														
 
															+    window.removeEventListener('resize', resizeChart)   // 在组件销毁前移除事件监听，避免内存泄漏
														
 
															+})
														
 
															+const props = defineProps({
														
 
															+    scatterData: {
														
 
															+        type: Object,
														
 
															+    }
														
 
															+})
														
 
															+
														
 
															+function setChartData() {
														
 
															+    const option = {
														
 
															+        xAxis: {},
														
 
															+        yAxis: {},
														
 
															+        series: [
														
 
															+            {
														
 
															+                symbolSize: 20,
														
 
															+                data: props.scatterData,
														
 
															+                type: 'scatter'
														
 
															+            }
														
 
															+        ]
														
 
															+    }
														
 
															+    scatterChart.setOption(option)
														
 
															+}
														
 
															+
														
 
															+function resizeChart() {
														
 
															+    if (scatterChart) {
														
 
															+        scatterChart.resize()
														
 
															+    }
														
 
															+}
														
 
															+defineExpose({ resizeChart })
														
 
															+
														
 
															+
														
 
															+</script>
														
 
															+
														
 
															+<style scoped>
														
 
															+
														
 
															+</style>
														
--- a/src/components/echartsComponents/dataTendency.vue
+++ b/src/components/echartsComponents/dataTendency.vue
@@ -0,0 +1,268 @@
 
															+<template>
														
 
															+  <div ref="chartRef" :style="{height:height, width:width}"></div>
														
 
															+  <p>{{ props.showMetrics }}</p>
														
 
															+</template>
														
 
															+
														
 
															+<script lang="ts" setup>
														
 
															+import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
														
 
															+import * as echarts from 'echarts'
														
 
															+import XEUtils from 'xe-utils'
														
 
															+
														
 
															+defineOptions({
														
 
															+  name: 'DataTendencyChart'
														
 
															+})
														
 
															+interface Props {
														
 
															+  dataset: {[key: string]: any}[],
														
 
															+  showMetrics: ShowMetric[],
														
 
															+  width: string,
														
 
															+  height: string
														
 
															+}
														
 
															+
														
 
															+const props = withDefaults(defineProps<Props>(), { width: "100%", height: "500px" })
														
 
															+const chartRef = ref()
														
 
															+let chartObj:any
														
 
															+const resizeChart = () => { chartObj.resize() }
														
 
															+const addResize = () => { window.addEventListener('resize', resizeChart) }
														
 
															+const removeResize = () => { window.removeEventListener('resize', resizeChart) }
														
 
															+const option: {[key: string]: any} = {
														
 
															+  dataset: {
														
 
															+    source: props.dataset
														
 
															+  },
														
 
															+  tooltip: {
														
 
															+    trigger: 'axis',
														
 
															+    axisPointer: {
														
 
															+      type: 'cross',
														
 
															+      label: {
														
 
															+        backgroundColor: '#6a7985'
														
 
															+      }
														
 
															+    }
														
 
															+  },
														
 
															+  legend: {
														
 
															+    selected: {},  // 控制显隐
														
 
															+    show: false
														
 
															+  },
														
 
															+  grid: {
														
 
															+    top: 50, right: 150, bottom: 30, left: 55,
														
 
															+  },
														
 
															+  xAxis: {
														
 
															+    type: 'time'
														
 
															+  },
														
 
															+  yAxis: [
														
 
															+    {
														
 
															+      type: 'value',
														
 
															+      name: '',
														
 
															+      splitLine: {
														
 
															+        show: true // 设置显示分割线
														
 
															+      },
														
 
															+      // axisLabel: {
														
 
															+      //   formatter: '{value}'
														
 
															+      // },
														
 
															+      axisLine: {
														
 
															+        show: true
														
 
															+      },
														
 
															+      show: false
														
 
															+    },
														
 
															+    {
														
 
															+      type: 'value',
														
 
															+      name: '',
														
 
															+      position: 'right',
														
 
															+      splitLine: {
														
 
															+        show: false
														
 
															+      },
														
 
															+      // axisLabel: {
														
 
															+      //   formatter: '{value} 单位2'
														
 
															+      // },
														
 
															+      axisLine: {
														
 
															+        show: true
														
 
															+      },
														
 
															+      show: false
														
 
															+    },
														
 
															+    {
														
 
															+      type: 'value',
														
 
															+      position: 'right',
														
 
															+      offset: 80,
														
 
															+      name: '',
														
 
															+      splitLine: {
														
 
															+        show: false
														
 
															+      },
														
 
															+      // axisLabel: {
														
 
															+      //   formatter: '{value} 单位3'
														
 
															+      // },
														
 
															+      axisLine: {
														
 
															+        show: true
														
 
															+      },
														
 
															+      show: false
														
 
															+    }
														
 
															+  ],
														
 
															+  series: [
														
 
															+    {
														
 
															+      name: '',
														
 
															+      type: 'bar',
														
 
															+      encode: {
														
 
															+        x: 'date',
														
 
															+        y: ''
														
 
															+      },
														
 
															+      // tooltip: {
														
 
															+      //   valueFormatter: function (value) {
														
 
															+      //     return value + ' ml';
														
 
															+      //   }
														
 
															+      // },
														
 
															+      barWidth: '20px',
														
 
															+      yAxisIndex: 0,
														
 
															+      itemStyle: {
														
 
															+        // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
														
 
															+        //     { offset: 0, color: 'rgba(111, 209, 206, 0.8)' },
														
 
															+        //     { offset: 1, color: 'rgba(111, 209, 206, 0.1)' },
														
 
															+        // ]),
														
 
															+        color: '',
														
 
															+        //柱状图圆角
														
 
															+        borderRadius: [15, 15, 0, 0],
														
 
															+      }
														
 
															+    },
														
 
															+    {
														
 
															+      name: '',
														
 
															+      type: 'line',
														
 
															+      encode: {
														
 
															+        x: 'date',
														
 
															+        y: ''
														
 
															+      },
														
 
															+      symbolSize: 6,
														
 
															+      symbol: 'circle',
														
 
															+      smooth: true,
														
 
															+      yAxisIndex: 1,
														
 
															+      // lineStyle: { color: '#fe9a8b' },
														
 
															+      itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' },
														
 
															+      areaStyle: {
														
 
															+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
														
 
															+          { offset: 0, color: '#fe9a8bb3' },
														
 
															+          { offset: 1, color: '#fe9a8b03' },
														
 
															+        ]),
														
 
															+      },
														
 
															+    },
														
 
															+    {
														
 
															+      name: '',
														
 
															+      type: 'line',
														
 
															+      encode: {
														
 
															+        x: 'date',
														
 
															+        y: ''
														
 
															+      },
														
 
															+      symbolSize: 6,
														
 
															+      symbol: 'circle',
														
 
															+      smooth: true,
														
 
															+      yAxisIndex: 2,
														
 
															+      // lineStyle: { color: '#9E87FF' },
														
 
															+      itemStyle: { color: '#9E87FF', borderColor: '#9E87FF' },
														
 
															+      areaStyle: {
														
 
															+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
														
 
															+          { offset: 0, color: '#9E87FFb3' },
														
 
															+          { offset: 1, color: '#9E87FF03' },
														
 
															+        ]),
														
 
															+      },
														
 
															+      emphasis: {
														
 
															+        itemStyle: {
														
 
															+          color: {
														
 
															+            type: 'radial',
														
 
															+            x: 0.5,
														
 
															+            y: 0.5,
														
 
															+            r: 0.5,
														
 
															+            colorStops: [
														
 
															+              { offset: 0, color: '#9E87FF' },
														
 
															+              { offset: 0.4, color: '#9E87FF' },
														
 
															+              { offset: 0.5, color: '#fff' },
														
 
															+              { offset: 0.7, color: '#fff' },
														
 
															+              { offset: 0.8, color: '#fff' },
														
 
															+              { offset: 1, color: '#fff' },
														
 
															+            ],
														
 
															+          },
														
 
															+          borderColor: '#9E87FF',
														
 
															+          borderWidth: 2,
														
 
															+        },
														
 
															+      }
														
 
															+    }
														
 
															+  ]
														
 
															+}
														
 
															+
														
 
															+onMounted(() => {
														
 
															+	initLine()
														
 
															+	addResize()
														
 
															+})
														
 
															+onBeforeUnmount(() => {
														
 
															+	if(chartObj) {
														
 
															+		chartObj.dispose()
														
 
															+    chartObj = null
														
 
															+	}
														
 
															+  removeResize()
														
 
															+})
														
 
															+watch(
														
 
															+  props.showMetrics,
														
 
															+  () => {
														
 
															+    // const option: any = {
														
 
															+    //   legend: {
														
 
															+    //     selected: {},
														
 
															+    //     yAxis: [
														
 
															+    //       {name: '', show: false},
														
 
															+    //       {name: '', show: false},
														
 
															+    //       {name: '', show: false}
														
 
															+    //     ],
														
 
															+    //     series: [
														
 
															+    //       {name: '', encode: {y: ''}, itemStyle: {color: ''}},
														
 
															+    //       {name: '', encode: {y: ''}, itemStyle: {color: ''}},
														
 
															+    //       {name: '', encode: {y: ''}, itemStyle: {color: ''}}
														
 
															+    //     ]
														
 
															+    //   } 
														
 
															+    // }
														
 
															+    const tmp:{[key: string]: boolean} = {}
														
 
															+    for (const info of props.showMetrics) { tmp[info.metric] = true }
														
 
															+    for (const key of XEUtils.keys(option.legend.selected)) {
														
 
															+      if (XEUtils.has(tmp, key)) {
														
 
															+        option.legend.selected[key] = true
														
 
															+      } else {
														
 
															+        option.legend.selected[key] = false
														
 
															+      }
														
 
															+    }
														
 
															+    
														
 
															+    for (const [metricInfo, yInfo, sInfo] of XEUtils.zip(props.showMetrics, option.yAxis, option.series)) {
														
 
															+      if (metricInfo) {
														
 
															+        yInfo.name = metricInfo.label
														
 
															+        yInfo.show = true
														
 
															+
														
 
															+        sInfo.name = metricInfo.label
														
 
															+        sInfo.encode.y = metricInfo.metric
														
 
															+        sInfo.itemStyle.color = metricInfo.color
														
 
															+        
														
 
															+      } else {
														
 
															+        yInfo.show = false
														
 
															+      }
														
 
															+    }
														
 
															+
														
 
															+    console.log(option)
														
 
															+    
														
 
															+    chartObj.setOption(option)
														
 
															+  }
														
 
															+)
														
 
															+
														
 
															+const initLine = () => {
														
 
															+	chartObj = echarts.init(chartRef.value)
														
 
															+	
														
 
															+  const tmp:{[key: string]: boolean} = {}
														
 
															+  for (const info of props.showMetrics) { tmp[info.metric] = true }
														
 
															+  option.legend.selected = tmp
														
 
															+
														
 
															+  props.showMetrics.forEach((info, index) => {
														
 
															+    option.yAxis[index].name = info.label
														
 
															+    option.yAxis[index].show = true
														
 
															+
														
 
															+    option.series[index].name = info.label
														
 
															+    option.series[index].encode.y = info.metric
														
 
															+    option.series[index].itemStyle.color = info.color
														
 
															+  })
														
 
															+  console.log(option)
														
 
															+	chartObj.setOption(option)
														
 
															+}
														
 
															+
														
 
															+defineExpose({resizeChart})
														
 
															+
														
 
															+</script>
														
 
															+
														
 
															+<style scoped>
														
 
															+</style>
														
--- a/src/components/input-float/index.vue
+++ b/src/components/input-float/index.vue
@@ -0,0 +1,69 @@
 
															+<template>
														
 
															+  <el-input v-model="data" @input="onInput" @blur="onBlur" class="asj-input-float" style="width: 100%;">
														
 
															+    <template v-if="prefix.length > 0" #prepend>{{ props.prefix }}</template>
														
 
															+    <template v-if="suffix.length > 0" #append>{{ props.suffix }}</template>
														
 
															+  </el-input>
														
 
															+</template>
														
 
															+
														
 
															+<script lang="ts" setup>
														
 
															+import { ref, watch } from 'vue'
														
 
															+
														
 
															+const props = defineProps({
														
 
															+  modelValue: {
														
 
															+    type: String,
														
 
															+  },
														
 
															+  precision: {
														
 
															+    type: Number,
														
 
															+    default: 2,
														
 
															+  },
														
 
															+  prefix: {
														
 
															+    type: String,
														
 
															+    default: '',
														
 
															+  },
														
 
															+  suffix: {
														
 
															+    type: String,
														
 
															+    default: '',
														
 
															+  }
														
 
															+})
														
 
															+const data = ref(props.modelValue)
														
 
															+const emits = defineEmits(['update:modelValue', 'blur'])
														
 
															+
														
 
															+const onInput = (val: string) => {
														
 
															+  data.value = val
														
 
															+    .replace(/[^\d.]/g, '')
														
 
															+    .replace(/\.{2,}/g, '.')
														
 
															+    .replace('.', '$#$')
														
 
															+    .replace(/\./g, '')
														
 
															+    .replace('$#$', '.')
														
 
															+    .replace(/^\./g, '')
														
 
															+  const index = data.value.indexOf('.')
														
 
															+  if (index > 0) {
														
 
															+    if (data.value.length - index - 1 > props.precision) {
														
 
															+      data.value = val.substring(0, index + props.precision + 1)
														
 
															+    }
														
 
															+  }
														
 
															+  emits('update:modelValue', data.value)
														
 
															+}
														
 
															+
														
 
															+const onBlur = () => {
														
 
															+  if (data.value !== '') {
														
 
															+    data.value = Number(data.value).toFixed(props.precision)
														
 
															+    emits('update:modelValue', data.value)
														
 
															+    emits('blur')
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+watch(
														
 
															+  () => props.modelValue,
														
 
															+  () => (data.value = props.modelValue)
														
 
															+)
														
 
															+</script>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+::v-deep(.el-input-group__append) {
														
 
															+  padding: 0 10px !important;
														
 
															+}
														
 
															+::v-deep(.el-input-group__prepend) {
														
 
															+  padding: 0 10px !important;
														
 
															+}
														
 
															+</style>
														
--- a/src/components/range-float/index.vue
+++ b/src/components/range-float/index.vue
@@ -0,0 +1,30 @@
 
															+<template>
														
 
															+  <div>
														
 
															+    <InputFloat v-model="ranges[0]" :prefix="prefix" :suffix="suffix" style="width: 150px">
														
 
															+    </InputFloat>
														
 
															+    <span> ~ </span>
														
 
															+    <InputFloat v-model="ranges[1]" :prefix="prefix" :suffix="suffix" style="width: 150px">
														
 
															+    </InputFloat>
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<script lang="ts" setup>
														
 
															+import { ref } from 'vue'
														
 
															+import InputFloat from '/@/components/input-float/index.vue'
														
 
															+
														
 
															+interface Props {
														
 
															+  ranges: string[],
														
 
															+  prefix: string,
														
 
															+  suffix: string
														
 
															+}
														
 
															+const props = withDefaults(defineProps<Props>(), {
														
 
															+  prefix: '',
														
 
															+  suffix: ''
														
 
															+})
														
 
															+if (props.ranges.length === 0) {
														
 
															+  props.ranges.push('')
														
 
															+  props.ranges.push('')
														
 
															+}
														
 
															+</script>
														
 
															+
														
 
															+<style scoped></style>
														
--- a/src/components/searchInput/index.vue
+++ b/src/components/searchInput/index.vue
@@ -1,6 +1,6 @@
 
															 <template>
														
 
															     <div>
														
 
															-        <div class="mt-4" style="margin-bottom: 5px">
														
 
															+        <div class="mt-1" style="margin-bottom: 5px">
														
 
															             <el-input
														
 
															                     v-model="input3"
														
 
															                     placeholder="快速查询"
														
--- a/src/components/select-button/index.vue
+++ b/src/components/select-button/index.vue
@@ -0,0 +1,53 @@
 
															+<template>
														
 
															+  <el-popover :placement="placement" trigger="hover">
														
 
															+    <template #reference>
														
 
															+      <el-button :type="btnType" :color="btnColor" :icon="btnIcon" style="color: #fff">{{ btnTitle }}</el-button>
														
 
															+    </template>
														
 
															+    <div class="popver-content">
														
 
															+      <span class="popver-content-item" v-for="info of options" @click="handleClick(info.value)">{{ info.label }}</span>
														
 
															+    </div>
														
 
															+  </el-popover>
														
 
															+</template>
														
 
															+
														
 
															+<script lang="ts" setup>
														
 
															+import { ref } from 'vue'
														
 
															+
														
 
															+interface Props {
														
 
															+  btnTitle: string,
														
 
															+  btnType: string,
														
 
															+  btnColor: string,
														
 
															+  btnIcon: any,
														
 
															+  placement: string,
														
 
															+  // modelValue: string | number,
														
 
															+  options: { label: string; value: string | number }[]
														
 
															+}
														
 
															+const props = withDefaults(defineProps<Props>(), {
														
 
															+  placement: "bottom-start",
														
 
															+  btnType: 'primary',
														
 
															+  btnColor: '#3359b5',
														
 
															+  btnIcon: ''
														
 
															+})
														
 
															+const emits = defineEmits(['click'])
														
 
															+
														
 
															+const handleClick = (value: string | number) => {
														
 
															+  // if (props.modelValue === value) return
														
 
															+  // emits('update:modelValue', value)
														
 
															+  emits('click', value)
														
 
															+}
														
 
															+</script>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+.popver-content {
														
 
															+  display: flex;
														
 
															+  flex-direction: column;
														
 
															+  .popver-content-item {
														
 
															+    padding: 5px 0;
														
 
															+
														
 
															+    &:hover {
														
 
															+      background-color: #f4f7fd;
														
 
															+      color: blue;
														
 
															+      cursor: pointer;
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+</style>
														
--- a/src/components/shopSelector/index.vue
+++ b/src/components/shopSelector/index.vue
@@ -22,31 +22,17 @@ import { useShopInfo } from '/@/stores/shopInfo'
 
															 defineOptions({
														
 
															   name: 'ShopSelector'
														
 
															 })
														
 
															-
														
 
															-const selectedRow: Ref<Profile> = ref({
														
 
															-  id: 0,
														
 
															-  profile_id: "",
														
 
															-	account_name: "",
														
 
															-	time_zone: "",
														
 
															-	advertiser_id: "",
														
 
															-	country_code: "",
														
 
															-	currency_code: "",
														
 
															-	marketplace_str_id: ""
														
 
															-})
														
 
															-const allShops: Ref<Profile[]> = ref([])
														
 
															 const shopInfo = useShopInfo()
														
 
															+const selectedRow: Ref<Profile> = ref(shopInfo.profile)
														
 
															+const allShops: Ref<Profile[]> = ref([])
														
 
															 onBeforeMount(async () => {
														
 
															-  const resp = await GetList({ pageSize: 1000, query: '{-refresh_token}' })
														
 
															+  const resp = await GetList({ limit: 999, query: '{-refresh_token}' })
														
 
															   allShops.value = resp.data
														
 
															-  selectedRow.value = allShops.value[0]
														
 
															-  shopInfo.updateShopInfo(selectedRow.value)
														
 
															 })
														
 
															-
														
 
															 const flagIcon = computed(()=> {
														
 
															   return "fi fi-" + selectedRow.value.country_code.toLowerCase()
														
 
															 })
														
 
															-
														
 
															 const changedVal = () => {
														
 
															   shopInfo.updateShopInfo(selectedRow.value)
														
 
															 }
														
--- a/src/components/shopSelector/types.ts
+++ b/src/components/shopSelector/types.ts
@@ -6,5 +6,6 @@ export interface Profile {
 
															 	advertiser_id: string,
														
 
															 	country_code: string,
														
 
															 	currency_code: string,
														
 
															+	currency_symbol: string,
														
 
															 	marketplace_str_id: string
														
 
															 }
														
--- a/src/components/tags-input/index.vue
+++ b/src/components/tags-input/index.vue
@@ -0,0 +1,78 @@
 
															+<template>
														
 
															+  <div class="tags-input-wrapper">
														
 
															+    <div class="tags-box">
														
 
															+      <el-tag v-for="tag in tags" :key="tag" color="#F5F5F5" :closable="!disabled" @close="handleClose(tag)">
														
 
															+        <span style="color: blue">{{ tag }}</span>
														
 
															+      </el-tag>
														
 
															+      <el-popconfirm title="确定清空吗？" @confirm="handleClear" :hide-after="10" placement="top">
														
 
															+        <template #reference>
														
 
															+          <el-button size="small" :disabled="tags.length === 0">{{ tags.length }}/{{ maxLength }}</el-button>
														
 
															+        </template>
														
 
															+      </el-popconfirm>
														
 
															+    </div>
														
 
															+    <el-input
														
 
															+      type="textarea"
														
 
															+      v-model="text"
														
 
															+      @blur="onBlur"
														
 
															+      :disabled="tags.length >= maxLength"
														
 
															+      :placeholder="placeholder"
														
 
															+      :autosize="{ minRows: 3, maxRows: 10 }"></el-input>
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<script lang="ts" setup>
														
 
															+import { ref, computed } from 'vue'
														
 
															+import XEUtils from 'xe-utils'
														
 
															+
														
 
															+interface Props {
														
 
															+  data: string[]
														
 
															+  placeholder: string
														
 
															+  maxLength: number,
														
 
															+  disabled?: boolean
														
 
															+}
														
 
															+const props = withDefaults(defineProps<Props>(), {
														
 
															+  placeholder: '请输入',
														
 
															+  maxLength: 100,
														
 
															+})
														
 
															+const tags = ref(props.data)
														
 
															+const emits = defineEmits(['update:modelValue'])
														
 
															+const text = ref('')
														
 
															+const tagsMap = computed(() => {
														
 
															+  const map = {}
														
 
															+  for (const tag of tags.value) {
														
 
															+    map[tag] = true
														
 
															+  }
														
 
															+  return map
														
 
															+})
														
 
															+
														
 
															+const onBlur = () => {
														
 
															+  const newTags = XEUtils.uniq(text.value.split(/[\r\n]/))
														
 
															+  for (const tag of newTags) {
														
 
															+    if (tag !== '' && !tagsMap.value[tag] && tags.value.length < props.maxLength) {
														
 
															+      tags.value.push(tag)
														
 
															+    }
														
 
															+  }
														
 
															+  text.value = ''
														
 
															+}
														
 
															+const handleClose = (tag: string) => {
														
 
															+  tags.value.splice(tags.value.indexOf(tag), 1)
														
 
															+}
														
 
															+const handleClear = () => {
														
 
															+  tags.value.splice(0, tags.value.length)
														
 
															+}
														
 
															+</script>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+.tags-box {
														
 
															+  width: 100%;
														
 
															+  display: flex;
														
 
															+  overflow: auto;
														
 
															+  flex-wrap: wrap;
														
 
															+  border: 1px solid #e0e0e0;
														
 
															+  border-radius: 4px;
														
 
															+  gap: 5px;
														
 
															+  background: #fff;
														
 
															+  padding: 3px;
														
 
															+  margin-bottom: 1px;
														
 
															+}
														
 
															+</style>
														
--- a/src/layout/logo/index.vue
+++ b/src/layout/logo/index.vue
@@ -1,10 +1,10 @@
 
															 <template>
														
 
															 	<div class="layout-logo" v-if="setShowLogo" @click="onThemeConfigChange">
														
 
															-		<img :src="logoMini" class="layout-logo-medium-img" />
														
 
															-		<span style="font-size: x-large">{{ themeConfig.globalTitle }}</span>
														
 
															+		<el-image style="width: 100px; height: 100px" src="src/assets/ansjer_image.png" fit="contain" />
														
 
															+		<!-- <span style="font-size: x-large">{{ themeConfig.globalTitle }}</span> -->
														
 
															 	</div>
														
 
															 	<div class="layout-logo-size" v-else @click="onThemeConfigChange">
														
 
															-		<img :src="logoMini" class="layout-logo-size-img" />
														
 
															+		<img src="src/assets/ansjer_image.png" class="layout-logo-size-img" />
														
 
															 	</div>
														
 
															 </template>
														
--- a/src/layout/navBars/breadcrumb/user.vue
+++ b/src/layout/navBars/breadcrumb/user.vue
@@ -2,7 +2,8 @@
 
															 	<div class="layout-navbars-breadcrumb-user pr15" :style="{ flex: layoutUserFlexNum }">
														
 
															 		<DynamicTime></DynamicTime>
														
 
															 		<ShopSelector class="layout-navbars-breadcrumb-user-icon"></ShopSelector>
														
 
															-		<el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange">
														
 
															+		<!-- 字体切换移除 -->
														
 
															+		<!-- <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange">
														
 
															 			<div class="layout-navbars-breadcrumb-user-icon">
														
 
															 				<i class="iconfont icon-ziti" :title="$t('message.user.title0')"></i>
														
 
															 			</div>
														
@@ -13,8 +14,9 @@
 
															 					<el-dropdown-item command="small" :disabled="state.disabledSize === 'small'">{{ $t('message.user.dropdownSmall') }}</el-dropdown-item>
														
 
															 				</el-dropdown-menu>
														
 
															 			</template>
														
 
															-		</el-dropdown>
														
 
															-		<el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onLanguageChange">
														
 
															+		</el-dropdown> -->
														
 
															+		<!-- 语言切换移除 -->
														
 
															+		<!-- <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onLanguageChange">
														
 
															 			<div class="layout-navbars-breadcrumb-user-icon">
														
 
															 				<i
														
 
															 					class="iconfont"
														
@@ -29,12 +31,12 @@
 
															 					<el-dropdown-item command="zh-tw" :disabled="state.disabledI18n === 'zh-tw'">繁體中文</el-dropdown-item>
														
 
															 				</el-dropdown-menu>
														
 
															 			</template>
														
 
															-		</el-dropdown>
														
 
															-		<div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick">
														
 
															+		</el-dropdown> -->
														
 
															+		<!-- <div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick">
														
 
															 			<el-icon :title="$t('message.user.title2')">
														
 
															 				<ele-Search />
														
 
															 			</el-icon>
														
 
															-		</div>
														
 
															+		</div> -->
														
 
															 		<div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">
														
 
															 			<i class="icon-skin iconfont" :title="$t('message.user.title3')"></i>
														
 
															 		</div>
														
--- a/src/main.ts
+++ b/src/main.ts
@@ -37,10 +37,12 @@ import dayjs from 'dayjs'
 
															 import UTC from 'dayjs/plugin/utc'
														
 
															 import Timezon from 'dayjs/plugin/timezone'
														
 
															 import IsSameOrBefore from 'dayjs/plugin/isSameOrBefore'
														
 
															+import 'dayjs/locale/zh-cn'
														
 
															 dayjs.extend(UTC)
														
 
															 dayjs.extend(Timezon)
														
 
															 dayjs.extend(IsSameOrBefore)
														
 
															+dayjs.locale('zh-cn')
														
 
															 let forIconfont = analyzingIconForIconfont(iconfont); //解析class
														
 
															 iconList.addIcon(forIconfont.list); // 添加iconfont dvadmin3的icon
														
--- a/src/router/backEnd.ts
+++ b/src/router/backEnd.ts
@@ -2,6 +2,8 @@ import { RouteRecordRaw } from 'vue-router';
 
															 import { storeToRefs } from 'pinia';
														
 
															 import pinia from '/@/stores/index';
														
 
															 import { useUserInfo } from '/@/stores/userInfo';
														
 
															+import { useShopInfo } from '/@/stores/shopInfo';
														
 
															+import { usePublicData } from '/@/stores/publicData'
														
 
															 import { useRequestOldRoutes } from '/@/stores/requestOldRoutes';
														
 
															 import { Session } from '/@/utils/storage';
														
 
															 import { NextLoading } from '/@/utils/loading';
														
@@ -36,6 +38,8 @@ const dynamicViewsModules: Record<string, Function> = Object.assign({}, { ...lay
 
															  * @method setFilterMenuAndCacheTagsViewRoutes 设置路由到 vuex routesList 中（已处理成多级嵌套路由）及缓存多级嵌套数组处理后的一维数组
														
 
															  */
														
 
															 export async function initBackEndControlRoutes() {
														
 
															+	console.log("--------initBackEndControlRoutes------------")
														
 
															+
														
 
															 	// 界面 loading 动画开始执行
														
 
															 	if (window.nextLoading === undefined) NextLoading.start();
														
 
															 	// 无 token 停止执行下一步
														
@@ -43,6 +47,14 @@ export async function initBackEndControlRoutes() {
 
															 	// 触发初始化用户信息 pinia
														
 
															 	// https://gitee.com/lyt-top/vue-next-admin/issues/I5F1HP
														
 
															 	await useUserInfo().setUserInfos();
														
 
															+	await useShopInfo().initShopInfo();
														
 
															+	const publicData = usePublicData()
														
 
															+	publicData.initData();
														
 
															+	publicData.$subscribe((mutation, state) => {
														
 
															+		// console.log(mutation)
														
 
															+		// console.log(state.dateRange)
														
 
															+		publicData.setDateRange(state.dateRange)
														
 
															+	}, { detached: true })
														
 
															 	// 获取路由菜单数据
														
 
															 	const res = await getBackEndControlRoutes();
														
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,15 +1,15 @@
 
															-import {createRouter, createWebHashHistory} from 'vue-router';
														
 
															-import NProgress from 'nprogress';
														
 
															-import 'nprogress/nprogress.css';
														
 
															-import pinia from '/@/stores/index';
														
 
															-import {storeToRefs} from 'pinia';
														
 
															-import {useKeepALiveNames} from '/@/stores/keepAliveNames';
														
 
															-import {useRoutesList} from '/@/stores/routesList';
														
 
															-import {useThemeConfig} from '/@/stores/themeConfig';
														
 
															-import {Session} from '/@/utils/storage';
														
 
															-import {staticRoutes} from '/@/router/route';
														
 
															-import {initFrontEndControlRoutes} from '/@/router/frontEnd';
														
 
															-import {initBackEndControlRoutes} from '/@/router/backEnd';
														
 
															+import {createRouter, createWebHashHistory} from 'vue-router'
														
 
															+import NProgress from 'nprogress'
														
 
															+import 'nprogress/nprogress.css'
														
 
															+import pinia from '/@/stores/index'
														
 
															+import {storeToRefs} from 'pinia'
														
 
															+import {useKeepALiveNames} from '/@/stores/keepAliveNames'
														
 
															+import {useRoutesList} from '/@/stores/routesList'
														
 
															+import {useThemeConfig} from '/@/stores/themeConfig'
														
 
															+import {Session} from '/@/utils/storage'
														
 
															+import {staticRoutes} from '/@/router/route'
														
 
															+import {initFrontEndControlRoutes} from '/@/router/frontEnd'
														
 
															+import {initBackEndControlRoutes} from '/@/router/backEnd'
														
 
															 /**
														
 
															  * 1、前端控制路由时：isRequestRoutes 为 false，需要写 roles，需要走 setFilterRoute 方法。
														
@@ -21,9 +21,9 @@ import {initBackEndControlRoutes} from '/@/router/backEnd';
 
															  */
														
 
															 // 读取 `/src/stores/themeConfig.ts` 是否开启后端控制路由配置
														
 
															-const storesThemeConfig = useThemeConfig(pinia);
														
 
															-const {themeConfig} = storeToRefs(storesThemeConfig);
														
 
															-const {isRequestRoutes} = themeConfig.value;
														
 
															+const storesThemeConfig = useThemeConfig(pinia)
														
 
															+const {themeConfig} = storeToRefs(storesThemeConfig)
														
 
															+const {isRequestRoutes} = themeConfig.value
														
 
															 /**
														
 
															  * 创建一个可以被 Vue 应用程序使用的路由实例
														
@@ -31,9 +31,9 @@ const {isRequestRoutes} = themeConfig.value;
 
															  * @link 参考：https://next.router.vuejs.org/zh/api/#createrouter
														
 
															  */
														
 
															 export const router = createRouter({
														
 
															-    history: createWebHashHistory(),
														
 
															-    routes: staticRoutes,
														
 
															-});
														
 
															+  history: createWebHashHistory(),
														
 
															+  routes: staticRoutes,
														
 
															+})
														
 
															 /**
														
 
															  * 路由多级嵌套数组处理成一维数组
														
@@ -41,13 +41,13 @@ export const router = createRouter({
 
															  * @returns 返回处理后的一维路由菜单数组
														
 
															  */
														
 
															 export function formatFlatteningRoutes(arr: any) {
														
 
															-    if (arr.length <= 0) return false;
														
 
															-    for (let i = 0; i < arr.length; i++) {
														
 
															-        if (arr[i].children) {
														
 
															-            arr = arr.slice(0, i + 1).concat(arr[i].children, arr.slice(i + 1));
														
 
															-        }
														
 
															+  if (arr.length <= 0) return false
														
 
															+  for (let i = 0; i < arr.length; i++) {
														
 
															+    if (arr[i].children) {
														
 
															+      arr = arr.slice(0, i + 1).concat(arr[i].children, arr.slice(i + 1))
														
 
															     }
														
 
															-    return arr;
														
 
															+  }
														
 
															+  return arr
														
 
															 }
														
 
															 /**
														
@@ -58,81 +58,81 @@ export function formatFlatteningRoutes(arr: any) {
 
															  * @returns 返回将一维数组重新处理成 `定义动态路由（dynamicRoutes）` 的格式
														
 
															  */
														
 
															 export function formatTwoStageRoutes(arr: any) {
														
 
															-    if (arr.length <= 0) return false;
														
 
															-    const newArr: any = [];
														
 
															-    const cacheList: Array<string> = [];
														
 
															-    arr.forEach((v: any) => {
														
 
															-        if (v.path === '/') {
														
 
															-            newArr.push({
														
 
															-                component: v.component,
														
 
															-                name: v.name,
														
 
															-                path: v.path,
														
 
															-                redirect: v.redirect,
														
 
															-                meta: v.meta,
														
 
															-                children: []
														
 
															-            });
														
 
															-        } else {
														
 
															-            // 判断是否是动态路由（xx/:id/:name），用于 tagsView 等中使用
														
 
															-            // 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
														
 
															-            if (v.path.indexOf('/:') > -1) {
														
 
															-                v.meta['isDynamic'] = true;
														
 
															-                v.meta['isDynamicPath'] = v.path;
														
 
															-            }
														
 
															-            newArr[0].children.push({...v});
														
 
															-            // 存 name 值，keep-alive 中 include 使用，实现路由的缓存
														
 
															-            // 路径：/@/layout/routerView/parent.vue
														
 
															-            if (newArr[0].meta.isKeepAlive && v.meta.isKeepAlive && v.component_name != "") {
														
 
															-                cacheList.push(v.name);
														
 
															-                const stores = useKeepALiveNames(pinia);
														
 
															-                stores.setCacheKeepAlive(cacheList);
														
 
															-            }
														
 
															-        }
														
 
															-    });
														
 
															-    return newArr;
														
 
															+  if (arr.length <= 0) return false
														
 
															+  const newArr: any = []
														
 
															+  const cacheList: Array<string> = []
														
 
															+  arr.forEach((v: any) => {
														
 
															+    if (v.path === '/') {
														
 
															+      newArr.push({
														
 
															+        component: v.component,
														
 
															+        name: v.name,
														
 
															+        path: v.path,
														
 
															+        redirect: v.redirect,
														
 
															+        meta: v.meta,
														
 
															+        children: []
														
 
															+      })
														
 
															+    } else {
														
 
															+      // 判断是否是动态路由（xx/:id/:name），用于 tagsView 等中使用
														
 
															+      // 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
														
 
															+      if (v.path.indexOf('/:') > -1) {
														
 
															+        v.meta['isDynamic'] = true
														
 
															+        v.meta['isDynamicPath'] = v.path
														
 
															+      }
														
 
															+      newArr[0].children.push({...v})
														
 
															+      // 存 name 值，keep-alive 中 include 使用，实现路由的缓存
														
 
															+      // 路径：/@/layout/routerView/parent.vue
														
 
															+      if (newArr[0].meta.isKeepAlive && v.meta.isKeepAlive && v.component_name != '') {
														
 
															+        cacheList.push(v.name)
														
 
															+        const stores = useKeepALiveNames(pinia)
														
 
															+        stores.setCacheKeepAlive(cacheList)
														
 
															+      }
														
 
															+    }
														
 
															+  })
														
 
															+  return newArr
														
 
															 }
														
 
															 // 路由加载前
														
 
															 router.beforeEach(async (to, from, next) => {
														
 
															-    NProgress.configure({showSpinner: false});
														
 
															-    if (to.meta.title) NProgress.start();
														
 
															-    const token = Session.get('token');
														
 
															-    if (to.path === '/login' && !token) {
														
 
															-        next();
														
 
															-        NProgress.done();
														
 
															+  NProgress.configure({showSpinner: false})
														
 
															+  if (to.meta.title) NProgress.start()
														
 
															+  const token = Session.get('token')
														
 
															+  if (to.path === '/login' && !token) {
														
 
															+    next()
														
 
															+    NProgress.done()
														
 
															+  } else {
														
 
															+    if (!token) {
														
 
															+      next(`/login?redirect=${to.path}&params=${JSON.stringify(to.query ? to.query : to.params)}`)
														
 
															+      Session.clear()
														
 
															+      NProgress.done()
														
 
															+    } else if (token && to.path === '/login') {
														
 
															+      next('/home')
														
 
															+      NProgress.done()
														
 
															     } else {
														
 
															-        if (!token) {
														
 
															-            next(`/login?redirect=${to.path}&params=${JSON.stringify(to.query ? to.query : to.params)}`);
														
 
															-            Session.clear();
														
 
															-            NProgress.done();
														
 
															-        } else if (token && to.path === '/login') {
														
 
															-            next('/home');
														
 
															-            NProgress.done();
														
 
															+      const storesRoutesList = useRoutesList(pinia)
														
 
															+      const {routesList} = storeToRefs(storesRoutesList)
														
 
															+      if (routesList.value.length === 0) {
														
 
															+        if (isRequestRoutes) {
														
 
															+          // 后端控制路由：路由数据初始化，防止刷新时丢失
														
 
															+          await initBackEndControlRoutes()
														
 
															+          // 动态添加路由：防止非首页刷新时跳转回首页的问题
														
 
															+          // 确保 addRoute() 时动态添加的路由已经被完全加载上去
														
 
															+          next({...to, replace: true})
														
 
															         } else {
														
 
															-            const storesRoutesList = useRoutesList(pinia);
														
 
															-            const {routesList} = storeToRefs(storesRoutesList);
														
 
															-            if (routesList.value.length === 0) {
														
 
															-                if (isRequestRoutes) {
														
 
															-                    // 后端控制路由：路由数据初始化，防止刷新时丢失
														
 
															-                    await initBackEndControlRoutes();
														
 
															-                    // 动态添加路由：防止非首页刷新时跳转回首页的问题
														
 
															-                    // 确保 addRoute() 时动态添加的路由已经被完全加载上去
														
 
															-                    next({...to, replace: true});
														
 
															-                } else {
														
 
															-                    // https://gitee.com/lyt-top/vue-next-admin/issues/I5F1HP
														
 
															-                    await initFrontEndControlRoutes();
														
 
															-                    next({...to, replace: true});
														
 
															-                }
														
 
															-            } else {
														
 
															-                next();
														
 
															-            }
														
 
															+          // https://gitee.com/lyt-top/vue-next-admin/issues/I5F1HP
														
 
															+          await initFrontEndControlRoutes()
														
 
															+          next({...to, replace: true})
														
 
															         }
														
 
															+      } else {
														
 
															+        next()
														
 
															+      }
														
 
															     }
														
 
															-});
														
 
															+  }
														
 
															+})
														
 
															 // 路由加载后
														
 
															 router.afterEach(() => {
														
 
															-    NProgress.done();
														
 
															-});
														
 
															+  NProgress.done()
														
 
															+})
														
 
															 // 导出路由
														
 
															-export default router;
														
 
															+export default router
														
--- a/src/router/route.ts
+++ b/src/router/route.ts
@@ -46,14 +46,14 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
 
															 			icon: 'iconfont icon-gerenzhongxin',
														
 
															 		},
														
 
															 	},
														
 
															-	{
														
 
															-		path: '/createcampaigns',
														
 
															-		name: 'createcampaigns',
														
 
															-		component: () => import('/@/views/adManage/sb/campaigns/CreateCampaigns/index.vue'),
														
 
															-		meta: {
														
 
															-			title: '新建广告活动',
														
 
															-		},
														
 
															-	},
														
 
															+	// {
														
 
															+	// 	path: '/createcampaigns',
														
 
															+	// 	name: 'createcampaigns',
														
 
															+	// 	component: () => import('/@/views/adManage/sb/campaigns/CreateCampaigns/index.vue'),
														
 
															+	// 	meta: {
														
 
															+	// 		title: '新建广告活动',
														
 
															+	// 	},
														
 
															+	// },
														
 
															 ];
														
 
															 /**
														
--- a/src/settings.ts
+++ b/src/settings.ts
@@ -52,6 +52,13 @@ export default {
 
															 							}
														
 
															 						},
														
 
															 					},
														
 
															+					toolbar: {
														
 
															+						buttons: {
														
 
															+							compact: {
														
 
															+								show: false
														
 
															+							}
														
 
															+						}
														
 
															+					},
														
 
															 					/* search: {
														
 
															 						layout: 'multi-line',
														
 
															 						collapse: true,
														
--- a/src/stores/publicData.ts
+++ b/src/stores/publicData.ts
@@ -0,0 +1,26 @@
 
															+import { defineStore } from 'pinia'
														
 
															+import { ref, Ref } from 'vue'
														
 
															+import { Session } from '/@/utils/storage'
														
 
															+import { recentDaysRange } from '/@/views/adManage/utils/tools'
														
 
															+import { useShopInfo } from './shopInfo'
														
 
															+
														
 
															+export const usePublicData = defineStore('publicData', () => {
														
 
															+  const dateRange: Ref<string[]> = ref([])
														
 
															+
														
 
															+  function setDateRange(val: string[]) {
														
 
															+    dateRange.value = val
														
 
															+    Session.set('dateRange', val)
														
 
															+  }
														
 
															+
														
 
															+  function initData() {
														
 
															+    const dateRangeVal = Session.get('dateRange')
														
 
															+    if (dateRangeVal) {
														
 
															+      dateRange.value = dateRangeVal
														
 
															+    } else {
														
 
															+      setDateRange(recentDaysRange(useShopInfo().profile.time_zone, 7))
														
 
															+    }
														
 
															+  }
														
 
															+
														
 
															+  return { dateRange, initData, setDateRange }
														
 
															+})
														
 
															+
														
--- a/src/stores/shopInfo.ts
+++ b/src/stores/shopInfo.ts
@@ -14,6 +14,7 @@ export const useShopInfo = defineStore('shopInfo', () => {
 
															     advertiser_id: "",
														
 
															     country_code: "",
														
 
															     currency_code: "",
														
 
															+    currency_symbol: "",
														
 
															     marketplace_str_id: ""
														
 
															   })
														
@@ -25,25 +26,28 @@ export const useShopInfo = defineStore('shopInfo', () => {
 
															     profile.value.advertiser_id = obj.advertiser_id
														
 
															     profile.value.country_code = obj.country_code
														
 
															     profile.value.currency_code = obj.currency_code
														
 
															+    profile.value.currency_symbol = obj.currency_symbol
														
 
															     profile.value.marketplace_str_id = obj.marketplace_str_id
														
 
															     Session.set('shopInfo', profile.value);
														
 
															   }
														
 
															-  async function reqShopInfo(id: number) {
														
 
															+  async function reqShopInfo() {
														
 
															     return request({
														
 
															-      url: '/api/adManage/profiles/' + id + '/',
														
 
															-      method: 'GET'
														
 
															+      url: '/api/ad_manage/profiles/',
														
 
															+      method: 'GET',
														
 
															+      params: { limit: 1 }
														
 
															     })
														
 
															   }
														
 
															-  async function setShopInfo(id: number) {
														
 
															-    if (Session.get('shopInfo')) {
														
 
															-      profile.value = Session.get('shopInfo');
														
 
															+  async function initShopInfo() {
														
 
															+    const data = Session.get('shopInfo')
														
 
															+    if (data?.profile_id) {
														
 
															+      profile.value = data
														
 
															     } else {
														
 
															-      let resp: any = await reqShopInfo(id);
														
 
															-      updateShopInfo(resp.data)
														
 
															+      const resp: any = await reqShopInfo();
														
 
															+      updateShopInfo(resp.data[0])
														
 
															     }
														
 
															   }
														
 
															-  return { profile, updateShopInfo }
														
 
															+  return { profile, updateShopInfo, initShopInfo }
														
 
															 })
														
--- a/src/stores/themeConfig.ts
+++ b/src/stores/themeConfig.ts
@@ -64,7 +64,7 @@ export const useThemeConfig = defineStore('themeConfig', {
 
															 			// 是否开启菜单手风琴效果
														
 
															 			isUniqueOpened: true,
														
 
															 			// 是否开启固定 Header
														
 
															-			isFixedHeader: false,
														
 
															+			isFixedHeader: true,
														
 
															 			// 初始化变量，用于更新菜单 el-scrollbar 的高度，请勿删除
														
 
															 			isFixedHeaderChange: false,
														
 
															 			// 是否开启经典布局分割菜单（仅经典布局生效）
														
@@ -111,7 +111,7 @@ export const useThemeConfig = defineStore('themeConfig', {
 
															 			 */
														
 
															 			// Tagsview 风格：可选值"<tags-style-one|tags-style-four|tags-style-five>"，默认 tags-style-five
														
 
															 			// 定义的值与 `/src/layout/navBars/tagsView/tagsView.vue` 中的 class 同名
														
 
															-			tagsStyle: 'tags-style-five',
														
 
															+			tagsStyle: 'tags-style-one',
														
 
															 			// 主页面切换动画：可选值"<slide-right|slide-left|opacitys>"，默认 slide-right
														
 
															 			animation: 'slide-right',
														
 
															 			// 分栏高亮风格：可选值"<columns-round|columns-card>"，默认 columns-round
														
@@ -137,11 +137,11 @@ export const useThemeConfig = defineStore('themeConfig', {
 
															 			 * 全局网站标题 / 副标题
														
 
															 			 */
														
 
															 			// 网站主标题（菜单导航、浏览器当前网页标题）
														
 
															-			globalTitle: 'DVAdmin',
														
 
															+			globalTitle: 'Ansjer',
														
 
															 			// 网站副标题（登录页顶部文字）
														
 
															-			globalViceTitle: 'DVAdmin',
														
 
															+			globalViceTitle: 'Ansjer',
														
 
															 			// 网站副标题（登录页顶部文字）
														
 
															-			globalViceTitleMsg: '企业级快速开发平台',
														
 
															+			globalViceTitleMsg: '广告管理系统',
														
 
															 			// 默认初始语言，可选值"<zh-cn|en|zh-tw>"，默认 zh-cn
														
 
															 			globalI18n: 'zh-cn',
														
 
															 			// 默认全局组件大小，可选值"<large|'default'|small>"，默认 'large'
														
--- a/src/theme/app.scss
+++ b/src/theme/app.scss
@@ -1,356 +1,634 @@
 
															 /* 初始化样式
														
 
															 ------------------------------- */
														
 
															 * {
														
 
															-	margin: 0;
														
 
															-	padding: 0;
														
 
															-	box-sizing: border-box;
														
 
															-	outline: none !important;
														
 
															+  margin: 0;
														
 
															+  padding: 0;
														
 
															+  box-sizing: border-box;
														
 
															+  outline: none !important;
														
 
															 }
														
 
															 :root {
														
 
															-	--next-color-white: #ffffff;
														
 
															-	--next-bg-main-color: #f8f8f8;
														
 
															-	--next-bg-color: #f5f5ff;
														
 
															-	--next-border-color-light: #f1f2f3;
														
 
															-	--next-color-primary-lighter: #ecf5ff;
														
 
															-	--next-color-success-lighter: #f0f9eb;
														
 
															-	--next-color-warning-lighter: #fdf6ec;
														
 
															-	--next-color-danger-lighter: #fef0f0;
														
 
															-	--next-color-dark-hover: #0000001a;
														
 
															-	--next-color-menu-hover: rgba(0, 0, 0, 0.2);
														
 
															-	--next-color-user-hover: rgba(0, 0, 0, 0.04);
														
 
															-	--next-color-seting-main: #e9eef3;
														
 
															-	--next-color-seting-aside: #d3dce6;
														
 
															-	--next-color-seting-header: #b3c0d1;
														
 
															+  --next-color-white: #ffffff;
														
 
															+  --next-bg-main-color: #f8f8f8;
														
 
															+  --next-bg-color: #f5f5ff;
														
 
															+  --next-border-color-light: #f1f2f3;
														
 
															+  --next-color-primary-lighter: #ecf5ff;
														
 
															+  --next-color-success-lighter: #f0f9eb;
														
 
															+  --next-color-warning-lighter: #fdf6ec;
														
 
															+  --next-color-danger-lighter: #fef0f0;
														
 
															+  --next-color-dark-hover: #0000001a;
														
 
															+  --next-color-menu-hover: rgba(0, 0, 0, 0.2);
														
 
															+  --next-color-user-hover: rgba(0, 0, 0, 0.04);
														
 
															+  --next-color-seting-main: #e9eef3;
														
 
															+  --next-color-seting-aside: #d3dce6;
														
 
															+  --next-color-seting-header: #b3c0d1;
														
 
															 }
														
 
															 html,
														
 
															 body,
														
 
															 #app {
														
 
															-	margin: 0;
														
 
															-	padding: 0;
														
 
															-	width: 100%;
														
 
															-	height: 100%;
														
 
															-	font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
														
 
															-	font-weight: 400;
														
 
															-	-webkit-font-smoothing: antialiased;
														
 
															-	-webkit-tap-highlight-color: transparent;
														
 
															-	background-color: var(--next-bg-main-color);
														
 
															-	font-size: 14px;
														
 
															-	overflow: hidden;
														
 
															-	position: relative;
														
 
															+  margin: 0;
														
 
															+  padding: 0;
														
 
															+  width: 100%;
														
 
															+  height: 100%;
														
 
															+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
														
 
															+  font-weight: 400;
														
 
															+  -webkit-font-smoothing: antialiased;
														
 
															+  -webkit-tap-highlight-color: transparent;
														
 
															+  background-color: var(--next-bg-main-color);
														
 
															+  font-size: 14px;
														
 
															+  overflow: hidden;
														
 
															+  position: relative;
														
 
															 }
														
 
															 /* 主布局样式
														
 
															 ------------------------------- */
														
 
															 .layout-container {
														
 
															-	width: 100%;
														
 
															-	height: 100%;
														
 
															-	.layout-pd {
														
 
															-		padding: 15px !important;
														
 
															-	}
														
 
															-	.layout-flex {
														
 
															-		display: flex;
														
 
															-		flex-direction: column;
														
 
															-		flex: 1;
														
 
															-	}
														
 
															-	.layout-aside {
														
 
															-		background: var(--next-bg-menuBar);
														
 
															-		box-shadow: 2px 0 6px rgb(0 21 41 / 1%);
														
 
															-		height: inherit;
														
 
															-		position: relative;
														
 
															-		z-index: 1;
														
 
															-		display: flex;
														
 
															-		flex-direction: column;
														
 
															-		overflow-x: hidden !important;
														
 
															-		.el-scrollbar__view {
														
 
															-			overflow: hidden;
														
 
															-		}
														
 
															-	}
														
 
															-	.layout-header {
														
 
															-		padding: 0 !important;
														
 
															-		height: auto !important;
														
 
															-	}
														
 
															-	.layout-main {
														
 
															-		padding: 0 !important;
														
 
															-		overflow: hidden;
														
 
															-		width: 100%;
														
 
															-		background-color: var(--next-bg-main-color);
														
 
															-		display: flex;
														
 
															-		flex-direction: column;
														
 
															-		// 内层 el-scrollbar样式，用于界面高度自适应（main.vue）
														
 
															-		.layout-main-scroll {
														
 
															-			@extend .layout-flex;
														
 
															-			.layout-parent {
														
 
															-				@extend .layout-flex;
														
 
															-				position: relative;
														
 
															-			}
														
 
															-		}
														
 
															-	}
														
 
															-	// 用于界面高度自适应
														
 
															-	.layout-padding {
														
 
															-		@extend .layout-pd;
														
 
															-		position: absolute;
														
 
															-		left: 0;
														
 
															-		top: 0;
														
 
															-		height: 100%;
														
 
															-		overflow: hidden;
														
 
															-		@extend .layout-flex;
														
 
															-		&-auto {
														
 
															-			height: inherit;
														
 
															-			@extend .layout-flex;
														
 
															-		}
														
 
															-		&-view {
														
 
															-			background: var(--el-color-white);
														
 
															-			width: 100%;
														
 
															-			height: 100%;
														
 
															-			border-radius: 4px;
														
 
															-			border: 1px solid var(--el-border-color-light, #ebeef5);
														
 
															-			overflow: hidden;
														
 
															-		}
														
 
															-	}
														
 
															-	// 用于界面高度自适应，主视图区 main 的内边距，用于 iframe
														
 
															-	.layout-padding-unset {
														
 
															-		padding: 0 !important;
														
 
															-		&-view {
														
 
															-			border-radius: 0 !important;
														
 
															-			border: none !important;
														
 
															-		}
														
 
															-	}
														
 
															-	// 用于设置 iframe loading 时的高度（loading 垂直居中显示）
														
 
															-	.layout-iframe {
														
 
															-		.el-loading-parent--relative {
														
 
															-			height: 100%;
														
 
															-		}
														
 
															-	}
														
 
															-	.el-scrollbar {
														
 
															-		width: 100%;
														
 
															-	}
														
 
															-	.layout-el-aside-br-color {
														
 
															-		border-right: 1px solid var(--el-border-color-light, #ebeef5);
														
 
															-	}
														
 
															-	// pc端左侧导航样式
														
 
															-	.layout-aside-pc-220 {
														
 
															-		width: 220px !important;
														
 
															-		transition: width 0.3s ease;
														
 
															-	}
														
 
															-	.layout-aside-pc-64 {
														
 
															-		width: 64px !important;
														
 
															-		transition: width 0.3s ease;
														
 
															-	}
														
 
															-	.layout-aside-pc-1 {
														
 
															-		width: 1px !important;
														
 
															-		transition: width 0.3s ease;
														
 
															-	}
														
 
															-	// 手机端左侧导航样式
														
 
															-	.layout-aside-mobile {
														
 
															-		position: fixed;
														
 
															-		top: 0;
														
 
															-		left: -220px;
														
 
															-		width: 220px;
														
 
															-		z-index: 9999999;
														
 
															-	}
														
 
															-	.layout-aside-mobile-close {
														
 
															-		left: -220px;
														
 
															-		transition: all 0.3s cubic-bezier(0.39, 0.58, 0.57, 1);
														
 
															-	}
														
 
															-	.layout-aside-mobile-open {
														
 
															-		left: 0;
														
 
															-		transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
														
 
															-	}
														
 
															-	.layout-aside-mobile-mode {
														
 
															-		position: fixed;
														
 
															-		top: 0;
														
 
															-		right: 0;
														
 
															-		bottom: 0;
														
 
															-		left: 0;
														
 
															-		height: 100%;
														
 
															-		background-color: rgba(0, 0, 0, 0.5);
														
 
															-		z-index: 9999998;
														
 
															-		animation: error-img 0.3s;
														
 
															-	}
														
 
															-	.layout-mian-height-50 {
														
 
															-		height: calc(100vh - 50px);
														
 
															-	}
														
 
															-	.layout-columns-warp {
														
 
															-		flex: 1;
														
 
															-		display: flex;
														
 
															-		overflow: hidden;
														
 
															-	}
														
 
															-	.layout-hide {
														
 
															-		display: none;
														
 
															-	}
														
 
															+  width: 100%;
														
 
															+  height: 100%;
														
 
															+
														
 
															+  .layout-pd {
														
 
															+    padding: 15px !important;
														
 
															+  }
														
 
															+
														
 
															+  .layout-flex {
														
 
															+    display: flex;
														
 
															+    flex-direction: column;
														
 
															+    flex: 1;
														
 
															+  }
														
 
															+
														
 
															+  .layout-aside {
														
 
															+    background: var(--next-bg-menuBar);
														
 
															+    box-shadow: 2px 0 6px rgb(0 21 41 / 1%);
														
 
															+    height: inherit;
														
 
															+    position: relative;
														
 
															+    z-index: 1;
														
 
															+    display: flex;
														
 
															+    flex-direction: column;
														
 
															+    overflow-x: hidden !important;
														
 
															+
														
 
															+    .el-scrollbar__view {
														
 
															+      overflow: hidden;
														
 
															+    }
														
 
															+  }
														
 
															+
														
 
															+  .layout-header {
														
 
															+    padding: 0 !important;
														
 
															+    height: auto !important;
														
 
															+  }
														
 
															+
														
 
															+  .layout-main {
														
 
															+    padding: 0 !important;
														
 
															+    overflow: hidden;
														
 
															+    width: 100%;
														
 
															+    background-color: var(--next-bg-main-color);
														
 
															+    display: flex;
														
 
															+    flex-direction: column;
														
 
															+    // 内层 el-scrollbar样式，用于界面高度自适应（main.vue）
														
 
															+    .layout-main-scroll {
														
 
															+      @extend .layout-flex;
														
 
															+
														
 
															+      .layout-parent {
														
 
															+        @extend .layout-flex;
														
 
															+        position: relative;
														
 
															+      }
														
 
															+    }
														
 
															+  }
														
 
															+
														
 
															+  // 用于界面高度自适应
														
 
															+  .layout-padding {
														
 
															+    @extend .layout-pd;
														
 
															+    position: absolute;
														
 
															+    left: 0;
														
 
															+    top: 0;
														
 
															+    height: 100%;
														
 
															+    overflow: hidden;
														
 
															+    @extend .layout-flex;
														
 
															+
														
 
															+    &-auto {
														
 
															+      height: inherit;
														
 
															+      @extend .layout-flex;
														
 
															+    }
														
 
															+
														
 
															+    &-view {
														
 
															+      background: var(--el-color-white);
														
 
															+      width: 100%;
														
 
															+      height: 100%;
														
 
															+      border-radius: 4px;
														
 
															+      border: 1px solid var(--el-border-color-light, #ebeef5);
														
 
															+      overflow: hidden;
														
 
															+    }
														
 
															+  }
														
 
															+
														
 
															+  // 用于界面高度自适应，主视图区 main 的内边距，用于 iframe
														
 
															+  .layout-padding-unset {
														
 
															+    padding: 0 !important;
														
 
															+
														
 
															+    &-view {
														
 
															+      border-radius: 0 !important;
														
 
															+      border: none !important;
														
 
															+    }
														
 
															+  }
														
 
															+
														
 
															+  // 用于设置 iframe loading 时的高度（loading 垂直居中显示）
														
 
															+  .layout-iframe {
														
 
															+    .el-loading-parent--relative {
														
 
															+      height: 100%;
														
 
															+    }
														
 
															+  }
														
 
															+
														
 
															+  .el-scrollbar {
														
 
															+    width: 100%;
														
 
															+  }
														
 
															+
														
 
															+  .layout-el-aside-br-color {
														
 
															+    border-right: 1px solid var(--el-border-color-light, #ebeef5);
														
 
															+  }
														
 
															+
														
 
															+  // pc端左侧导航样式
														
 
															+  .layout-aside-pc-220 {
														
 
															+    width: 220px !important;
														
 
															+    transition: width 0.3s ease;
														
 
															+  }
														
 
															+
														
 
															+  .layout-aside-pc-64 {
														
 
															+    width: 64px !important;
														
 
															+    transition: width 0.3s ease;
														
 
															+  }
														
 
															+
														
 
															+  .layout-aside-pc-1 {
														
 
															+    width: 1px !important;
														
 
															+    transition: width 0.3s ease;
														
 
															+  }
														
 
															+
														
 
															+  // 手机端左侧导航样式
														
 
															+  .layout-aside-mobile {
														
 
															+    position: fixed;
														
 
															+    top: 0;
														
 
															+    left: -220px;
														
 
															+    width: 220px;
														
 
															+    z-index: 9999999;
														
 
															+  }
														
 
															+
														
 
															+  .layout-aside-mobile-close {
														
 
															+    left: -220px;
														
 
															+    transition: all 0.3s cubic-bezier(0.39, 0.58, 0.57, 1);
														
 
															+  }
														
 
															+
														
 
															+  .layout-aside-mobile-open {
														
 
															+    left: 0;
														
 
															+    transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
														
 
															+  }
														
 
															+
														
 
															+  .layout-aside-mobile-mode {
														
 
															+    position: fixed;
														
 
															+    top: 0;
														
 
															+    right: 0;
														
 
															+    bottom: 0;
														
 
															+    left: 0;
														
 
															+    height: 100%;
														
 
															+    background-color: rgba(0, 0, 0, 0.5);
														
 
															+    z-index: 9999998;
														
 
															+    animation: error-img 0.3s;
														
 
															+  }
														
 
															+
														
 
															+  .layout-mian-height-50 {
														
 
															+    height: calc(100vh - 50px);
														
 
															+  }
														
 
															+
														
 
															+  .layout-columns-warp {
														
 
															+    flex: 1;
														
 
															+    display: flex;
														
 
															+    overflow: hidden;
														
 
															+  }
														
 
															+
														
 
															+  .layout-hide {
														
 
															+    display: none;
														
 
															+  }
														
 
															 }
														
 
															 /* element plus 全局样式
														
 
															 ------------------------------- */
														
 
															 .layout-breadcrumb-seting {
														
 
															-	.el-divider {
														
 
															-		background-color: rgb(230, 230, 230);
														
 
															-	}
														
 
															+  .el-divider {
														
 
															+    background-color: rgb(230, 230, 230);
														
 
															+  }
														
 
															 }
														
 
															 /* nprogress 进度条跟随主题颜色
														
 
															 ------------------------------- */
														
 
															 #nprogress {
														
 
															-	.bar {
														
 
															-		background: var(--el-color-primary) !important;
														
 
															-		z-index: 9999999 !important;
														
 
															-	}
														
 
															+  .bar {
														
 
															+    background: var(--el-color-primary) !important;
														
 
															+    z-index: 9999999 !important;
														
 
															+  }
														
 
															 }
														
 
															 /* flex 弹性布局
														
 
															 ------------------------------- */
														
 
															 .flex {
														
 
															-	display: flex;
														
 
															+  display: flex;
														
 
															 }
														
 
															+
														
 
															 .flex-auto {
														
 
															-	flex: 1;
														
 
															-	overflow: hidden;
														
 
															+  flex: 1;
														
 
															+  overflow: hidden;
														
 
															 }
														
 
															+
														
 
															 .flex-center {
														
 
															-	@extend .flex;
														
 
															-	flex-direction: column;
														
 
															-	width: 100%;
														
 
															-	overflow: hidden;
														
 
															+  @extend .flex;
														
 
															+  flex-direction: column;
														
 
															+  width: 100%;
														
 
															+  overflow: hidden;
														
 
															 }
														
 
															+
														
 
															 .flex-margin {
														
 
															-	margin: auto;
														
 
															+  margin: auto;
														
 
															 }
														
 
															+
														
 
															 .flex-warp {
														
 
															-	display: flex;
														
 
															-	flex-wrap: wrap;
														
 
															-	align-content: flex-start;
														
 
															-	margin: 0 -5px;
														
 
															-	.flex-warp-item {
														
 
															-		padding: 5px;
														
 
															-		.flex-warp-item-box {
														
 
															-			width: 100%;
														
 
															-			height: 100%;
														
 
															-		}
														
 
															-	}
														
 
															+  display: flex;
														
 
															+  flex-wrap: wrap;
														
 
															+  align-content: flex-start;
														
 
															+  margin: 0 -5px;
														
 
															+
														
 
															+  .flex-warp-item {
														
 
															+    padding: 5px;
														
 
															+
														
 
															+    .flex-warp-item-box {
														
 
															+      width: 100%;
														
 
															+      height: 100%;
														
 
															+    }
														
 
															+  }
														
 
															 }
														
 
															 /* cursor 鼠标形状
														
 
															 ------------------------------- */
														
 
															 // 默认
														
 
															 .cursor-default {
														
 
															-	cursor: default !important;
														
 
															+  cursor: default !important;
														
 
															 }
														
 
															+
														
 
															 // 帮助
														
 
															 .cursor-help {
														
 
															-	cursor: help !important;
														
 
															+  cursor: help !important;
														
 
															 }
														
 
															+
														
 
															 // 手指
														
 
															 .cursor-pointer {
														
 
															-	cursor: pointer !important;
														
 
															+  cursor: pointer !important;
														
 
															 }
														
 
															+
														
 
															 // 移动
														
 
															 .cursor-move {
														
 
															-	cursor: move !important;
														
 
															+  cursor: move !important;
														
 
															 }
														
 
															 /* 宽高 100%
														
 
															 ------------------------------- */
														
 
															 .w100 {
														
 
															-	width: 100% !important;
														
 
															+  width: 100% !important;
														
 
															 }
														
 
															+
														
 
															 .h100 {
														
 
															-	height: 100% !important;
														
 
															+  height: 100% !important;
														
 
															 }
														
 
															+
														
 
															 .vh100 {
														
 
															-	height: 100vh !important;
														
 
															+  height: 100vh !important;
														
 
															 }
														
 
															+
														
 
															 .max100vh {
														
 
															-	max-height: 100vh !important;
														
 
															+  max-height: 100vh !important;
														
 
															 }
														
 
															+
														
 
															 .min100vh {
														
 
															-	min-height: 100vh !important;
														
 
															+  min-height: 100vh !important;
														
 
															 }
														
 
															 /* 颜色值
														
 
															 ------------------------------- */
														
 
															 .color-primary {
														
 
															-	color: var(--el-color-primary);
														
 
															+  color: var(--el-color-primary);
														
 
															 }
														
 
															+
														
 
															 .color-success {
														
 
															-	color: var(--el-color-success);
														
 
															+  color: var(--el-color-success);
														
 
															 }
														
 
															+
														
 
															 .color-warning {
														
 
															-	color: var(--el-color-warning);
														
 
															+  color: var(--el-color-warning);
														
 
															 }
														
 
															+
														
 
															 .color-danger {
														
 
															-	color: var(--el-color-danger);
														
 
															+  color: var(--el-color-danger);
														
 
															 }
														
 
															+
														
 
															 .color-info {
														
 
															-	color: var(--el-color-info);
														
 
															+  color: var(--el-color-info);
														
 
															 }
														
 
															 /* 字体大小全局样式
														
 
															 ------------------------------- */
														
 
															 @for $i from 10 through 32 {
														
 
															-	.font#{$i} {
														
 
															-		font-size: #{$i}px !important;
														
 
															-	}
														
 
															+  .font#{$i} {
														
 
															+    font-size: #{$i}px !important;
														
 
															+  }
														
 
															 }
														
 
															 /* 外边距、内边距全局样式
														
 
															 ------------------------------- */
														
 
															 @for $i from 1 through 35 {
														
 
															-	.mt#{$i} {
														
 
															-		margin-top: #{$i}px !important;
														
 
															-	}
														
 
															-	.mr#{$i} {
														
 
															-		margin-right: #{$i}px !important;
														
 
															-	}
														
 
															-	.mb#{$i} {
														
 
															-		margin-bottom: #{$i}px !important;
														
 
															-	}
														
 
															-	.ml#{$i} {
														
 
															-		margin-left: #{$i}px !important;
														
 
															-	}
														
 
															-	.pt#{$i} {
														
 
															-		padding-top: #{$i}px !important;
														
 
															-	}
														
 
															-	.pr#{$i} {
														
 
															-		padding-right: #{$i}px !important;
														
 
															-	}
														
 
															-	.pb#{$i} {
														
 
															-		padding-bottom: #{$i}px !important;
														
 
															-	}
														
 
															-	.pl#{$i} {
														
 
															-		padding-left: #{$i}px !important;
														
 
															-	}
														
 
															+  .mt#{$i} {
														
 
															+    margin-top: #{$i}px !important;
														
 
															+  }
														
 
															+  .mr#{$i} {
														
 
															+    margin-right: #{$i}px !important;
														
 
															+  }
														
 
															+  .mb#{$i} {
														
 
															+    margin-bottom: #{$i}px !important;
														
 
															+  }
														
 
															+  .ml#{$i} {
														
 
															+    margin-left: #{$i}px !important;
														
 
															+  }
														
 
															+  .pt#{$i} {
														
 
															+    padding-top: #{$i}px !important;
														
 
															+  }
														
 
															+  .pr#{$i} {
														
 
															+    padding-right: #{$i}px !important;
														
 
															+  }
														
 
															+  .pb#{$i} {
														
 
															+    padding-bottom: #{$i}px !important;
														
 
															+  }
														
 
															+  .pl#{$i} {
														
 
															+    padding-left: #{$i}px !important;
														
 
															+  }
														
 
															 }
														
 
															 // 自定义全局样式
														
 
															 .asj-container {
														
 
															-  padding: 3px 10px 3px 5px;
														
 
															+  padding: 0px 10px 3px 5px;
														
 
															+  background-color: #fafafa;
														
 
															 }
														
 
															 .fs-page-custom {
														
 
															-	position: initial !important;
														
 
															+  position: initial !important;
														
 
															+
														
 
															+  .fs-search-col > * {
														
 
															+    margin-left: 0 !important;
														
 
															+  }
														
 
															 }
														
 
															-.asj-header {
														
 
															+.asj-tabs {
														
 
															+  background-color: #fff;
														
 
															+  position: sticky;
														
 
															+  top: 48px;
														
 
															+  z-index: 9;
														
 
															+  box-shadow: 0px 0px 12px rgba(51, 89, 181, 0.16);
														
 
															+
														
 
															+  padding: 0 12px;
														
 
															+  display: flex;
														
 
															+  height: 40px;
														
 
															+  gap: 24px;
														
 
															+  border-radius: 8px;
														
 
															+  overflow: hidden;
														
 
															+}
														
 
															+
														
 
															+.asj-tab {
														
 
															+  display: flex;
														
 
															+  align-items: center;
														
 
															+  padding: 0 4px;
														
 
															+  height: 40px;
														
 
															+  font-weight: 700;
														
 
															+  line-height: 40px;
														
 
															+  cursor: pointer;
														
 
															+  border-bottom: 2px solid #fff;
														
 
															+}
														
 
															+
														
 
															+.asj-tab.active {
														
 
															+  color: #409eff;
														
 
															+  border-color: #409eff
														
 
															+}
														
 
															+
														
 
															+// 详细页里面的样式
														
 
															+.asj-detail-header {
														
 
															   position: sticky;
														
 
															   background-color: #fff;
														
 
															-  box-shadow: 0px 0px 12px rgba(51,89,181,0.16);
														
 
															+  box-shadow: 0px 0px 12px rgba(51, 89, 181, 0.16);
														
 
															   z-index: 10;
														
 
															-  top: 1px;
														
 
															-  height: 80px;
														
 
															-  margin-bottom: 3px;
														
 
															+  top: 0;
														
 
															+  height: 95px;
														
 
															+  margin-bottom: -1px;
														
 
															   display: flex;
														
 
															   flex-direction: column;
														
 
															 }
														
 
															-.asj-info {
														
 
															+
														
 
															+.asj-detail-info {
														
 
															   margin: 5px;
														
 
															   display: flex;
														
 
															   flex-direction: row;
														
 
															   gap: 30px;
														
 
															+  .label {
														
 
															+    color: #999;
														
 
															+  }
														
 
															+  .value {
														
 
															+    color: #333;
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+.asj-detail-tabs > .el-tabs__header.is-top {
														
 
															+  position: sticky;
														
 
															+  top: 95px;
														
 
															+  z-index: 10;
														
 
															+  border-top: 1px solid #aeafb0;
														
 
															+}
														
 
															+
														
 
															+// 顶层公共搜索样式
														
 
															+.public-search {
														
 
															+  display: flex;
														
 
															+  gap: 8px;
														
 
															+  padding-bottom: 8px;
														
 
															+  position: sticky;
														
 
															+  top: 0;
														
 
															+  padding-top: 8px;
														
 
															+  z-index: 10;
														
 
															+  width: 100%;
														
 
															+  background-color: #f8f8f8;
														
 
															+  box-shadow: 0px 0px 0px rgba(51, 89, 181, 0.16);
														
 
															+
														
 
															+  /*.el-input__wrapper {
														
 
															+    border-radius: 0;
														
 
															+  }*/
														
 
															+}
														
 
															+
														
 
															+.chart-tabs {
														
 
															+  margin: 5px 0 15px 0;
														
 
															+
														
 
															+  .el-tabs__nav {
														
 
															+    padding-left: 0 !important;
														
 
															+  }
														
 
															 }
														
 
															-.asj-tabs > .el-tabs__header.is-top {
														
 
															+
														
 
															+.overview-tabs {
														
 
															+  display: flex;
														
 
															+  gap: 8px;
														
 
															+  padding-bottom: 8px;
														
 
															   position: sticky;
														
 
															-  top: 82px;
														
 
															+  top: 40px;
														
 
															+  padding-top: 8px;
														
 
															   z-index: 10;
														
 
															+  width: 100%;
														
 
															+  background-color: #f8f8f8;
														
 
															+  box-shadow: 0px 0px 0px rgba(51, 89, 181, 0.16);
														
 
															+
														
 
															+  /*.el-input__wrapper {
														
 
															+    border-radius: 0;
														
 
															+  }*/
														
 
															+}
														
 
															+
														
 
															+// 广告总览顶部样式
														
 
															+.overview-top {
														
 
															+  background-color: #fff;
														
 
															+  position: sticky;
														
 
															+  top: 0;
														
 
															+  z-index: 9;
														
 
															+  box-shadow: 0 0 12px rgba(51, 89, 181, 0.16);
														
 
															+  padding: 0 12px;
														
 
															+  display: flex;
														
 
															+  height: 40px;
														
 
															+  gap: 24px;
														
 
															+}
														
 
															+
														
 
															+// 图表卡片样式
														
 
															+.el-tabs.el-tabs--top.el-tabs--border-card.chart-tabs {
														
 
															+  border-radius: 10px;
														
 
															+  overflow: hidden;
														
 
															 }
														
 
															+
														
 
															+// 表格样式
														
 
															+.fs-crud-container .fs-crud-header {
														
 
															+  padding: 0 0 0 0 !important;
														
 
															+}
														
 
															+
														
 
															+.fs-crud-container .fs-crud-header .fs-crud-actionbar {
														
 
															+  display: flex;
														
 
															+  flex: 10000;
														
 
															+   align-items: center;
														
 
															+  min-width: 1px;
														
 
															+  border: 0.5px solid #dddfe6;
														
 
															+  border-top-left-radius: 10px;
														
 
															+  border-bottom: 0;
														
 
															+  border-right: 0;
														
 
															+  margin: 0 0 0 0;
														
 
															+  padding: 10px 0 10px 10px;
														
 
															+  background-color: white;
														
 
															+}
														
 
															+
														
 
															+.fs-page-content .fs-crud-container .fs-crud-header .fs-crud-toolbar {
														
 
															+  display: flex;
														
 
															+  justify-content: flex-end;
														
 
															+  align-items: center;
														
 
															+  margin-right: 0;
														
 
															+  padding: 0 10px 0 0;
														
 
															+  flex: 1;
														
 
															+  border: 0.5px solid #dddfe6;
														
 
															+  border-bottom: 0;
														
 
															+  border-top-right-radius: 10px;
														
 
															+  background-color: white;
														
 
															+}
														
 
															+
														
 
															+.fs-header-middle+div {
														
 
															+  border-left: 0.5px solid #dddfe6;
														
 
															+  border-top-left-radius: 10px;
														
 
															+}
														
 
															+.fs-page-content .fs-crud-container .fs-crud-header .fs-header-middle+div.fs-crud-toolbar{
														
 
															+  padding: 10px 10px 10px 0;
														
 
															+}
														
 
															+.fs-page-content .fs-crud-container .fs-crud-header .fs-crud-actionbar+div {
														
 
															+  border-left: 0;
														
 
															+}
														
 
															+
														
 
															+.fs-container .box .inner .body {
														
 
															+  border-radius: 10px;
														
 
															+  flex: 1;
														
 
															+  padding: 0 10px 10px 10px;
														
 
															+  border: 0.5px solid #dddfe6;
														
 
															+  background-color: white;
														
 
															+  border-bottom-left-radius: 0;
														
 
															+  border-bottom-right-radius: 0;
														
 
															+  border-top-left-radius: 0;
														
 
															+  border-top-right-radius: 0;
														
 
															+  border-top: 0;
														
 
															+  border-bottom-color: #ffffff00;
														
 
															+}
														
 
															+
														
 
															+.fs-container .box .inner .footer {
														
 
															+  flex-shrink: 0;
														
 
															+  background: #fff;
														
 
															+  border: 0.5px solid #dddfe6;
														
 
															+  border-top: 0;
														
 
															+  border-bottom-right-radius: 10px;
														
 
															+  border-bottom-left-radius: 10px;
														
 
															+}
														
 
															+
														
 
															+// 表格单元格样式
														
 
															+.el-table__footer td.el-table__cell {
														
 
															+  border: none !important;
														
 
															+  border-bottom: 0.5px solid rgb(211, 211, 211) !important;
														
 
															+}
														
 
															+
														
 
															+.no-hover-effect {
														
 
															+  background-color: #f0f9eb;
														
 
															+  color: #67c23a;
														
 
															+  border-color: #b3e19d;
														
 
															+  margin-top: -3px;
														
 
															+}
														
 
															+.no-hover-effect:hover,
														
 
															+.no-hover-effect:focus,
														
 
															+.no-hover-effect:active {
														
 
															+  background-color: #f0f9eb !important;
														
 
															+  color: #67c23a !important;
														
 
															+  border-color: #b3e19d !important;
														
 
															+}
														
 
															+
														
 
															+.no-hover-effect-ban {
														
 
															+  background-color: #fef0f0;
														
 
															+  color: #f56c6c;
														
 
															+  border-color: #fab6b6;
														
 
															+  margin-top: -3px;
														
 
															+}
														
 
															+.no-hover-effect-ban:hover,
														
 
															+.no-hover-effect-ban:focus,
														
 
															+.no-hover-effect-ban:active {
														
 
															+  background-color: #fef0f0 !important;
														
 
															+  color: #f56c6c !important;
														
 
															+  border-color: #fab6b6 !important;
														
 
															+}
														
 
															+
														
 
															+.asj-h2 {
														
 
															+  height: 60px;
														
 
															+  line-height: 60px;
														
 
															+  font-size: 18px;
														
 
															+  font-weight: 600;
														
 
															+  color: #333;
														
 
															+  border-bottom: 1px solid #e0e0e0;
														
 
															+}
														
 
															+
														
 
															+.asj-h3 {
														
 
															+  font-size: 15px;
														
 
															+  font-weight: 750;
														
 
															+  color: #333;
														
 
															+  line-height: 22px;
														
 
															+  padding: 12px 0;
														
 
															+  position: relative;
														
 
															+}
														
 
															+
														
 
															+.auto-page-foot {
														
 
															+  background-color: #fff;
														
 
															+  padding: 24px;
														
 
															+  position: sticky;
														
 
															+  bottom: 0;
														
 
															+  z-index: 100;
														
 
															+  display: flex;
														
 
															+  justify-content: center;
														
 
															+}
														
--- a/src/theme/element.scss
+++ b/src/theme/element.scss
@@ -191,9 +191,9 @@
 
															 /* Tabs 标签页
														
 
															 ------------------------------- */
														
 
															-.el-tabs__nav-wrap::after {
														
 
															-	height: 1px !important;
														
 
															-}
														
 
															+// .el-tabs__nav-wrap::after {
														
 
															+// 	height: 1px !important;
														
 
															+// }
														
 
															 /* Dropdown 下拉菜单
														
 
															 ------------------------------- */
														
--- a/src/types/pinia.d.ts
+++ b/src/types/pinia.d.ts
@@ -89,3 +89,8 @@ declare interface ThemeConfigState {
 
															 		globalComponentSize: string;
														
 
															 	};
														
 
															 }
														
 
															+
														
 
															+declare interface publicData {
														
 
															+	dateRange: string[],
														
 
															+	[key:string]: any
														
 
															+}
														
--- a/src/types/views.d.ts
+++ b/src/types/views.d.ts
@@ -2,164 +2,166 @@
 
															  * views personal
														
 
															  */
														
 
															 type NewInfo = {
														
 
															-	title: string;
														
 
															-	date: string;
														
 
															-	link: string;
														
 
															-};
														
 
															+  title: string
														
 
															+  date: string
														
 
															+  link: string
														
 
															+}
														
 
															 type Recommend = {
														
 
															-	title: string;
														
 
															-	msg: string;
														
 
															-	icon: string;
														
 
															-	bg: string;
														
 
															-	iconColor: string;
														
 
															-};
														
 
															+  title: string
														
 
															+  msg: string
														
 
															+  icon: string
														
 
															+  bg: string
														
 
															+  iconColor: string
														
 
															+}
														
 
															 declare type PersonalState = {
														
 
															-	newsInfoList: NewInfo[];
														
 
															-	personalForm: {
														
 
															-		avatar:string,
														
 
															-		username: string;
														
 
															-		name: string;
														
 
															-		email: string;
														
 
															-		mobile: string;
														
 
															-		gender: number | string;
														
 
															-		dept_info: {
														
 
															-			dept_id: number;
														
 
															-			dept_name: string;
														
 
															-		}
														
 
															-		role_info: [{
														
 
															-			id: number;
														
 
															-			name: string;
														
 
															-		}]
														
 
															-	};
														
 
															-};
														
 
															+  newsInfoList: NewInfo[]
														
 
															+  personalForm: {
														
 
															+    avatar: string
														
 
															+    username: string
														
 
															+    name: string
														
 
															+    email: string
														
 
															+    mobile: string
														
 
															+    gender: number | string
														
 
															+    dept_info: {
														
 
															+      dept_id: number
														
 
															+      dept_name: string
														
 
															+    }
														
 
															+    role_info: [
														
 
															+      {
														
 
															+        id: number
														
 
															+        name: string
														
 
															+      }
														
 
															+    ]
														
 
															+  }
														
 
															+}
														
 
															 /**
														
 
															  * views visualizing
														
 
															  */
														
 
															 declare type Demo2State<T = any> = {
														
 
															-	time: {
														
 
															-		txt: string;
														
 
															-		fun: number;
														
 
															-	};
														
 
															-	dropdownList: T[];
														
 
															-	dropdownActive: string;
														
 
															-	skyList: T[];
														
 
															-	dBtnList: T[];
														
 
															-	chartData4Index: number;
														
 
															-	dBtnActive: number;
														
 
															-	earth3DBtnList: T[];
														
 
															-	chartData4List: T[];
														
 
															-	myCharts: T[];
														
 
															-};
														
 
															+  time: {
														
 
															+    txt: string
														
 
															+    fun: number
														
 
															+  }
														
 
															+  dropdownList: T[]
														
 
															+  dropdownActive: string
														
 
															+  skyList: T[]
														
 
															+  dBtnList: T[]
														
 
															+  chartData4Index: number
														
 
															+  dBtnActive: number
														
 
															+  earth3DBtnList: T[]
														
 
															+  chartData4List: T[]
														
 
															+  myCharts: T[]
														
 
															+}
														
 
															 /**
														
 
															  * views params
														
 
															  */
														
 
															 declare type ParamsState = {
														
 
															-	value: string;
														
 
															-	tagsViewName: string;
														
 
															-	tagsViewNameIsI18n: boolean;
														
 
															-};
														
 
															+  value: string
														
 
															+  tagsViewName: string
														
 
															+  tagsViewNameIsI18n: boolean
														
 
															+}
														
 
															 /**
														
 
															  * views system
														
 
															  */
														
 
															 // role
														
 
															 declare interface RowRoleType {
														
 
															-	roleName: string;
														
 
															-	roleSign: string;
														
 
															-	describe: string;
														
 
															-	sort: number;
														
 
															-	status: boolean;
														
 
															-	createTime: string;
														
 
															+  roleName: string
														
 
															+  roleSign: string
														
 
															+  describe: string
														
 
															+  sort: number
														
 
															+  status: boolean
														
 
															+  createTime: string
														
 
															 }
														
 
															 interface SysRoleTableType extends TableType {
														
 
															-	data: RowRoleType[];
														
 
															+  data: RowRoleType[]
														
 
															 }
														
 
															 declare interface SysRoleState {
														
 
															-	tableData: SysRoleTableType;
														
 
															+  tableData: SysRoleTableType
														
 
															 }
														
 
															 declare type TreeType = {
														
 
															-	id: number;
														
 
															-	label: string;
														
 
															-	children?: TreeType[];
														
 
															-};
														
 
															+  id: number
														
 
															+  label: string
														
 
															+  children?: TreeType[]
														
 
															+}
														
 
															 // user
														
 
															 declare type RowUserType<T = any> = {
														
 
															-	username: string;
														
 
															-	userNickname: string;
														
 
															-	roleSign: string;
														
 
															-	department: string[];
														
 
															-	phone: string;
														
 
															-	email: string;
														
 
															-	sex: string;
														
 
															-	password: string;
														
 
															-	overdueTime: T;
														
 
															-	status: boolean;
														
 
															-	describe: string;
														
 
															-	createTime: T;
														
 
															-};
														
 
															+  username: string
														
 
															+  userNickname: string
														
 
															+  roleSign: string
														
 
															+  department: string[]
														
 
															+  phone: string
														
 
															+  email: string
														
 
															+  sex: string
														
 
															+  password: string
														
 
															+  overdueTime: T
														
 
															+  status: boolean
														
 
															+  describe: string
														
 
															+  createTime: T
														
 
															+}
														
 
															 interface SysUserTableType extends TableType {
														
 
															-	data: RowUserType[];
														
 
															+  data: RowUserType[]
														
 
															 }
														
 
															 declare interface SysUserState {
														
 
															-	tableData: SysUserTableType;
														
 
															+  tableData: SysUserTableType
														
 
															 }
														
 
															 declare type DeptTreeType = {
														
 
															-	deptName: string;
														
 
															-	createTime: string;
														
 
															-	status: boolean;
														
 
															-	sort: number;
														
 
															-	describe: string;
														
 
															-	id: number | string;
														
 
															-	children?: DeptTreeType[];
														
 
															-};
														
 
															+  deptName: string
														
 
															+  createTime: string
														
 
															+  status: boolean
														
 
															+  sort: number
														
 
															+  describe: string
														
 
															+  id: number | string
														
 
															+  children?: DeptTreeType[]
														
 
															+}
														
 
															 // dept
														
 
															 declare interface RowDeptType extends DeptTreeType {
														
 
															-	deptLevel: string[];
														
 
															-	person: string;
														
 
															-	phone: string;
														
 
															-	email: string;
														
 
															+  deptLevel: string[]
														
 
															+  person: string
														
 
															+  phone: string
														
 
															+  email: string
														
 
															 }
														
 
															 interface SysDeptTableType extends TableType {
														
 
															-	data: DeptTreeType[];
														
 
															+  data: DeptTreeType[]
														
 
															 }
														
 
															 declare interface SysDeptState {
														
 
															-	tableData: SysDeptTableType;
														
 
															+  tableData: SysDeptTableType
														
 
															 }
														
 
															 // dic
														
 
															 type ListType = {
														
 
															-	id: number;
														
 
															-	label: string;
														
 
															-	value: string;
														
 
															-};
														
 
															+  id: number
														
 
															+  label: string
														
 
															+  value: string
														
 
															+}
														
 
															 declare interface RowDicType {
														
 
															-	dicName: string;
														
 
															-	fieldName: string;
														
 
															-	describe: string;
														
 
															-	status: boolean;
														
 
															-	createTime: string;
														
 
															-	list: ListType[];
														
 
															+  dicName: string
														
 
															+  fieldName: string
														
 
															+  describe: string
														
 
															+  status: boolean
														
 
															+  createTime: string
														
 
															+  list: ListType[]
														
 
															 }
														
 
															 interface SysDicTableType extends TableType {
														
 
															-	data: RowDicType[];
														
 
															+  data: RowDicType[]
														
 
															 }
														
 
															 declare interface SysDicState {
														
 
															-	tableData: SysDicTableType;
														
 
															+  tableData: SysDicTableType
														
 
															 }
														
 
															 /**
														
@@ -167,173 +169,173 @@ declare interface SysDicState {
 
															  */
														
 
															 //  filtering
														
 
															 declare type FilteringChilType = {
														
 
															-	id: number | string;
														
 
															-	label: string;
														
 
															-	active: boolean;
														
 
															-};
														
 
															+  id: number | string
														
 
															+  label: string
														
 
															+  active: boolean
														
 
															+}
														
 
															 declare type FilterListType = {
														
 
															-	img: string;
														
 
															-	title: string;
														
 
															-	evaluate: string;
														
 
															-	collection: string;
														
 
															-	price: string;
														
 
															-	monSales: string;
														
 
															-	id: number | string;
														
 
															-	loading?: boolean;
														
 
															-};
														
 
															+  img: string
														
 
															+  title: string
														
 
															+  evaluate: string
														
 
															+  collection: string
														
 
															+  price: string
														
 
															+  monSales: string
														
 
															+  id: number | string
														
 
															+  loading?: boolean
														
 
															+}
														
 
															 declare type FilteringRowType = {
														
 
															-	title: string;
														
 
															-	isMore: boolean;
														
 
															-	isShowMore: boolean;
														
 
															-	id: number | string;
														
 
															-	children: FilteringChilType[];
														
 
															-};
														
 
															+  title: string
														
 
															+  isMore: boolean
														
 
															+  isShowMore: boolean
														
 
															+  id: number | string
														
 
															+  children: FilteringChilType[]
														
 
															+}
														
 
															 // tableRules
														
 
															 declare type TableRulesHeaderType = {
														
 
															-	prop: string;
														
 
															-	width: string | number;
														
 
															-	label: string;
														
 
															-	isRequired?: boolean;
														
 
															-	isTooltip?: boolean;
														
 
															-	type: string;
														
 
															-};
														
 
															+  prop: string
														
 
															+  width: string | number
														
 
															+  label: string
														
 
															+  isRequired?: boolean
														
 
															+  isTooltip?: boolean
														
 
															+  type: string
														
 
															+}
														
 
															 declare type TableRulesState = {
														
 
															-	tableData: {
														
 
															-		data: EmptyObjectType[];
														
 
															-		header: TableRulesHeaderType[];
														
 
															-		option: SelectOptionType[];
														
 
															-	};
														
 
															-};
														
 
															+  tableData: {
														
 
															+    data: EmptyObjectType[]
														
 
															+    header: TableRulesHeaderType[]
														
 
															+    option: SelectOptionType[]
														
 
															+  }
														
 
															+}
														
 
															 declare type TableRulesOneProps = {
														
 
															-	name: string;
														
 
															-	email: string;
														
 
															-	autograph: string;
														
 
															-	occupation: string;
														
 
															-};
														
 
															+  name: string
														
 
															+  email: string
														
 
															+  autograph: string
														
 
															+  occupation: string
														
 
															+}
														
 
															 // tree
														
 
															 declare type RowTreeType = {
														
 
															-	id: number;
														
 
															-	label: string;
														
 
															-	label1: string;
														
 
															-	label2: string;
														
 
															-	isShow: boolean;
														
 
															-	children?: RowTreeType[];
														
 
															-};
														
 
															+  id: number
														
 
															+  label: string
														
 
															+  label1: string
														
 
															+  label2: string
														
 
															+  isShow: boolean
														
 
															+  children?: RowTreeType[]
														
 
															+}
														
 
															 // workflow index
														
 
															 declare type NodeListState = {
														
 
															-	id: string | number;
														
 
															-	nodeId: string | undefined;
														
 
															-	class: HTMLElement | string;
														
 
															-	left: number | string;
														
 
															-	top: number | string;
														
 
															-	icon: string;
														
 
															-	name: string;
														
 
															-};
														
 
															+  id: string | number
														
 
															+  nodeId: string | undefined
														
 
															+  class: HTMLElement | string
														
 
															+  left: number | string
														
 
															+  top: number | string
														
 
															+  icon: string
														
 
															+  name: string
														
 
															+}
														
 
															 declare type LineListState = {
														
 
															-	sourceId: string;
														
 
															-	targetId: string;
														
 
															-	label: string;
														
 
															-};
														
 
															+  sourceId: string
														
 
															+  targetId: string
														
 
															+  label: string
														
 
															+}
														
 
															 declare type XyState = {
														
 
															-	x: string | number;
														
 
															-	y: string | number;
														
 
															-};
														
 
															+  x: string | number
														
 
															+  y: string | number
														
 
															+}
														
 
															 declare type WorkflowState<T = any> = {
														
 
															-	leftNavList: T[];
														
 
															-	dropdownNode: XyState;
														
 
															-	dropdownLine: XyState;
														
 
															-	isShow: boolean;
														
 
															-	jsPlumb: T;
														
 
															-	jsPlumbNodeIndex: null | number;
														
 
															-	jsplumbDefaults: T;
														
 
															-	jsplumbMakeSource: T;
														
 
															-	jsplumbMakeTarget: T;
														
 
															-	jsplumbConnect: T;
														
 
															-	jsplumbData: {
														
 
															-		nodeList: NodeListState[];
														
 
															-		lineList: LineListState[];
														
 
															-	};
														
 
															-};
														
 
															+  leftNavList: T[]
														
 
															+  dropdownNode: XyState
														
 
															+  dropdownLine: XyState
														
 
															+  isShow: boolean
														
 
															+  jsPlumb: T
														
 
															+  jsPlumbNodeIndex: null | number
														
 
															+  jsplumbDefaults: T
														
 
															+  jsplumbMakeSource: T
														
 
															+  jsplumbMakeTarget: T
														
 
															+  jsplumbConnect: T
														
 
															+  jsplumbData: {
														
 
															+    nodeList: NodeListState[]
														
 
															+    lineList: LineListState[]
														
 
															+  }
														
 
															+}
														
 
															 // workflow drawer
														
 
															 declare type WorkflowDrawerNodeState<T = any> = {
														
 
															-	node: { [key: string]: T };
														
 
															-	nodeRules: T;
														
 
															-	form: T;
														
 
															-	tabsActive: string;
														
 
															-	loading: {
														
 
															-		extend: boolean;
														
 
															-	};
														
 
															-};
														
 
															+  node: { [key: string]: T }
														
 
															+  nodeRules: T
														
 
															+  form: T
														
 
															+  tabsActive: string
														
 
															+  loading: {
														
 
															+    extend: boolean
														
 
															+  }
														
 
															+}
														
 
															 declare type WorkflowDrawerLabelType = {
														
 
															-	type: string;
														
 
															-	label: string;
														
 
															-};
														
 
															+  type: string
														
 
															+  label: string
														
 
															+}
														
 
															 declare type WorkflowDrawerState<T = any> = {
														
 
															-	isOpen: boolean;
														
 
															-	nodeData: {
														
 
															-		type: string;
														
 
															-	};
														
 
															-	jsplumbConn: T;
														
 
															-};
														
 
															+  isOpen: boolean
														
 
															+  nodeData: {
														
 
															+    type: string
														
 
															+  }
														
 
															+  jsplumbConn: T
														
 
															+}
														
 
															 /**
														
 
															  * views make
														
 
															  */
														
 
															 // tableDemo
														
 
															 declare type TableDemoPageType = {
														
 
															-	pageNum: number;
														
 
															-	pageSize: number;
														
 
															-};
														
 
															+  pageNum: number
														
 
															+  pageSize: number
														
 
															+}
														
 
															 declare type TableHeaderType = {
														
 
															-	key: string;
														
 
															-	width: string;
														
 
															-	title: string;
														
 
															-	type: string | number;
														
 
															-	colWidth: string;
														
 
															-	width?: string | number;
														
 
															-	height?: string | number;
														
 
															-	isCheck: boolean;
														
 
															-};
														
 
															+  key: string
														
 
															+  width: string
														
 
															+  title: string
														
 
															+  type: string | number
														
 
															+  colWidth: string
														
 
															+  width?: string | number
														
 
															+  height?: string | number
														
 
															+  isCheck: boolean
														
 
															+}
														
 
															 declare type TableSearchType = {
														
 
															-	label: string;
														
 
															-	prop: string;
														
 
															-	placeholder: string;
														
 
															-	required: boolean;
														
 
															-	type: string;
														
 
															-	options?: SelectOptionType[];
														
 
															-};
														
 
															+  label: string
														
 
															+  prop: string
														
 
															+  placeholder: string
														
 
															+  required: boolean
														
 
															+  type: string
														
 
															+  options?: SelectOptionType[]
														
 
															+}
														
 
															 declare type TableDemoState = {
														
 
															-	tableData: {
														
 
															-		data: EmptyObjectType[];
														
 
															-		header: TableHeaderType[];
														
 
															-		config: {
														
 
															-			total: number;
														
 
															-			loading: boolean;
														
 
															-			isBorder: boolean;
														
 
															-			isSelection: boolean;
														
 
															-			isSerialNo: boolean;
														
 
															-			isOperate: boolean;
														
 
															-		};
														
 
															-		search: TableSearchType[];
														
 
															-		param: EmptyObjectType;
														
 
															-	};
														
 
															-};
														
 
															+  tableData: {
														
 
															+    data: EmptyObjectType[]
														
 
															+    header: TableHeaderType[]
														
 
															+    config: {
														
 
															+      total: number
														
 
															+      loading: boolean
														
 
															+      isBorder: boolean
														
 
															+      isSelection: boolean
														
 
															+      isSerialNo: boolean
														
 
															+      isOperate: boolean
														
 
															+    }
														
 
															+    search: TableSearchType[]
														
 
															+    param: EmptyObjectType
														
 
															+  }
														
 
															+}
														
 
															 declare interface MetricOptions {
														
 
															   label: string
														
@@ -341,34 +343,102 @@ declare interface MetricOptions {
 
															   disabled?: boolean
														
 
															 }
														
 
															+declare interface ShowMetric {
														
 
															+  label: string
														
 
															+  metric: string
														
 
															+  color: string
														
 
															+}
														
 
															+
														
 
															 declare interface MetricData extends MetricOptions {
														
 
															-  metricVal: string,
														
 
															-  preVal?: string,
														
 
															-  gapVal?: string
														
 
															+  metricVal: string
														
 
															+  preVal?: any
														
 
															+  gapVal?: any
														
 
															 }
														
 
															 declare interface Portfolio {
														
 
															-	name: string,
														
 
															-	portfolioId: string
														
 
															+  name: string
														
 
															+  portfolioId: string
														
 
															 }
														
 
															 declare interface SpCampaign {
														
 
															-	id?: number,
														
 
															-	campaignId?: string,
														
 
															-	campaignName?: string,
														
 
															-	budgetType?: string,
														
 
															-	budget?: string,
														
 
															-	startDate?: string,
														
 
															-	endDate?: string,
														
 
															-	targetingType?: string,
														
 
															-	state?: string,
														
 
															-	dynBidStrategy?: string,
														
 
															-	portfolio?: Portfolio
														
 
															+  id?: number
														
 
															+  campaignId?: string
														
 
															+  campaignName?: string
														
 
															+  budgetType?: string
														
 
															+  budget?: string
														
 
															+  startDate?: string
														
 
															+  endDate?: string
														
 
															+  targetingType?: string
														
 
															+  state?: string
														
 
															+  dynBidStrategy?: string
														
 
															+  portfolioName?: string
														
 
															+  servingStatus?: string
														
 
															 }
														
 
															 declare type SpAdGroup = {
														
 
															-	id?: number,
														
 
															-	adGroupName?: string,
														
 
															-	state?: string,
														
 
															-	defaultBid?: string
														
 
															+  id?: number
														
 
															+  adGroupId?: string
														
 
															+  adGroupName?: string
														
 
															+  state?: string
														
 
															+  defaultBid?: string
														
 
															+  startDate?: string
														
 
															+  endDate?: string
														
 
															+  targetingType?: string
														
 
															+}
														
 
															+
														
 
															+declare interface RuleCampaignAd {
														
 
															+  campaignType: string
														
 
															+  campaignId: string
														
 
															+  campaignName?: string
														
 
															+  adGroupId: string
														
 
															+  adGroupName?: string
														
 
															+}
														
 
															+
														
 
															+declare interface SearchTermBid {
														
 
															+  bidType: string
														
 
															+  type: string
														
 
															+  defaultBidding: string
														
 
															+  min: string
														
 
															+  max: string
														
 
															+  matchType: string
														
 
															+  numType: string
														
 
															+  use: boolean
														
 
															+}
														
 
															+
														
 
															+declare interface RuleSearchTermAction {
														
 
															+  keywords: SearchTermBid[]
														
 
															+  target: SearchTermBid
														
 
															+}
														
 
															+
														
 
															+declare interface AutoRule {
														
 
															+  id?: number
														
 
															+  type: number
														
 
															+  campaignType: string
														
 
															+  campaignAd: RuleCampaignAd[]
														
 
															+  action: { [key:string]: any }
														
 
															+  activeModel?: string
														
 
															+  weekdays?: number[]
														
 
															+  conditions: any[]
														
 
															+  setTime?: string
														
 
															+}
														
 
															+
														
 
															+declare interface AutoTemplate {
														
 
															+  id?: number
														
 
															+  name: string
														
 
															+  rule: AutoRule
														
 
															+}
														
 
															+
														
 
															+declare interface AutoCampaignRule {
														
 
															+  campaignId: string
														
 
															+  campaignType: string
														
 
															+  profileId: string
														
 
															+  ruleType: number
														
 
															+
														
 
															+  // id?: number,
														
 
															+  templateId?: number
														
 
															+  templateName?: string
														
 
															+  useTmpl?: boolean
														
 
															+  template?: null | AutoTemplate
														
 
															+  rule: null | AutoRule
														
 
															+  RuleStatusButton?: { [key: string]: any }
														
 
															 }
														
--- a/src/utils/emitter.ts
+++ b/src/utils/emitter.ts
@@ -0,0 +1,5 @@
 
															+import mitt from 'mitt'
														
 
															+
														
 
															+const emitter = mitt()
														
 
															+
														
 
															+export default emitter
														
--- a/src/utils/service.ts
+++ b/src/utils/service.ts
@@ -16,7 +16,7 @@ import { getBaseURL } from './baseUrl';
 
															 function createService() {
														
 
															 	// 创建一个 axios 实例
														
 
															 	const service = axios.create({
														
 
															-		timeout: 20000,
														
 
															+		timeout: 60000,
														
 
															 		headers: {
														
 
															 			'Content-Type': 'application/json;charset=utf-8',
														
 
															 		},
														
@@ -172,11 +172,11 @@ function createRequestFunction(service: any) {
 
															 			headers: {
														
 
															 				'Content-Type': get(config, 'headers.Content-Type', 'application/json'),
														
 
															 			},
														
 
															-			timeout: 5000,
														
 
															+			timeout: 60000,
														
 
															 			baseURL: getBaseURL(),
														
 
															 			data: {},
														
 
															 		};
														
 
															-
														
 
															+		delete config.headers
														
 
															 		// const token = userStore.getToken;
														
 
															 		const token = Session.get('token');
														
 
															 		if (token != null) {
														
--- a/src/views/adManage/ad-overview/chartComponents/dataTendency.vue
+++ b/src/views/adManage/ad-overview/chartComponents/dataTendency.vue
@@ -0,0 +1,312 @@
 
															+<template>
														
 
															+  <div v-loading="loading">
														
 
															+    <MetricsCards v-model="metrics" :metric-items="metricsItems" @change="changeMetric"></MetricsCards>
														
 
															+    <div style="height: 350px;" ref="chartRef"></div>
														
 
															+</div>
														
 
															+</template>
														
 
															+
														
 
															+<script lang="ts" setup>
														
 
															+import { ref,onMounted, onBeforeUnmount, Ref, unref, watch, computed } from 'vue'
														
 
															+import * as echarts from 'echarts'
														
 
															+import { spCampaignMetricsEnum } from '/@/views/adManage/utils/enum.js'
														
 
															+import MetricsCards from '/@/components/MetricsCards/index.vue'
														
 
															+import XEUtils from 'xe-utils'
														
 
															+import { buildChartOpt, parseQueryParams } from '/@/views/adManage/utils/tools.js'
														
 
															+
														
 
															+defineOptions({
														
 
															+  name: "DataTendencyChart"
														
 
															+})
														
 
															+
														
 
															+interface Props {
														
 
															+  fetchCard: Function,
														
 
															+  fetchLine: Function,
														
 
															+  fetchLineMonth?: Function,
														
 
															+  fetchLineWeek?: Function,
														
 
															+  query: {[key: string]: any},
														
 
															+  initMetric?: ShowMetric[],
														
 
															+  metricEnum?: {[key: string]: string}[]
														
 
															+}
														
 
															+
														
 
															+const props = withDefaults(defineProps<Props>(), {
														
 
															+  initMetric: () => [
														
 
															+    {metric: 'Impression', color: '#0085ff', 'label': '曝光量'},
														
 
															+    {metric: 'Click', color: '#3fd4cf', 'label': '点击量'},
														
 
															+    {metric: 'Spend', color: '#ff9500', 'label': '花费'},
														
 
															+  ],
														
 
															+  metricEnum: () => spCampaignMetricsEnum
														
 
															+})
														
 
															+
														
 
															+const metrics = ref(props.initMetric)
														
 
															+// const shopInfo = useShopInfo()
														
 
															+// const publicData = usePublicData()
														
 
															+// const { dateRange } = storeToRefs(publicData)
														
 
															+const metricsItems: Ref<MetricData[]> = ref([])
														
 
															+let chartObj:any
														
 
															+const chartRef = ref()
														
 
															+const statDim = ref('day')
														
 
															+const option: any = {
														
 
															+  dataset: {
														
 
															+    source: []
														
 
															+  },
														
 
															+  tooltip: {
														
 
															+    trigger: 'axis',
														
 
															+    axisPointer: {
														
 
															+      label: {
														
 
															+        backgroundColor: '#6a7985'
														
 
															+      }
														
 
															+    }
														
 
															+  },
														
 
															+  legend: {
														
 
															+    selected: {},  // 控制显隐
														
 
															+    show: false
														
 
															+  },
														
 
															+  grid: {
														
 
															+    top: 50, right: 150, bottom: 30, left: 65,
														
 
															+  },
														
 
															+  xAxis: {
														
 
															+    type: 'category'
														
 
															+  },
														
 
															+  yAxis: [
														
 
															+    {
														
 
															+      id: 0,
														
 
															+      type: 'value',
														
 
															+      name: '',
														
 
															+      splitLine: {
														
 
															+        show: true // 设置显示分割线
														
 
															+      },
														
 
															+      axisLine: {
														
 
															+        show: true,
														
 
															+				lineStyle: { color: '' }
														
 
															+      },
														
 
															+      show: true
														
 
															+    },
														
 
															+    {
														
 
															+      id: 1,
														
 
															+      type: 'value',
														
 
															+      name: '',
														
 
															+      position: 'right',
														
 
															+      splitLine: {
														
 
															+        show: false
														
 
															+      },
														
 
															+      axisLine: {
														
 
															+        show: true,
														
 
															+				lineStyle: {
														
 
															+					color: ''
														
 
															+				}
														
 
															+      },
														
 
															+      show: true
														
 
															+    },
														
 
															+    {
														
 
															+      id: 2,
														
 
															+      type: 'value',
														
 
															+      position: 'right',
														
 
															+      offset: 90,
														
 
															+      name: '',
														
 
															+      splitLine: {
														
 
															+        show: false
														
 
															+      },
														
 
															+      axisLine: {
														
 
															+        show: true,
														
 
															+				lineStyle: {
														
 
															+					color: ''
														
 
															+				}
														
 
															+      },
														
 
															+      show: true
														
 
															+    }
														
 
															+  ],
														
 
															+  series: [
														
 
															+    {
														
 
															+      id: 0,
														
 
															+      name: '',
														
 
															+      type: 'bar',
														
 
															+      encode: {
														
 
															+        x: 'Name',
														
 
															+        y: ''
														
 
															+      },
														
 
															+      barWidth: '20px',
														
 
															+      yAxisIndex: 0,
														
 
															+      itemStyle: {
														
 
															+        color: '',
														
 
															+        borderRadius: [6, 6, 6, 6],
														
 
															+      }
														
 
															+    },
														
 
															+    {
														
 
															+      id: 1,
														
 
															+      name: '',
														
 
															+      type: 'line',
														
 
															+      encode: {
														
 
															+        x: 'Name',
														
 
															+        y: ''
														
 
															+      },
														
 
															+      symbolSize: 6,
														
 
															+      symbol: 'circle',
														
 
															+      smooth: true,
														
 
															+      yAxisIndex: 1,
														
 
															+      itemStyle: {
														
 
															+        // color: '#ff9500',
														
 
															+        // borderColor: '#ff9500'
														
 
															+      },
														
 
															+      areaStyle: {
														
 
															+        // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
														
 
															+        //   { offset: 0, color: '#3fd4cf53' },
														
 
															+        //   { offset: 1, color: '#3fd4cf03' },
														
 
															+        // ]),
														
 
															+      },
														
 
															+      emphasis: {
														
 
															+        focus:'series'
														
 
															+      }
														
 
															+    },
														
 
															+    {
														
 
															+      id: 2,
														
 
															+      name: '',
														
 
															+      type: 'line',
														
 
															+      encode: {
														
 
															+        x: 'Name',
														
 
															+        y: ''
														
 
															+      },
														
 
															+      symbolSize: 6,
														
 
															+      symbol: 'circle',
														
 
															+      smooth: true,
														
 
															+      yAxisIndex: 2,
														
 
															+      itemStyle: {},
														
 
															+      areaStyle: {},
														
 
															+      emphasis: {
														
 
															+        focus:'series'
														
 
															+      }
														
 
															+    }
														
 
															+  ]
														
 
															+}
														
 
															+const loading = ref(true)
														
 
															+const queryParams = computed(() => parseQueryParams(props.query))
														
 
															+
														
 
															+onMounted(() => {
														
 
															+  getMetricsItems()
														
 
															+	addResize()
														
 
															+  // initLine()
														
 
															+  setTimeout(() => { initLine() }, 0)
														
 
															+})
														
 
															+onBeforeUnmount(() => {
														
 
															+	if(chartObj) {
														
 
															+		chartObj.dispose()
														
 
															+    chartObj = null
														
 
															+	}
														
 
															+  removeResize()
														
 
															+})
														
 
															+
														
 
															+const initLine = async () => {
														
 
															+	chartObj = echarts.init(chartRef.value)
														
 
															+	const items = await getDataset()
														
 
															+	option.dataset.source = items
														
 
															+
														
 
															+  XEUtils.arrayEach(option.series, (info:any, index) => {
														
 
															+    const color = metrics.value[index].color
														
 
															+    info.name = metrics.value[index].label
														
 
															+    info.encode.y = metrics.value[index].metric
														
 
															+    if (info.type === 'bar') {
														
 
															+      info.itemStyle.color = color
														
 
															+    } else {
														
 
															+      info.itemStyle = { color: color, borderColor: color }
														
 
															+      info.areaStyle = {
														
 
															+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
														
 
															+          { offset: 0, color: color + '53' },
														
 
															+          { offset: 1, color: color + '03' },
														
 
															+        ])
														
 
															+      }
														
 
															+    }
														
 
															+  })
														
 
															+  XEUtils.arrayEach(option.yAxis, (info:any, index) => {
														
 
															+    info.name = metrics.value[index].label
														
 
															+    info.axisLine.lineStyle.color = metrics.value[index].color
														
 
															+  })
														
 
															+
														
 
															+  XEUtils.arrayEach(props.metricEnum, info => {
														
 
															+    option.legend.selected[info.label] = false
														
 
															+  })
														
 
															+  for(const info of metrics.value) {
														
 
															+    option.legend.selected[info.label] = true
														
 
															+  }
														
 
															+  // console.log(option)
														
 
															+	chartObj.setOption(option)
														
 
															+  loading.value = false
														
 
															+}
														
 
															+const getDataset = async () => {
														
 
															+	if (statDim.value === 'week') {
														
 
															+    if (props.fetchLineWeek) {
														
 
															+      const resp = await props.fetchLineWeek(queryParams.value)
														
 
															+      return resp.data
														
 
															+    }
														
 
															+  } else if (statDim.value === 'month') {
														
 
															+    if (props.fetchLineMonth) {
														
 
															+      const resp = await props.fetchLineMonth(queryParams.value)
														
 
															+      return resp.data
														
 
															+    }
														
 
															+  } else {
														
 
															+    const resp = await props.fetchLine(queryParams.value)
														
 
															+    return resp.data
														
 
															+  }
														
 
															+}
														
 
															+const getMetricsItems = async () => {
														
 
															+	const resp = await props.fetchCard(queryParams.value)
														
 
															+	const data = resp.data
														
 
															+  metricsItems.value.length = 0
														
 
															+	XEUtils.arrayEach(props.metricEnum, info => {
														
 
															+		const tmp:MetricData = {
														
 
															+			label: info.label,
														
 
															+			value: info.value,
														
 
															+			metricVal: data[info.value],
														
 
															+			gapVal: data[`gap${info.value}`],
														
 
															+			preVal: data[`prev${info.value}`],
														
 
															+		}
														
 
															+		metricsItems.value.push(tmp)
														
 
															+	})
														
 
															+}
														
 
															+
														
 
															+const changeMetric = () => {
														
 
															+  const opt = buildChartOpt(option, metrics.value)
														
 
															+  chartObj.setOption(opt)
														
 
															+}
														
 
															+
														
 
															+const changeStatDim = async () => {
														
 
															+  loading.value = true
														
 
															+  let source = await getDataset()
														
 
															+  if (source.length > 0) {
														
 
															+    chartObj.setOption({dataset: {source: source}})
														
 
															+  }
														
 
															+  loading.value = false
														
 
															+}
														
 
															+
														
 
															+watch(
														
 
															+  props.query,
														
 
															+  async () => {
														
 
															+    // console.log("------watch-----queryParams", props.query)
														
 
															+    loading.value = true
														
 
															+    await getMetricsItems()
														
 
															+    const items = await getDataset()
														
 
															+    const opt = { dataset: { source: items } }
														
 
															+    chartObj.setOption(opt)
														
 
															+    loading.value = false
														
 
															+  }
														
 
															+)
														
 
															+
														
 
															+const resizeChart = () => { chartObj.resize() }
														
 
															+const addResize = () => { window.addEventListener('resize', resizeChart) }
														
 
															+const removeResize = () => { window.removeEventListener('resize', resizeChart) }
														
 
															+
														
 
															+
														
 
															+</script>
														
 
															+
														
 
															+<style scoped>
														
 
															+.metrics-cards {
														
 
															+  display: flex;
														
 
															+  justify-content: space-between;
														
 
															+  align-items: flex-start;
														
 
															+  gap: 12px;
														
 
															+  width: 100%;
														
 
															+}
														
 
															+
														
 
															+.chart-button-group {
														
 
															+  display: flex;
														
 
															+  justify-content: flex-end;
														
 
															+  margin-top: 5px;
														
 
															+}
														
 
															+</style>
														
--- a/src/views/adManage/ad-overview/daily/api.ts
+++ b/src/views/adManage/ad-overview/daily/api.ts
@@ -0,0 +1,80 @@
 
															+import {request} from '/@/utils/service'
														
 
															+import {UserPageQuery, AddReq, DelReq, EditReq, InfoReq} from '@fast-crud/fast-crud'
														
 
															+import XEUtils from 'xe-utils'
														
 
															+
														
 
															+export const apiPrefix = '/api/ad_manage/summary/report/trend/'
														
 
															+
														
 
															+export function GetList(query: UserPageQuery) {
														
 
															+  return request({
														
 
															+    url: apiPrefix + 'daily',
														
 
															+    method: 'get',
														
 
															+    params: query,
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function GetObj(id: any) {
														
 
															+  return request({
														
 
															+    url: apiPrefix + id + '/',
														
 
															+    method: 'get',
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function AddObj(obj: AddReq) {
														
 
															+  return request({
														
 
															+    url: apiPrefix,
														
 
															+    method: 'post',
														
 
															+    data: obj,
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function UpdateObj(obj: EditReq) {
														
 
															+  return request({
														
 
															+    url: apiPrefix + obj.id + '/',
														
 
															+    method: 'put',
														
 
															+    data: obj,
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function DelObj(id: DelReq) {
														
 
															+  return request({
														
 
															+    url: apiPrefix + id + '/',
														
 
															+    method: 'delete',
														
 
															+    data: {id},
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function getCardData(query: UserPageQuery) {
														
 
															+  return request({
														
 
															+    url: '/api/ad_manage/summary/report/total',
														
 
															+    method: 'GET',
														
 
															+    params: query,
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function getLineData(query: UserPageQuery) {
														
 
															+  query['dateRangeType'] = 'D'
														
 
															+  return request({
														
 
															+    url: apiPrefix + 'daily',
														
 
															+    method: 'GET',
														
 
															+    params: query
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function getLineWeekData(query: UserPageQuery) {
														
 
															+  query['dateRangeType'] = 'W'
														
 
															+  return request({
														
 
															+    url: apiPrefix + 'hourly',
														
 
															+    method: 'GET',
														
 
															+    params: query
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function getLineMonthData(query: UserPageQuery) {
														
 
															+  query['dateRangeType'] = 'M'
														
 
															+  return request({
														
 
															+    url: apiPrefix + 'hourly',
														
 
															+    method: 'GET',
														
 
															+    params: query
														
 
															+  })
														
 
															+}
														
 
															+
														
--- a/src/views/adManage/ad-overview/daily/crud.tsx
+++ b/src/views/adManage/ad-overview/daily/crud.tsx
@@ -0,0 +1,400 @@
 
															+import * as api from './api'
														
 
															+import {AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery} from '@fast-crud/fast-crud'
														
 
															+import {inject} from 'vue'
														
 
															+import {BaseColumn} from '/@/views/adManage/utils/commonTabColumn.js'
														
 
															+import {parseQueryParams} from '/@/views/adManage/utils/tools.js'
														
 
															+import XEUtils from 'xe-utils'
														
 
															+
														
 
															+export const createCrudOptions = function ({crudExpose, context}: CreateCrudOptionsProps): CreateCrudOptionsRet {
														
 
															+  const pageRequest = async (query: UserPageQuery) => {
														
 
															+    const params = parseQueryParams(context.value)
														
 
															+    XEUtils.assign(query, params)
														
 
															+    return await api.GetList(query)
														
 
															+  }
														
 
															+  const editRequest = async ({form, row}: EditReq) => {
														
 
															+    form.id = row.id
														
 
															+    return await api.UpdateObj(form)
														
 
															+  }
														
 
															+  const delRequest = async ({row}: DelReq) => {
														
 
															+    return await api.DelObj(row.id)
														
 
															+  }
														
 
															+  const addRequest = async ({form}: AddReq) => {
														
 
															+    return await api.AddObj(form)
														
 
															+  }
														
 
															+
														
 
															+  //权限判定
														
 
															+  const hasPermissions = inject('$hasPermissions')
														
 
															+
														
 
															+  return {
														
 
															+    crudOptions: {
														
 
															+      table: {
														
 
															+        height: 800,
														
 
															+        showSummary: true,
														
 
															+        stripe: false,
														
 
															+        headerCellStyle: {
														
 
															+          backgroundColor: '#f6f7fa', // 直接设置背景颜色
														
 
															+          borderRight: 'none',
														
 
															+        },
														
 
															+        // rowClassName() {
														
 
															+        //   return '.el-table__footer td.el-table__cell'
														
 
															+        // },
														
 
															+        cellStyle:  {
														
 
															+          border: 'none',
														
 
															+          borderBottom: '0.5px solid #ddd'
														
 
															+        },
														
 
															+      },
														
 
															+      container: {
														
 
															+        fixedHeight: false
														
 
															+      },
														
 
															+      actionbar: {
														
 
															+        show: false,
														
 
															+        buttons: {
														
 
															+          add: {
														
 
															+            show: false
														
 
															+          },
														
 
															+        }
														
 
															+      },
														
 
															+      search: {
														
 
															+        show: false
														
 
															+      },
														
 
															+      toolbar: {
														
 
															+        buttons: {
														
 
															+          search: {
														
 
															+            show: true
														
 
															+          },
														
 
															+          compact: {
														
 
															+            show: false
														
 
															+          }
														
 
															+        }
														
 
															+      },
														
 
															+      request: {
														
 
															+        pageRequest,
														
 
															+        addRequest,
														
 
															+        editRequest,
														
 
															+        delRequest,
														
 
															+      },
														
 
															+      rowHandle: {
														
 
															+        show: false,
														
 
															+      },
														
 
															+      columns: {
														
 
															+        id: {
														
 
															+          title: 'ID',
														
 
															+          column: {
														
 
															+            show: false
														
 
															+          },
														
 
															+          form: {
														
 
															+            show: false
														
 
															+          }
														
 
															+        },
														
 
															+        Name: {
														
 
															+          title: '日期',
														
 
															+          column: {
														
 
															+            width: 100,
														
 
															+            align: 'left',
														
 
															+            fixed: 'left',
														
 
															+            // border: '0.5px solid #ddd',
														
 
															+            cellStyle: {
														
 
															+              border: '1px solid #ddd',
														
 
															+            }
														
 
															+          },
														
 
															+        },
														
 
															+        Spend: {
														
 
															+          title: '花费',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            width: 100,
														
 
															+            sortable: true,
														
 
															+            border: '0.5px solid #ddd',
														
 
															+
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top"
														
 
															+                                content="来自亚马逊广告API，亚马逊系统会在3天内将无效点击从统计数据中删除，因此过去3天内的花费可能会有所变化">
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>花费</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        TotalSales: {
														
 
															+          title: '销售额',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            width: 130,
														
 
															+            sortable: true,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="
														
 
															+                      Seller类型店铺：<br />
														
 
															+                      销售额，来自亚马逊广告API。<br />
														
 
															+                      在点击广告后的7天内（商品推广）、14天内（品牌推广）、浏览或点击广告后的14天内（展示型推广）售<br/>出的广告商品及库存中其他商品的销售额；<br />
														
 
															+                      亚马逊系统此项数据最多可能延迟12小时更新。因此，“今天”日期范围内的销售数据可能会延迟。<br />
														
 
															+                      付款失败的订单数量和72小时内取消的订单产生的销售额将从总销售额中删除。<br />
														
 
															+                      <br />
														
 
															+                      Vendor类型店铺：<br />
														
 
															+                      销售额，来自亚马逊广告API。<br />
														
 
															+                      在点击广告后的14天内（商品推广）、14天内（品牌推广）、浏览或点击广告后的14天内（展示型推广）售<br />出的广告商品及库存中其他商品的销售额；<br />
														
 
															+                      亚马逊系统此项数据最多可能延迟12小时更新。因此，“今天”日期范围内的销售数据可能会延迟。<br />
														
 
															+                      付款失败的订单数量和72小时内取消的订单产生的销售额将从总销售额中删除。" raw-content>
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>销售额</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        ACOS: {
														
 
															+          title: 'ACOS',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            width: 130,
														
 
															+            sortable: true,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="广告投入产出比，系统计算，广告花费/广告带来的销售额。">
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>ACOS</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        ROAS: {
														
 
															+          title: 'ROAS',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            width: 130,
														
 
															+            sortable: true,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="广告支出回报，系统计算，广告带来的销售额/广告花费。">
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>ROAS</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        CPC: {
														
 
															+          title: '点击成本',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            sortable: true,
														
 
															+            width: 130,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="单次点击成本，系统计算，花费/点击量">
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>点击成本</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        CPA: {
														
 
															+          title: '订单成本',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            sortable: true,
														
 
															+            width: 130,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="平均每笔订单的花费，系统计算，花费/广告订单量">
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>订单成本</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        Click: {
														
 
															+          title: '点击量',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            width: 130,
														
 
															+            sortable: true,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="来自亚马逊广告API，广告被点击的次数。亚马逊系统会在3天内将无效点击去除。">
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>点击量</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        CTR: {
														
 
															+          title: '点击率',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            width: 130,
														
 
															+            sortable: true,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="点击率，系统计算，点击量/曝光量。">
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>点击率</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        TotalPurchases: {
														
 
															+          title: '订单数',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            width: 130,
														
 
															+            sortable: true,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="
														
 
															+                      Seller类型店铺：<br />
														
 
															+                      订单数，来自亚马逊广告API。<br />
														
 
															+                      在点击广告后的7天内（商品推广）、14天内（品牌推广）、浏览或点击广告后的14天内（展示型推广）售<br />出的广告商品及库存中其他商品的订单数量；<br />
														
 
															+                      亚马逊系统此项数据最多可能延迟12小时更新。因此，“今天”日期范围内的销售数据可能会延迟。<br />
														
 
															+                      付款失败的订单数量和72小时内取消的订单数量将从订单总数中删除。<br />
														
 
															+                      <br />
														
 
															+                      Vendor类型店铺：<br />
														
 
															+                      订单数，来自亚马逊广告API。<br />
														
 
															+                      在点击广告后的14天内（商品推广）、14天内（品牌推广）、浏览或点击广告后的14天内（展示型推广）售<br />出的广告商品及库存中其他商品的订单数量；<br />
														
 
															+                      亚马逊系统此项数据最多可能延迟12小时更新。因此，“今天”日期范围内的销售数据可能会延迟。<br />
														
 
															+                      付款失败的订单数量和72小时内取消的订单数量将从订单总数中删除" raw-content>
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>订单数</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        TotalUnitOrdered: {
														
 
															+          title: '销量',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            width: 100,
														
 
															+            sortable: true,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="
														
 
															+                      Seller类型店铺：<br />
														
 
															+                      销售件数，来自亚马逊广告API。<br />
														
 
															+                      在点击广告后的7天内（商品推广）、14天内（品牌推广）、浏览或点击广告后的14天内（展示型推广）售<br />出的广告商品及库存中其他商品的件数；<br />
														
 
															+                      亚马逊系统此项数据最多可能延迟12小时更新。因此，“今天”日期范围内的销售数据可能会延迟。<br />
														
 
															+                      付款失败的订单和72小时内取消的订单产生的销售件数将从销量总数中删除。<br />
														
 
															+                      <br />
														
 
															+                      Vendor类型店铺：<br />
														
 
															+                      销售件数，来自亚马逊广告API。<br />
														
 
															+                      在点击广告后的14天内（商品推广）、14天内（品牌推广）、浏览或点击广告后的14天内（展示型推广）售<br />出的广告商品及库存中其他商品的件数；<br />
														
 
															+                      亚马逊系统此项数据最多可能延迟12小时更新。因此，“今天”日期范围内的销售数据可能会延迟。<br />
														
 
															+                      付款失败的订单和72小时内取消的订单产生的销售件数将从销量总数中删除。" raw-content>
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>销量</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        Impression: {
														
 
															+          title: '曝光量',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            width: 130,
														
 
															+            sortable: true,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="来自亚马逊广告API，广告被展示的次数。">
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>曝光量</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        PurchasesRate: {
														
 
															+          title: '转化率',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            width: 130,
														
 
															+            sortable: true,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="广告转化率，系统计算，广告订单量/点击量*100%，展示型推广vCPM成本类型的广告活动不予计算。">
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>转化率</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        CPM: {
														
 
															+          title: '千次曝光成本',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            sortable: true,
														
 
															+            width: 150,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="点击率，系统计算，点击量/曝光量。">
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>千次曝光成本</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        }
														
 
															+      }
														
 
															+    }
														
 
															+  }
														
 
															+}
														
--- a/src/views/adManage/ad-overview/daily/index.vue
+++ b/src/views/adManage/ad-overview/daily/index.vue
@@ -0,0 +1,131 @@
 
															+<template>
														
 
															+  <div class="overview-tabs">
														
 
															+    <DateRangePicker v-model="dateRange"></DateRangePicker>
														
 
															+    <el-select v-model="selectedPortfolios" placeholder="SP" style="width: 200px" collapse-tags collapse-tags-tooltip :max-collapse-tags="3">
														
 
															+      <el-option v-for="info of portfolios" :label="info.label" :value="info.value" :disabled="info.disabled"></el-option>
														
 
															+    </el-select>
														
 
															+  </div>
														
 
															+  <fs-page class="fs-page-custom" style="margin-top: -11px">
														
 
															+    <fs-crud ref="crudRef" v-bind="crudBinding">
														
 
															+      <template #header-middle>
														
 
															+        <el-tabs v-model="tabActiveName" class="chart-tabs" type="border-card">
														
 
															+          <DataTendencyChart
														
 
															+            v-if="tabActiveName === 'dataTendency'"
														
 
															+            :query="queryParams"
														
 
															+            :fetchCard="getCardData"
														
 
															+            :fetchLine="getLineData"
														
 
															+            :fetch-line-month="getLineMonthData"
														
 
															+            :fetch-line-week="getLineWeekData"
														
 
															+          >
														
 
															+          </DataTendencyChart>
														
 
															+        </el-tabs>
														
 
															+      </template>
														
 
															+      <template #cell_percentTimeInBudget="scope">
														
 
															+        <el-progress :percentage="scope.row.percentTimeInBudget > 0 ? scope.row.percentTimeInBudget * 100 : 0" />
														
 
															+      </template>
														
 
															+      <template #cell_campaignName="scope">
														
 
															+        <el-link type="primary" :underline="false" @click="jumpGroup(scope.row)">{{ scope.row.campaignName }}</el-link>
														
 
															+      </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>
														
 
															+    </fs-crud>
														
 
															+  </fs-page>
														
 
															+</template>
														
 
															+
														
 
															+<script lang="ts" setup>
														
 
															+import { onMounted, Ref, ref, watch } from 'vue'
														
 
															+import { FsPage, useFs } from '@fast-crud/fast-crud'
														
 
															+import { createCrudOptions } from './crud'
														
 
															+import { useShopInfo } from '/@/stores/shopInfo'
														
 
															+import { usePublicData } from '/@/stores/publicData'
														
 
															+import { storeToRefs } from 'pinia'
														
 
															+import { useRouter } from 'vue-router'
														
 
															+import DataTendencyChart from '/@/views/adManage/ad-overview/chartComponents/dataTendency.vue'
														
 
															+import { getCardData, getLineData, getLineMonthData, getLineWeekData } from './api'
														
 
															+import { BaseColumn } from '/@/views/adManage/utils/commonTabColumn.js'
														
 
															+import DataCompare from '/@/components/dataCompare/index.vue'
														
 
															+import DateRangePicker from '/@/components/DateRangePicker/index.vue'
														
 
															+
														
 
															+const selectedPortfolios = ref('sp')
														
 
															+const portfolios = [
														
 
															+  {
														
 
															+    value: 'sp/sb/sd',
														
 
															+    label: 'SP/SB/SD',
														
 
															+  },
														
 
															+  {
														
 
															+    value: 'sp',
														
 
															+    label: 'SP',
														
 
															+  },
														
 
															+  {
														
 
															+    value: 'sb',
														
 
															+    label: 'SB',
														
 
															+  },
														
 
															+  {
														
 
															+    value: 'sd',
														
 
															+    label: 'SD',
														
 
															+  },
														
 
															+  {
														
 
															+    value: 'dsp',
														
 
															+    label: 'DSP',
														
 
															+    disabled: true,
														
 
															+  },
														
 
															+]
														
 
															+const tabActiveName = ref('dataTendency')
														
 
															+const shopInfo = useShopInfo()
														
 
															+const publicData = usePublicData()
														
 
															+const { dateRange } = storeToRefs(publicData)
														
 
															+const { profile } = storeToRefs(shopInfo)
														
 
															+const queryParams = ref({
														
 
															+  dateRange,
														
 
															+  profileId: profile.value.profile_id,
														
 
															+  campaignType: selectedPortfolios.value,
														
 
															+})
														
 
															+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })
														
 
															+const router = useRouter()
														
 
															+const showCompare = ref(false)
														
 
															+
														
 
															+console.log(111, profile.value.profile_id)
														
 
															+onMounted(async () => {
														
 
															+  crudExpose.doRefresh()
														
 
															+})
														
 
															+
														
 
															+const jumpGroup = (row: any) => {
														
 
															+  router.push({
														
 
															+    name: 'CampaignDetail',
														
 
															+    query: { campaignId: row.campaignId, tagsViewName: row.campaignName },
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+watch(
														
 
															+  queryParams,
														
 
															+  async () => {
														
 
															+    crudExpose.doRefresh()
														
 
															+  },
														
 
															+  { deep: true }
														
 
															+)
														
 
															+</script>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+.campare-switch {
														
 
															+  flex: none;
														
 
															+}
														
 
															+::v-deep(.el-table--border .el-table__footer-wrapper) {
														
 
															+  border: none;
														
 
															+}
														
 
															+::v-deep(.el-table .el-table__footer-wrapper .cell) {
														
 
															+  font-weight: 600;
														
 
															+}
														
 
															+</style>
														
--- a/src/views/adManage/ad-overview/hourly/api.ts
+++ b/src/views/adManage/ad-overview/hourly/api.ts
@@ -0,0 +1,88 @@
 
															+import {request} from '/@/utils/service'
														
 
															+import {UserPageQuery, AddReq, DelReq, EditReq, InfoReq} from '@fast-crud/fast-crud'
														
 
															+import XEUtils from 'xe-utils'
														
 
															+
														
 
															+export const apiPrefix = '/api/ad_manage/summary/ams/'
														
 
															+
														
 
															+export function GetList(query: UserPageQuery) {
														
 
															+  return request({
														
 
															+    url: apiPrefix + 'hourly_trend',
														
 
															+    method: 'get',
														
 
															+    params: query,
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function GetObj(id: any) {
														
 
															+  return request({
														
 
															+    url: apiPrefix + id + '/',
														
 
															+    method: 'get',
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function AddObj(obj: AddReq) {
														
 
															+  return request({
														
 
															+    url: apiPrefix,
														
 
															+    method: 'post',
														
 
															+    data: obj,
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function UpdateObj(obj: EditReq) {
														
 
															+  return request({
														
 
															+    url: apiPrefix + obj.id + '/',
														
 
															+    method: 'put',
														
 
															+    data: obj,
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function DelObj(id: DelReq) {
														
 
															+  return request({
														
 
															+    url: apiPrefix + id + '/',
														
 
															+    method: 'delete',
														
 
															+    data: {id},
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function getCardData(query: UserPageQuery) {
														
 
															+  return request({
														
 
															+    url: apiPrefix + 'hourly_total',
														
 
															+    method: 'GET',
														
 
															+    params: query,
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function getLineData(query: UserPageQuery) {
														
 
															+  query['dateRangeType'] = 'D'
														
 
															+  return request({
														
 
															+    url: apiPrefix + 'hourly_trend',
														
 
															+    method: 'GET',
														
 
															+    params: query
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function getLineWeekData(query: UserPageQuery) {
														
 
															+  query['dateRangeType'] = 'W'
														
 
															+  return request({
														
 
															+    url: apiPrefix + 'hourly',
														
 
															+    method: 'GET',
														
 
															+    params: query
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function getLineMonthData(query: UserPageQuery) {
														
 
															+  query['dateRangeType'] = 'M'
														
 
															+  return request({
														
 
															+    url: apiPrefix + 'hourly',
														
 
															+    method: 'GET',
														
 
															+    params: query
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function getMyList(query: UserPageQuery) {
														
 
															+  query['dateRangeType'] = 'M'
														
 
															+  return request({
														
 
															+    url: '/api/ad_manage/summary/ams/hourly',
														
 
															+    method: 'GET',
														
 
															+    params: query
														
 
															+  })
														
 
															+}
														
--- a/src/views/adManage/ad-overview/hourly/crud.tsx
+++ b/src/views/adManage/ad-overview/hourly/crud.tsx
@@ -0,0 +1,329 @@
 
															+import * as api from './api'
														
 
															+import {AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery} from '@fast-crud/fast-crud'
														
 
															+import {inject} from 'vue'
														
 
															+import {BaseColumn} from '/@/views/adManage/utils/commonTabColumn.js'
														
 
															+import {parseQueryParams} from '/@/views/adManage/utils/tools.js'
														
 
															+import XEUtils from 'xe-utils'
														
 
															+
														
 
															+export const createCrudOptions = function ({crudExpose, context}: CreateCrudOptionsProps): CreateCrudOptionsRet {
														
 
															+  const pageRequest = async (query: UserPageQuery) => {
														
 
															+    const params = parseQueryParams(context.value)
														
 
															+    XEUtils.assign(query, params)
														
 
															+    return await api.GetList(query)
														
 
															+  }
														
 
															+  const editRequest = async ({form, row}: EditReq) => {
														
 
															+    form.id = row.id
														
 
															+    return await api.UpdateObj(form)
														
 
															+  }
														
 
															+  const delRequest = async ({row}: DelReq) => {
														
 
															+    return await api.DelObj(row.id)
														
 
															+  }
														
 
															+  const addRequest = async ({form}: AddReq) => {
														
 
															+    return await api.AddObj(form)
														
 
															+  }
														
 
															+
														
 
															+  //权限判定
														
 
															+  const hasPermissions = inject('$hasPermissions')
														
 
															+
														
 
															+  return {
														
 
															+    crudOptions: {
														
 
															+      table: {
														
 
															+        height: 800,
														
 
															+        showSummary: true,
														
 
															+        stripe: false,
														
 
															+        headerCellStyle: {
														
 
															+          backgroundColor: '#f6f7fa', // 直接设置背景颜色
														
 
															+          borderRight: 'none',
														
 
															+        },
														
 
															+        cellStyle:  {
														
 
															+          border: 'none',
														
 
															+          borderBottom: '0.5px solid #ddd'
														
 
															+        },
														
 
															+      },
														
 
															+      container: {
														
 
															+        fixedHeight: false
														
 
															+      },
														
 
															+      actionbar: {
														
 
															+        show: true,
														
 
															+        buttons: {
														
 
															+          add: {
														
 
															+            show: false
														
 
															+          },
														
 
															+        }
														
 
															+      },
														
 
															+      search: {
														
 
															+        show: false
														
 
															+      },
														
 
															+      toolbar: {
														
 
															+        buttons: {
														
 
															+          search: {
														
 
															+            show: true
														
 
															+          },
														
 
															+          compact: {
														
 
															+            show: false
														
 
															+          }
														
 
															+        }
														
 
															+      },
														
 
															+      request: {
														
 
															+        pageRequest,
														
 
															+        addRequest,
														
 
															+        editRequest,
														
 
															+        delRequest,
														
 
															+      },
														
 
															+      rowHandle: {
														
 
															+        show: false,
														
 
															+      },
														
 
															+      columns: {
														
 
															+        id: {
														
 
															+          title: 'ID',
														
 
															+          column: {
														
 
															+            show: false
														
 
															+          },
														
 
															+          form: {
														
 
															+            show: false
														
 
															+          }
														
 
															+        },
														
 
															+        Name: {
														
 
															+          title: '日期',
														
 
															+          column: {
														
 
															+            width: 100,
														
 
															+            align: 'left',
														
 
															+            fixed: 'left',
														
 
															+            // border: '0.5px solid #ddd',
														
 
															+            cellStyle: {
														
 
															+              border: '1px solid #ddd',
														
 
															+            }
														
 
															+          },
														
 
															+        },
														
 
															+        Spend: {
														
 
															+          title: '花费',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            sortable: true,
														
 
															+            border: '0.5px solid #ddd',
														
 
															+
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top"
														
 
															+                                content="来自亚马逊广告API，亚马逊系统会在3天内将无效点击从统计数据中删除，因此过去3天内的花费可能会有所变化">
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>花费</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        TotalSales: {
														
 
															+          title: '销售额',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            sortable: true,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="
														
 
															+                      Seller类型店铺：<br />
														
 
															+                      销售额，来自亚马逊广告API。<br />
														
 
															+                      在点击广告后的7天内（商品推广）、14天内（品牌推广）、浏览或点击广告后的14天内（展示型推广）售<br/>出的广告商品及库存中其他商品的销售额；<br />
														
 
															+                      亚马逊系统此项数据最多可能延迟12小时更新。因此，“今天”日期范围内的销售数据可能会延迟。<br />
														
 
															+                      付款失败的订单数量和72小时内取消的订单产生的销售额将从总销售额中删除。<br />
														
 
															+                      <br />
														
 
															+                      Vendor类型店铺：<br />
														
 
															+                      销售额，来自亚马逊广告API。<br />
														
 
															+                      在点击广告后的14天内（商品推广）、14天内（品牌推广）、浏览或点击广告后的14天内（展示型推广）售<br />出的广告商品及库存中其他商品的销售额；<br />
														
 
															+                      亚马逊系统此项数据最多可能延迟12小时更新。因此，“今天”日期范围内的销售数据可能会延迟。<br />
														
 
															+                      付款失败的订单数量和72小时内取消的订单产生的销售额将从总销售额中删除。" raw-content>
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>销售额</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        ACOS: {
														
 
															+          title: 'ACOS',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            sortable: true,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="广告投入产出比，系统计算，广告花费/广告带来的销售额。">
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>ACOS</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        ROAS: {
														
 
															+          title: 'ROAS',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            sortable: true,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="广告支出回报，系统计算，广告带来的销售额/广告花费。">
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>ROAS</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        CPC: {
														
 
															+          title: '点击成本',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            sortable: true,
														
 
															+            width: 130,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="单次点击成本，系统计算，花费/点击量">
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>点击成本</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        CPA: {
														
 
															+          title: '订单成本',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            sortable: true,
														
 
															+            width: 130,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="平均每笔订单的花费，系统计算，花费/广告订单量">
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>订单成本</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        Click: {
														
 
															+          title: '点击量',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            sortable: true,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="来自亚马逊广告API，广告被点击的次数。亚马逊系统会在3天内将无效点击去除。">
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>点击量</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        CTR: {
														
 
															+          title: '点击率',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            sortable: true,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="点击率，系统计算，点击量/曝光量。">
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>点击率</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        TotalPurchases: {
														
 
															+          title: '订单数',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            sortable: true,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="
														
 
															+                      Seller类型店铺：<br />
														
 
															+                      订单数，来自亚马逊广告API。<br />
														
 
															+                      在点击广告后的7天内（商品推广）、14天内（品牌推广）、浏览或点击广告后的14天内（展示型推广）售<br />出的广告商品及库存中其他商品的订单数量；<br />
														
 
															+                      亚马逊系统此项数据最多可能延迟12小时更新。因此，“今天”日期范围内的销售数据可能会延迟。<br />
														
 
															+                      付款失败的订单数量和72小时内取消的订单数量将从订单总数中删除。<br />
														
 
															+                      <br />
														
 
															+                      Vendor类型店铺：<br />
														
 
															+                      订单数，来自亚马逊广告API。<br />
														
 
															+                      在点击广告后的14天内（商品推广）、14天内（品牌推广）、浏览或点击广告后的14天内（展示型推广）售<br />出的广告商品及库存中其他商品的订单数量；<br />
														
 
															+                      亚马逊系统此项数据最多可能延迟12小时更新。因此，“今天”日期范围内的销售数据可能会延迟。<br />
														
 
															+                      付款失败的订单数量和72小时内取消的订单数量将从订单总数中删除" raw-content>
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>订单数</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        TotalUnitOrdered: {
														
 
															+          title: '销量',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            sortable: true,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="
														
 
															+                      Seller类型店铺：<br />
														
 
															+                      销售件数，来自亚马逊广告API。<br />
														
 
															+                      在点击广告后的7天内（商品推广）、14天内（品牌推广）、浏览或点击广告后的14天内（展示型推广）售<br />出的广告商品及库存中其他商品的件数；<br />
														
 
															+                      亚马逊系统此项数据最多可能延迟12小时更新。因此，“今天”日期范围内的销售数据可能会延迟。<br />
														
 
															+                      付款失败的订单和72小时内取消的订单产生的销售件数将从销量总数中删除。<br />
														
 
															+                      <br />
														
 
															+                      Vendor类型店铺：<br />
														
 
															+                      销售件数，来自亚马逊广告API。<br />
														
 
															+                      在点击广告后的14天内（商品推广）、14天内（品牌推广）、浏览或点击广告后的14天内（展示型推广）售<br />出的广告商品及库存中其他商品的件数；<br />
														
 
															+                      亚马逊系统此项数据最多可能延迟12小时更新。因此，“今天”日期范围内的销售数据可能会延迟。<br />
														
 
															+                      付款失败的订单和72小时内取消的订单产生的销售件数将从销量总数中删除。" raw-content>
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>销量</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+      }
														
 
															+    }
														
 
															+  }
														
 
															+}
														
--- a/src/views/adManage/ad-overview/hourly/index.vue
+++ b/src/views/adManage/ad-overview/hourly/index.vue
@@ -0,0 +1,135 @@
 
															+<template>
														
 
															+  <div class="overview-tabs">
														
 
															+    <DateRangePicker v-model="dateRange"></DateRangePicker>
														
 
															+    <el-select
														
 
															+        v-model="selectedPortfolios"
														
 
															+        placeholder="SP"
														
 
															+        style="width: 200px"
														
 
															+        collapse-tags
														
 
															+        collapse-tags-tooltip
														
 
															+        :max-collapse-tags="3"
														
 
															+    >
														
 
															+      <el-option v-for="info of portfolios" :label="info.label" :value="info.value" :disabled="info.disabled"></el-option>
														
 
															+    </el-select>
														
 
															+  </div>
														
 
															+	<fs-page class="fs-page-custom" style="margin-top: -11px">
														
 
															+		<fs-crud ref="crudRef" v-bind="crudBinding">
														
 
															+			<template #header-middle>
														
 
															+				<el-tabs v-model="tabActiveName" class="chart-tabs" type="border-card">
														
 
															+						<DataTendencyChart
														
 
															+							v-if="tabActiveName === 'dataTendency'"
														
 
															+							:query="queryParams"
														
 
															+							:fetchCard="getCardData"
														
 
															+							:fetchLine="getLineData"
														
 
															+							:fetch-line-month="getLineMonthData"
														
 
															+							:fetch-line-week="getLineWeekData">
														
 
															+						</DataTendencyChart>
														
 
															+				</el-tabs>
														
 
															+			</template>
														
 
															+			<template #cell_percentTimeInBudget="scope">
														
 
															+				<el-progress :percentage="scope.row.percentTimeInBudget > 0 ? scope.row.percentTimeInBudget * 100 : 0" />
														
 
															+			</template>
														
 
															+			<template #cell_campaignName="scope">
														
 
															+				<el-link type="primary" :underline="false" @click="jumpGroup(scope.row)">{{ scope.row.campaignName }}</el-link>
														
 
															+			</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>
														
 
															+		</fs-crud>
														
 
															+	</fs-page>
														
 
															+</template>
														
 
															+
														
 
															+<script lang="ts" setup>
														
 
															+import {onMounted, ref, watch} from 'vue'
														
 
															+import {FsPage, useFs} from '@fast-crud/fast-crud'
														
 
															+import {createCrudOptions} from './crud'
														
 
															+import {useShopInfo} from '/@/stores/shopInfo'
														
 
															+import {usePublicData} from '/@/stores/publicData'
														
 
															+import {storeToRefs} from 'pinia'
														
 
															+import {useRouter} from 'vue-router'
														
 
															+import DataTendencyChart from '/@/views/adManage/ad-overview/chartComponents/dataTendency.vue'
														
 
															+import {getCardData, getLineData, getLineMonthData, getLineWeekData} from './api'
														
 
															+import {BaseColumn} from '/@/views/adManage/utils/commonTabColumn.js'
														
 
															+import DataCompare from '/@/components/dataCompare/index.vue'
														
 
															+import DateRangePicker from '/@/components/DateRangePicker/index.vue'
														
 
															+
														
 
															+const selectedPortfolios = ref('sp')
														
 
															+const portfolios = [
														
 
															+  {
														
 
															+    value: 'sp/sb/sd',
														
 
															+    label: 'SP/SB/SD'
														
 
															+  },
														
 
															+  {
														
 
															+    value: 'sp',
														
 
															+    label: 'SP'
														
 
															+  },
														
 
															+  {
														
 
															+    value:'sb',
														
 
															+    label:'SB'
														
 
															+  },
														
 
															+  {
														
 
															+    value:'sd',
														
 
															+    label:'SD'
														
 
															+  },
														
 
															+  {
														
 
															+    value: 'dsp',
														
 
															+    label: 'DSP',
														
 
															+    disabled: true
														
 
															+  }
														
 
															+]
														
 
															+const tabActiveName = ref('dataTendency')
														
 
															+const shopInfo = useShopInfo()
														
 
															+const publicData = usePublicData()
														
 
															+const { dateRange } = storeToRefs(publicData)
														
 
															+const { profile } = storeToRefs(shopInfo)
														
 
															+const queryParams = ref({
														
 
															+  dateRange,
														
 
															+  // startDate: '2023-11-01',
														
 
															+  // endDate: '2023-11-15',
														
 
															+  profileId: profile.value.profile_id,
														
 
															+  campaignType: selectedPortfolios.value
														
 
															+})
														
 
															+
														
 
															+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })
														
 
															+const router = useRouter()
														
 
															+const showCompare = ref(false)
														
 
															+
														
 
															+const jumpGroup = (row: any) => {
														
 
															+  router.push({
														
 
															+    name: 'CampaignDetail',
														
 
															+    query: { campaignId: row.campaignId, tagsViewName: row.campaignName },
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+onMounted(async () => {
														
 
															+	crudExpose.doRefresh()
														
 
															+})
														
 
															+
														
 
															+watch(queryParams, async () => {
														
 
															+  crudExpose.doRefresh()
														
 
															+}, { deep: true })
														
 
															+
														
 
															+</script>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+.campare-switch {
														
 
															+	flex: none;
														
 
															+}
														
 
															+::v-deep(.el-table--border .el-table__footer-wrapper) {
														
 
															+  border: none;
														
 
															+}
														
 
															+::v-deep(.el-table .el-table__footer-wrapper .cell) {
														
 
															+  font-weight: 600;
														
 
															+}
														
 
															+</style>
														
--- a/src/views/adManage/ad-overview/index.vue
+++ b/src/views/adManage/ad-overview/index.vue
@@ -0,0 +1,57 @@
 
															+<template>
														
 
															+  <div class="asj-container">
														
 
															+    <div class="overview-top">
														
 
															+      <div v-for="tab of tabs" :key="tab.name" :class="['asj-tab', { active: tabActiveName === tab.name }]" @click="tabActiveName = tab.name">
														
 
															+        {{ tab.label }}
														
 
															+      </div>
														
 
															+    </div>
														
 
															+    <component :is="tabsComponents[tabActiveName]"></component>
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<script lang="ts" setup>
														
 
															+import {onBeforeMount, provide, Ref, ref} from 'vue'
														
 
															+import {usePublicData} from '/@/stores/publicData'
														
 
															+import {storeToRefs} from 'pinia'
														
 
															+import {GetAllPortfolios} from '/@/views/adManage/portfolios/api'
														
 
															+import Total from './total/index.vue'
														
 
															+import Hour from '/@/views/adManage/ad-overview/hourly/index.vue'
														
 
															+import Daily from '/@/views/adManage/ad-overview/daily/index.vue'
														
 
															+import Weekly from '/@/views/adManage/ad-overview/weekly/index.vue'
														
 
															+import Monthly from '/@/views/adManage/ad-overview/monthly/index.vue'
														
 
															+
														
 
															+// const shopInfo = useShopInfo()
														
 
															+const publicData = usePublicData()
														
 
															+const selectedPortfolios: Ref<string[]> = ref([])
														
 
															+const portfolios: Ref<Portfolio[]> = ref([])
														
 
															+const { dateRange } = storeToRefs(publicData)
														
 
															+const tabActiveName = ref('Total')
														
 
															+const tabs = [
														
 
															+  { label: '总览', name: 'Total' },
														
 
															+  { label: '按小时', name: 'Hour' },
														
 
															+  { label: '按日', name: 'Daily' },
														
 
															+  { label: '按周', name: 'Weekly' },
														
 
															+  { label: '按月', name: 'Monthly' },
														
 
															+]
														
 
															+const tabsComponents: any = {
														
 
															+  Total,
														
 
															+  Hour,
														
 
															+  Daily,
														
 
															+  Weekly,
														
 
															+  Monthly,
														
 
															+}
														
 
															+
														
 
															+provide('dateRange', dateRange)
														
 
															+
														
 
															+onBeforeMount(async () => {
														
 
															+  const resp: APIResponseData = await GetAllPortfolios()
														
 
															+  portfolios.value = resp.data
														
 
															+})
														
 
															+
														
 
															+</script>
														
 
															+
														
 
															+<style scoped>
														
 
															+::v-deep(.el-table .el-table__header-wrapper .cell) {
														
 
															+  border-right: 1px solid rgb(218, 221, 223);
														
 
															+}
														
 
															+</style>
														
--- a/src/views/adManage/ad-overview/monthly/api.ts
+++ b/src/views/adManage/ad-overview/monthly/api.ts
@@ -0,0 +1,80 @@
 
															+import {request} from '/@/utils/service'
														
 
															+import {UserPageQuery, AddReq, DelReq, EditReq, InfoReq} from '@fast-crud/fast-crud'
														
 
															+import XEUtils from 'xe-utils'
														
 
															+
														
 
															+export const apiPrefix = '/api/ad_manage/summary/report/trend/'
														
 
															+
														
 
															+export function GetList(query: UserPageQuery) {
														
 
															+  return request({
														
 
															+    url: apiPrefix + 'monthly',
														
 
															+    method: 'get',
														
 
															+    params: query,
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function GetObj(id: any) {
														
 
															+  return request({
														
 
															+    url: apiPrefix + id + '/',
														
 
															+    method: 'get',
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function AddObj(obj: AddReq) {
														
 
															+  return request({
														
 
															+    url: apiPrefix,
														
 
															+    method: 'post',
														
 
															+    data: obj,
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function UpdateObj(obj: EditReq) {
														
 
															+  return request({
														
 
															+    url: apiPrefix + obj.id + '/',
														
 
															+    method: 'put',
														
 
															+    data: obj,
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function DelObj(id: DelReq) {
														
 
															+  return request({
														
 
															+    url: apiPrefix + id + '/',
														
 
															+    method: 'delete',
														
 
															+    data: {id},
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function getCardData(query: UserPageQuery) {
														
 
															+  return request({
														
 
															+    url: '/api/ad_manage/summary/report/total',
														
 
															+    method: 'GET',
														
 
															+    params: query,
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function getLineData(query: UserPageQuery) {
														
 
															+  query['dateRangeType'] = 'D'
														
 
															+  return request({
														
 
															+    url: apiPrefix + 'monthly',
														
 
															+    method: 'GET',
														
 
															+    params: query
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function getLineWeekData(query: UserPageQuery) {
														
 
															+  query['dateRangeType'] = 'W'
														
 
															+  return request({
														
 
															+    url: apiPrefix + 'hourly',
														
 
															+    method: 'GET',
														
 
															+    params: query
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function getLineMonthData(query: UserPageQuery) {
														
 
															+  query['dateRangeType'] = 'M'
														
 
															+  return request({
														
 
															+    url: apiPrefix + 'hourly',
														
 
															+    method: 'GET',
														
 
															+    params: query
														
 
															+  })
														
 
															+}
														
 
															+
														
--- a/src/views/adManage/ad-overview/monthly/crud.tsx
+++ b/src/views/adManage/ad-overview/monthly/crud.tsx
@@ -0,0 +1,397 @@
 
															+import * as api from './api'
														
 
															+import {AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery} from '@fast-crud/fast-crud'
														
 
															+import {inject} from 'vue'
														
 
															+import {BaseColumn} from '/@/views/adManage/utils/commonTabColumn.js'
														
 
															+import {parseQueryParams} from '/@/views/adManage/utils/tools.js'
														
 
															+import XEUtils from 'xe-utils'
														
 
															+
														
 
															+export const createCrudOptions = function ({crudExpose, context}: CreateCrudOptionsProps): CreateCrudOptionsRet {
														
 
															+  const pageRequest = async (query: UserPageQuery) => {
														
 
															+    const params = parseQueryParams(context.value)
														
 
															+    XEUtils.assign(query, params)
														
 
															+    return await api.GetList(query)
														
 
															+  }
														
 
															+  const editRequest = async ({form, row}: EditReq) => {
														
 
															+    form.id = row.id
														
 
															+    return await api.UpdateObj(form)
														
 
															+  }
														
 
															+  const delRequest = async ({row}: DelReq) => {
														
 
															+    return await api.DelObj(row.id)
														
 
															+  }
														
 
															+  const addRequest = async ({form}: AddReq) => {
														
 
															+    return await api.AddObj(form)
														
 
															+  }
														
 
															+
														
 
															+  //权限判定
														
 
															+  const hasPermissions = inject('$hasPermissions')
														
 
															+
														
 
															+  return {
														
 
															+    crudOptions: {
														
 
															+      table: {
														
 
															+        height: 800,
														
 
															+        showSummary: true,
														
 
															+        stripe: false,
														
 
															+        headerCellStyle: {
														
 
															+          backgroundColor: '#f6f7fa', // 直接设置背景颜色
														
 
															+          borderRight: 'none',
														
 
															+        },
														
 
															+        cellStyle:  {
														
 
															+          border: 'none',
														
 
															+          borderBottom: '0.5px solid #ddd'
														
 
															+        },
														
 
															+      },
														
 
															+      container: {
														
 
															+        fixedHeight: false
														
 
															+      },
														
 
															+      actionbar: {
														
 
															+        show: false,
														
 
															+        buttons: {
														
 
															+          add: {
														
 
															+            show: false
														
 
															+          },
														
 
															+        }
														
 
															+      },
														
 
															+      search: {
														
 
															+        show: false
														
 
															+      },
														
 
															+      toolbar: {
														
 
															+        buttons: {
														
 
															+          search: {
														
 
															+            show: true
														
 
															+          },
														
 
															+          compact: {
														
 
															+            show: false
														
 
															+          }
														
 
															+        }
														
 
															+      },
														
 
															+      request: {
														
 
															+        pageRequest,
														
 
															+        addRequest,
														
 
															+        editRequest,
														
 
															+        delRequest,
														
 
															+      },
														
 
															+      rowHandle: {
														
 
															+        show: false,
														
 
															+      },
														
 
															+      columns: {
														
 
															+        id: {
														
 
															+          title: 'ID',
														
 
															+          column: {
														
 
															+            show: false
														
 
															+          },
														
 
															+          form: {
														
 
															+            show: false
														
 
															+          }
														
 
															+        },
														
 
															+        Name: {
														
 
															+          title: '日期',
														
 
															+          column: {
														
 
															+            width: 100,
														
 
															+            align: 'left',
														
 
															+            fixed: 'left',
														
 
															+            // border: '0.5px solid #ddd',
														
 
															+            cellStyle: {
														
 
															+              border: '1px solid #ddd',
														
 
															+            }
														
 
															+          },
														
 
															+        },
														
 
															+        Spend: {
														
 
															+          title: '花费',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            width: 100,
														
 
															+            sortable: true,
														
 
															+            border: '0.5px solid #ddd',
														
 
															+
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top"
														
 
															+                                content="来自亚马逊广告API，亚马逊系统会在3天内将无效点击从统计数据中删除，因此过去3天内的花费可能会有所变化">
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>花费</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        TotalSales: {
														
 
															+          title: '销售额',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            width: 130,
														
 
															+            sortable: true,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="
														
 
															+                      Seller类型店铺：<br />
														
 
															+                      销售额，来自亚马逊广告API。<br />
														
 
															+                      在点击广告后的7天内（商品推广）、14天内（品牌推广）、浏览或点击广告后的14天内（展示型推广）售<br/>出的广告商品及库存中其他商品的销售额；<br />
														
 
															+                      亚马逊系统此项数据最多可能延迟12小时更新。因此，“今天”日期范围内的销售数据可能会延迟。<br />
														
 
															+                      付款失败的订单数量和72小时内取消的订单产生的销售额将从总销售额中删除。<br />
														
 
															+                      <br />
														
 
															+                      Vendor类型店铺：<br />
														
 
															+                      销售额，来自亚马逊广告API。<br />
														
 
															+                      在点击广告后的14天内（商品推广）、14天内（品牌推广）、浏览或点击广告后的14天内（展示型推广）售<br />出的广告商品及库存中其他商品的销售额；<br />
														
 
															+                      亚马逊系统此项数据最多可能延迟12小时更新。因此，“今天”日期范围内的销售数据可能会延迟。<br />
														
 
															+                      付款失败的订单数量和72小时内取消的订单产生的销售额将从总销售额中删除。" raw-content>
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>销售额</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        ACOS: {
														
 
															+          title: 'ACOS',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            width: 130,
														
 
															+            sortable: true,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="广告投入产出比，系统计算，广告花费/广告带来的销售额。">
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>ACOS</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        ROAS: {
														
 
															+          title: 'ROAS',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            width: 130,
														
 
															+            sortable: true,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="广告支出回报，系统计算，广告带来的销售额/广告花费。">
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>ROAS</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        CPC: {
														
 
															+          title: '点击成本',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            sortable: true,
														
 
															+            width: 130,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="单次点击成本，系统计算，花费/点击量">
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>点击成本</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        CPA: {
														
 
															+          title: '订单成本',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            sortable: true,
														
 
															+            width: 130,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="平均每笔订单的花费，系统计算，花费/广告订单量">
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>订单成本</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        Click: {
														
 
															+          title: '点击量',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            width: 130,
														
 
															+            sortable: true,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="来自亚马逊广告API，广告被点击的次数。亚马逊系统会在3天内将无效点击去除。">
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>点击量</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        CTR: {
														
 
															+          title: '点击率',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            width: 130,
														
 
															+            sortable: true,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="点击率，系统计算，点击量/曝光量。">
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>点击率</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        TotalPurchases: {
														
 
															+          title: '订单数',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            width: 130,
														
 
															+            sortable: true,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="
														
 
															+                      Seller类型店铺：<br />
														
 
															+                      订单数，来自亚马逊广告API。<br />
														
 
															+                      在点击广告后的7天内（商品推广）、14天内（品牌推广）、浏览或点击广告后的14天内（展示型推广）售<br />出的广告商品及库存中其他商品的订单数量；<br />
														
 
															+                      亚马逊系统此项数据最多可能延迟12小时更新。因此，“今天”日期范围内的销售数据可能会延迟。<br />
														
 
															+                      付款失败的订单数量和72小时内取消的订单数量将从订单总数中删除。<br />
														
 
															+                      <br />
														
 
															+                      Vendor类型店铺：<br />
														
 
															+                      订单数，来自亚马逊广告API。<br />
														
 
															+                      在点击广告后的14天内（商品推广）、14天内（品牌推广）、浏览或点击广告后的14天内（展示型推广）售<br />出的广告商品及库存中其他商品的订单数量；<br />
														
 
															+                      亚马逊系统此项数据最多可能延迟12小时更新。因此，“今天”日期范围内的销售数据可能会延迟。<br />
														
 
															+                      付款失败的订单数量和72小时内取消的订单数量将从订单总数中删除" raw-content>
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>订单数</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        TotalUnitOrdered: {
														
 
															+          title: '销量',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            width: 100,
														
 
															+            sortable: true,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="
														
 
															+                      Seller类型店铺：<br />
														
 
															+                      销售件数，来自亚马逊广告API。<br />
														
 
															+                      在点击广告后的7天内（商品推广）、14天内（品牌推广）、浏览或点击广告后的14天内（展示型推广）售<br />出的广告商品及库存中其他商品的件数；<br />
														
 
															+                      亚马逊系统此项数据最多可能延迟12小时更新。因此，“今天”日期范围内的销售数据可能会延迟。<br />
														
 
															+                      付款失败的订单和72小时内取消的订单产生的销售件数将从销量总数中删除。<br />
														
 
															+                      <br />
														
 
															+                      Vendor类型店铺：<br />
														
 
															+                      销售件数，来自亚马逊广告API。<br />
														
 
															+                      在点击广告后的14天内（商品推广）、14天内（品牌推广）、浏览或点击广告后的14天内（展示型推广）售<br />出的广告商品及库存中其他商品的件数；<br />
														
 
															+                      亚马逊系统此项数据最多可能延迟12小时更新。因此，“今天”日期范围内的销售数据可能会延迟。<br />
														
 
															+                      付款失败的订单和72小时内取消的订单产生的销售件数将从销量总数中删除。" raw-content>
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>销量</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        Impression: {
														
 
															+          title: '曝光量',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            width: 130,
														
 
															+            sortable: true,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="来自亚马逊广告API，广告被展示的次数。">
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>曝光量</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        PurchasesRate: {
														
 
															+          title: '转化率',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            width: 130,
														
 
															+            sortable: true,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="广告转化率，系统计算，广告订单量/点击量*100%，展示型推广vCPM成本类型的广告活动不予计算。">
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>转化率</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        CPM: {
														
 
															+          title: '千次曝光成本',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            sortable: true,
														
 
															+            width: 150,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="点击率，系统计算，点击量/曝光量。">
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>千次曝光成本</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        }
														
 
															+      }
														
 
															+    }
														
 
															+  }
														
 
															+}
														
--- a/src/views/adManage/ad-overview/monthly/index.vue
+++ b/src/views/adManage/ad-overview/monthly/index.vue
@@ -0,0 +1,131 @@
 
															+<template>
														
 
															+  <div class="overview-tabs">
														
 
															+    <DateRangePicker v-model="dateRange"></DateRangePicker>
														
 
															+    <el-select
														
 
															+        v-model="selectedPortfolios"
														
 
															+        placeholder="SP"
														
 
															+        style="width: 200px"
														
 
															+        collapse-tags
														
 
															+        collapse-tags-tooltip
														
 
															+        :max-collapse-tags="3"
														
 
															+    >
														
 
															+      <el-option v-for="info of portfolios" :label="info.label" :value="info.value" :disabled="info.disabled"></el-option>
														
 
															+    </el-select>
														
 
															+  </div>
														
 
															+  <fs-page class="fs-page-custom" style="margin-top: -11px">
														
 
															+    <fs-crud ref="crudRef" v-bind="crudBinding">
														
 
															+      <template #header-middle>
														
 
															+        <el-tabs v-model="tabActiveName" class="chart-tabs" type="border-card">
														
 
															+          <DataTendencyChart
														
 
															+              v-if="tabActiveName === 'dataTendency'"
														
 
															+              :query="queryParams"
														
 
															+              :fetchCard="getCardData"
														
 
															+              :fetchLine="getLineData"
														
 
															+              :fetch-line-month="getLineMonthData"
														
 
															+              :fetch-line-week="getLineWeekData">
														
 
															+          </DataTendencyChart>
														
 
															+        </el-tabs>
														
 
															+      </template>
														
 
															+      <template #cell_percentTimeInBudget="scope">
														
 
															+        <el-progress :percentage="scope.row.percentTimeInBudget > 0 ? scope.row.percentTimeInBudget * 100 : 0" />
														
 
															+      </template>
														
 
															+      <template #cell_campaignName="scope">
														
 
															+        <el-link type="primary" :underline="false" @click="jumpGroup(scope.row)">{{ scope.row.campaignName }}</el-link>
														
 
															+      </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>
														
 
															+    </fs-crud>
														
 
															+  </fs-page>
														
 
															+</template>
														
 
															+
														
 
															+<script lang="ts" setup>
														
 
															+import {onMounted, Ref, ref, watch} from 'vue'
														
 
															+import {FsPage, useFs} from '@fast-crud/fast-crud'
														
 
															+import {createCrudOptions} from './crud'
														
 
															+import {useShopInfo} from '/@/stores/shopInfo'
														
 
															+import {usePublicData} from '/@/stores/publicData'
														
 
															+import {storeToRefs} from 'pinia'
														
 
															+import {useRouter} from 'vue-router'
														
 
															+import DataTendencyChart from '/@/views/adManage/ad-overview/chartComponents/dataTendency.vue'
														
 
															+import {getCardData, getLineData, getLineMonthData, getLineWeekData} from './api'
														
 
															+import {BaseColumn} from '/@/views/adManage/utils/commonTabColumn.js'
														
 
															+import DataCompare from '/@/components/dataCompare/index.vue'
														
 
															+import DateRangePicker from '/@/components/DateRangePicker/index.vue'
														
 
															+
														
 
															+const selectedPortfolios = ref('sp')
														
 
															+const portfolios = [
														
 
															+  {
														
 
															+    value: 'sp/sb/sd',
														
 
															+    label: 'SP/SB/SD'
														
 
															+  },
														
 
															+  {
														
 
															+    value: 'sp',
														
 
															+    label: 'SP'
														
 
															+  },
														
 
															+  {
														
 
															+    value:'sb',
														
 
															+    label:'SB'
														
 
															+  },
														
 
															+  {
														
 
															+    value:'sd',
														
 
															+    label:'SD'
														
 
															+  },
														
 
															+  {
														
 
															+    value: 'dsp',
														
 
															+    label: 'DSP',
														
 
															+    disabled: true
														
 
															+  }
														
 
															+]
														
 
															+const tabActiveName = ref('dataTendency')
														
 
															+const shopInfo = useShopInfo()
														
 
															+const publicData = usePublicData()
														
 
															+const { dateRange } = storeToRefs(publicData)
														
 
															+const { profile } = storeToRefs(shopInfo)
														
 
															+const queryParams = ref({
														
 
															+  dateRange,
														
 
															+  profileId: profile.value.profile_id,
														
 
															+  campaignType: selectedPortfolios.value
														
 
															+})
														
 
															+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })
														
 
															+const router = useRouter()
														
 
															+const showCompare = ref(false)
														
 
															+
														
 
															+
														
 
															+onMounted(async () => {
														
 
															+  crudExpose.doRefresh()
														
 
															+})
														
 
															+const jumpGroup = (row: any) => {
														
 
															+  router.push({
														
 
															+    name: 'CampaignDetail',
														
 
															+    query: { campaignId: row.campaignId, tagsViewName: row.campaignName },
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+watch(queryParams, async () => {
														
 
															+  crudExpose.doRefresh()
														
 
															+}, { deep: true })
														
 
															+</script>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+.campare-switch {
														
 
															+  flex: none;
														
 
															+}
														
 
															+::v-deep(.el-table--border .el-table__footer-wrapper) {
														
 
															+  border: none;
														
 
															+}
														
 
															+::v-deep(.el-table .el-table__footer-wrapper .cell) {
														
 
															+  font-weight: 600;
														
 
															+}
														
 
															+</style>
														
--- a/src/views/adManage/ad-overview/total/api.ts
+++ b/src/views/adManage/ad-overview/total/api.ts
@@ -0,0 +1,74 @@
 
															+import { request } from '/src/utils/service';
														
 
															+import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
														
 
															+import XEUtils from 'xe-utils';
														
 
															+
														
 
															+export const apiPrefix = '/api/ad_manage/summary/report/';
														
 
															+export function GetList(query: UserPageQuery) {
														
 
															+  return request({
														
 
															+    url: apiPrefix,
														
 
															+    method: 'get',
														
 
															+    params: query,
														
 
															+  })
														
 
															+}
														
 
															+export function GetObj(id: any) {
														
 
															+  return request({
														
 
															+    url: apiPrefix + id + "/",
														
 
															+    method: 'get',
														
 
															+  });
														
 
															+}
														
 
															+
														
 
															+export function AddObj(obj: AddReq) {
														
 
															+  return request({
														
 
															+    url: apiPrefix,
														
 
															+    method: 'post',
														
 
															+    data: obj,
														
 
															+  });
														
 
															+}
														
 
															+
														
 
															+export function UpdateObj(obj: EditReq) {
														
 
															+  return request({
														
 
															+    url: apiPrefix + obj.id + '/',
														
 
															+    method: 'put',
														
 
															+    data: obj,
														
 
															+  });
														
 
															+}
														
 
															+
														
 
															+export function DelObj(id: DelReq) {
														
 
															+  return request({
														
 
															+    url: apiPrefix + id + '/',
														
 
															+    method: 'delete',
														
 
															+    data: { id },
														
 
															+  });
														
 
															+}
														
 
															+
														
 
															+export function getCardData(query: UserPageQuery) {
														
 
															+  return request({
														
 
															+    url: apiPrefix + "total/",
														
 
															+    method: 'GET',
														
 
															+    params: query
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function getLineData(query: UserPageQuery) {
														
 
															+  return request({
														
 
															+    url: apiPrefix + "daily/",
														
 
															+    method: 'GET',
														
 
															+    params: query
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function getCardTotalData(query) {
														
 
															+  return request({
														
 
															+    url: apiPrefix + "total",
														
 
															+    method: 'GET',
														
 
															+    params: query
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function getChartTotalData(query) {
														
 
															+  return request({
														
 
															+    url: apiPrefix + "trend/daily",
														
 
															+    method: 'GET',
														
 
															+    params: query
														
 
															+  })
														
 
															+}
														
--- a/src/views/adManage/ad-overview/total/crud.tsx
+++ b/src/views/adManage/ad-overview/total/crud.tsx
--- a/src/views/adManage/ad-overview/total/index.vue
+++ b/src/views/adManage/ad-overview/total/index.vue
@@ -0,0 +1,914 @@
 
															+<template>
														
 
															+  <div>
														
 
															+    <div class="container-main">
														
 
															+      <div class="overview-tabs">
														
 
															+        <DateRangePicker v-model="dateRange"></DateRangePicker>
														
 
															+        <el-select
														
 
															+            v-model="selectedPortfolios"
														
 
															+            placeholder="SP"
														
 
															+            style="width: 200px"
														
 
															+            collapse-tags
														
 
															+            collapse-tags-tooltip
														
 
															+            :max-collapse-tags="3"
														
 
															+        >
														
 
															+          <el-option v-for="info of portfolios" :key="info.value" :label="info.label" :value="info.value" :disabled="info.disabled"></el-option>
														
 
															+        </el-select>
														
 
															+      </div>
														
 
															+      <!-- 卡片内容 不要删除这个类 -->
														
 
															+      <div class="home-container" style="margin-top: 0" v-loading="cardLoading">
														
 
															+        <el-row :gutter="15" class="home-card-one mb15">
														
 
															+          <el-col
														
 
															+              :xs="24"
														
 
															+              :sm="12"
														
 
															+              :md="12"
														
 
															+              :lg="6"
														
 
															+              :xl="6"
														
 
															+              v-for="(v, k) in state.homeOne"
														
 
															+              :key="k"
														
 
															+              :class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }"
														
 
															+          >
														
 
															+            <div class="home-card-item flex">
														
 
															+              <div class="flex-margin flex w100" :class="` home-one-animation${k}`">
														
 
															+                <div class="flex-auto" style="margin-top: -10px">
														
 
															+                  <div class="mt10">{{ v.cardTitle }}</div>
														
 
															+                  <div class="font30">{{ v.num1 }}</div>
														
 
															+                  <div style="display: inline-block; margin-right: 10px; margin-left: 3px;">
														
 
															+                    {{ v.compareNum }}
														
 
															+                  </div>
														
 
															+                  <el-icon :style="{ color: String(v.num2).includes('-') ? '#59b939' : '#e36f53' }" style="display: inline-block; padding-top: 2px">
														
 
															+                    <template v-if="String(v.num2).includes('-')">
														
 
															+                      <Bottom/> <!-- num2 是负数时显示向下箭头 -->
														
 
															+                    </template>
														
 
															+                    <template v-else>
														
 
															+                      <Top/> <!-- num2 不是负数时显示向上箭头 -->
														
 
															+                    </template>
														
 
															+                  </el-icon>
														
 
															+                  <span class="l-indent" :style="{ color: String(v.num2).includes('-') ? '#59b939' : '#e36f53' }">{{ v.num2 }}%</span>
														
 
															+                </div>
														
 
															+                <div class="home-card-item-icon flex" :style="{ background: `var(${v.color2})` }">
														
 
															+                  <i class="flex-margin font32" :class="v.num4" :style="{ color: `var(${v.color3})` }"></i>
														
 
															+                </div>
														
 
															+              </div>
														
 
															+            </div>
														
 
															+          </el-col>
														
 
															+        </el-row>
														
 
															+      </div>
														
 
															+      <!-- 折线图 -->
														
 
															+      <el-card v-loading="loading" style="margin-top: -5px;">
														
 
															+        <div style="height: 350px;" ref="chartRefOne"></div>
														
 
															+      </el-card>
														
 
															+      <el-row :gutter="5" style="margin-top: 10px">
														
 
															+        <el-col :span="12">
														
 
															+          <el-card v-loading="loading">
														
 
															+            <div style="height: 350px;" ref="chartRefAcos"></div>
														
 
															+          </el-card>
														
 
															+        </el-col>
														
 
															+        <el-col :span="12">
														
 
															+          <el-card v-loading="loading">
														
 
															+            <div style="height: 350px;" ref="chartRefCPCandCTR"></div>
														
 
															+          </el-card>
														
 
															+        </el-col>
														
 
															+      </el-row>
														
 
															+      <el-row :gutter="5" style="margin-top: 10px">
														
 
															+        <el-col :span="12">
														
 
															+          <el-card v-loading="loading">
														
 
															+            <div style="height: 350px;" ref="chartRefTotalPurchases"></div>
														
 
															+          </el-card>
														
 
															+        </el-col>
														
 
															+        <el-col :span="12">
														
 
															+          <el-card v-loading="loading">
														
 
															+            <div style="height: 350px;" ref="chartRefImpandCli"></div>
														
 
															+          </el-card>
														
 
															+        </el-col>
														
 
															+      </el-row>
														
 
															+    </div>
														
 
															+    <!--<el-button @click="changeCardData">按钮</el-button>-->
														
 
															+  </div>
														
 
															+
														
 
															+</template>
														
 
															+
														
 
															+<script lang="ts" setup>
														
 
															+import {nextTick, onBeforeUnmount, onMounted, reactive, Ref, ref, watch} from 'vue'
														
 
															+import * as echarts from 'echarts'
														
 
															+import {useShopInfo} from '/@/stores/shopInfo'
														
 
															+import {usePublicData} from '/@/stores/publicData'
														
 
															+import {storeToRefs} from 'pinia'
														
 
															+import {createCrudOptions} from '/@/views/adManage/sp/targets/crud'
														
 
															+import {useFs} from '@fast-crud/fast-crud'
														
 
															+import {getCardTotalData, getChartTotalData} from '/src/views/adManage/ad-overview/total/api'
														
 
															+import DateRangePicker from '/@/components/DateRangePicker/index.vue'
														
 
															+
														
 
															+const loading = ref(true)
														
 
															+const cardLoading = ref(true)
														
 
															+const publicData = usePublicData()
														
 
															+const {dateRange} = storeToRefs(publicData)
														
 
															+const shopInfo = useShopInfo()
														
 
															+const { profile } = storeToRefs(shopInfo)
														
 
															+const tabActiveName = ref('Campaigns')
														
 
															+const queryParams = ref({
														
 
															+  profileId: profile.value.profile_id,
														
 
															+  dateRange
														
 
															+})
														
 
															+const {crudBinding, crudRef, crudExpose} = useFs({createCrudOptions, context: queryParams})
														
 
															+
														
 
															+// 广告类型下拉框
														
 
															+const selectedPortfolios = ref('SP')
														
 
															+const portfolios = [
														
 
															+  {
														
 
															+    value: 'SP/SB/SD',
														
 
															+    label: 'SP/SB/SD'
														
 
															+  },
														
 
															+  {
														
 
															+    value: 'SP',
														
 
															+    label: 'SP'
														
 
															+  },
														
 
															+  {
														
 
															+    value:'SB',
														
 
															+    label:'SB'
														
 
															+  },
														
 
															+  {
														
 
															+    value:'SD',
														
 
															+    label:'SD'
														
 
															+  },
														
 
															+  {
														
 
															+    value: 'DSP',
														
 
															+    label: 'DSP',
														
 
															+    disabled: true
														
 
															+  }
														
 
															+]
														
 
															+
														
 
															+// 发送请求获取数据
														
 
															+async function setTotalData() {
														
 
															+  try {
														
 
															+    cardLoading.value = true
														
 
															+    const resp = await getCardTotalData({ startDate: dateRange.value[0], endDate: dateRange.value[1], profileId: queryParams.value.profileId })
														
 
															+    state.homeOne[0].num1 = resp.data.Spend
														
 
															+    state.homeOne[0].compareNum = resp.data.prevSpend
														
 
															+    state.homeOne[0].num2 = resp.data.gapSpend
														
 
															+    state.homeOne[1].num1 = resp.data.TotalSales
														
 
															+    state.homeOne[1].compareNum = resp.data.prevTotalSales
														
 
															+    state.homeOne[1].num2 = resp.data.gapTotalSales
														
 
															+    state.homeOne[2].num1 = resp.data.TotalPurchases
														
 
															+    state.homeOne[2].compareNum = resp.data.prevTotalPurchases
														
 
															+    state.homeOne[2].num2 = resp.data.gapTotalPurchases
														
 
															+    state.homeOne[3].num1 = resp.data.ACOS
														
 
															+    state.homeOne[3].compareNum = resp.data.prevACOS
														
 
															+    state.homeOne[3].num2 = resp.data.gapACOS
														
 
															+  } catch (error) {
														
 
															+    console.log('获取数据失败:', error)
														
 
															+  } finally {
														
 
															+    cardLoading.value = false
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+let optionSource
														
 
															+async function setChartTotalData() {
														
 
															+  try {
														
 
															+    loading.value = true
														
 
															+    const resp = await getChartTotalData({ startDate: dateRange.value[0], endDate: dateRange.value[1], profileId: queryParams.value.profileId })
														
 
															+    optionSource = resp.data
														
 
															+    await setChartOptions()
														
 
															+    return resp.data
														
 
															+  } catch (error) {
														
 
															+    console.log('获取数据失败:', error)
														
 
															+  } finally {
														
 
															+    loading.value = false
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+
														
 
															+onMounted( () => {
														
 
															+  // crudExpose.doRefresh()
														
 
															+  setTotalData()
														
 
															+  setChartTotalData()
														
 
															+})
														
 
															+
														
 
															+watch(queryParams, async() => {
														
 
															+  try {
														
 
															+    loading.value = true
														
 
															+    console.log('queryParams.value', queryParams.value)
														
 
															+    await initLine()
														
 
															+    await setTotalData()
														
 
															+    await setChartTotalData()
														
 
															+    loading.value = false
														
 
															+  } catch (error) {
														
 
															+    console.log(error)
														
 
															+  }
														
 
															+
														
 
															+}, {deep: true})
														
 
															+
														
 
															+
														
 
															+// 卡片相关功能
														
 
															+const state = reactive({
														
 
															+  homeOne: [
														
 
															+    {
														
 
															+      num1: '',
														
 
															+      compareNum: '',
														
 
															+      num2: '',
														
 
															+      cardTitle: '花费',
														
 
															+      num4: 'fa fa-meetup',
														
 
															+      // color1: '#FF6462',
														
 
															+      color2: '--next-color-primary-lighter',
														
 
															+      color3: '--el-color-primary',
														
 
															+    },
														
 
															+    {
														
 
															+      num1: '',
														
 
															+      compareNum: '',
														
 
															+      num2: '',
														
 
															+      cardTitle: '销售额',
														
 
															+      num4: 'iconfont icon-ditu',
														
 
															+      color2: '--next-color-success-lighter',
														
 
															+      color3: '--el-color-success',
														
 
															+    },
														
 
															+    {
														
 
															+      num1: '',
														
 
															+      compareNum: '',
														
 
															+      num2: '',
														
 
															+      cardTitle: '订单数',
														
 
															+      num4: 'iconfont icon-zaosheng',
														
 
															+      color2: '--next-color-warning-lighter',
														
 
															+      color3: '--el-color-warning',
														
 
															+    },
														
 
															+    {
														
 
															+      num1: '',
														
 
															+      compareNum: '',
														
 
															+      num2: '',
														
 
															+      cardTitle: 'ACOS',
														
 
															+      num4: 'fa fa-github-alt',
														
 
															+      color2: '--next-color-danger-lighter',
														
 
															+      color3: '--el-color-danger',
														
 
															+    },
														
 
															+  ],
														
 
															+
														
 
															+  myCharts: [],
														
 
															+  charts: {
														
 
															+    theme: '',
														
 
															+    bgColor: '',
														
 
															+    color: '#303133',
														
 
															+  },
														
 
															+})
														
 
															+
														
 
															+
														
 
															+// 折线图相关功能
														
 
															+const chartRefOne = ref()
														
 
															+let chartObjOne
														
 
															+const option = {
														
 
															+  title: {text: '花费 & 销售额'},
														
 
															+  dataset: {
														
 
															+    source: []
														
 
															+  },
														
 
															+  tooltip: {
														
 
															+    trigger: 'axis',
														
 
															+    axisPointer: {
														
 
															+      label: {
														
 
															+        backgroundColor: '#6a7985'
														
 
															+      }
														
 
															+    }
														
 
															+  },
														
 
															+  legend: {
														
 
															+    selected: {},  // 控制显隐
														
 
															+    data: ['花费', '销售额'],
														
 
															+    show: true
														
 
															+  },
														
 
															+  grid: {
														
 
															+    top: 50, right: 65, bottom: 30, left: 65,
														
 
															+  },
														
 
															+  xAxis: {
														
 
															+    type: 'category',
														
 
															+    // boundaryGap: false,
														
 
															+  },
														
 
															+  yAxis: [
														
 
															+    {
														
 
															+      type: 'value',
														
 
															+      axisLine: {
														
 
															+        show: true,
														
 
															+        lineStyle: {
														
 
															+          color: '#3a83f7' // 第一个 Y 轴的颜色
														
 
															+        }
														
 
															+      }
														
 
															+    },
														
 
															+    {
														
 
															+      type: 'value',
														
 
															+      splitLine: {
														
 
															+        show: false
														
 
															+      },
														
 
															+      axisLine: {
														
 
															+        show: true,
														
 
															+        lineStyle: {
														
 
															+          color: '#f19a37' // 第二个 Y 轴的颜色
														
 
															+        }
														
 
															+      }
														
 
															+    }
														
 
															+  ],
														
 
															+  series: [
														
 
															+    {
														
 
															+      name: '花费',
														
 
															+      yAxisIndex: 0,
														
 
															+      encode: {
														
 
															+        x: 'Name',
														
 
															+        y: 'Spend',
														
 
															+      },
														
 
															+      type: 'line',
														
 
															+      smooth: true,
														
 
															+      itemStyle: {
														
 
															+        color: '#3a83f7',
														
 
															+      },
														
 
															+      areaStyle: {
														
 
															+        color: {
														
 
															+          type: 'linear',
														
 
															+          x: 0,
														
 
															+          y: 0,
														
 
															+          x2: 0,
														
 
															+          y2: 1,
														
 
															+          colorStops: [{
														
 
															+            offset: 0, color: 'rgba(58, 131, 247, 0.5)' // 顶部不透明
														
 
															+          }, {
														
 
															+            offset: 0.2, color: 'rgba(58, 131, 247, 0.2)' // 中间更透明
														
 
															+          }, {
														
 
															+            offset: 1, color: 'rgba(58, 131, 247, 0)' // 底部完全透明
														
 
															+          }],
														
 
															+          global: false // 缺省为 false
														
 
															+        }
														
 
															+      }
														
 
															+    },
														
 
															+    {
														
 
															+      name: '销售额',
														
 
															+      yAxisIndex: 1,
														
 
															+      encode: {
														
 
															+        x: 'Name',
														
 
															+        y: 'TotalSales',
														
 
															+      },
														
 
															+      type: 'line',
														
 
															+      smooth: true,
														
 
															+      lineStyle: {
														
 
															+        type: 'dashed'
														
 
															+      },
														
 
															+      itemStyle: {
														
 
															+        color: '#f19a37',
														
 
															+      },
														
 
															+      areaStyle: {
														
 
															+        color: {
														
 
															+          type: 'linear',
														
 
															+          x: 0,
														
 
															+          y: 0,
														
 
															+          x2: 0,
														
 
															+          y2: 1,
														
 
															+          colorStops: [{
														
 
															+            offset: 0, color: 'rgba(241, 154, 55, 0.5)' // 顶部半透明
														
 
															+          }, {
														
 
															+            offset: 0.2, color: 'rgba(241, 154, 55, 0.2)' // 中间更透明
														
 
															+          }, {
														
 
															+            offset: 1, color: 'rgba(241, 154, 55, 0)' // 底部完全透明
														
 
															+          }],
														
 
															+          global: false // 缺省为 false
														
 
															+        }
														
 
															+      }
														
 
															+    },
														
 
															+  ]
														
 
															+}
														
 
															+
														
 
															+const chartRefAcos = ref()
														
 
															+let chartObjAcos
														
 
															+const option2 = {
														
 
															+  title: {text: 'Acos'},
														
 
															+  dataset: {
														
 
															+    source: []
														
 
															+  },
														
 
															+  tooltip: {
														
 
															+    trigger: 'axis',
														
 
															+    axisPointer: {
														
 
															+      label: {
														
 
															+        backgroundColor: '#6a7985'
														
 
															+      }
														
 
															+    }
														
 
															+  },
														
 
															+  legend: {
														
 
															+    selected: {},  // 控制显隐
														
 
															+    data: ['Acos'],
														
 
															+    show: true
														
 
															+  },
														
 
															+  grid: {
														
 
															+    top: 50, right: 65, bottom: 30, left: 65,
														
 
															+  },
														
 
															+  xAxis: {
														
 
															+    type: 'category',
														
 
															+    // boundaryGap: false,
														
 
															+  },
														
 
															+  yAxis: [
														
 
															+    {
														
 
															+      type: 'value',
														
 
															+      axisLine: {
														
 
															+        show: true,
														
 
															+        lineStyle: {
														
 
															+          color: '#3a83f7'
														
 
															+        }
														
 
															+      }
														
 
															+    }
														
 
															+  ],
														
 
															+  series: [
														
 
															+    {
														
 
															+      name: 'Acos',
														
 
															+      yAxisIndex: 0,
														
 
															+      encode: {
														
 
															+        x: 'Name',
														
 
															+        y: 'Acos',
														
 
															+      },
														
 
															+      type: 'line',
														
 
															+      smooth: true,
														
 
															+      lineStyle: {
														
 
															+        type: 'dashed'
														
 
															+      },
														
 
															+      legendHoverLink: false,
														
 
															+      itemStyle: {
														
 
															+        color: '#3a83f7',
														
 
															+      },
														
 
															+      areaStyle: {
														
 
															+        color: {
														
 
															+          type: 'linear',
														
 
															+          x: 0,
														
 
															+          y: 0,
														
 
															+          x2: 0,
														
 
															+          y2: 1,
														
 
															+          colorStops: [{
														
 
															+            offset: 0, color: 'rgba(58, 131, 247, 0.5)' // 顶部不透明
														
 
															+          }, {
														
 
															+            offset: 0.2, color: 'rgba(58, 131, 247, 0.2)' // 中间更透明
														
 
															+          }, {
														
 
															+            offset: 1, color: 'rgba(58, 131, 247, 0)' // 底部完全透明
														
 
															+          }],
														
 
															+          global: false // 缺省为 false
														
 
															+        }
														
 
															+      }
														
 
															+    },
														
 
															+  ]
														
 
															+}
														
 
															+
														
 
															+const chartRefCPCandCTR = ref()
														
 
															+let chartObjCPCandCTR
														
 
															+const option3 = {
														
 
															+  title: {text: '点击成本 & 点击率'},
														
 
															+  dataset: {
														
 
															+    source: []
														
 
															+  },
														
 
															+  tooltip: {
														
 
															+    trigger: 'axis',
														
 
															+    axisPointer: {
														
 
															+      label: {
														
 
															+        backgroundColor: '#6a7985'
														
 
															+      }
														
 
															+    }
														
 
															+  },
														
 
															+  legend: {
														
 
															+    selected: {},  // 控制显隐
														
 
															+    data: ['点击成本', '点击率'],
														
 
															+    show: true
														
 
															+  },
														
 
															+  grid: {
														
 
															+    top: 50, right: 65, bottom: 30, left: 65,
														
 
															+  },
														
 
															+  xAxis: {
														
 
															+    type: 'category',
														
 
															+    // boundaryGap: false,
														
 
															+  },
														
 
															+  yAxis: [
														
 
															+    {
														
 
															+      type: 'value',
														
 
															+      axisLine: {
														
 
															+        show: true,
														
 
															+        lineStyle: {
														
 
															+          color: '#3a83f7' // 第一个 Y 轴的颜色
														
 
															+        }
														
 
															+      }
														
 
															+    },
														
 
															+    {
														
 
															+      type: 'value',
														
 
															+      splitLine: {
														
 
															+        show: false
														
 
															+      },
														
 
															+      axisLine: {
														
 
															+        show: true,
														
 
															+        lineStyle: {
														
 
															+          color: '#f19a37' // 第二个 Y 轴的颜色
														
 
															+        }
														
 
															+      }
														
 
															+    }
														
 
															+  ],
														
 
															+  series: [
														
 
															+    {
														
 
															+      name: '点击成本',
														
 
															+      yAxisIndex: 0,
														
 
															+      encode: {
														
 
															+        x: 'Name',
														
 
															+        y: 'CPC',
														
 
															+      },
														
 
															+      type: 'line',
														
 
															+      smooth: true,
														
 
															+      itemStyle: {
														
 
															+        color: '#3a83f7',
														
 
															+      },
														
 
															+      areaStyle: {
														
 
															+        color: {
														
 
															+          type: 'linear',
														
 
															+          x: 0,
														
 
															+          y: 0,
														
 
															+          x2: 0,
														
 
															+          y2: 1,
														
 
															+          colorStops: [{
														
 
															+            offset: 0, color: 'rgba(58, 131, 247, 0.5)' // 顶部不透明
														
 
															+          }, {
														
 
															+            offset: 0.2, color: 'rgba(58, 131, 247, 0.2)' // 中间更透明
														
 
															+          }, {
														
 
															+            offset: 1, color: 'rgba(58, 131, 247, 0)' // 底部完全透明
														
 
															+          }],
														
 
															+          global: false // 缺省为 false
														
 
															+        }
														
 
															+      }
														
 
															+    },
														
 
															+    {
														
 
															+      name: '点击率',
														
 
															+      yAxisIndex: 1,
														
 
															+      encode: {
														
 
															+        x: 'Name',
														
 
															+        y: 'CTR',
														
 
															+      },
														
 
															+      type: 'line',
														
 
															+      smooth: true,
														
 
															+      itemStyle: {
														
 
															+        color: '#f19a37',
														
 
															+      },
														
 
															+      areaStyle: {
														
 
															+        color: {
														
 
															+          type: 'linear',
														
 
															+          x: 0,
														
 
															+          y: 0,
														
 
															+          x2: 0,
														
 
															+          y2: 1,
														
 
															+          colorStops: [{
														
 
															+            offset: 0, color: 'rgba(241, 154, 55, 0.5)' // 顶部半透明
														
 
															+          }, {
														
 
															+            offset: 0.2, color: 'rgba(241, 154, 55, 0.2)' // 中间更透明
														
 
															+          }, {
														
 
															+            offset: 1, color: 'rgba(241, 154, 55, 0)' // 底部完全透明
														
 
															+          }],
														
 
															+          global: false // 缺省为 false
														
 
															+        }
														
 
															+      }
														
 
															+    },
														
 
															+  ]
														
 
															+}
														
 
															+
														
 
															+const chartRefTotalPurchases = ref()
														
 
															+let chartObjTotalPurchases
														
 
															+const option4 = {
														
 
															+  title: {text: '订单数'},
														
 
															+  dataset: {
														
 
															+    source: []
														
 
															+  },
														
 
															+  tooltip: {
														
 
															+    trigger: 'axis',
														
 
															+    axisPointer: {
														
 
															+      label: {
														
 
															+        backgroundColor: '#6a7985'
														
 
															+      }
														
 
															+    }
														
 
															+  },
														
 
															+  legend: {
														
 
															+    selected: {},  // 控制显隐
														
 
															+    data: ['订单数'],
														
 
															+    show: true
														
 
															+  },
														
 
															+  grid: {
														
 
															+    top: 50, right: 65, bottom: 30, left: 65,
														
 
															+  },
														
 
															+  xAxis: {
														
 
															+    type: 'category',
														
 
															+    // boundaryGap: false,
														
 
															+  },
														
 
															+  yAxis: [
														
 
															+    {
														
 
															+      type: 'value',
														
 
															+      axisLine: {
														
 
															+        show: true,
														
 
															+        lineStyle: {
														
 
															+          color: '#3a83f7'
														
 
															+        }
														
 
															+      }
														
 
															+    }
														
 
															+  ],
														
 
															+  series: [
														
 
															+    {
														
 
															+      name: '订单数',
														
 
															+      yAxisIndex: 0,
														
 
															+      encode: {
														
 
															+        x: 'Name',
														
 
															+        y: 'TotalPurchases',
														
 
															+      },
														
 
															+      type: 'line',
														
 
															+      smooth: true,
														
 
															+      lineStyle: {
														
 
															+        type: 'dashed'
														
 
															+      },
														
 
															+      legendHoverLink: false,
														
 
															+      itemStyle: {
														
 
															+        color: '#3a83f7',
														
 
															+      },
														
 
															+      areaStyle: {
														
 
															+        color: {
														
 
															+          type: 'linear',
														
 
															+          x: 0,
														
 
															+          y: 0,
														
 
															+          x2: 0,
														
 
															+          y2: 1,
														
 
															+          colorStops: [{
														
 
															+            offset: 0, color: 'rgba(58, 131, 247, 0.5)' // 顶部不透明
														
 
															+          }, {
														
 
															+            offset: 0.2, color: 'rgba(58, 131, 247, 0.2)' // 中间更透明
														
 
															+          }, {
														
 
															+            offset: 1, color: 'rgba(58, 131, 247, 0)' // 底部完全透明
														
 
															+          }],
														
 
															+          global: false // 缺省为 false
														
 
															+        }
														
 
															+      }
														
 
															+    },
														
 
															+  ]
														
 
															+}
														
 
															+
														
 
															+const chartRefImpandCli = ref()
														
 
															+let chartObjImpandCli
														
 
															+const option5 = {
														
 
															+  title: {text: '曝光量 & 点击量'},
														
 
															+  dataset: {
														
 
															+    source: []
														
 
															+  },
														
 
															+  tooltip: {
														
 
															+    trigger: 'axis',
														
 
															+    axisPointer: {
														
 
															+      label: {
														
 
															+        backgroundColor: '#6a7985'
														
 
															+      }
														
 
															+    }
														
 
															+  },
														
 
															+  legend: {
														
 
															+    selected: {},  // 控制显隐
														
 
															+    data: ['曝光量', '点击量'],
														
 
															+    show: true
														
 
															+  },
														
 
															+  grid: {
														
 
															+    top: 50, right: 65, bottom: 30, left: 65,
														
 
															+  },
														
 
															+  xAxis: {
														
 
															+    type: 'category',
														
 
															+    // boundaryGap: false,
														
 
															+  },
														
 
															+  yAxis: [
														
 
															+    {
														
 
															+      type: 'value',
														
 
															+      axisLine: {
														
 
															+        show: true,
														
 
															+        lineStyle: {
														
 
															+          color: '#3a83f7' // 第一个 Y 轴的颜色
														
 
															+        }
														
 
															+      }
														
 
															+    },
														
 
															+    {
														
 
															+      type: 'value',
														
 
															+      splitLine: {
														
 
															+        show: false
														
 
															+      },
														
 
															+      axisLine: {
														
 
															+        show: true,
														
 
															+        lineStyle: {
														
 
															+          color: '#f19a37' // 第二个 Y 轴的颜色
														
 
															+        }
														
 
															+      }
														
 
															+    }
														
 
															+  ],
														
 
															+  series: [
														
 
															+    {
														
 
															+      name: '曝光量',
														
 
															+      yAxisIndex: 0,
														
 
															+      encode: {
														
 
															+        x: 'Name',
														
 
															+        y: 'Impression',
														
 
															+      },
														
 
															+      type: 'line',
														
 
															+      smooth: true,
														
 
															+      itemStyle: {
														
 
															+        color: '#3a83f7',
														
 
															+      },
														
 
															+      areaStyle: {
														
 
															+        color: {
														
 
															+          type: 'linear',
														
 
															+          x: 0,
														
 
															+          y: 0,
														
 
															+          x2: 0,
														
 
															+          y2: 1,
														
 
															+          colorStops: [{
														
 
															+            offset: 0, color: 'rgba(58, 131, 247, 0.5)' // 顶部不透明
														
 
															+          }, {
														
 
															+            offset: 0.2, color: 'rgba(58, 131, 247, 0.2)' // 中间更透明
														
 
															+          }, {
														
 
															+            offset: 1, color: 'rgba(58, 131, 247, 0)' // 底部完全透明
														
 
															+          }],
														
 
															+          global: false // 缺省为 false
														
 
															+        }
														
 
															+      }
														
 
															+    },
														
 
															+    {
														
 
															+      name: '点击量',
														
 
															+      yAxisIndex: 1,
														
 
															+      encode: {
														
 
															+        x: 'Name',
														
 
															+        y: 'Click',
														
 
															+      },
														
 
															+      type: 'line',
														
 
															+      smooth: true,
														
 
															+      itemStyle: {
														
 
															+        color: '#f19a37',
														
 
															+      },
														
 
															+      areaStyle: {
														
 
															+        color: {
														
 
															+          type: 'linear',
														
 
															+          x: 0,
														
 
															+          y: 0,
														
 
															+          x2: 0,
														
 
															+          y2: 1,
														
 
															+          colorStops: [{
														
 
															+            offset: 0, color: 'rgba(241, 154, 55, 0.5)' // 顶部半透明
														
 
															+          }, {
														
 
															+            offset: 0.2, color: 'rgba(241, 154, 55, 0.2)' // 中间更透明
														
 
															+          }, {
														
 
															+            offset: 1, color: 'rgba(241, 154, 55, 0)' // 底部完全透明
														
 
															+          }],
														
 
															+          global: false // 缺省为 false
														
 
															+        }
														
 
															+      }
														
 
															+    },
														
 
															+  ]
														
 
															+}
														
 
															+
														
 
															+function initLine() {
														
 
															+  if (chartRefOne.value) {
														
 
															+    chartObjOne = echarts.init(chartRefOne.value)
														
 
															+    chartObjAcos = echarts.init(chartRefAcos.value)
														
 
															+    chartObjCPCandCTR = echarts.init(chartRefCPCandCTR.value)
														
 
															+    chartObjTotalPurchases = echarts.init(chartRefTotalPurchases.value)
														
 
															+    chartObjImpandCli = echarts.init(chartRefImpandCli.value)
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+function setChartOptions() {
														
 
															+  nextTick(() => {
														
 
															+    const chartOptions = [
														
 
															+      {chart: chartObjOne, option: option},
														
 
															+      {chart: chartObjAcos, option: option2},
														
 
															+      {chart: chartObjCPCandCTR, option: option3},
														
 
															+      {chart: chartObjTotalPurchases, option: option4},
														
 
															+      {chart: chartObjImpandCli, option: option5}
														
 
															+    ]
														
 
															+
														
 
															+    chartOptions.forEach(chartOption => {
														
 
															+      try {
														
 
															+        chartOption.option.dataset.source = optionSource
														
 
															+        chartOption.chart.setOption(chartOption.option)
														
 
															+      } catch (error) {
														
 
															+        console.error('设置图表选项失败:', error)
														
 
															+      }
														
 
															+    })
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+function resizeChart() {
														
 
															+  if (chartObjOne) {
														
 
															+    chartObjOne.resize();
														
 
															+    chartObjAcos.resize()
														
 
															+    chartObjCPCandCTR.resize()
														
 
															+    chartObjTotalPurchases.resize()
														
 
															+    chartObjImpandCli.resize()
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+onMounted(async () => {
														
 
															+  initLine()
														
 
															+  window.addEventListener('resize', resizeChart)  // 监听窗口大小变化，调整图表大小
														
 
															+  setTimeout(() => {
														
 
															+    resizeChart()
														
 
															+  }, 10)
														
 
															+})
														
 
															+
														
 
															+onBeforeUnmount(() => {
														
 
															+  window.removeEventListener('resize', resizeChart)
														
 
															+});
														
 
															+
														
 
															+</script>
														
 
															+
														
 
															+<style scoped lang="scss">
														
 
															+$homeNavLengh: 8;
														
 
															+.home-container {
														
 
															+  overflow: hidden;
														
 
															+  margin-top: 10px;
														
 
															+
														
 
															+  .home-card-one,
														
 
															+  .home-card-two,
														
 
															+  .home-card-three {
														
 
															+    .home-card-item {
														
 
															+      width: 100%;
														
 
															+      height: 130px;
														
 
															+      border-radius: 4px;
														
 
															+      transition: all ease 0.3s;
														
 
															+      padding: 20px;
														
 
															+      overflow: hidden;
														
 
															+      background: #ffffff;
														
 
															+      box-shadow: var(--el-box-shadow-light);
														
 
															+      color: var(--el-text-color-primary);
														
 
															+      border: 1px solid var(--next-border-color-light);
														
 
															+
														
 
															+      &:hover {
														
 
															+        box-shadow: 0 2px 12px var(--next-color-dark-hover);
														
 
															+        transition: all ease 0.3s;
														
 
															+      }
														
 
															+
														
 
															+      &-icon {
														
 
															+        width: 70px;
														
 
															+        height: 70px;
														
 
															+        border-radius: 100%;
														
 
															+        flex-shrink: 1;
														
 
															+
														
 
															+        i {
														
 
															+          color: var(--el-text-color-placeholder);
														
 
															+        }
														
 
															+      }
														
 
															+
														
 
															+      &-title {
														
 
															+        font-size: 15px;
														
 
															+        font-weight: bold;
														
 
															+        height: 30px;
														
 
															+      }
														
 
															+    }
														
 
															+  }
														
 
															+
														
 
															+  .home-card-one {
														
 
															+    @for $i from 0 through 3 {
														
 
															+      .home-one-animation#{$i} {
														
 
															+        opacity: 0;
														
 
															+        animation-name: error-num;
														
 
															+        animation-duration: 0.5s;
														
 
															+        animation-fill-mode: forwards;
														
 
															+        animation-delay: calc($i/10) + s;
														
 
															+      }
														
 
															+    }
														
 
															+  }
														
 
															+
														
 
															+  .home-card-two,
														
 
															+  .home-card-three {
														
 
															+    .home-card-item {
														
 
															+      height: 400px;
														
 
															+      width: 100%;
														
 
															+      overflow: hidden;
														
 
															+
														
 
															+      .home-monitor {
														
 
															+        height: 100%;
														
 
															+
														
 
															+        .flex-warp-item {
														
 
															+          width: 25%;
														
 
															+          height: 111px;
														
 
															+          display: flex;
														
 
															+
														
 
															+          .flex-warp-item-box {
														
 
															+            margin: auto;
														
 
															+            text-align: center;
														
 
															+            color: var(--el-text-color-primary);
														
 
															+            display: flex;
														
 
															+            border-radius: 5px;
														
 
															+            background: var(--next-bg-color);
														
 
															+            cursor: pointer;
														
 
															+            transition: all 0.3s ease;
														
 
															+
														
 
															+            &:hover {
														
 
															+              background: var(--el-color-primary-light-9);
														
 
															+              transition: all 0.3s ease;
														
 
															+            }
														
 
															+          }
														
 
															+
														
 
															+          @for $i from 0 through $homeNavLengh {
														
 
															+            .home-animation#{$i} {
														
 
															+              opacity: 0;
														
 
															+              animation-name: error-num;
														
 
															+              animation-duration: 0.5s;
														
 
															+              animation-fill-mode: forwards;
														
 
															+              animation-delay: calc($i/10) + s;
														
 
															+            }
														
 
															+          }
														
 
															+        }
														
 
															+      }
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+.down {
														
 
															+  margin-top: 10px;
														
 
															+}
														
 
															+.l-indent {
														
 
															+  margin-left: 1px;
														
 
															+}
														
 
															+</style>
														
--- a/src/views/adManage/ad-overview/weekly/api.ts
+++ b/src/views/adManage/ad-overview/weekly/api.ts
@@ -0,0 +1,80 @@
 
															+import {request} from '/@/utils/service'
														
 
															+import {UserPageQuery, AddReq, DelReq, EditReq, InfoReq} from '@fast-crud/fast-crud'
														
 
															+import XEUtils from 'xe-utils'
														
 
															+
														
 
															+export const apiPrefix = '/api/ad_manage/summary/report/trend/'
														
 
															+
														
 
															+export function GetList(query: UserPageQuery) {
														
 
															+  return request({
														
 
															+    url: apiPrefix + 'weekly',
														
 
															+    method: 'get',
														
 
															+    params: query,
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function GetObj(id: any) {
														
 
															+  return request({
														
 
															+    url: apiPrefix + id + '/',
														
 
															+    method: 'get',
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function AddObj(obj: AddReq) {
														
 
															+  return request({
														
 
															+    url: apiPrefix,
														
 
															+    method: 'post',
														
 
															+    data: obj,
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function UpdateObj(obj: EditReq) {
														
 
															+  return request({
														
 
															+    url: apiPrefix + obj.id + '/',
														
 
															+    method: 'put',
														
 
															+    data: obj,
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function DelObj(id: DelReq) {
														
 
															+  return request({
														
 
															+    url: apiPrefix + id + '/',
														
 
															+    method: 'delete',
														
 
															+    data: {id},
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function getCardData(query: UserPageQuery) {
														
 
															+  return request({
														
 
															+    url: '/api/ad_manage/summary/report/total',
														
 
															+    method: 'GET',
														
 
															+    params: query,
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function getLineData(query: UserPageQuery) {
														
 
															+  query['dateRangeType'] = 'D'
														
 
															+  return request({
														
 
															+    url: apiPrefix + 'weekly',
														
 
															+    method: 'GET',
														
 
															+    params: query
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function getLineWeekData(query: UserPageQuery) {
														
 
															+  query['dateRangeType'] = 'W'
														
 
															+  return request({
														
 
															+    url: apiPrefix + 'hourly',
														
 
															+    method: 'GET',
														
 
															+    params: query
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function getLineMonthData(query: UserPageQuery) {
														
 
															+  query['dateRangeType'] = 'M'
														
 
															+  return request({
														
 
															+    url: apiPrefix + 'hourly',
														
 
															+    method: 'GET',
														
 
															+    params: query
														
 
															+  })
														
 
															+}
														
 
															+
														
--- a/src/views/adManage/ad-overview/weekly/crud.tsx
+++ b/src/views/adManage/ad-overview/weekly/crud.tsx
@@ -0,0 +1,397 @@
 
															+import * as api from './api'
														
 
															+import {AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery} from '@fast-crud/fast-crud'
														
 
															+import {inject} from 'vue'
														
 
															+import {BaseColumn} from '/@/views/adManage/utils/commonTabColumn.js'
														
 
															+import {parseQueryParams} from '/@/views/adManage/utils/tools.js'
														
 
															+import XEUtils from 'xe-utils'
														
 
															+
														
 
															+export const createCrudOptions = function ({crudExpose, context}: CreateCrudOptionsProps): CreateCrudOptionsRet {
														
 
															+  const pageRequest = async (query: UserPageQuery) => {
														
 
															+    const params = parseQueryParams(context.value)
														
 
															+    XEUtils.assign(query, params)
														
 
															+    return await api.GetList(query)
														
 
															+  }
														
 
															+  const editRequest = async ({form, row}: EditReq) => {
														
 
															+    form.id = row.id
														
 
															+    return await api.UpdateObj(form)
														
 
															+  }
														
 
															+  const delRequest = async ({row}: DelReq) => {
														
 
															+    return await api.DelObj(row.id)
														
 
															+  }
														
 
															+  const addRequest = async ({form}: AddReq) => {
														
 
															+    return await api.AddObj(form)
														
 
															+  }
														
 
															+
														
 
															+  //权限判定
														
 
															+  const hasPermissions = inject('$hasPermissions')
														
 
															+
														
 
															+  return {
														
 
															+    crudOptions: {
														
 
															+      table: {
														
 
															+        height: 800,
														
 
															+        showSummary: true,
														
 
															+        stripe: false,
														
 
															+        headerCellStyle: {
														
 
															+          backgroundColor: '#f6f7fa', // 直接设置背景颜色
														
 
															+          borderRight: 'none',
														
 
															+        },
														
 
															+        cellStyle:  {
														
 
															+          border: 'none',
														
 
															+          borderBottom: '0.5px solid #ddd'
														
 
															+        },
														
 
															+      },
														
 
															+      container: {
														
 
															+        fixedHeight: false
														
 
															+      },
														
 
															+      actionbar: {
														
 
															+        show: true,
														
 
															+        buttons: {
														
 
															+          add: {
														
 
															+            show: false
														
 
															+          },
														
 
															+        }
														
 
															+      },
														
 
															+      search: {
														
 
															+        show: false
														
 
															+      },
														
 
															+      toolbar: {
														
 
															+        buttons: {
														
 
															+          search: {
														
 
															+            show: true
														
 
															+          },
														
 
															+          compact: {
														
 
															+            show: false
														
 
															+          }
														
 
															+        }
														
 
															+      },
														
 
															+      request: {
														
 
															+        pageRequest,
														
 
															+        addRequest,
														
 
															+        editRequest,
														
 
															+        delRequest,
														
 
															+      },
														
 
															+      rowHandle: {
														
 
															+        show: false,
														
 
															+      },
														
 
															+      columns: {
														
 
															+        id: {
														
 
															+          title: 'ID',
														
 
															+          column: {
														
 
															+            show: false
														
 
															+          },
														
 
															+          form: {
														
 
															+            show: false
														
 
															+          }
														
 
															+        },
														
 
															+        Name: {
														
 
															+          title: '日期',
														
 
															+          column: {
														
 
															+            width: 130,
														
 
															+            align: 'left',
														
 
															+            fixed: 'left',
														
 
															+            // border: '0.5px solid #ddd',
														
 
															+            cellStyle: {
														
 
															+              border: '1px solid #ddd',
														
 
															+            }
														
 
															+          },
														
 
															+        },
														
 
															+        Spend: {
														
 
															+          title: '花费',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            width: 100,
														
 
															+            sortable: true,
														
 
															+            border: '0.5px solid #ddd',
														
 
															+
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top"
														
 
															+                                content="来自亚马逊广告API，亚马逊系统会在3天内将无效点击从统计数据中删除，因此过去3天内的花费可能会有所变化">
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>花费</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        TotalSales: {
														
 
															+          title: '销售额',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            width: 130,
														
 
															+            sortable: true,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="
														
 
															+                      Seller类型店铺：<br />
														
 
															+                      销售额，来自亚马逊广告API。<br />
														
 
															+                      在点击广告后的7天内（商品推广）、14天内（品牌推广）、浏览或点击广告后的14天内（展示型推广）售<br/>出的广告商品及库存中其他商品的销售额；<br />
														
 
															+                      亚马逊系统此项数据最多可能延迟12小时更新。因此，“今天”日期范围内的销售数据可能会延迟。<br />
														
 
															+                      付款失败的订单数量和72小时内取消的订单产生的销售额将从总销售额中删除。<br />
														
 
															+                      <br />
														
 
															+                      Vendor类型店铺：<br />
														
 
															+                      销售额，来自亚马逊广告API。<br />
														
 
															+                      在点击广告后的14天内（商品推广）、14天内（品牌推广）、浏览或点击广告后的14天内（展示型推广）售<br />出的广告商品及库存中其他商品的销售额；<br />
														
 
															+                      亚马逊系统此项数据最多可能延迟12小时更新。因此，“今天”日期范围内的销售数据可能会延迟。<br />
														
 
															+                      付款失败的订单数量和72小时内取消的订单产生的销售额将从总销售额中删除。" raw-content>
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>销售额</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        ACOS: {
														
 
															+          title: 'ACOS',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            width: 130,
														
 
															+            sortable: true,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="广告投入产出比，系统计算，广告花费/广告带来的销售额。">
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>ACOS</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        ROAS: {
														
 
															+          title: 'ROAS',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            width: 130,
														
 
															+            sortable: true,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="广告支出回报，系统计算，广告带来的销售额/广告花费。">
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>ROAS</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        CPC: {
														
 
															+          title: '点击成本',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            sortable: true,
														
 
															+            width: 130,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="单次点击成本，系统计算，花费/点击量">
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>点击成本</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        CPA: {
														
 
															+          title: '订单成本',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            sortable: true,
														
 
															+            width: 130,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="平均每笔订单的花费，系统计算，花费/广告订单量">
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>订单成本</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        Click: {
														
 
															+          title: '点击量',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            width: 130,
														
 
															+            sortable: true,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="来自亚马逊广告API，广告被点击的次数。亚马逊系统会在3天内将无效点击去除。">
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>点击量</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        CTR: {
														
 
															+          title: '点击率',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            width: 130,
														
 
															+            sortable: true,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="点击率，系统计算，点击量/曝光量。">
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>点击率</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        TotalPurchases: {
														
 
															+          title: '订单数',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            width: 130,
														
 
															+            sortable: true,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="
														
 
															+                      Seller类型店铺：<br />
														
 
															+                      订单数，来自亚马逊广告API。<br />
														
 
															+                      在点击广告后的7天内（商品推广）、14天内（品牌推广）、浏览或点击广告后的14天内（展示型推广）售<br />出的广告商品及库存中其他商品的订单数量；<br />
														
 
															+                      亚马逊系统此项数据最多可能延迟12小时更新。因此，“今天”日期范围内的销售数据可能会延迟。<br />
														
 
															+                      付款失败的订单数量和72小时内取消的订单数量将从订单总数中删除。<br />
														
 
															+                      <br />
														
 
															+                      Vendor类型店铺：<br />
														
 
															+                      订单数，来自亚马逊广告API。<br />
														
 
															+                      在点击广告后的14天内（商品推广）、14天内（品牌推广）、浏览或点击广告后的14天内（展示型推广）售<br />出的广告商品及库存中其他商品的订单数量；<br />
														
 
															+                      亚马逊系统此项数据最多可能延迟12小时更新。因此，“今天”日期范围内的销售数据可能会延迟。<br />
														
 
															+                      付款失败的订单数量和72小时内取消的订单数量将从订单总数中删除" raw-content>
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>订单数</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        TotalUnitOrdered: {
														
 
															+          title: '销量',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            width: 100,
														
 
															+            sortable: true,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="
														
 
															+                      Seller类型店铺：<br />
														
 
															+                      销售件数，来自亚马逊广告API。<br />
														
 
															+                      在点击广告后的7天内（商品推广）、14天内（品牌推广）、浏览或点击广告后的14天内（展示型推广）售<br />出的广告商品及库存中其他商品的件数；<br />
														
 
															+                      亚马逊系统此项数据最多可能延迟12小时更新。因此，“今天”日期范围内的销售数据可能会延迟。<br />
														
 
															+                      付款失败的订单和72小时内取消的订单产生的销售件数将从销量总数中删除。<br />
														
 
															+                      <br />
														
 
															+                      Vendor类型店铺：<br />
														
 
															+                      销售件数，来自亚马逊广告API。<br />
														
 
															+                      在点击广告后的14天内（商品推广）、14天内（品牌推广）、浏览或点击广告后的14天内（展示型推广）售<br />出的广告商品及库存中其他商品的件数；<br />
														
 
															+                      亚马逊系统此项数据最多可能延迟12小时更新。因此，“今天”日期范围内的销售数据可能会延迟。<br />
														
 
															+                      付款失败的订单和72小时内取消的订单产生的销售件数将从销量总数中删除。" raw-content>
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>销量</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        Impression: {
														
 
															+          title: '曝光量',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            width: 130,
														
 
															+            sortable: true,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="来自亚马逊广告API，广告被展示的次数。">
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>曝光量</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        PurchasesRate: {
														
 
															+          title: '转化率',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            width: 130,
														
 
															+            sortable: true,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="广告转化率，系统计算，广告订单量/点击量*100%，展示型推广vCPM成本类型的广告活动不予计算。">
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>转化率</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        CPM: {
														
 
															+          title: '千次曝光成本',
														
 
															+          column: {
														
 
															+            align: 'center',
														
 
															+            sortable: true,
														
 
															+            width: 150,
														
 
															+            renderHeader() {
														
 
															+              return (
														
 
															+                  <span>
														
 
															+                    <el-tooltip placement="top" content="点击率，系统计算，点击量/曝光量。">
														
 
															+                      <span>
														
 
															+                        <el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
														
 
															+                      </span>
														
 
															+                    </el-tooltip>
														
 
															+                    <span>千次曝光成本</span>
														
 
															+                  </span>
														
 
															+              )
														
 
															+            }
														
 
															+          }
														
 
															+        }
														
 
															+      }
														
 
															+    }
														
 
															+  }
														
 
															+}
														
--- a/src/views/adManage/ad-overview/weekly/index.vue
+++ b/src/views/adManage/ad-overview/weekly/index.vue
@@ -0,0 +1,131 @@
 
															+<template>
														
 
															+  <div class="overview-tabs">
														
 
															+    <DateRangePicker v-model="dateRange"></DateRangePicker>
														
 
															+    <el-select
														
 
															+        v-model="selectedPortfolios"
														
 
															+        placeholder="SP"
														
 
															+        style="width: 200px"
														
 
															+        collapse-tags
														
 
															+        collapse-tags-tooltip
														
 
															+        :max-collapse-tags="3"
														
 
															+    >
														
 
															+      <el-option v-for="info of portfolios" :label="info.label" :value="info.value" :disabled="info.disabled"></el-option>
														
 
															+    </el-select>
														
 
															+  </div>
														
 
															+  <fs-page class="fs-page-custom" style="margin-top: -11px">
														
 
															+    <fs-crud ref="crudRef" v-bind="crudBinding">
														
 
															+      <template #header-middle>
														
 
															+        <el-tabs v-model="tabActiveName" class="chart-tabs" type="border-card">
														
 
															+          <DataTendencyChart
														
 
															+              v-if="tabActiveName === 'dataTendency'"
														
 
															+              :query="queryParams"
														
 
															+              :fetchCard="getCardData"
														
 
															+              :fetchLine="getLineData"
														
 
															+              :fetch-line-month="getLineMonthData"
														
 
															+              :fetch-line-week="getLineWeekData">
														
 
															+          </DataTendencyChart>
														
 
															+        </el-tabs>
														
 
															+      </template>
														
 
															+      <template #cell_percentTimeInBudget="scope">
														
 
															+        <el-progress :percentage="scope.row.percentTimeInBudget > 0 ? scope.row.percentTimeInBudget * 100 : 0" />
														
 
															+      </template>
														
 
															+      <template #cell_campaignName="scope">
														
 
															+        <el-link type="primary" :underline="false" @click="jumpGroup(scope.row)">{{ scope.row.campaignName }}</el-link>
														
 
															+      </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>
														
 
															+    </fs-crud>
														
 
															+  </fs-page>
														
 
															+</template>
														
 
															+
														
 
															+<script lang="ts" setup>
														
 
															+import {onMounted, Ref, ref, watch} from 'vue'
														
 
															+import {FsPage, useFs} from '@fast-crud/fast-crud'
														
 
															+import {createCrudOptions} from './crud'
														
 
															+import {useShopInfo} from '/@/stores/shopInfo'
														
 
															+import {usePublicData} from '/@/stores/publicData'
														
 
															+import {storeToRefs} from 'pinia'
														
 
															+import {useRouter} from 'vue-router'
														
 
															+import DataTendencyChart from '/@/views/adManage/ad-overview/chartComponents/dataTendency.vue'
														
 
															+import {getCardData, getLineData, getLineMonthData, getLineWeekData} from './api'
														
 
															+import {BaseColumn} from '/@/views/adManage/utils/commonTabColumn.js'
														
 
															+import DataCompare from '/@/components/dataCompare/index.vue'
														
 
															+import DateRangePicker from '/@/components/DateRangePicker/index.vue'
														
 
															+
														
 
															+const selectedPortfolios = ref('sp')
														
 
															+const portfolios = [
														
 
															+  {
														
 
															+    value: 'sp/sb/sd',
														
 
															+    label: 'SP/SB/SD'
														
 
															+  },
														
 
															+  {
														
 
															+    value: 'sp',
														
 
															+    label: 'SP'
														
 
															+  },
														
 
															+  {
														
 
															+    value:'sb',
														
 
															+    label:'SB'
														
 
															+  },
														
 
															+  {
														
 
															+    value:'sd',
														
 
															+    label:'SD'
														
 
															+  },
														
 
															+  {
														
 
															+    value: 'dsp',
														
 
															+    label: 'DSP',
														
 
															+    disabled: true
														
 
															+  }
														
 
															+]
														
 
															+const tabActiveName = ref('dataTendency')
														
 
															+const shopInfo = useShopInfo()
														
 
															+const publicData = usePublicData()
														
 
															+const { dateRange } = storeToRefs(publicData)
														
 
															+const { profile } = storeToRefs(shopInfo)
														
 
															+const queryParams = ref({
														
 
															+  dateRange,
														
 
															+  profileId: profile.value.profile_id,
														
 
															+  campaignType: selectedPortfolios.value
														
 
															+})
														
 
															+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })
														
 
															+const router = useRouter()
														
 
															+const showCompare = ref(false)
														
 
															+
														
 
															+
														
 
															+onMounted(async () => {
														
 
															+  crudExpose.doRefresh()
														
 
															+})
														
 
															+const jumpGroup = (row: any) => {
														
 
															+  router.push({
														
 
															+    name: 'CampaignDetail',
														
 
															+    query: { campaignId: row.campaignId, tagsViewName: row.campaignName },
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+watch(queryParams, async () => {
														
 
															+  crudExpose.doRefresh()
														
 
															+}, { deep: true })
														
 
															+</script>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+.campare-switch {
														
 
															+  flex: none;
														
 
															+}
														
 
															+::v-deep(.el-table--border .el-table__footer-wrapper) {
														
 
															+  border: none;
														
 
															+}
														
 
															+::v-deep(.el-table .el-table__footer-wrapper .cell) {
														
 
															+  font-weight: 600;
														
 
															+}
														
 
															+</style>
														
--- a/src/views/adManage/portfolios/PortfoliosSelector.vue
+++ b/src/views/adManage/portfolios/PortfoliosSelector.vue
@@ -1,24 +0,0 @@
 
															-<template>
														
 
															-  <el-select v-model="portfolios" placeholder="广告组合">
														
 
															-    <el-options v-for="info in portfolios" :label="info.name" :value="info.portfolioId"></el-options>
														
 
															-  </el-select>
														
 
															-</template>
														
 
															-
														
 
															-<script lang="ts" setup>
														
 
															-import { ref, onBeforeMount, Ref } from 'vue'
														
 
															-import { GetList } from './api'
														
 
															-
														
 
															-defineOptions({
														
 
															-  name: 'PortfoliosSelector'
														
 
															-})
														
 
															-const portfolios:Ref<portfolios[]> = ref([])
														
 
															-onBeforeMount(async () => {
														
 
															-  const resp:APIResponseData = await GetList({ limit: 999 })
														
 
															-  portfolios.value = resp.data
														
 
															-})
														
 
															-
														
 
															-</script>
														
 
															-
														
 
															-<style scoped>
														
 
															-
														
 
															-</style>
														
--- a/src/views/adManage/portfolios/api.ts
+++ b/src/views/adManage/portfolios/api.ts
@@ -1,41 +1,80 @@
 
															-import { request } from '/@/utils/service';
														
 
															-import { AddReq, DelReq, EditReq, InfoReq, UserPageQuery } from '@fast-crud/fast-crud';
														
 
															+import { request } from '/@/utils/service'
														
 
															+import { AddReq, DelReq, EditReq, InfoReq, UserPageQuery } from '@fast-crud/fast-crud'
														
 
															-export const apiPrefix = '/api/ad_manage/portfolios/';
														
 
															+export const apiPrefix = '/api/ad_manage/portfolios/'
														
 
															 export function GetList(query: UserPageQuery) {
														
 
															-    return request({
														
 
															-        url: apiPrefix,
														
 
															-        method: 'get',
														
 
															-        params: query,
														
 
															-    })
														
 
															+	return request({
														
 
															+		url: apiPrefix,
														
 
															+		method: 'get',
														
 
															+		params: query,
														
 
															+	})
														
 
															+}
														
 
															+export function GetAllPortfolios() {
														
 
															+	return request({
														
 
															+		url: apiPrefix + 'select_list',
														
 
															+		method: 'get',
														
 
															+		params: { limit: 999 },
														
 
															+	})
														
 
															 }
														
 
															 export function GetObj(id: InfoReq) {
														
 
															-    return request({
														
 
															-        url: apiPrefix + id,
														
 
															-        method: 'get',
														
 
															-    });
														
 
															+	return request({
														
 
															+		url: apiPrefix + id,
														
 
															+		method: 'get',
														
 
															+	})
														
 
															 }
														
 
															 export function AddObj(obj: AddReq) {
														
 
															-    return request({
														
 
															-        url: apiPrefix,
														
 
															-        method: 'post',
														
 
															-        data: obj,
														
 
															-    });
														
 
															+	return request({
														
 
															+		url: apiPrefix,
														
 
															+		method: 'post',
														
 
															+		data: obj,
														
 
															+	})
														
 
															 }
														
 
															 export function UpdateObj(obj: EditReq) {
														
 
															-    return request({
														
 
															-        url: apiPrefix + obj.id + '/',
														
 
															-        method: 'put',
														
 
															-        data: obj,
														
 
															-    });
														
 
															+	return request({
														
 
															+		url: apiPrefix + obj.id + '/',
														
 
															+		method: 'put',
														
 
															+		data: obj,
														
 
															+	})
														
 
															 }
														
 
															 export function DelObj(id: DelReq) {
														
 
															-    return request({
														
 
															-        url: apiPrefix + id + '/',
														
 
															-        method: 'delete',
														
 
															-        data: { id },
														
 
															-    });
														
 
															+	return request({
														
 
															+		url: apiPrefix + id + '/',
														
 
															+		method: 'delete',
														
 
															+		data: { id },
														
 
															+	})
														
 
															+}
														
 
															+
														
 
															+export function getCardData(query: UserPageQuery) {
														
 
															+	return request({
														
 
															+		url: apiPrefix + 'report/amount',
														
 
															+		method: 'GET',
														
 
															+		params: query,
														
 
															+	})
														
 
															+}
														
 
															+
														
 
															+export function getLineData(query: UserPageQuery) {
														
 
															+	return request({
														
 
															+		url: apiPrefix + 'report/trend/daily',
														
 
															+		method: 'GET',
														
 
															+		params: query,
														
 
															+	})
														
 
															+}
														
 
															+
														
 
															+export function getLineWeekData(query: UserPageQuery) {
														
 
															+	return request({
														
 
															+		url: apiPrefix + 'report/trend/weekly',
														
 
															+		method: 'GET',
														
 
															+		params: query,
														
 
															+	})
														
 
															+}
														
 
															+
														
 
															+export function getLineMonthData(query: UserPageQuery) {
														
 
															+	return request({
														
 
															+		url: apiPrefix + 'report/trend/monthly',
														
 
															+		method: 'GET',
														
 
															+		params: query,
														
 
															+	})
														
 
															 }
														
--- a/src/views/adManage/portfolios/crud.tsx
+++ b/src/views/adManage/portfolios/crud.tsx
@@ -1,26 +1,25 @@
 
															-import * as api from './api';
														
 
															-import { dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
														
 
															-import { inject, nextTick, ref } from 'vue';
														
 
															-import { successMessage } from '/@/utils/message';
														
 
															-import { BaseColumn } from '/@/views/adManage/utils/commonTabColumn.js';
														
 
															+import * as api from './api'
														
 
															+import { dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud'
														
 
															+import { inject, nextTick, ref } from 'vue'
														
 
															+import { BaseColumn } from '/@/views/adManage/utils/commonTabColumn.js'
														
 
															 export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
														
 
															 	const pageRequest = async (query: UserPageQuery) => {
														
 
															-		return await api.GetList(query);
														
 
															-	};
														
 
															+		return await api.GetList(query)
														
 
															+	}
														
 
															 	const editRequest = async ({ form, row }: EditReq) => {
														
 
															-		form.id = row.id;
														
 
															-		return await api.UpdateObj(form);
														
 
															-	};
														
 
															+		form.id = row.id
														
 
															+		return await api.UpdateObj(form)
														
 
															+	}
														
 
															 	const delRequest = async ({ row }: DelReq) => {
														
 
															-		return await api.DelObj(row.id);
														
 
															-	};
														
 
															+		return await api.DelObj(row.id)
														
 
															+	}
														
 
															 	const addRequest = async ({ form }: AddReq) => {
														
 
															-		return await api.AddObj(form);
														
 
															-	};
														
 
															+		return await api.AddObj(form)
														
 
															+	}
														
 
															 	//权限判定
														
 
															-	const hasPermissions = inject('$hasPermissions');
														
 
															+	const hasPermissions = inject('$hasPermissions')
														
 
															 	return {
														
 
															 		crudOptions: {
														
@@ -28,8 +27,8 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 
															 				height: 800,
														
 
															 			},
														
 
															 			container: {
														
 
															-        fixedHeight: false
														
 
															-      },
														
 
															+				fixedHeight: false,
														
 
															+			},
														
 
															 			request: {
														
 
															 				pageRequest,
														
 
															 				addRequest,
														
@@ -46,13 +45,13 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 
															 					edit: {
														
 
															 						iconRight: 'Edit',
														
 
															 						type: 'text',
														
 
															-            text: null
														
 
															+						text: null,
														
 
															 						// show: hasPermissions('dictionary:Update'),
														
 
															 					},
														
 
															 					remove: {
														
 
															 						iconRight: 'Delete',
														
 
															 						type: 'text',
														
 
															-            text: null
														
 
															+						text: null,
														
 
															 						// show: hasPermissions('dictionary:Delete'),
														
 
															 					},
														
 
															 					// custom: {
														
@@ -75,6 +74,23 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 
															 					// },
														
 
															 				},
														
 
															 			},
														
 
															+			actionbar: {
														
 
															+				buttons: { 
														
 
															+					add: {
														
 
															+						text: '新建广告组合'
														
 
															+					}
														
 
															+				}
														
 
															+			},
														
 
															+			toolbar: {
														
 
															+				buttons: {
														
 
															+					search: {
														
 
															+						show: true,
														
 
															+					},
														
 
															+					compact: {
														
 
															+						show: false,
														
 
															+					},
														
 
															+				},
														
 
															+			},
														
 
															 			columns: {
														
 
															 				// _index: {
														
 
															 				// 	title: '序号',
														
@@ -93,36 +109,36 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 
															 				// 		},
														
 
															 				// 	},
														
 
															 				// },
														
 
															-        name: {
														
 
															-          title: '广告组合',
														
 
															-          column: {
														
 
															-            width: '150px'
														
 
															-          },
														
 
															+				name: {
														
 
															+					title: '广告组合',
														
 
															+					column: {
														
 
															+						width: '150px',
														
 
															+					},
														
 
															 					search: {
														
 
															 						show: true,
														
 
															 						component: {
														
 
															 							props: {
														
 
															-								clearable: true
														
 
															-							}
														
 
															-						}
														
 
															+								clearable: true,
														
 
															+							},
														
 
															+						},
														
 
															 					},
														
 
															 					form: {
														
 
															-						rules: [{required: true, message:'必填项'}]
														
 
															-					}
														
 
															-        },
														
 
															-        state: {
														
 
															-          title: '状态',
														
 
															-          type: 'dict-select',
														
 
															-          dict: dict({
														
 
															-            data:[
														
 
															-              {value:'enabled', label:'投放中'},
														
 
															-              {value:'disable', label:'禁用'},
														
 
															-            ] 
														
 
															-          }),
														
 
															+						rules: [{ required: true, message: '必填项' }],
														
 
															+					},
														
 
															+				},
														
 
															+				state: {
														
 
															+					title: '状态',
														
 
															+					type: 'dict-select',
														
 
															+					dict: dict({
														
 
															+						data: [
														
 
															+							{ value: 'enabled', label: '投放中' },
														
 
															+							{ value: 'disable', label: '禁用' },
														
 
															+						],
														
 
															+					}),
														
 
															 					form: {
														
 
															-						show: false
														
 
															-					}
														
 
															-        },
														
 
															+						show: false,
														
 
															+					},
														
 
															+				},
														
 
															 				budget_policy: {
														
 
															 					title: '预算类型',
														
 
															 					type: 'dict-select',
														
@@ -131,49 +147,49 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 
															 							{ value: '', label: '无预算上限' },
														
 
															 							{ value: 'dateRange', label: '日期范围' },
														
 
															 							{ value: 'monthlyRecurring', label: '按月' },
														
 
															-						]
														
 
															+						],
														
 
															 					}),
														
 
															 					form: {
														
 
															-						value: ''
														
 
															-					}
														
 
															+						value: '',
														
 
															+					},
														
 
															 				},
														
 
															-        budget_startDate: {
														
 
															-          title: '开始日期',
														
 
															+				budget_startDate: {
														
 
															+					title: '开始日期',
														
 
															 					type: 'date',
														
 
															 					form: {
														
 
															-						show: compute(context => context.form.budget_policy === "dateRange"),
														
 
															-						rules: [{required: true, message:'必填项'}]
														
 
															-					}
														
 
															-        },
														
 
															-        budget_endDate: {
														
 
															-          title: '结束日期',
														
 
															+						show: compute((context) => context.form.budget_policy === 'dateRange'),
														
 
															+						rules: [{ required: true, message: '必填项' }],
														
 
															+					},
														
 
															+				},
														
 
															+				budget_endDate: {
														
 
															+					title: '结束日期',
														
 
															 					type: 'date',
														
 
															 					form: {
														
 
															-						show: compute(context => context.form.budget_policy !== '')
														
 
															-					}
														
 
															-        },
														
 
															-        budget_amount: {
														
 
															-          title: '预算',
														
 
															+						show: compute((context) => context.form.budget_policy !== ''),
														
 
															+					},
														
 
															+				},
														
 
															+				budget_amount: {
														
 
															+					title: '预算',
														
 
															 					type: 'number',
														
 
															 					form: {
														
 
															 						value: 0,
														
 
															-						show: compute(context => context.form.budget_policy !== ''),
														
 
															-						rules: [{required: true, message:'必填项'}],
														
 
															+						show: compute((context) => context.form.budget_policy !== ''),
														
 
															+						rules: [{ required: true, message: '必填项' }],
														
 
															 						component: {
														
 
															 							min: 0,
														
 
															 							precision: 2,
														
 
															-							controlsPosition: "right"
														
 
															-						}
														
 
															-					}
														
 
															-        },
														
 
															-        inBudget: {
														
 
															-          title: '是否预算内',
														
 
															+							controlsPosition: 'right',
														
 
															+						},
														
 
															+					},
														
 
															+				},
														
 
															+				inBudget: {
														
 
															+					title: '是否预算内',
														
 
															 					form: {
														
 
															-						show: false
														
 
															-					}
														
 
															-        },
														
 
															-        ...BaseColumn
														
 
															+						show: false,
														
 
															+					},
														
 
															+				},
														
 
															+				...BaseColumn,
														
 
															 			},
														
 
															 		},
														
 
															-	};
														
 
															-};
														
 
															+	}
														
 
															+}
														
--- a/src/views/adManage/portfolios/index.vue
+++ b/src/views/adManage/portfolios/index.vue
@@ -1,12 +1,28 @@
 
															 <template>
														
 
															 	<div class="asj-container">
														
 
															-		<div class="public-search">
														
 
															-			<DateRangePicker v-model="dateRange" timezone="America/Los_Angeles" ></DateRangePicker>
														
 
															-		</div>
														
 
															 		<fs-page class="fs-page-custom">
														
 
															 			<fs-crud ref="crudRef" v-bind="crudBinding">
														
 
															+				<template #search-left>
														
 
															+					<DateRangePicker v-model="dateRange" timezone="America/Los_Angeles"></DateRangePicker>
														
 
															+				</template>
														
 
															 				<template #header-middle>
														
 
															-					<el-card style="height: 500px;">此处用于显示可视化图形</el-card>
														
 
															+					<el-tabs v-model="tabActiveName" class="chart-tabs" type="border-card">
														
 
															+						<el-tab-pane label="数据趋势" name="dataTendency">
														
 
															+							<DataTendencyChart 
														
 
															+								v-if="tabActiveName === 'dataTendency'" 
														
 
															+								:fetch-card="getCardData" 
														
 
															+								:fetch-line="getLineData"
														
 
															+								:fetch-line-month="getLineMonthData"
														
 
															+								:fetch-line-week="getLineWeekData">
														
 
															+							</DataTendencyChart>
														
 
															+						</el-tab-pane>
														
 
															+						<el-tab-pane label="广告结构" name="adStruct" >
														
 
															+							<!-- <AdStructChart v-if="tabActiveName === 'adStruct'"/> -->
														
 
															+						</el-tab-pane>
														
 
															+						<el-tab-pane label="散点视图" name="scatterView">
														
 
															+							<div v-if="tabActiveName === 'scatterView'">散点视图</div>
														
 
															+						</el-tab-pane>
														
 
															+					</el-tabs>
														
 
															 				</template>
														
 
															 			</fs-crud>
														
 
															 		</fs-page>
														
@@ -18,7 +34,16 @@ import { ref, onMounted } from 'vue';
 
															 import { useFs } from '@fast-crud/fast-crud';
														
 
															 import { createCrudOptions } from './crud';
														
 
															 import DateRangePicker from '/@/components/DateRangePicker/index.vue'
														
 
															+import DataTendencyChart from '/@/views/adManage/sp/chartComponents/dataTendency.vue'
														
 
															+import { getCardData, getLineData, getLineMonthData, getLineWeekData } from './api'
														
 
															+import { useShopInfo } from '/@/stores/shopInfo'
														
 
															+import { usePublicData } from '/@/stores/publicData'
														
 
															+import { storeToRefs } from 'pinia'
														
 
															+const shopInfo = useShopInfo()
														
 
															+const publicData = usePublicData()
														
 
															+const { dateRange } = storeToRefs(publicData)
														
 
															+const tabActiveName = ref("dataTendency")
														
 
															 const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: {} });
														
 
															 // 页面打开后获取列表数据
														
@@ -26,7 +51,7 @@ onMounted(() => {
 
															 	crudExpose.doRefresh();
														
 
															 });
														
 
															-const dateRange = ref([])
														
 
															+
														
 
															 </script>
														
--- a/src/views/adManage/sb/campaigns/CreateCampaigns/adFormat/CommoditySet.vue
+++ b/src/views/adManage/sb/campaigns/CreateCampaigns/adFormat/CommoditySet.vue
@@ -1,25 +0,0 @@
 
															-<template>
														
 
															-    <div class="container" style="margin-top: 20px">
														
 
															-        <p style="font-weight: bold">需要帮助创建图片或品牌旗舰店？</p>
														
 
															-        <p style="color: dodgerblue">深入了解广告创意服务（链接未完成）</p>
														
 
															-        <div>
														
 
															-            <el-radio-group v-model="radio1">
														
 
															-                <el-radio label="1" size="large" border>
														
 
															-                    Option A
														
 
															-                </el-radio>
														
 
															-                <el-radio label="2" size="large" border>Option B</el-radio>
														
 
															-            </el-radio-group>
														
 
															-        </div>
														
 
															-    </div>
														
 
															-</template>
														
 
															-
														
 
															-<script lang="ts" setup>
														
 
															-
														
 
															-import { ref } from 'vue'
														
 
															-const radio1 = ref('1')
														
 
															-
														
 
															-</script>
														
 
															-
														
 
															-<style scoped>
														
 
															-
														
 
															-</style>
														
--- a/src/views/adManage/sb/campaigns/CreateCampaigns/api/index.ts
+++ b/src/views/adManage/sb/campaigns/CreateCampaigns/api/index.ts
@@ -0,0 +1,160 @@
 
															+import { request } from '/@/utils/service'
														
 
															+
														
 
															+
														
 
															+export function getAdMixSelect() {
														
 
															+  return request({
														
 
															+      url: '/api/ad_manage/portfolios/select_list',
														
 
															+      method: 'GET',
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function postCampaignsData(filteredRequestData) {
														
 
															+  return request({
														
 
															+      url: '/api/ad_manage/sbcampaigns/create/',
														
 
															+      method: 'post',
														
 
															+      data: filteredRequestData,
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function postGroupData(filteredRequestData) {
														
 
															+  return request({
														
 
															+      url: '/api/ad_manage/sbgroups/create/',
														
 
															+      method: 'post',
														
 
															+      data: filteredRequestData,
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function postNegativeWordData(filteredRequestData) {
														
 
															+  return request({
														
 
															+      url: '/api/ad_manage/sptargets/add/negative/keywords/',
														
 
															+      method: 'post',
														
 
															+      data: filteredRequestData,
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function getAssets(query) {
														
 
															+  return request({
														
 
															+      url: '/api/ad_manage/sb/assets/',
														
 
															+      method: 'get',
														
 
															+      params: query
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function getLifeStyleAssets(query) {
														
 
															+  return request({
														
 
															+      url: '/api/ad_manage/sb/assets/',
														
 
															+      method: 'get',
														
 
															+      params: query
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function getBrands(query) {
														
 
															+  return request({
														
 
															+    url: '/api/ad_manage/sb/getbrands/',
														
 
															+      method: 'get',
														
 
															+      params: query
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function getStoreurl(query) {
														
 
															+  return request({
														
 
															+    url: '/api/ad_manage/sb/storeurl/',
														
 
															+      method: 'get',
														
 
															+      params: query
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function getPageAsins(query) {
														
 
															+  return request({
														
 
															+    url: '/api/ad_manage/sb/getpageasins/',
														
 
															+      method: 'get',
														
 
															+      params: query
														
 
															+  })
														
 
															+}
														
 
															+export function getCommodityCard(query) {
														
 
															+  return request({
														
 
															+    url: '/api/sellers/listings/all/',
														
 
															+      method: 'get',
														
 
															+      params: query
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function getVideoAssets(query) {
														
 
															+  return request({
														
 
															+      url: '/api/ad_manage/sb/assets/',
														
 
															+      method: 'get',
														
 
															+      params: query
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function videoDetailCreate(obj) {
														
 
															+  return request({
														
 
															+      url: '/api/ad_manage/sbads/video/create/',
														
 
															+      method: 'post',
														
 
															+      data: obj,
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function uploadFile(obj) {
														
 
															+  return request({
														
 
															+      url: '/api/ad_manage/assets/upload/',
														
 
															+      method: 'post',
														
 
															+      data: obj,
														
 
															+      headers: {
														
 
															+        'Content-Type': 'multipart/form-data'
														
 
															+      }
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function checkAsset(obj) {
														
 
															+  return request({
														
 
															+      url: '/api/ad_manage/assets/checkasset/',
														
 
															+      method: 'post',
														
 
															+      data: obj,
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function getDefaultSpotlightAsin(query) {
														
 
															+  return request({
														
 
															+      url: '/api/ad_manage/sb/defaultspotlightasin/',
														
 
															+      method: 'get',
														
 
															+      params: query
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+export function getSellerInStock(obj) {
														
 
															+  return request({
														
 
															+      url: '/api/sellers/listings/sellerinstock/',
														
 
															+      method: 'post',
														
 
															+      data: obj
														
 
															+  })
														
 
															+}
														
 
															+export function postStoreSpotlight(obj) {
														
 
															+  return request({
														
 
															+      url: '/api/ad_manage/sbads/storespotlight/create/',
														
 
															+      method: 'post',
														
 
															+      data: obj
														
 
															+  })
														
 
															+}
														
 
															+export function postBrandVideo(obj) {
														
 
															+  return request({
														
 
															+      url: '/api/ad_manage/sbads/brandvideo/create/',
														
 
															+      method: 'post',
														
 
															+      data: obj
														
 
															+  })
														
 
															+}
														
 
															+export function postVideo(obj) {
														
 
															+  return request({
														
 
															+      url: '/api/ad_manage/sbads/video/create/',
														
 
															+      method: 'post',
														
 
															+      data: obj
														
 
															+  })
														
 
															+}
														
 
															+export function postProductset(obj) {
														
 
															+  return request({
														
 
															+      url: '/api/ad_manage/sbads/productcollection/create/',
														
 
															+      method: 'post',
														
 
															+      data: obj
														
 
															+  })
														
 
															+}
														
 
															+
														
--- a/src/views/adManage/sb/campaigns/CreateCampaigns/component/AdCampaign.vue
+++ b/src/views/adManage/sb/campaigns/CreateCampaigns/component/AdCampaign.vue
@@ -0,0 +1,335 @@
 
															+<template>
														
 
															+  <div class="customize-container">
														
 
															+    <el-card body-style="padding: 20px 80px 0 80px;" v-loading="campaignLoading">
														
 
															+      <div style="font-weight: 700; padding-bottom: 18px">
														
 
															+        <span style="color: #306cd7; font-size: 26px">|</span>
														
 
															+        <span style="font-size: 18px; padding-left: 5px">设置</span>
														
 
															+      </div>
														
 
															+      <el-form
														
 
															+        ref="campaignRuleFormRef"
														
 
															+        :model="campaignRuleForm"
														
 
															+        :rules="campaignRules"
														
 
															+        label-position="top"
														
 
															+        label-width="120px"
														
 
															+        class="demo-ruleForm"
														
 
															+        :size="formSize"
														
 
															+        status-icon>
														
 
															+        <div class="flex-between">
														
 
															+          <el-form-item label="广告活动名称" prop="campaignName" style="width: 48%">
														
 
															+            <el-input v-model="campaignRuleForm.campaignName" placeholder="请输入广告活动名称" />
														
 
															+          </el-form-item>
														
 
															+          <el-form-item label="广告组合" prop="adMix" style="width: 48%">
														
 
															+            <el-select v-model="campaignRuleForm.adMix" placeholder="请选择" style="width: 100%">
														
 
															+              <el-option v-for="item in adMixOptions" :key="item.value" :label="item.label" :value="item.value" />
														
 
															+            </el-select>
														
 
															+          </el-form-item>
														
 
															+        </div>
														
 
															+        <div class="flex-between">
														
 
															+          <div class="flex-between" style="width: 48%">
														
 
															+            <el-form-item label="开始时间" prop="startDate" style="width: 49%">
														
 
															+              <el-date-picker
														
 
															+                v-model="campaignRuleForm.startDate"
														
 
															+                type="date"
														
 
															+                label="Pick a date"
														
 
															+                placeholder="开始时间"
														
 
															+                format="YYYY-MM-DD"
														
 
															+                value-format="YYYY-MM-DD"
														
 
															+                style="width: 100%" />
														
 
															+            </el-form-item>
														
 
															+
														
 
															+            <el-form-item label="结束时间" prop="endDate" style="width: 49%">
														
 
															+              <el-date-picker
														
 
															+                v-model="campaignRuleForm.endDate"
														
 
															+                type="date"
														
 
															+                label="Pick a date"
														
 
															+                placeholder="开始时间"
														
 
															+                format="YYYY-MM-DD"
														
 
															+                value-format="YYYY-MM-DD"
														
 
															+                style="width: 100%" />
														
 
															+            </el-form-item>
														
 
															+          </div>
														
 
															+          <div class="flex-between" style="width: 48%">
														
 
															+            <el-form-item label="预算" required prop="budget" style="width: 65%">
														
 
															+              <el-input v-model="campaignRuleForm.budget" minlength="1" maxlength="7" placeholder="请输入" style="width: 100%">
														
 
															+                <template #prepend>$</template>
														
 
															+              </el-input>
														
 
															+            </el-form-item>
														
 
															+            <el-form-item label="频率" prop="frequency" style="width: 34%">
														
 
															+              <el-select v-model="campaignRuleForm.frequency" placeholder="请选择" style="width: 100%">
														
 
															+                <el-option v-for="item in frequencyOptions" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" />
														
 
															+              </el-select>
														
 
															+            </el-form-item>
														
 
															+          </div>
														
 
															+        </div>
														
 
															+        <el-form-item label="品牌" prop="brand" required style="width: 48%">
														
 
															+          <el-select v-model="campaignRuleForm.brand" placeholder="请选择" style="width: 100%">
														
 
															+            <el-option v-for="item in brandOptions" :key="item.brandId" :label="item.brandRegistryName" :value="item.brandEntityId" />
														
 
															+          </el-select>
														
 
															+        </el-form-item>
														
 
															+        <div style="font-weight: 700; padding-bottom: 18px">
														
 
															+          <span style="color: #306cd7; font-size: 26px">|</span>
														
 
															+          <span style="font-size: 18px; padding-left: 5px">竞价</span>
														
 
															+        </div>
														
 
															+        <el-form-item label="自动竞价" style="margin-bottom: -13px">
														
 
															+          <el-form-item>
														
 
															+            <el-switch v-model="campaignRuleForm.isBid" />
														
 
															+            <span style="margin-left: 10px; color: #88909b">允许亚马逊自动优化搜索结果首页以外的广告位竞价</span>
														
 
															+          </el-form-item>
														
 
															+        </el-form-item>
														
 
															+        <div style="width: 55%" v-if="campaignRuleForm.isBid == false">
														
 
															+          <el-card shadow="never" body-style="padding: 10px 10px 5px 10px;">
														
 
															+            <div style="margin-bottom: 10px; font-weight: 500">
														
 
															+              <span style="color:#f56c6c;margin-right: 4px;">*</span>
														
 
															+              展示位置出价调整
														
 
															+            </div>
														
 
															+            <div style="display: flex; align-items: center">
														
 
															+              <div class="left">
														
 
															+                <div class="title">商品页面</div>
														
 
															+                <div class="tip">产品详情页面为顾客提供在亚马逊所售卖商品的详情信息</div>
														
 
															+              </div>
														
 
															+              <el-form-item prop="commodityPage" style="margin-bottom: 0px !important; width: 37%;">
														
 
															+                <el-input v-model="campaignRuleForm.commodityPage" maxlength="3" placeholder="-99 ~ 900">
														
 
															+                  <template #append>%</template>
														
 
															+                </el-input>
														
 
															+              </el-form-item>
														
 
															+            </div>
														
 
															+            <div style="display: flex; align-items: center; margin-top: 10px">
														
 
															+              <div class="left">
														
 
															+                <div class="title">搜索结果顶部(首页)</div>
														
 
															+                <div class="tip">亚马逊首页 http://www.amazon.com</div>
														
 
															+              </div>
														
 
															+              <el-form-item prop="firstPage" style="margin-bottom: 0px !important; width: 37%">
														
 
															+                <el-input v-model="campaignRuleForm.firstPage" maxlength="3" placeholder="-99 ~ 900" style="width: 100%">
														
 
															+                  <template #append>%</template>
														
 
															+                </el-input>
														
 
															+              </el-form-item>
														
 
															+            </div>
														
 
															+            <div style="display: flex; align-items: center; margin-top: 10px">
														
 
															+              <div class="left">
														
 
															+                <div class="title">搜索结果的其余位置</div>
														
 
															+                <div class="tip">其他位置集合, 例如搜索页</div>
														
 
															+              </div>
														
 
															+              <el-form-item prop="otherPlace" style="margin-bottom: 0px !important; width: 37%">
														
 
															+                <el-input v-model="campaignRuleForm.otherPlace" maxlength="3" placeholder="-99 ~ 900">
														
 
															+                  <template #append>%</template>
														
 
															+                </el-input>
														
 
															+              </el-form-item>
														
 
															+            </div>
														
 
															+            <div style="color: #8d9095; padding-left: 60%; margin-top: 10px">示例: $5.00 竞价降低 40% 将变为 $3.00</div>
														
 
															+          </el-card>
														
 
															+        </div>
														
 
															+        <el-form-item style="margin: 20px 0 -10px 48%">
														
 
															+          <el-button type="primary" plain @click="submitCampaignForm(campaignRuleFormRef)">保存</el-button>
														
 
															+        </el-form-item>
														
 
															+      </el-form>
														
 
															+    </el-card>
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<script lang="ts" setup>
														
 
															+import type { FormInstance, FormRules } from 'element-plus'
														
 
															+import { ElMessage } from 'element-plus'
														
 
															+import { storeToRefs } from 'pinia'
														
 
															+import { defineEmits, onMounted, reactive, ref, watch } from 'vue'
														
 
															+import { getAdMixSelect, getBrands, postCampaignsData } from '../api/index'
														
 
															+import { useShopInfo } from '/@/stores/shopInfo'
														
 
															+import emitter from '/@/utils/emitter'
														
 
															+
														
 
															+const shopInfo = useShopInfo()
														
 
															+const { profile } = storeToRefs(shopInfo)
														
 
															+
														
 
															+const formSize = ref('default')
														
 
															+const campaignRuleFormRef = ref<FormInstance>()
														
 
															+interface campaignRuleForm {
														
 
															+  campaignName: string
														
 
															+  adMix: string
														
 
															+  startDate: string
														
 
															+  endDate: string
														
 
															+  budget: string
														
 
															+  frequency: string
														
 
															+  brand: string
														
 
															+  isBid: boolean
														
 
															+  commodityPage: string
														
 
															+  otherPlace: string
														
 
															+  firstPage: string
														
 
															+}
														
 
															+const campaignRuleForm = reactive<campaignRuleForm>({
														
 
															+  campaignName: '',
														
 
															+  adMix: '',
														
 
															+  startDate: '',
														
 
															+  endDate: '',
														
 
															+  budget: '',
														
 
															+  frequency: 'DAILY',
														
 
															+  brand: '',
														
 
															+  isBid: false,
														
 
															+  commodityPage: '',
														
 
															+  otherPlace: '',
														
 
															+  firstPage: '',
														
 
															+})
														
 
															+const campaignRules = reactive<FormRules<campaignRuleForm>>({
														
 
															+  campaignName: [{ required: true, message: '请输入广告活动', trigger: 'blur' }],
														
 
															+  startDate: [{ type: 'date', required: true, message: '请选择时间', trigger: 'blur' }],
														
 
															+  budget: [
														
 
															+    { required: true, message: '请输入预算', trigger: 'blur' },
														
 
															+    { pattern: /^(?:[1-9]\d{0,5}|1000000)(?:\.\d{1,2})?$/, message: '预算必须是1到1000000之间的数字，小数点后最多两位', trigger: 'blur' },
														
 
															+  ],
														
 
															+  commodityPage: [
														
 
															+    { required: true, message: '必填', trigger: 'blur' },
														
 
															+    { pattern: /^-?(99|[1-8]?[0-9]?[0-9])$/, message: '请输入-99到900之间的数字', trigger: 'blur' },
														
 
															+  ],
														
 
															+  otherPlace: [
														
 
															+    { required: true, message: '必填', trigger: 'blur' },
														
 
															+    { pattern: /^-?(99|[1-8]?[0-9]?[0-9])$/, message: '请输入-99到900之间的数字', trigger: 'blur' },
														
 
															+  ],
														
 
															+  firstPage: [
														
 
															+    { required: true, message: '必填', trigger: 'blur' },
														
 
															+    { pattern: /^-?(99|[1-8]?[0-9]?[0-9])$/, message: '请输入-99到900之间的数字', trigger: 'blur' },
														
 
															+  ],
														
 
															+})
														
 
															+const frequencyOptions = [
														
 
															+  {
														
 
															+    value: 'DAILY',
														
 
															+    label: '每日',
														
 
															+  },
														
 
															+  {
														
 
															+    value: 'lifeCycle',
														
 
															+    label: '生命周期',
														
 
															+    disabled: true,
														
 
															+  },
														
 
															+]
														
 
															+const brandOptions = ref([])
														
 
															+
														
 
															+const submitCampaignForm = async (formEl: FormInstance | undefined) => {
														
 
															+  if (!formEl) return
														
 
															+  await formEl.validate((valid, fields) => {
														
 
															+    if (valid) {
														
 
															+      console.log('submit!')
														
 
															+      createCampaigns()
														
 
															+    } else {
														
 
															+      console.log('error submit!', fields)
														
 
															+    }
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+async function getBrandOption() {
														
 
															+  const response = await getBrands({ profile_id: profile.value.profile_id })
														
 
															+  brandOptions.value = response.data
														
 
															+}
														
 
															+
														
 
															+const adMixOptions = ref([])
														
 
															+async function getAdMix() {
														
 
															+  try {
														
 
															+    const response = await getAdMixSelect()
														
 
															+    adMixOptions.value = response.data.map((option) => {
														
 
															+      return {
														
 
															+        value: option.portfolioId,
														
 
															+        label: option.name,
														
 
															+      }
														
 
															+    })
														
 
															+  } catch (error) {
														
 
															+    console.error('请求失败：', error)
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+const campaignLoading = ref(false)
														
 
															+const prevCampaignId = ref('')
														
 
															+const prevCampaignName = ref('')
														
 
															+const respCampaignId = ref('')
														
 
															+const respCampaignName = ref('')
														
 
															+
														
 
															+async function createCampaigns() {
														
 
															+  campaignLoading.value = true
														
 
															+
														
 
															+  // 构建基础请求体
														
 
															+  const campaignData = {
														
 
															+    profile_id: profile.value.profile_id,
														
 
															+    budget: campaignRuleForm.budget,
														
 
															+    budgetType: campaignRuleForm.frequency,
														
 
															+    name: campaignRuleForm.campaignName,
														
 
															+    brandEntityId: campaignRuleForm.brand,
														
 
															+    bidOptimization: campaignRuleForm.isBid,
														
 
															+    bidOptimizationStrategy: '',
														
 
															+    startDate: campaignRuleForm.startDate,
														
 
															+    endDate: campaignRuleForm.endDate,
														
 
															+    smartDefault: 'MANUAL',
														
 
															+    costType: 'CPC',
														
 
															+    goal: 'PAGE_VISIT',
														
 
															+    state: 'PAUSED',
														
 
															+    ...(campaignRuleForm.firstPage && { h_percentage: campaignRuleForm.firstPage }),
														
 
															+    ...(campaignRuleForm.commodityPage && { d_percentage: campaignRuleForm.commodityPage }),
														
 
															+    ...(campaignRuleForm.otherPlace && { o_percentage: campaignRuleForm.otherPlace }),
														
 
															+    ...(campaignRuleForm.adMix && { portfolioId: campaignRuleForm.adMix }),
														
 
															+  }
														
 
															+
														
 
															+  try {
														
 
															+    const response = await postCampaignsData(campaignData)
														
 
															+
														
 
															+    respCampaignId.value = response.data.campaignId
														
 
															+    respCampaignName.value = response.data.campaignName
														
 
															+
														
 
															+    if (response.data.campaignId) {
														
 
															+      // 如果创建成功，更新 respCampaignId 和 respCampaignName，同时保留上一次成功的值
														
 
															+      prevCampaignId.value = respCampaignId.value
														
 
															+      prevCampaignName.value = respCampaignName.value
														
 
															+      respCampaignId.value = response.data.campaignId
														
 
															+      respCampaignName.value = response.data.campaignName
														
 
															+      ElMessage({ message: '广告活动创建成功', type: 'success' })
														
 
															+    } else {
														
 
															+      // 如果创建失败，检查是否有上一次成功的值，如果有就保留
														
 
															+      if (prevCampaignId.value) {
														
 
															+        respCampaignId.value = prevCampaignId.value
														
 
															+        respCampaignName.value = prevCampaignName.value
														
 
															+      }
														
 
															+      ElMessage.error('广告活动创建失败!')
														
 
															+    }
														
 
															+  } catch (error) {
														
 
															+    console.error('请求失败：', error)
														
 
															+  } finally {
														
 
															+    campaignLoading.value = false
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+const emit = defineEmits(['update-campaign'])
														
 
															+
														
 
															+watch([respCampaignId, respCampaignName], () => {
														
 
															+  if (respCampaignId.value && respCampaignName.value) {
														
 
															+    emit('update-campaign', {
														
 
															+      id: respCampaignId.value,
														
 
															+      name: respCampaignName.value,
														
 
															+    })
														
 
															+  }
														
 
															+})
														
 
															+
														
 
															+watch(
														
 
															+  () => campaignRuleForm.brand,
														
 
															+  () => {
														
 
															+    emitter.emit('brandEntityId', brandOptions.value)
														
 
															+  }
														
 
															+)
														
 
															+
														
 
															+onMounted(() => {
														
 
															+  getAdMix()
														
 
															+  getBrandOption()
														
 
															+})
														
 
															+</script>
														
 
															+
														
 
															+<style scoped>
														
 
															+.flex-between {
														
 
															+  display: flex;
														
 
															+  justify-content: space-between;
														
 
															+}
														
 
															+.left {
														
 
															+  margin-right: 12px;
														
 
															+  width: 60%;
														
 
															+}
														
 
															+.title {
														
 
															+  font-size: 14px;
														
 
															+  line-height: 20px;
														
 
															+  color: #1d2129;
														
 
															+}
														
 
															+.tip {
														
 
															+  font-size: 14px;
														
 
															+  line-height: 20px;
														
 
															+  color: #4e5969;
														
 
															+}
														
 
															+</style>
														
--- a/src/views/adManage/sb/campaigns/CreateCampaigns/component/AdFormat.vue
+++ b/src/views/adManage/sb/campaigns/CreateCampaigns/component/AdFormat.vue
@@ -0,0 +1,366 @@
 
															+<template>
														
 
															+  <div class="customize-container">
														
 
															+    <el-card body-style="padding: 20px 80px 20px 80px;">
														
 
															+      <div style="font-weight: 700; padding-bottom: 18px">
														
 
															+        <span style="color: #306cd7; font-size: 26px">|</span>
														
 
															+        <span style="font-size: 18px; padding-left: 5px">广告格式</span>
														
 
															+      </div>
														
 
															+      <div class="ad-format-radios">
														
 
															+        <el-radio-group v-model="adFormatRadio" style="display: flex; justify-content: space-between">
														
 
															+          <el-radio class="ad-format-radio" label="productSet" border>
														
 
															+            <div style="text-align: center; color: #333333">商品集</div>
														
 
															+            <img src="src/views/adManage/sb/campaigns/CreateCampaigns/img/img_1.jpg" class="img-style">
														
 
															+            <!-- <div style="background-color: #1e2128; width: 200px; height: 200px; margin: 0 auto"></div> -->
														
 
															+            <div style="padding: 5px 0 10px 0; color: #333333; font-weight: 400">使用图片将流量引导至商品详情页面, 以推广多件商品</div>
														
 
															+          </el-radio>
														
 
															+          <el-radio class="ad-format-radio" label="focus" border>
														
 
															+            <div style="text-align: center; color: #333333">品牌旗舰店焦点</div>
														
 
															+            <div style="background-color: #4c649d; width: 200px; height: 200px; margin: 0 auto"></div>
														
 
															+            <div style="padding: 5px 0 10px 0; color: #333333; font-weight: 400">将流量引流到品牌旗舰店, 包括子页面</div>
														
 
															+          </el-radio>
														
 
															+          <el-radio class="ad-format-radio" label="video" border>
														
 
															+            <div style="text-align: center; color: #333333">视频</div>
														
 
															+            <div style="background-color: #43abc3; width: 200px; height: 200px; margin: 0 auto"></div>
														
 
															+            <div style="padding: 5px 0 10px 0; color: #333333; font-weight: 400">
														
 
															+              使用视频宣传您的品牌或产品, 将流量吸引至您的品牌旗舰店或商品详情页
														
 
															+            </div>
														
 
															+          </el-radio>
														
 
															+        </el-radio-group>
														
 
															+      </div>
														
 
															+      <div class="customize-font" v-if="adFormatRadio === 'productSet'">需要帮助创建图片或品牌旗舰店？</div>
														
 
															+      <div class="customize-font" v-if="adFormatRadio === 'focus'">在创建或编辑品牌旗舰店时需要帮助？</div>
														
 
															+      <div class="customize-font" v-if="adFormatRadio === 'video'">在创建或编辑视频时需要帮助？</div>
														
 
															+
														
 
															+      <div style="display: flex; align-items: center; margin: 20px 0 5px 0">
														
 
															+        <div style="color: #616266; font-weight: 450">着陆页</div>
														
 
															+        <el-tooltip content="顾客在与您的广告互动后将被引导至着陆页" placement="top">
														
 
															+          <el-icon color="#616266"><InfoFilled /></el-icon>
														
 
															+        </el-tooltip>
														
 
															+      </div>
														
 
															+
														
 
															+      <div class="land-Page" v-if="adFormatRadio === 'productSet' || adFormatRadio === 'video'">
														
 
															+        <el-radio-group v-model="arrivalsRadio" style="display: flex; justify-content: space-between">
														
 
															+          <el-radio label="flagshipStore" border style="height: auto; width: 100%; flex: 2; align-items: flex-start; padding: 15px 10px 0 10px">
														
 
															+            <div>亚马逊品牌旗舰店(包括子页面)</div>
														
 
															+            <div>
														
 
															+              <el-form
														
 
															+                ref="ruleFormRef"
														
 
															+                :model="ruleForm"
														
 
															+                :rules="rules"
														
 
															+                label-position="top"
														
 
															+                label-width="120px"
														
 
															+                class="demo-ruleForm"
														
 
															+                size="default"
														
 
															+                status-icon>
														
 
															+                <div style="display: flex; margin-top: 10px">
														
 
															+                  <el-form-item label="选择一个店铺" prop="shop" style="width: 48%; margin-right: 10px">
														
 
															+                    <el-select
														
 
															+                      v-model="ruleForm.shop"
														
 
															+                      clearable
														
 
															+                      style="width: 100%"
														
 
															+                      @change="shopChanged"
														
 
															+                      @blur="validateField('shop')"
														
 
															+                      :disabled="arrivalsRadio == 'newArrivals' || arrivalsRadio == 'productDetailsPage'">
														
 
															+                      <el-option v-for="item in shopOptions" :key="item.value" :label="item.label" :value="item.value" />
														
 
															+                    </el-select>
														
 
															+                  </el-form-item>
														
 
															+                  <el-form-item label="选择一个页面" prop="page" style="width: 48%">
														
 
															+                    <el-select
														
 
															+                      v-model="ruleForm.page"
														
 
															+                      clearable
														
 
															+                      style="width: 100%"
														
 
															+                      @blur="validateField('page')"
														
 
															+                      :disabled="arrivalsRadio == 'newArrivals' || arrivalsRadio == 'productDetailsPage'">
														
 
															+                      <el-option v-for="item in pageOptions" :key="item.storePageId" :label="item.storePageName" :value="item.storePageUrl" />
														
 
															+                    </el-select>
														
 
															+                  </el-form-item>
														
 
															+                </div>
														
 
															+              </el-form>
														
 
															+            </div>
														
 
															+          </el-radio>
														
 
															+          <el-radio class="land-page-radio" label="newArrivals" border v-if="adFormatRadio === 'productSet'">
														
 
															+            <div>新着陆页</div>
														
 
															+            <div>选择要推广的商品, 我们将为您创建一个落地页</div>
														
 
															+          </el-radio>
														
 
															+          <el-radio class="land-page-radio" label="productDetailsPage" border v-if="adFormatRadio === 'video'">
														
 
															+            <div>商品详情页</div>
														
 
															+          </el-radio>
														
 
															+        </el-radio-group>
														
 
															+      </div>
														
 
															+
														
 
															+      <div v-if="adFormatRadio === 'focus'">
														
 
															+        <p style="padding: 10px 0 15px 0">亚马逊上的品牌旗舰店(必须有4个或更多页面, 每个页面有1个或更多独特的商品)</p>
														
 
															+        <el-form
														
 
															+          ref="flagshipStoreRuleFormRef2"
														
 
															+          :model="flagshipStoreRuleForm2"
														
 
															+          :rules="flagshipStoreRules2"
														
 
															+          label-position="top"
														
 
															+          label-width="120px"
														
 
															+          class="demo-ruleForm"
														
 
															+          size="default"
														
 
															+          status-icon>
														
 
															+          <el-form-item label="选择一个店铺" prop="focusShop">
														
 
															+            <el-select
														
 
															+              v-model="flagshipStoreRuleForm2.focusShop"
														
 
															+              clearable
														
 
															+              @blur="validateField2('focusShop')"
														
 
															+              style="padding-top: 10px; margin-top: -15px; width: 500px">
														
 
															+              <el-option v-for="item in focusShopOptions" :key="item.brandId" :label="item.brandRegistryName" :value="item.brandEntityId" />
														
 
															+            </el-select>
														
 
															+          </el-form-item>
														
 
															+        </el-form>
														
 
															+      </div>
														
 
															+
														
 
															+      <div>
														
 
															+        <div
														
 
															+          style="font-weight: 700; padding: 20px 0 10px 0"
														
 
															+          v-if="
														
 
															+            (adFormatRadio === 'productSet' && arrivalsRadio === 'newArrivals') ||
														
 
															+            (adFormatRadio === 'video' && arrivalsRadio === 'productDetailsPage')
														
 
															+          ">
														
 
															+          <span style="color: #306cd7; font-size: 26px">|</span>
														
 
															+          <span style="font-size: 18px; padding-left: 5px">商品</span>
														
 
															+        </div>
														
 
															+        <ProductSetCommodity v-if="adFormatRadio === 'productSet' && arrivalsRadio === 'newArrivals'"></ProductSetCommodity>
														
 
															+        <VideoCommodity
														
 
															+          @update-added-data="handleUpdateAddedData"
														
 
															+          v-if="adFormatRadio === 'video' && arrivalsRadio === 'productDetailsPage'"></VideoCommodity>
														
 
															+      </div>
														
 
															+    </el-card>
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<script setup lang="ts">
														
 
															+import type { FormInstance, FormRules } from 'element-plus'
														
 
															+import { storeToRefs } from 'pinia'
														
 
															+import { defineEmits, onMounted, reactive, ref, watch } from 'vue'
														
 
															+import { getBrands, getStoreurl } from '../api/index'
														
 
															+import ProductSetCommodity from '../component/ProductSetCommodity.vue'
														
 
															+import VideoCommodity from '../component/VideoCommodity.vue'
														
 
															+import { useShopInfo } from '/@/stores/shopInfo'
														
 
															+import emitter from '/@/utils/emitter'
														
 
															+
														
 
															+const shopInfo = useShopInfo()
														
 
															+const { profile } = storeToRefs(shopInfo)
														
 
															+
														
 
															+const adFormatRadio = ref('productSet')
														
 
															+const arrivalsRadio = ref('flagshipStore')
														
 
															+const ruleFormRef = ref<FormInstance>()
														
 
															+interface RuleForm {
														
 
															+  shop: string
														
 
															+  page: string
														
 
															+}
														
 
															+const ruleForm = reactive<RuleForm>({
														
 
															+  shop: '',
														
 
															+  page: '',
														
 
															+})
														
 
															+const rules = reactive<FormRules<RuleForm>>({
														
 
															+  shop: [{ required: true, message: '请选择', trigger: 'change' }],
														
 
															+  page: [{ required: true, message: '请选择', trigger: 'change' }],
														
 
															+})
														
 
															+const validateField = (fieldName) => {
														
 
															+  ruleFormRef.value.validateField(fieldName, () => {})
														
 
															+}
														
 
															+
														
 
															+const flagshipStoreRuleFormRef2 = ref<FormInstance>()
														
 
															+interface flagshipStoreRuleForm2 {
														
 
															+  focusShop: string
														
 
															+}
														
 
															+const flagshipStoreRuleForm2 = reactive<flagshipStoreRuleForm2>({
														
 
															+  focusShop: '',
														
 
															+})
														
 
															+const flagshipStoreRules2 = reactive<FormRules<flagshipStoreRuleForm2>>({
														
 
															+  focusShop: [{ required: true, message: '请选择', trigger: 'change' }],
														
 
															+})
														
 
															+const validateField2 = (fieldName) => {
														
 
															+  flagshipStoreRuleFormRef2.value.validateField(fieldName, () => {})
														
 
															+}
														
 
															+
														
 
															+const shopOptions = ref([])
														
 
															+const pageOptions = ref([])
														
 
															+const focusShopOptions = ref([])
														
 
															+
														
 
															+async function getShopOptions() {
														
 
															+  try {
														
 
															+    const response = await getBrands({ profile_id: profile.value.profile_id })
														
 
															+    const shopOption = response.data.map((item) => {
														
 
															+      return {
														
 
															+        value: item.brandRegistryName,
														
 
															+        label: 'ZOSI',
														
 
															+      }
														
 
															+    })
														
 
															+    focusShopOptions.value = response.data
														
 
															+    shopOptions.value = shopOption
														
 
															+  } catch (error) {
														
 
															+    console.log('error:', error)
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+watch(
														
 
															+  () => ruleForm.shop,
														
 
															+  () => {
														
 
															+    setTimeout(() => {
														
 
															+      emitter.emit('video-shop', focusShopOptions.value[0])
														
 
															+    }, 2000)
														
 
															+  },
														
 
															+  { deep: true }
														
 
															+)
														
 
															+
														
 
															+watch(
														
 
															+  () => flagshipStoreRuleForm2.focusShop,
														
 
															+  () => {
														
 
															+    setTimeout(() => {
														
 
															+      emitter.emit('spotlight-shop', focusShopOptions.value[0])
														
 
															+    }, 2000)
														
 
															+  }
														
 
															+)
														
 
															+
														
 
															+async function getPageOptions() {
														
 
															+  try {
														
 
															+    const response = await getStoreurl({ profile_id: profile.value.profile_id })
														
 
															+    pageOptions.value = response.data.storePageInfo
														
 
															+  } catch (error) {
														
 
															+    console.log('error:', error)
														
 
															+  }
														
 
															+}
														
 
															+let selectedPage: any = ''
														
 
															+
														
 
															+watch(
														
 
															+  () => ruleForm.page,
														
 
															+  (newPageValue) => {
														
 
															+    selectedPage = pageOptions.value.find((page) => page.storePageUrl === newPageValue)
														
 
															+    if (selectedPage) {
														
 
															+      setTimeout(() => {
														
 
															+        emitter.emit('page', selectedPage.storePageUrl)
														
 
															+      }, 2000)
														
 
															+    } else {
														
 
															+      console.log('No page selected or matching page not found')
														
 
															+    }
														
 
															+  }
														
 
															+)
														
 
															+
														
 
															+const emit = defineEmits([
														
 
															+  'update:adFormatRadio',
														
 
															+  'update:arrivalsRadio',
														
 
															+  'update:flagshipStoreShop',
														
 
															+  'update:pageOptions',
														
 
															+  'update:addedTableData',
														
 
															+  'update:focusShopSelect',
														
 
															+])
														
 
															+
														
 
															+function handleUpdateAddedData(data) {
														
 
															+  emit('update:addedTableData', data)
														
 
															+}
														
 
															+// 监听 adFormatRadio 的变化并触发事件
														
 
															+watch(
														
 
															+  adFormatRadio,
														
 
															+  (newValue) => {
														
 
															+    emit('update:adFormatRadio', newValue)
														
 
															+  },
														
 
															+  { immediate: true }
														
 
															+)
														
 
															+
														
 
															+watch(
														
 
															+  arrivalsRadio,
														
 
															+  (newValue) => {
														
 
															+    emit('update:arrivalsRadio', newValue)
														
 
															+  },
														
 
															+  { immediate: true }
														
 
															+)
														
 
															+
														
 
															+watch(
														
 
															+  () => ruleForm.shop,
														
 
															+  (newValue) => {
														
 
															+    emit('update:flagshipStoreShop', newValue)
														
 
															+    if (newValue === 'ZOSI') {
														
 
															+      getPageOptions()
														
 
															+    }
														
 
															+    if (!ruleForm.shop) {
														
 
															+      ruleForm.page = ''
														
 
															+      pageOptions.value = []
														
 
															+    }
														
 
															+  }
														
 
															+)
														
 
															+
														
 
															+watch(
														
 
															+  () => ruleForm.page,
														
 
															+  (newValue) => {
														
 
															+    emit('update:pageOptions', newValue)
														
 
															+  }
														
 
															+)
														
 
															+
														
 
															+watch(
														
 
															+  () => flagshipStoreRuleForm2.focusShop,
														
 
															+  (newValue) => {
														
 
															+    emit('update:focusShopSelect', newValue)
														
 
															+  },
														
 
															+  { deep: true }
														
 
															+)
														
 
															+
														
 
															+function shopChanged() {
														
 
															+  setTimeout(() => {
														
 
															+    emitter.emit('send-brandEntityId', { brandEntityId: focusShopOptions.value })
														
 
															+  }, 2000)
														
 
															+}
														
 
															+
														
 
															+watch([adFormatRadio, arrivalsRadio], () => {
														
 
															+  ruleForm.shop = ''
														
 
															+  ruleForm.page = ''
														
 
															+
														
 
															+  if (ruleFormRef.value) {
														
 
															+    ruleFormRef.value.clearValidate(['shop', 'page'])
														
 
															+  }
														
 
															+})
														
 
															+
														
 
															+onMounted(() => {
														
 
															+  getShopOptions()
														
 
															+})
														
 
															+</script>
														
 
															+
														
 
															+<style scoped>
														
 
															+.customize-font {
														
 
															+  color: #1e2128;
														
 
															+  font-weight: 600;
														
 
															+  margin-top: 10px;
														
 
															+}
														
 
															+.ad-format-radio {
														
 
															+  height: auto;
														
 
															+  width: 100%;
														
 
															+  flex: 1;
														
 
															+  flex-direction: column-reverse;
														
 
															+  align-items: center;
														
 
															+}
														
 
															+.land-page-radio {
														
 
															+  height: 132px;
														
 
															+  flex: 1;
														
 
															+  align-items: flex-start;
														
 
															+  padding: 15px 10px 0 10px;
														
 
															+}
														
 
															+.customize-container {
														
 
															+  margin-top: 10px;
														
 
															+}
														
 
															+::v-deep(.ad-format-radios .el-radio-group .el-radio__inner) {
														
 
															+  /* 广告格式单选按钮 */
														
 
															+  margin-bottom: 3px;
														
 
															+}
														
 
															+
														
 
															+::v-deep(.land-Page .el-radio-group .el-radio__inner) {
														
 
															+  /* 着陆页单选按钮 */
														
 
															+  margin-top: 3px;
														
 
															+}
														
 
															+::v-deep(.land-Page .el-radio__label) {
														
 
															+  width: 100%;
														
 
															+}
														
 
															+
														
 
															+::v-deep(.ad-format-radios label.el-radio.is-bordered.is-checked.el-radio--default) {
														
 
															+  background: #f5f7fe;
														
 
															+}
														
 
															+::v-deep(.land-Page label.el-radio.is-bordered.is-checked.el-radio--default) {
														
 
															+  background: #f5f7fe;
														
 
															+}
														
 
															+.img-style {
														
 
															+  width: 200px;
														
 
															+  height: 200px;
														
 
															+  margin: 0 auto;
														
 
															+}
														
 
															+</style>
														
--- a/src/views/adManage/sb/campaigns/CreateCampaigns/component/AdGroup.vue
+++ b/src/views/adManage/sb/campaigns/CreateCampaigns/component/AdGroup.vue
@@ -0,0 +1,111 @@
 
															+<template>
														
 
															+  <div class="customize-container">
														
 
															+    <el-card body-style="padding: 20px 80px 0 80px;" v-loading="groupLoading">
														
 
															+      <div style="font-weight: 700; padding-bottom: 18px">
														
 
															+        <span style="color: #306cd7; font-size: 26px">|</span>
														
 
															+        <span style="font-size: 18px; padding-left: 5px">广告组</span>
														
 
															+      </div>
														
 
															+      <el-form
														
 
															+        ref="groupRuleFormRef"
														
 
															+        :model="groupRuleForm"
														
 
															+        :rules="groupRules"
														
 
															+        label-position="left"
														
 
															+        label-width="120px"
														
 
															+        class="demo-ruleForm"
														
 
															+        :size="formSize"
														
 
															+        status-icon>
														
 
															+        <el-form-item label="广告组名称" prop="groupName">
														
 
															+          <el-input v-model="groupRuleForm.groupName" style="width: 600px" placeholder="请输入广告组名称" />
														
 
															+          <el-button type="primary" plain :disabled="!respCampaignId" @click="submitGroupForm(groupRuleFormRef)" style="margin-left: 30px">保存</el-button>
														
 
															+        </el-form-item>
														
 
															+      </el-form>
														
 
															+    </el-card>
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<script setup lang="ts">
														
 
															+import { reactive, ref, inject, watch, Ref } from 'vue'
														
 
															+import type { FormInstance, FormRules } from 'element-plus'
														
 
															+import { ElMessage } from 'element-plus'
														
 
															+import { storeToRefs } from 'pinia'
														
 
															+import { useShopInfo } from '/@/stores/shopInfo'
														
 
															+import { postGroupData } from '../api/index'
														
 
															+
														
 
															+const shopInfo = useShopInfo()
														
 
															+const { profile } = storeToRefs(shopInfo)
														
 
															+const respCampaignId = inject<Ref>('respCampaignId')
														
 
															+const respCampaignName = inject<Ref>('respCampaignName')
														
 
															+
														
 
															+const groupLoading = ref(false)
														
 
															+
														
 
															+const formSize = ref('default')
														
 
															+const groupRuleFormRef = ref<FormInstance>()
														
 
															+interface groupRuleForm {
														
 
															+  groupName: string
														
 
															+}
														
 
															+const groupRuleForm = reactive<groupRuleForm>({
														
 
															+  groupName: '',
														
 
															+})
														
 
															+const groupRules = reactive<FormRules<groupRuleForm>>({
														
 
															+  groupName: [{ required: true, message: '请输入广告活动', trigger: 'blur' }],
														
 
															+})
														
 
															+
														
 
															+const submitGroupForm = async (formEl: FormInstance | undefined) => {
														
 
															+  if (!formEl) return
														
 
															+  await formEl.validate((valid, fields) => {
														
 
															+    if (valid) {
														
 
															+      console.log('submit!')
														
 
															+      createGroups()
														
 
															+    } else {
														
 
															+      console.log('error submit!', fields)
														
 
															+    }
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+const respAdGroupId = ref('')
														
 
															+async function createGroups() {
														
 
															+  groupLoading.value = true
														
 
															+  const groupData = {
														
 
															+    profile_id: profile.value.profile_id,
														
 
															+    campaignId: respCampaignId.value,
														
 
															+    name: respCampaignName.value,
														
 
															+  }
														
 
															+
														
 
															+  const filteredRequestData = Object.fromEntries(Object.entries(groupData).filter(([_, v]) => v != null))
														
 
															+  try {
														
 
															+    const response = await postGroupData(filteredRequestData)
														
 
															+    respAdGroupId.value = response.data.adGroupId
														
 
															+    ElMessage({
														
 
															+      message: '广告组创建成功',
														
 
															+      type: 'success',
														
 
															+    })
														
 
															+    groupRuleForm.groupName = ''
														
 
															+  } catch (error) {
														
 
															+    ElMessage.error('广告组创建失败!')
														
 
															+    console.error('请求失败：', error)
														
 
															+  } finally {
														
 
															+    groupLoading.value = false
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+const emit = defineEmits(['update-groupId'])
														
 
															+
														
 
															+watch(respAdGroupId, () => {
														
 
															+  if (respAdGroupId.value) {
														
 
															+    emit('update-groupId', {
														
 
															+      id: respAdGroupId.value,
														
 
															+    })
														
 
															+  }
														
 
															+})
														
 
															+
														
 
															+</script>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+.customize-container {
														
 
															+  margin-top: 10px;
														
 
															+}
														
 
															+::v-deep(.el-form-item__label) {
														
 
															+  font-weight: 500;
														
 
															+  color: #505968;
														
 
															+}
														
 
															+</style>
														
--- a/src/views/adManage/sb/campaigns/CreateCampaigns/component/DeliveryType.vue
+++ b/src/views/adManage/sb/campaigns/CreateCampaigns/component/DeliveryType.vue
@@ -0,0 +1,60 @@
 
															+<template>
														
 
															+  <div class="customize-container">
														
 
															+    <el-card body-style="padding: 20px 80px 20px 80px;">
														
 
															+      <div style="font-weight: 700; padding-bottom: 18px">
														
 
															+        <span style="color: #306cd7; font-size: 26px">|</span>
														
 
															+        <span style="font-size: 18px; padding-left: 5px">投放类型</span>
														
 
															+      </div>
														
 
															+      <div class="delivery-type-radio-group">
														
 
															+        <el-radio-group v-model="deliveryTypeRadio" style="display: flex; justify-content: space-between">
														
 
															+          <el-radio class="delivery-type-radio" label="keyword" border>
														
 
															+            <div>关键词定向</div>
														
 
															+            <div style="color: #88909b; font-weight: 400; padding-top: 5px;">选择关键词以帮助您的商品出现在购物者搜索中</div>
														
 
															+          </el-radio>
														
 
															+          <el-radio class="delivery-type-radio" label="commodity" border>
														
 
															+            <div>商品定向</div>
														
 
															+            <div style="color: #88909b; font-weight: 400; padding-top: 5px;">选择要在亚马逊上投放的目标商品</div>
														
 
															+          </el-radio>
														
 
															+        </el-radio-group>
														
 
															+      </div>
														
 
															+
														
 
															+      <KeywordTarget v-if="deliveryTypeRadio === 'keyword'"></KeywordTarget>
														
 
															+      <NegativeWord v-if="deliveryTypeRadio === 'keyword'"></NegativeWord>
														
 
															+      <ProductOrientation v-if="deliveryTypeRadio === 'commodity'"></ProductOrientation>
														
 
															+      <NegativeGood v-if="deliveryTypeRadio === 'commodity'"></NegativeGood>
														
 
															+    </el-card>
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<script setup lang="ts">
														
 
															+import { ref } from 'vue'
														
 
															+import KeywordTarget from './KeywordTarget.vue'
														
 
															+import NegativeWord from './NegativeWord.vue'
														
 
															+import ProductOrientation from './ProductOrientation.vue'
														
 
															+import NegativeGood from './NegativeGood.vue'
														
 
															+
														
 
															+const deliveryTypeRadio = ref('keyword')
														
 
															+</script>
														
 
															+
														
 
															+<style scoped>
														
 
															+.customize-container {
														
 
															+  margin-top: 10px;
														
 
															+}
														
 
															+::v-deep(.delivery-type-radio-group .el-radio__label) {
														
 
															+  width: 100%;
														
 
															+}
														
 
															+.delivery-type-radio {
														
 
															+  height: auto;
														
 
															+  flex: 1;
														
 
															+  align-items: flex-start;
														
 
															+  padding: 15px 10px 15px 10px;
														
 
															+}
														
 
															+::v-deep(.delivery-type-radio-group .el-radio-group .el-radio__inner) {
														
 
															+  /* 着陆页单选按钮 */
														
 
															+  margin-top: 3px;
														
 
															+}
														
 
															+::v-deep(.delivery-type-radio-group .el-radio.is-bordered.is-checked.el-radio--default.delivery-type-radio) {
														
 
															+  /* 选中后的背景颜色 */
														
 
															+  background: #f5f7fe;
														
 
															+}
														
 
															+</style>
														
--- a/src/views/adManage/sb/campaigns/CreateCampaigns/component/FocusCreativity.vue
+++ b/src/views/adManage/sb/campaigns/CreateCampaigns/component/FocusCreativity.vue
@@ -0,0 +1,986 @@
 
															+<template>
														
 
															+  <div class="customize-container">
														
 
															+    <el-card body-style="padding: 20px 80px 0 80px;">
														
 
															+      <div style="font-weight: 700; padding-bottom: 18px">
														
 
															+        <span style="color: #306cd7; font-size: 26px">|</span>
														
 
															+        <span style="font-size: 18px; padding-left: 5px">创意</span>
														
 
															+      </div>
														
 
															+      <el-form
														
 
															+        ref="ruleFormRef"
														
 
															+        :model="ruleForm"
														
 
															+        :rules="rules"
														
 
															+        label-width="120px"
														
 
															+        class="demo-ruleForm"
														
 
															+        size="default"
														
 
															+        label-position="top"
														
 
															+        status-icon>
														
 
															+        <el-form-item label="广告名称" prop="name">
														
 
															+          <el-input v-model="ruleForm.name" style="width: 50%" />
														
 
															+        </el-form-item>
														
 
															+        <div style="display: flex; border: 1px solid #dddfe6; padding: 0 0 0 5px; margin-bottom: 20px" v-loading="createLoading">
														
 
															+          <div style="width: 50%; padding-left: 5px; border-right: 1px solid #dddfe6">
														
 
															+            <el-scrollbar height="700px">
														
 
															+              <el-collapse v-model="activeNames" @change="handleChange" style="border-top: none; border-bottom: none">
														
 
															+                <el-collapse-item name="1" style="padding-right: 10px">
														
 
															+                  <template #title> <span style="color: #e47470; margin-right: 4px">*</span>品牌名称和徽标</template>
														
 
															+                  <el-form-item prop="brandName">
														
 
															+                    <el-input v-model="ruleForm.brandName" placeholder="请输入品牌名称" style="padding: 0 0 5px 0"></el-input>
														
 
															+                  </el-form-item>
														
 
															+
														
 
															+                  <el-upload
														
 
															+                    v-model:file-list="fileList"
														
 
															+                    :on-change="changeFile"
														
 
															+                    v-loading="upLoading"
														
 
															+                    action="#"
														
 
															+                    accept=".png, .jpg"
														
 
															+                    :limit="1"
														
 
															+                    list-type="picture-card"
														
 
															+                    :auto-upload="false">
														
 
															+                    <el-icon><Plus /></el-icon>
														
 
															+                    <template #file="{ file }">
														
 
															+                      <div>
														
 
															+                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
														
 
															+                        <span class="el-upload-list__item-actions">
														
 
															+                          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
														
 
															+                            <el-icon><zoom-in /></el-icon>
														
 
															+                          </span>
														
 
															+                          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
														
 
															+                            <el-icon><Delete /></el-icon>
														
 
															+                          </span>
														
 
															+                        </span>
														
 
															+                      </div>
														
 
															+                    </template>
														
 
															+                    <template #tip>
														
 
															+                      <div style="margin-top: 10px">
														
 
															+                        <div style="display: flex; align-items: center; justify-content: space-between">
														
 
															+                          <span style="line-height: 17px; font-weight: 600; color: #1e2128">徽标规格</span>
														
 
															+                          <el-button type="primary" :icon="Picture" @click="openDialog" disabled="true">从素材库中选择</el-button>
														
 
															+                        </div>
														
 
															+                        <div class="introduce-item">1、图片大小: 400x400 像素或更大</div>
														
 
															+                        <div class="introduce-item">2、文件大小: 1MB 或更小</div>
														
 
															+                        <div class="introduce-item">3、文件格式: PNG 或 JPG</div>
														
 
															+                        <div class="introduce-item">
														
 
															+                          4、内容: 徽标必须填满图片或置于白色或透明背景上详细了解我们的徽标要求
														
 
															+                          <span style="margin-left: 25px; position: relative">
														
 
															+                            <el-icon size="14" style="position: absolute; left: -14px; top: 1px"><Link /></el-icon>
														
 
															+                            <el-link
														
 
															+                              type="primary"
														
 
															+                              :underline="false"
														
 
															+                              href="https://advertising.amazon.com/resources/ad-policy/sponsored-ads-policies#brandlogo"
														
 
															+                              target="_blank"
														
 
															+                              >查看要求</el-link
														
 
															+                            >
														
 
															+                          </span>
														
 
															+                        </div>
														
 
															+                      </div>
														
 
															+                    </template>
														
 
															+                  </el-upload>
														
 
															+                  <!-- 预览弹窗 -->
														
 
															+                  <el-dialog v-model="dialogVisible">
														
 
															+                    <img w-full :src="dialogImageUrl" alt="Preview Image" />
														
 
															+                  </el-dialog>
														
 
															+                </el-collapse-item>
														
 
															+
														
 
															+                <el-collapse-item name="commodity" v-loading="commodityLoading" style="padding-right: 10px">
														
 
															+                  <template #title>编辑品牌旗舰店页面</template>
														
 
															+                  <div v-for="(storePage, index) in topStorePages" :key="index" style="margin-bottom: 10px; width: 85%">
														
 
															+                    <el-card shadow="hover" body-style="padding: 10px;">
														
 
															+                      <div style="margin-right: 8px; line-height: normal; display: flex; align-items: center">
														
 
															+                        <el-image class="img-box" :src="storePage.storePageLink" />
														
 
															+                        <div style="margin-left: 15px">
														
 
															+                          <span><span style="color: #6d7784">当前名称：</span>{{ storePage.storePageName }}</span>
														
 
															+                          <div style="margin-bottom: 5px"><span style="color: #6d7784">ASIN: </span>{{ storePage.asin }}</div>
														
 
															+                          <el-input v-model="storePage.inputName" style="width: 300px" placeholder="修改品牌页面名称"></el-input>
														
 
															+                        </div>
														
 
															+                        <div class="card-operation">
														
 
															+                          <el-button link type="primary" @click="changePicture(storePage.storePageUrl, index)" style="margin-bottom: 10px"
														
 
															+                            >更换图片</el-button
														
 
															+                          >
														
 
															+                          <el-button link type="primary" @click="changePage(storePage.storePageUrl, index)">更换页面</el-button>
														
 
															+                        </div>
														
 
															+                      </div>
														
 
															+                    </el-card>
														
 
															+                  </div>
														
 
															+                </el-collapse-item>
														
 
															+                <el-dialog v-model="commodityDialog" title="更换图片" width="50%">
														
 
															+                  <el-radio-group
														
 
															+                    v-loading="dialogLoading3"
														
 
															+                    v-model="selectedCommodity"
														
 
															+                    style="display: flex; flex-direction: column; align-content: flex-start; align-items: flex-start">
														
 
															+                    <div v-for="(item, index) in stock" :key="index">
														
 
															+                      <el-radio :label="item.asin" style="height: 80px; border-bottom: 1px solid #ccc">
														
 
															+                        <div style="padding: 10px; display: flex; align-items: center">
														
 
															+                          <div style="margin-right: 8px; line-height: normal">
														
 
															+                            <el-image class="img-box" :src="item.image_link" />
														
 
															+                          </div>
														
 
															+                          <div style="position: relative">
														
 
															+                            <el-tooltip class="box-item" effect="dark" :content="item.title" placement="top">
														
 
															+                              <div class="double-line">{{ item.title }}</div>
														
 
															+                            </el-tooltip>
														
 
															+                            <span>
														
 
															+                              <span style="color: #6d7784">ASIN: </span>
														
 
															+                              <span class="data-color" style="margin-right: 8px">{{ item.asin }}</span>
														
 
															+                            </span>
														
 
															+                          </div>
														
 
															+                        </div>
														
 
															+                      </el-radio>
														
 
															+                    </div>
														
 
															+                  </el-radio-group>
														
 
															+                  <div style="margin-top: 20px; display: flex; justify-content: center">
														
 
															+                    <el-button type="primary" :disabled="!selectedCommodity" @click="handleSelectedStore">确定</el-button>
														
 
															+                  </div>
														
 
															+                </el-dialog>
														
 
															+                <el-dialog v-model="pageDialog" title="更换页面" width="50%">
														
 
															+                  <el-radio-group v-loading="pageDialogLoading" v-model="selectedCommodity" @change="handlePageChange" class="radio-group-item">
														
 
															+                    <div v-for="(item, index) in storePageData.storePageInfo" :key="index" style="width: 100%">
														
 
															+                      <el-radio
														
 
															+                        :label="item.storePageId"
														
 
															+                        class="radio-item"
														
 
															+                        :disabled="topStorePages.some((storePage) => storePage.storePageName === item.storePageName)">
														
 
															+                        <div class="radio-item-content">
														
 
															+                          <div style="position: relative">
														
 
															+                            <el-tooltip class="box-item" effect="dark" :content="item.storePageName" placement="top">
														
 
															+                              <div class="double-line">{{ item.storePageName }}</div>
														
 
															+                            </el-tooltip>
														
 
															+                          </div>
														
 
															+                        </div>
														
 
															+                      </el-radio>
														
 
															+                    </div>
														
 
															+                  </el-radio-group>
														
 
															+                  <!-- <div style="margin-top: 20px; display: flex; justify-content: center">
														
 
															+                    <el-button type="primary" :disabled="!selectedCommodity">确定</el-button>
														
 
															+                  </div> -->
														
 
															+                </el-dialog>
														
 
															+
														
 
															+                <el-collapse-item name="4" style="padding-right: 10px">
														
 
															+                  <template #title> <span style="color: #e47470; margin-right: 4px">*</span>标题</template>
														
 
															+                  <el-form-item prop="title">
														
 
															+                    <el-input v-model="ruleForm.title" maxlength="50" placeholder="请输入标题" show-word-limit style="padding: 0 10px 0 0"></el-input>
														
 
															+                  </el-form-item>
														
 
															+                </el-collapse-item>
														
 
															+              </el-collapse>
														
 
															+            </el-scrollbar>
														
 
															+          </div>
														
 
															+          <div style="width: 50%; padding: 0 10px; position: relative">
														
 
															+            <el-button type="primary" plain @click="submitForm(ruleFormRef)" :disabled="!fileList.length" style="position: absolute; top: 92%; left: 46%"
														
 
															+              >保存</el-button
														
 
															+            >
														
 
															+          </div>
														
 
															+        </div>
														
 
															+      </el-form>
														
 
															+    </el-card>
														
 
															+    <el-dialog v-model="centerDialogVisible" title="从素材库中选择" width="65%">
														
 
															+      <el-input :prefix-icon="Search"></el-input>
														
 
															+      <div class="grid-container">
														
 
															+        <div
														
 
															+          class="grid-item"
														
 
															+          v-for="item in cards"
														
 
															+          :key="item.id"
														
 
															+          @click="selectCard(item)"
														
 
															+          :class="{ selected: isSelected(item.id), hover: hoverId === item.id }"
														
 
															+          @mouseover="hoverId = item.id"
														
 
															+          @mouseleave="hoverId = null">
														
 
															+          <el-card :body-style="{ padding: '0px' }">
														
 
															+            <el-image class="image" :src="item.imageUrl" fit="cover" />
														
 
															+            <div style="padding: 10px">
														
 
															+              <span>
														
 
															+                <el-tooltip placement="top" :content="item.title">
														
 
															+                  {{ item.title }}
														
 
															+                </el-tooltip>
														
 
															+              </span>
														
 
															+              <div class="bottom">
														
 
															+                <div class="bottom-item">{{ item.size }}KB</div>
														
 
															+                <div class="bottom-item">{{ item.width }} * {{ item.height }}</div>
														
 
															+                <div class="bottom-item">徽标</div>
														
 
															+              </div>
														
 
															+            </div>
														
 
															+          </el-card>
														
 
															+        </div>
														
 
															+      </div>
														
 
															+      <template #footer>
														
 
															+        <span class="dialog-footer">
														
 
															+          <el-button @click="centerDialogVisible = false">取消</el-button>
														
 
															+          <el-button type="primary" @click="handleConfirmSelection">确定</el-button>
														
 
															+        </span>
														
 
															+      </template>
														
 
															+    </el-dialog>
														
 
															+    <!-- <el-dialog v-model="lifeStyleDialog" title="从素材库中选择" width="65%">
														
 
															+      <el-input :prefix-icon="Search"></el-input>
														
 
															+      <div class="grid-container">
														
 
															+        <div
														
 
															+          class="grid-item"
														
 
															+          v-for="item in lifeStyleCards"
														
 
															+          :key="item.id"
														
 
															+          @click="selectCard(item)"
														
 
															+          :class="{ selected: isSelected(item.id), hover: hoverId === item.id }"
														
 
															+          @mouseover="hoverId = item.id"
														
 
															+          @mouseleave="hoverId = null">
														
 
															+          <el-card :body-style="{ padding: '0px' }">
														
 
															+            <el-image class="image" :src="item.imageUrl" fit="cover" />
														
 
															+            <div style="padding: 10px">
														
 
															+              <span>
														
 
															+                <el-tooltip placement="top" :content="item.title">
														
 
															+                  {{ item.title }}
														
 
															+                </el-tooltip>
														
 
															+              </span>
														
 
															+              <div class="bottom">
														
 
															+                <div class="bottom-item">{{ item.size }}KB</div>
														
 
															+                <div class="bottom-item">{{ item.width }} * {{ item.height }}</div>
														
 
															+                <div class="bottom-item">徽标</div>
														
 
															+              </div>
														
 
															+            </div>
														
 
															+          </el-card>
														
 
															+        </div>
														
 
															+      </div>
														
 
															+      <template #footer>
														
 
															+        <span class="dialog-footer">
														
 
															+          <el-button @click="centerDialogVisible = false">取消</el-button>
														
 
															+          <el-button type="primary" @click="centerDialogVisible = false">确定</el-button>
														
 
															+        </span>
														
 
															+      </template>
														
 
															+    </el-dialog> -->
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<script setup lang="ts">
														
 
															+import { reactive, ref, inject, Ref, watch, computed, onMounted, onUnmounted } from 'vue'
														
 
															+import type { FormInstance, FormRules, UploadProps, UploadUserFile } from 'element-plus'
														
 
															+import { ElMessage, ElMessageBox } from 'element-plus'
														
 
															+import { Plus, Picture, Search, Delete, Download, ZoomIn } from '@element-plus/icons-vue'
														
 
															+import type { UploadFile } from 'element-plus'
														
 
															+import emitter from '/@/utils/emitter'
														
 
															+import {
														
 
															+  getAssets,
														
 
															+  getLifeStyleAssets,
														
 
															+  getPageAsins,
														
 
															+  getCommodityCard,
														
 
															+  getStoreurl,
														
 
															+  getDefaultSpotlightAsin,
														
 
															+  getSellerInStock,
														
 
															+  postStoreSpotlight,
														
 
															+  uploadFile,
														
 
															+  checkAsset,
														
 
															+} from '../api/index'
														
 
															+import { storeToRefs } from 'pinia'
														
 
															+import { useShopInfo } from '/@/stores/shopInfo'
														
 
															+
														
 
															+const shopInfo = useShopInfo()
														
 
															+const { profile } = storeToRefs(shopInfo)
														
 
															+
														
 
															+const createLoading = ref(false)
														
 
															+const ruleFormRef = ref<FormInstance>()
														
 
															+
														
 
															+interface RuleForm {
														
 
															+  name: string
														
 
															+  brandName: string
														
 
															+  title: string
														
 
															+}
														
 
															+const ruleForm = reactive<RuleForm>({
														
 
															+  name: '视频 广告 - 1/15/2024 17:51:10.236',
														
 
															+  brandName: '',
														
 
															+  title: '',
														
 
															+})
														
 
															+
														
 
															+const rules = reactive<FormRules<RuleForm>>({
														
 
															+  name: [{ required: true, message: '请输入广告名称', trigger: 'blur' }],
														
 
															+  brandName: [{ required: true, message: '请输入品牌名称', trigger: 'blur' }],
														
 
															+  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
														
 
															+})
														
 
															+
														
 
															+const submitForm = async (formEl: FormInstance | undefined) => {
														
 
															+  if (!formEl) return
														
 
															+  await formEl.validate((valid, fields) => {
														
 
															+    if (valid) {
														
 
															+      console.log('submit!')
														
 
															+      createStoreSpotlight()
														
 
															+    } else {
														
 
															+      console.log('error submit!', fields)
														
 
															+    }
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+const activeNames = ref(['1'])
														
 
															+const handleChange = (val: string[]) => {
														
 
															+  // console.log(val)
														
 
															+  if (val.includes('commodity')) {
														
 
															+    // getCommodityCardData()
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+const imageUrl = ref('')
														
 
															+
														
 
															+const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
														
 
															+  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
														
 
															+  console.log('success!')
														
 
															+}
														
 
															+
														
 
															+const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
														
 
															+  if (rawFile.type !== 'image/jpeg') {
														
 
															+    ElMessage.error('Avatar picture must be JPG format!')
														
 
															+    return false
														
 
															+  } else if (rawFile.size / 1024 / 1024 > 2) {
														
 
															+    ElMessage.error('Avatar picture size can not exceed 2MB!')
														
 
															+    return false
														
 
															+  }
														
 
															+  return true
														
 
															+}
														
 
															+
														
 
															+// 图片上传相关
														
 
															+const dialogImageUrl = ref('')
														
 
															+const dialogVisible = ref(false)
														
 
															+const disabled = ref(false)
														
 
															+const fileList = ref([])
														
 
															+const selectedId = ref(null)
														
 
															+const hoverId = ref(null)
														
 
															+const selectedCards = ref([])
														
 
															+const selectedImageUrl = ref('')
														
 
															+const centerDialogVisible = ref(false)
														
 
															+const cards = reactive([])
														
 
															+
														
 
															+function selectCard(item) {
														
 
															+  if (isSelected(item.id)) {
														
 
															+    selectedCards.value = selectedCards.value.filter((card) => card.id !== item.id)
														
 
															+  } else {
														
 
															+    selectedCards.value.push(item)
														
 
															+  }
														
 
															+  selectedId.value = item.id
														
 
															+}
														
 
															+
														
 
															+function handleConfirmSelection() {
														
 
															+  if (selectedCards.value.length > 0) {
														
 
															+    // 清空 fileList
														
 
															+    fileList.value.length = 0
														
 
															+
														
 
															+    // 假设每次只选择一个图片
														
 
															+    selectedImageUrl.value = selectedCards.value[0].imageUrl
														
 
															+
														
 
															+    // 创建一个新的 UploadFile 对象
														
 
															+    const newFile = {
														
 
															+      name: selectedCards.value[0].title, // 或者任何你希望用作文件名的字符串
														
 
															+      url: selectedImageUrl.value,
														
 
															+      // 根据需要添加更多属性
														
 
															+    }
														
 
															+
														
 
															+    // 将新的文件对象添加到 fileList 中
														
 
															+    fileList.value.push(newFile)
														
 
															+  }
														
 
															+
														
 
															+  // 清空选中卡片
														
 
															+  selectedCards.value = []
														
 
															+  // 关闭对话框
														
 
															+  centerDialogVisible.value = false
														
 
															+}
														
 
															+
														
 
															+function isSelected(id) {
														
 
															+  return selectedId.value === id
														
 
															+}
														
 
															+
														
 
															+async function getAssetsData() {
														
 
															+  const query = {
														
 
															+    profile_id: profile.value.profile_id,
														
 
															+    assetType: 'IMAGE',
														
 
															+    assetSubType: 'LOGO',
														
 
															+  }
														
 
															+  const response = await getAssets(query)
														
 
															+  console.log('🚀 ~ getAssetsData ~ response-->>', response)
														
 
															+
														
 
															+  cards.splice(0, cards.length)
														
 
															+
														
 
															+  response.data.forEach((asset) => {
														
 
															+    cards.push({
														
 
															+      id: asset.assetId,
														
 
															+      title: asset.name,
														
 
															+      imageUrl: asset.storageLocationUrls.defaultUrl,
														
 
															+      width: asset.fileMetadata.width,
														
 
															+      height: asset.fileMetadata.height,
														
 
															+      size: bytesToKB(asset.fileMetadata.sizeInBytes),
														
 
															+    })
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+function bytesToKB(bytes) {
														
 
															+  return (bytes / 1024).toFixed(2) // 保留两位小数
														
 
															+}
														
 
															+
														
 
															+function openDialog() {
														
 
															+  centerDialogVisible.value = true
														
 
															+  getAssetsData()
														
 
															+}
														
 
															+
														
 
															+const lifeStyleDialog = ref(false)
														
 
															+const lifeStyleCards = reactive([])
														
 
															+async function getLifeStyleAssetsData() {
														
 
															+  try {
														
 
															+    const query = {
														
 
															+      profile_id: profile.value.profile_id,
														
 
															+      assetType: 'IMAGE',
														
 
															+      assetSubType: 'LIFESTYLE_IMAGE',
														
 
															+    }
														
 
															+    const response = await getLifeStyleAssets(query)
														
 
															+    console.log('🚀 ~ getLifeStyleAssetsData ~ response-->>', response)
														
 
															+
														
 
															+    lifeStyleCards.splice(0, lifeStyleCards.length)
														
 
															+
														
 
															+    response.data.forEach((asset) => {
														
 
															+      lifeStyleCards.push({
														
 
															+        id: asset.assetId,
														
 
															+        title: asset.name,
														
 
															+        imageUrl: asset.storageLocationUrls.defaultUrl,
														
 
															+        width: asset.fileMetadata.width,
														
 
															+        height: asset.fileMetadata.height,
														
 
															+        size: bytesToKB(asset.fileMetadata.sizeInBytes),
														
 
															+      })
														
 
															+    })
														
 
															+  } catch (error) {
														
 
															+    console.log('error:', error)
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+// function openLifeStyleDialog() {
														
 
															+//   lifeStyleDialog.value = true
														
 
															+//   getLifeStyleAssetsData()
														
 
															+// }
														
 
															+
														
 
															+// 获取商品数据
														
 
															+const topStorePages = ref([])
														
 
															+const commodityLoading = ref(false)
														
 
															+const dialogLoading3 = ref(false)
														
 
															+let subpageslist = []
														
 
															+
														
 
															+async function getDefaultCommodityData() {
														
 
															+  try {
														
 
															+    commodityLoading.value = true
														
 
															+    const resp = await getDefaultSpotlightAsin({ profile_id: '3006125408623189' })
														
 
															+    if (resp.code === 2000) {
														
 
															+      topStorePages.value = resp.data.defaultlist.map((item) => ({
														
 
															+        storePageName: item.storePageName,
														
 
															+        storePageLink: item.image_link,
														
 
															+        storePageUrl: item.storePageUrl,
														
 
															+        asin: item.asin,
														
 
															+        inputName: item.storePageName, // 新增字段用于存储输入值
														
 
															+      }))
														
 
															+      subpageslist = topStorePages.value.map((item) => ({
														
 
															+      asin: item.asin,
														
 
															+      pageTitle: item.inputName,
														
 
															+      url: item.storePageUrl,
														
 
															+  }))
														
 
															+    }
														
 
															+  } catch (error) {
														
 
															+    console.error('Error in getDefaultCommodityData:', error)
														
 
															+  } finally {
														
 
															+    commodityLoading.value = false
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+const asinList = ref([])
														
 
															+const stock = ref([])
														
 
															+const currentEditingIndex = ref(null)
														
 
															+const selectedCommodityData = ref(null)
														
 
															+
														
 
															+async function changePicture(pageUrl, index) {
														
 
															+  commodityDialog.value = true
														
 
															+  dialogLoading3.value = true
														
 
															+
														
 
															+  currentEditingIndex.value = index
														
 
															+  try {
														
 
															+    const query = {
														
 
															+      profile_id: profile.value.profile_id,
														
 
															+      pageurl: pageUrl,
														
 
															+    }
														
 
															+    const response = await getPageAsins(query)
														
 
															+    asinList.value = response.data.asinList
														
 
															+    getStock()
														
 
															+    dialogLoading3.value = false
														
 
															+  } catch (error) {
														
 
															+    console.log('error:', error)
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+async function getStock() {
														
 
															+  try {
														
 
															+    const obj = {
														
 
															+      profile_id: profile.value.profile_id,
														
 
															+      asinlist: asinList.value,
														
 
															+    }
														
 
															+    const response = await getSellerInStock(obj)
														
 
															+    stock.value = response.data
														
 
															+  } catch (error) {
														
 
															+    console.error('Error in getStock:', error)
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+function handleSelectedStore() {
														
 
															+  if (currentEditingIndex.value !== null) {
														
 
															+    selectedCommodityData.value = stock.value.find((item) => item.asin === selectedCommodity.value)
														
 
															+    if (selectedCommodityData.value) {
														
 
															+      // 更新图片链接和ASIN
														
 
															+      topStorePages.value[currentEditingIndex.value].storePageLink = selectedCommodityData.value.image_link
														
 
															+      topStorePages.value[currentEditingIndex.value].asin = selectedCommodityData.value.asin
														
 
															+      // 更新输入框的绑定值以便可以继续编辑名称
														
 
															+      topStorePages.value[currentEditingIndex.value].inputName = topStorePages.value[currentEditingIndex.value].inputName
														
 
															+      console.log(topStorePages.value)
														
 
															+    }
														
 
															+    // 重置当前编辑索引和选中的商品
														
 
															+    currentEditingIndex.value = null
														
 
															+    selectedCommodity.value = null
														
 
															+    commodityDialog.value = false
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+// 更换页面功能
														
 
															+const pageDialog = ref(false)
														
 
															+const storePageData = ref({ storePageInfo: [] })
														
 
															+const pageDialogLoading = ref(false)
														
 
															+const selectedPageUrl = ref('')
														
 
															+const firstObj: any = ref({})
														
 
															+const pageAsinList = ref([])
														
 
															+const selectedPageName = ref('')
														
 
															+
														
 
															+async function changePage(pageUrl, index) {
														
 
															+  pageDialog.value = true
														
 
															+  pageDialogLoading.value = true
														
 
															+  currentEditingIndex.value = index
														
 
															+  try {
														
 
															+    const response = await getStoreurl({ profile_id: profile.value.profile_id })
														
 
															+    storePageData.value = response.data
														
 
															+  } catch (error) {
														
 
															+    console.log('error:', error)
														
 
															+  } finally {
														
 
															+    pageDialogLoading.value = false
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+async function getAsinList(pageurl) {
														
 
															+  try {
														
 
															+    const query = {
														
 
															+      profile_id: profile.value.profile_id,
														
 
															+      pageurl: pageurl,
														
 
															+    }
														
 
															+    const resp = await getPageAsins(query)
														
 
															+    pageAsinList.value = resp.data.asinList
														
 
															+
														
 
															+    changeCardData()
														
 
															+  } catch (error) {
														
 
															+    console.log('error:', error)
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+async function handlePageChange(selectedPageId) {
														
 
															+  const selectedPage = storePageData.value.storePageInfo.find((page) => page.storePageId === selectedPageId)
														
 
															+  if (selectedPage) {
														
 
															+    selectedPageUrl.value = selectedPage.storePageUrl
														
 
															+    selectedPageName.value = selectedPage.storePageName
														
 
															+    pageDialog.value = false
														
 
															+    await getAsinList(selectedPageUrl.value)
														
 
															+  } else {
														
 
															+    console.error('Selected page not found in storePageData')
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+async function changeCardData() {
														
 
															+  try {
														
 
															+    const query = {
														
 
															+      profile_id: profile.value.profile_id,
														
 
															+      asinlist: pageAsinList.value,
														
 
															+    }
														
 
															+    const response = await getSellerInStock(query)
														
 
															+    if (response && response.data.length > 0) {
														
 
															+      // 将response的第一个元素赋值给firstObj
														
 
															+      firstObj.value = response.data[0]
														
 
															+
														
 
															+      // 更新图片链接和ASIN
														
 
															+      topStorePages.value[currentEditingIndex.value].storePageLink = firstObj.value.image_link
														
 
															+      topStorePages.value[currentEditingIndex.value].asin = firstObj.value.asin
														
 
															+      topStorePages.value[currentEditingIndex.value].storePageName = selectedPageName.value
														
 
															+      topStorePages.value[currentEditingIndex.value].inputName = selectedPageName.value
														
 
															+      currentEditingIndex.value = null
														
 
															+    } else {
														
 
															+      console.error('No data')
														
 
															+    }
														
 
															+  } catch (error) {
														
 
															+    console.error('error:', error)
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+// 创建创意
														
 
															+let brandName = ''
														
 
															+let brandEntityId = ''
														
 
															+const respAdGroupId = inject<Ref>('respAdGroupId')
														
 
															+let brandLogoCrop = {}
														
 
															+
														
 
															+const upLoading = ref(false)
														
 
															+let respAssetId = ''
														
 
															+
														
 
															+function handleRemove(file: UploadFile) {
														
 
															+  fileList.value = []
														
 
															+}
														
 
															+
														
 
															+function handlePictureCardPreview(file: UploadFile) {
														
 
															+  dialogImageUrl.value = file.url!
														
 
															+  dialogVisible.value = true
														
 
															+}
														
 
															+
														
 
															+function changeFile(file: UploadFile) {
														
 
															+  handleUpload(file)
														
 
															+}
														
 
															+
														
 
															+async function handleUpload(file: UploadFile) {
														
 
															+  const formData = new FormData()
														
 
															+  formData.append('file', file.raw)
														
 
															+  formData.append('profile_id', profile.value.profile_id)
														
 
															+  formData.append('brandEntityId', brandEntityId)
														
 
															+  formData.append('assetType', 'IMAGE')
														
 
															+  formData.append('assetSubTypeList', JSON.stringify(['LOGO']))
														
 
															+  upLoading.value = true
														
 
															+  try {
														
 
															+    const response = await uploadFile(formData)
														
 
															+    const fileName = response.data.file_name
														
 
															+    const obj = {
														
 
															+      profile_id: profile.value.profile_id,
														
 
															+      file_name: fileName,
														
 
															+    }
														
 
															+    const resp = await checkAsset(obj)
														
 
															+    respAssetId = resp.data.assetId
														
 
															+    const { width, height } = resp.data.fileMetadata
														
 
															+    brandLogoCrop = {
														
 
															+      width,
														
 
															+      height,
														
 
															+      top: 0,
														
 
															+      left: 0,
														
 
															+    }
														
 
															+
														
 
															+    if (resp.data.checkresult == 'success') {
														
 
															+      ElMessage({ message: '上传成功', type: 'success' })
														
 
															+    } else {
														
 
															+      ElMessage.error('上传失败')
														
 
															+    }
														
 
															+  } catch (error) {
														
 
															+    console.error('上传失败:', error)
														
 
															+  } finally {
														
 
															+    upLoading.value = false
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+// TODO: url对应的是Home 暂时写死
														
 
															+async function createStoreSpotlight() {
														
 
															+  createLoading.value = true
														
 
															+  try {
														
 
															+    const query = {
														
 
															+      profile_id: profile.value.profile_id,
														
 
															+      url: 'https://www.amazon.com/stores/page/1D1DD2FD-CF54-4FE5-B1A0-9E01F12F8144',
														
 
															+      name: ruleForm.name,
														
 
															+      state: 'PAUSED',
														
 
															+      adGroupId: respAdGroupId.value,
														
 
															+      brandName: brandName,
														
 
															+      brandLogoAssetID: respAssetId,
														
 
															+      brandLogoCrop: brandLogoCrop,
														
 
															+      consentToTranslate: false,
														
 
															+      subpageslist: subpageslist,
														
 
															+      headline: ruleForm.title,
														
 
															+    }
														
 
															+    const response = await postStoreSpotlight(query)
														
 
															+    if (response.data.creative_state == 'success') {
														
 
															+      ElMessage({ message: '创建成功', type: 'success' })
														
 
															+    } else {
														
 
															+      ElMessage.error('上传失败')
														
 
															+    }
														
 
															+  } catch (error) {
														
 
															+    console.error('error:', error)
														
 
															+  } finally {
														
 
															+    createLoading.value = false
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+watch(topStorePages, () => {
														
 
															+    subpageslist = topStorePages.value.map((item) => ({
														
 
															+    asin: item.asin,
														
 
															+    pageTitle: item.inputName,
														
 
															+    url: item.storePageUrl,
														
 
															+  }))
														
 
															+  console.log('subpageslist', subpageslist)
														
 
															+},{deep: true})
														
 
															+
														
 
															+onMounted(() => {
														
 
															+  emitter.on('spotlight-shop', (newValue: any) => {
														
 
															+    brandName = newValue.brandRegistryName
														
 
															+    brandEntityId = newValue.brandEntityId
														
 
															+  })
														
 
															+})
														
 
															+
														
 
															+// 接收数据端在组件卸载时解绑事件
														
 
															+onUnmounted(() => {
														
 
															+  emitter.off('spotlight-shop')
														
 
															+})
														
 
															+
														
 
															+const focusShop = inject<Ref>('focusShop')
														
 
															+
														
 
															+async function getCommodityCollapseData() {
														
 
															+  commodityLoading.value = true
														
 
															+  try {
														
 
															+    const query = {
														
 
															+      profile_id: profile.value.profile_id,
														
 
															+      pageurl: focusShop.value,
														
 
															+    }
														
 
															+    const response = await getPageAsins(query)
														
 
															+    asinList.value = response.data.asinList
														
 
															+    console.log('asinList', asinList.value)
														
 
															+  } catch (error) {
														
 
															+    console.log('error:', error)
														
 
															+  } finally {
														
 
															+    commodityLoading.value = false
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+// let lastQueriedAsins = []
														
 
															+const commodityCard = ref([])
														
 
															+// async function getCommodityCardData() {
														
 
															+//   try {
														
 
															+//     commodityLoading.value = true
														
 
															+//     const topAsins = asinList.value.slice(0, 3)
														
 
															+
														
 
															+//     const newAsins = topAsins.filter((asin) => !lastQueriedAsins.includes(asin))
														
 
															+//     if (newAsins.length === 0) {
														
 
															+//       commodityLoading.value = false
														
 
															+//       return // 如果没有新的 ASIN，直接返回
														
 
															+//     }
														
 
															+
														
 
															+//     lastQueriedAsins = [...topAsins]
														
 
															+
														
 
															+//     // 清空commodityCard，为新数据做准备
														
 
															+//     commodityCard.value = []
														
 
															+
														
 
															+//     // 对每个新的 ASIN 发送请求
														
 
															+//     for (const asin of newAsins) {
														
 
															+//       const query = {
														
 
															+//         profile_id: profile.value.profile_id,
														
 
															+//         asin: asin,
														
 
															+//       }
														
 
															+
														
 
															+//       try {
														
 
															+//         const response = await getCommodityCard(query)
														
 
															+//         commodityCard.value.push(response.data)
														
 
															+//         // console.log('Response for ASIN', asin, ':', response)
														
 
															+//       } catch (error) {
														
 
															+//         console.log('Error for ASIN', asin, ':', error)
														
 
															+//       }
														
 
															+//     }
														
 
															+//   } catch (error) {
														
 
															+//     console.log('Outer error:', error)
														
 
															+//   } finally {
														
 
															+//     commodityLoading.value = false
														
 
															+//   }
														
 
															+// }
														
 
															+
														
 
															+// 更改商品功能
														
 
															+const commodityDialog = ref(false)
														
 
															+const selectedCommodity = ref()
														
 
															+const replaceableCommodity = ref([])
														
 
															+
														
 
															+function openCommodityDialog(index) {
														
 
															+  currentEditingIndex.value = index
														
 
															+  commodityDialog.value = true
														
 
															+}
														
 
															+
														
 
															+async function getAdditionalCommodityData() {
														
 
															+  try {
														
 
															+    dialogLoading3.value = true
														
 
															+    // 获取除前三个之外的所有 ASIN
														
 
															+    const additionalAsins = asinList.value.slice(3)
														
 
															+
														
 
															+    // 清空 replaceableCommodity，为新数据做准备
														
 
															+    replaceableCommodity.value = []
														
 
															+
														
 
															+    // 对每个额外的 ASIN 发送请求
														
 
															+    for (const asin of additionalAsins) {
														
 
															+      const query = {
														
 
															+        profile_id: profile.value.profile_id,
														
 
															+        asin: asin,
														
 
															+      }
														
 
															+
														
 
															+      try {
														
 
															+        const response = await getCommodityCard(query)
														
 
															+        replaceableCommodity.value.push(response.data)
														
 
															+        console.log('🚀 ~ getAdditionalCommodityData ~ replaceableCommodity-->>', replaceableCommodity.value)
														
 
															+        // console.log('Response for additional ASIN', asin, ':', response)
														
 
															+      } catch (error) {
														
 
															+        console.log('Error for additional ASIN', asin, ':', error)
														
 
															+      }
														
 
															+    }
														
 
															+  } catch (error) {
														
 
															+    console.log('Outer error:', error)
														
 
															+  } finally {
														
 
															+    dialogLoading3.value = false
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+const flattenedCommodityCard = computed(() => {
														
 
															+  return commodityCard.value.flat()
														
 
															+})
														
 
															+
														
 
															+const flattenedReplaceableCommodity = computed(() => {
														
 
															+  return replaceableCommodity.value.flat()
														
 
															+})
														
 
															+// watch(focusShop.value,
														
 
															+//   async () => {
														
 
															+//     await getCommodityCollapseData()
														
 
															+//     getCommodityCardData()
														
 
															+//     getAdditionalCommodityData()
														
 
															+//   }
														
 
															+// )
														
 
															+onMounted(async () => {
														
 
															+  await getDefaultCommodityData()
														
 
															+  // await getCommodityCollapseData()
														
 
															+  // getCommodityCardData()
														
 
															+  // getAdditionalCommodityData()
														
 
															+})
														
 
															+</script>
														
 
															+
														
 
															+<style scoped>
														
 
															+.customize-container {
														
 
															+  margin-top: 10px;
														
 
															+}
														
 
															+.upload-button-group {
														
 
															+  display: flex;
														
 
															+}
														
 
															+.introduce-item {
														
 
															+  line-height: 17px;
														
 
															+  font-size: 12px;
														
 
															+  color: #88909b;
														
 
															+}
														
 
															+.avatar-uploader .avatar {
														
 
															+  width: 178px;
														
 
															+  height: 178px;
														
 
															+  display: block;
														
 
															+}
														
 
															+::v-deep(.avatar-uploader .el-upload) {
														
 
															+  border: 1px dashed var(--el-border-color);
														
 
															+  border-radius: 6px;
														
 
															+  cursor: pointer;
														
 
															+  position: relative;
														
 
															+  overflow: hidden;
														
 
															+  transition: var(--el-transition-duration-fast);
														
 
															+}
														
 
															+
														
 
															+::v-deep(.avatar-uploader .el-upload:hover) {
														
 
															+  border-color: var(--el-color-primary);
														
 
															+}
														
 
															+::v-deep(.el-icon.avatar-uploader-icon) {
														
 
															+  font-size: 28px;
														
 
															+  color: #8c939d;
														
 
															+  width: 178px;
														
 
															+  height: 178px;
														
 
															+  text-align: center;
														
 
															+}
														
 
															+::v-deep(.avatar-uploader .el-upload.el-upload--text) {
														
 
															+  width: 100%;
														
 
															+}
														
 
															+.grid-container {
														
 
															+  flex-wrap: wrap;
														
 
															+  display: flex;
														
 
															+  width: 100%;
														
 
															+  justify-content: left;
														
 
															+}
														
 
															+.grid-item {
														
 
															+  transition: outline, background-color 0.3s;
														
 
															+  box-sizing: border-box;
														
 
															+  border: 1px solid #ffffff00;
														
 
															+  cursor: pointer;
														
 
															+  width: calc(25% - 10px);
														
 
															+  margin: 10px 5px;
														
 
															+}
														
 
															+.grid-item span {
														
 
															+  display: block; /* 或者 inline-block */
														
 
															+  white-space: nowrap; /* 保持文本在一行 */
														
 
															+  overflow: hidden; /* 隐藏超出部分 */
														
 
															+  text-overflow: ellipsis; /* 超出部分显示省略号 */
														
 
															+  max-width: 100%; /* 限制最大宽度 */
														
 
															+  font-weight: 600;
														
 
															+  line-height: 22px;
														
 
															+}
														
 
															+.grid-item.hover,
														
 
															+.grid-item.selected {
														
 
															+  border: 1px solid #306cd8;
														
 
															+  border-radius: 4px;
														
 
															+}
														
 
															+.grid-item.selected > :first-child {
														
 
															+  background-color: #f5f7fe;
														
 
															+}
														
 
															+.image {
														
 
															+  width: 100%;
														
 
															+  height: 146.49px;
														
 
															+  padding: 10px;
														
 
															+}
														
 
															+.image > :first-child {
														
 
															+  border-radius: 10px;
														
 
															+}
														
 
															+.bottom {
														
 
															+  display: flex;
														
 
															+  justify-content: space-between;
														
 
															+  align-items: center;
														
 
															+  margin-top: 5px;
														
 
															+}
														
 
															+.bottom-item {
														
 
															+  background-color: #f5f7fe;
														
 
															+  border-radius: 4px;
														
 
															+  padding: 0 3px;
														
 
															+}
														
 
															+.uploaded-image {
														
 
															+  width: 100%; /* 或根据需要调整 */
														
 
															+  height: auto; /* 保持图片的原始宽高比 */
														
 
															+  display: block;
														
 
															+  margin-bottom: 10px; /* 或根据需要调整 */
														
 
															+}
														
 
															+.upload-content {
														
 
															+  text-align: center;
														
 
															+  padding: 20px;
														
 
															+}
														
 
															+.el-carousel__item h3 {
														
 
															+  color: #edf5fe;
														
 
															+  opacity: 0.75;
														
 
															+  line-height: 200px;
														
 
															+  margin: 0;
														
 
															+  text-align: center;
														
 
															+}
														
 
															+::v-deep(button.el-carousel__button) {
														
 
															+  background-color: #3569d6;
														
 
															+}
														
 
															+.img-box {
														
 
															+  min-width: 60px;
														
 
															+  height: 60px;
														
 
															+  border: 1px solid rgb(194, 199, 207);
														
 
															+  border-radius: 4px;
														
 
															+}
														
 
															+.double-line {
														
 
															+  color: #1e2128;
														
 
															+  font-weight: 500;
														
 
															+  overflow: hidden;
														
 
															+  display: -webkit-box;
														
 
															+  -webkit-box-orient: vertical;
														
 
															+  -webkit-line-clamp: 2;
														
 
															+  white-space: pre-wrap;
														
 
															+  word-break: break-word;
														
 
															+}
														
 
															+.card-operation {
														
 
															+  display: flex;
														
 
															+  flex-direction: column;
														
 
															+  align-items: flex-end;
														
 
															+  justify-content: center;
														
 
															+  margin-left: 30px;
														
 
															+}
														
 
															+.radio-group-item {
														
 
															+  display: flex;
														
 
															+  flex-direction: column;
														
 
															+  align-content: flex-start;
														
 
															+  align-items: flex-start;
														
 
															+}
														
 
															+.radio-item {
														
 
															+  height: 80px;
														
 
															+  width: 100%;
														
 
															+  border-bottom: 1px solid #ccc;
														
 
															+}
														
 
															+.radio-item-content {
														
 
															+  padding: 10px;
														
 
															+  display: flex;
														
 
															+  align-items: center;
														
 
															+}
														
 
															+</style>
														
--- a/src/views/adManage/sb/campaigns/CreateCampaigns/component/KeywordTarget.vue
+++ b/src/views/adManage/sb/campaigns/CreateCampaigns/component/KeywordTarget.vue
@@ -0,0 +1,296 @@
 
															+<template>
														
 
															+  <div style="width: 100%; margin-top: 20px">
														
 
															+    <el-divider content-position="left">
														
 
															+      <span style="font-size: 18px; font-weight: 700">关键词定向</span>
														
 
															+    </el-divider>
														
 
															+    <div style="width: 100%; height: 600px; display: flex; border: 1px solid #e5e7eb; border-radius: 6px" v-loading="keywordsLoading">
														
 
															+      <div style="width: 50%; border-right: 1px solid #e5e7eb">
														
 
															+        <el-tabs v-model="keyWordsTabs" class="demo-tabs">
														
 
															+          <div style="margin: 8px">
														
 
															+            <div style="display: flex; align-items: center">
														
 
															+              <div style="min-width: 40px; margin-left: 8px; font-weight: 500; color: #616266">竞价:</div>
														
 
															+              <el-select v-model="bidType" class="m-2" placeholder="Select" style="width: 450px">
														
 
															+                <el-option v-for="item in bidTypeOptions" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" />
														
 
															+              </el-select>
														
 
															+              <el-input v-model="bidInput" :disabled="!(bidType == 'customBid')" placeholder="Please input">
														
 
															+                <template #prepend>$</template>
														
 
															+              </el-input>
														
 
															+            </div>
														
 
															+            <div style="display: flex; align-items: center">
														
 
															+              <span style="margin: 0 10px 0 8px; font-weight: 500; color: #616266">匹配类型: </span>
														
 
															+              <el-checkbox v-model="broadType" label="广泛" />
														
 
															+              <el-checkbox v-model="phraseType" label="词组" />
														
 
															+              <el-checkbox v-model="exactType" label="精确" />
														
 
															+            </div>
														
 
															+          </div>
														
 
															+          <el-tab-pane label="建议" name="first">
														
 
															+            <el-table
														
 
															+              height="425"
														
 
															+              style="width: 100%; padding-left: 5px"
														
 
															+              :data="keyWordsTableData"
														
 
															+              :header-cell-style="headerCellStyle"
														
 
															+              :header-row-style="changeKeyWordsTableHeader">
														
 
															+              <el-table-column prop="asin" label="关键词"> </el-table-column>
														
 
															+              <el-table-column prop="matchType" label="匹配类型"> </el-table-column>
														
 
															+              <el-table-column prop="adviceBid" label="建议出价" width="120"> </el-table-column>
														
 
															+            </el-table>
														
 
															+          </el-tab-pane>
														
 
															+          <el-tab-pane label="输入" name="second">
														
 
															+            <el-input v-model="keyWordsTextarea" :rows="10" type="textarea" style="padding-left: 5px" />
														
 
															+            <div style="display: flex; flex-direction: row-reverse; margin-top: 10px">
														
 
															+              <el-button type="primary" text bg @click="addKeyWords">添加</el-button>
														
 
															+            </div>
														
 
															+          </el-tab-pane>
														
 
															+        </el-tabs>
														
 
															+      </div>
														
 
															+      <div style="width: 50%">
														
 
															+        <el-card class="box-card" shadow="never" style="border: none">
														
 
															+          <template #header>
														
 
															+            <div class="card-header">
														
 
															+              <span style="font-weight: 550; font-size: 15px; color: #1f2128">已添加: {{ addedKeyWordsTableData.length }}</span>
														
 
															+              <span style="color: #529b2e">成功: {{ successCount }}</span>
														
 
															+              <span style="color: #c45656">失败: {{ failureCount }}</span>
														
 
															+              <el-button class="button" type="danger" text bg @click="delAllKeyWords">全部删除</el-button>
														
 
															+            </div>
														
 
															+          </template>
														
 
															+          <div class="card-body" body-style="padding-bottom: -20px;">
														
 
															+            <el-table
														
 
															+              :data="addedKeyWordsTableData"
														
 
															+              style="width: 100%; height: 450px"
														
 
															+              :header-row-style="changeKeyWordsTableHeader"
														
 
															+              :header-cell-style="headerCellStyle">
														
 
															+              <el-table-column prop="keyword" label="关键词" width="auto" />
														
 
															+              <el-table-column prop="matchType" label="匹配类型" />
														
 
															+              <el-table-column prop="bid" label="出价">
														
 
															+                <template #default="scope">
														
 
															+                  <el-input v-model="scope.row.bid" placeholder="Please input bid" />
														
 
															+                </template>
														
 
															+              </el-table-column>
														
 
															+              <el-table-column prop="suggestBid" label="建议出价" align="center">
														
 
															+                <template #default="{ row }">
														
 
															+                  <div>{{ row.adviceBid ? row.adviceBid : '--' }}</div>
														
 
															+                </template>
														
 
															+              </el-table-column>
														
 
															+              <el-table-column prop="operate" label="操作" width="60" align="right">
														
 
															+                <template #default="scope">
														
 
															+                  <el-button type="danger" size="small" link @click="delSingleKeyWord(scope)">删除</el-button>
														
 
															+                </template>
														
 
															+              </el-table-column>
														
 
															+            </el-table>
														
 
															+          </div>
														
 
															+        </el-card>
														
 
															+        <div style="display: flex; justify-content: space-around; padding-top: 0px">
														
 
															+          <el-button type="primary" plain @click="keyWordsSave" :disabled="!addedKeyWordsTableData.length">保存</el-button>
														
 
															+        </div>
														
 
															+      </div>
														
 
															+    </div>
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<script setup lang="ts">
														
 
															+import { ElMessage } from 'element-plus'
														
 
															+import { storeToRefs } from 'pinia'
														
 
															+import { Ref, inject, ref } from 'vue'
														
 
															+import { useShopInfo } from '/@/stores/shopInfo'
														
 
															+import { request } from '/@/utils/service'
														
 
															+
														
 
															+const respCampaignId = inject<Ref>('respCampaignId')
														
 
															+const respAdGroupId = inject<Ref>('respAdGroupId')
														
 
															+const shopInfo = useShopInfo()
														
 
															+const { profile } = storeToRefs(shopInfo)
														
 
															+
														
 
															+const keyWordsTabs = ref('first')
														
 
															+const bidType = ref('customBid')
														
 
															+const keywordsLoading = ref(false)
														
 
															+const bidTypeOptions = [
														
 
															+  {
														
 
															+    value: 'suggestBid',
														
 
															+    label: '建议出价',
														
 
															+    disabled: true,
														
 
															+  },
														
 
															+  {
														
 
															+    value: 'customBid',
														
 
															+    label: '自定义出价',
														
 
															+  },
														
 
															+  {
														
 
															+    value: 'defaultBid',
														
 
															+    label: '默认出价',
														
 
															+    disabled: true,
														
 
															+  },
														
 
															+]
														
 
															+
														
 
															+const bidInput = ref('0.75')
														
 
															+const keyWordsTableData = ref([]) // 关键词定向左侧表格数据
														
 
															+const addedKeyWordsTableData = ref([]) // 关键词定向右侧表格数据
														
 
															+const keyWordsTextarea = ref('')
														
 
															+let broadType = ref(true)
														
 
															+let phraseType = ref(true)
														
 
															+let exactType = ref(true)
														
 
															+const MATCH_TYPE = {
														
 
															+  broad: '广泛',
														
 
															+  phrase: '词组',
														
 
															+  exact: '精确',
														
 
															+}
														
 
															+const MATCH_TYPE_MAP = {
														
 
															+  广泛: 'broad',
														
 
															+  词组: 'phrase',
														
 
															+  精确: 'exact',
														
 
															+}
														
 
															+const successCount = ref('')
														
 
															+const failureCount = ref('')
														
 
															+
														
 
															+function addKeyWords() {
														
 
															+  const trimmedText = keyWordsTextarea.value.trim()
														
 
															+  const items = trimmedText.split(/,|\n/)
														
 
															+
														
 
															+  items.forEach((item) => {
														
 
															+    const trimmedItem = item.trim()
														
 
															+    if (trimmedItem) {
														
 
															+      if (broadType.value) {
														
 
															+        addKeyWordEntry(trimmedItem, MATCH_TYPE.broad)
														
 
															+      }
														
 
															+      if (phraseType.value) {
														
 
															+        addKeyWordEntry(trimmedItem, MATCH_TYPE.phrase)
														
 
															+      }
														
 
															+      if (exactType.value) {
														
 
															+        addKeyWordEntry(trimmedItem, MATCH_TYPE.exact)
														
 
															+      }
														
 
															+    } else {
														
 
															+      ElMessage({
														
 
															+        message: '有空项目,未被添加到列表中',
														
 
															+        type: 'warning',
														
 
															+      })
														
 
															+    }
														
 
															+  })
														
 
															+  keyWordsTextarea.value = ''
														
 
															+}
														
 
															+
														
 
															+function addKeyWordEntry(keyword, matchType) {
														
 
															+  let keyWordEntry = {
														
 
															+    keyword: keyword,
														
 
															+    matchType: matchType,
														
 
															+    bid: bidInput.value,
														
 
															+  }
														
 
															+
														
 
															+  if (!addedKeyWordsTableData.value.some((n) => n.keyword === keyWordEntry.keyword && n.matchType === keyWordEntry.matchType)) {
														
 
															+    addedKeyWordsTableData.value.push(keyWordEntry)
														
 
															+  } else {
														
 
															+    ElMessage({
														
 
															+      message: `关键词 ${keyword} (${matchType}) 已存在，未被添加到列表中`,
														
 
															+      type: 'warning',
														
 
															+    })
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+function delSingleKeyWord(scope) {
														
 
															+  const index = addedKeyWordsTableData.value.findIndex((item) => item.keyword === scope.row.keyword && item.matchType === scope.row.matchType)
														
 
															+  if (index !== -1) {
														
 
															+    addedKeyWordsTableData.value.splice(index, 1)
														
 
															+  } else {
														
 
															+    console.log('无效的索引，无法删除条目')
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+function delAllKeyWords() {
														
 
															+  addedKeyWordsTableData.value = []
														
 
															+}
														
 
															+
														
 
															+// TODO: 必须要创建了商品之后才能创建关键词定向
														
 
															+async function keyWordsSave() {
														
 
															+  keywordsLoading.value = true
														
 
															+  successCount.value = ''
														
 
															+  failureCount.value = ''
														
 
															+
														
 
															+  const keywordList = addedKeyWordsTableData.value.map((kw) => ({
														
 
															+    keywordText: kw.keyword,
														
 
															+    bid: kw.bid,
														
 
															+    matchType: MATCH_TYPE_MAP[kw.matchType],
														
 
															+  }))
														
 
															+
														
 
															+  const requestData = {
														
 
															+    profile_id: profile.value.profile_id,
														
 
															+    campaignId: respCampaignId.value,
														
 
															+    adGroupId: respAdGroupId.value,
														
 
															+    keywordlist: keywordList,
														
 
															+  }
														
 
															+  const filteredRequestData = Object.fromEntries(Object.entries(requestData).filter(([_, v]) => v != null))
														
 
															+  try {
														
 
															+    const resp = await request({
														
 
															+      url: '/api/ad_manage/sbtargets/add/keywords/',
														
 
															+      method: 'POST',
														
 
															+      data: filteredRequestData,
														
 
															+    })
														
 
															+    if (resp.data.success.length !== 0) {
														
 
															+      ElMessage({
														
 
															+        message: '关键词创建成功',
														
 
															+        type: 'success',
														
 
															+      })
														
 
															+      successCount.value = resp.data.success.length
														
 
															+      failureCount.value = resp.data.error.length
														
 
															+      delAllKeyWords()
														
 
															+    } else {
														
 
															+      ElMessage.error('关键词创建失败!')
														
 
															+    }
														
 
															+  } catch (error) {
														
 
															+    console.error('请求失败：', error)
														
 
															+  } finally {
														
 
															+    keywordsLoading.value = false
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+function headerCellStyle(args) {
														
 
															+  if (args.rowIndex === 0) {
														
 
															+    return {
														
 
															+      backgroundColor: 'rgba(245, 245, 245, 0.9)',
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+function changeKeyWordsTableHeader(args) {
														
 
															+  if (args.rowIndex === 0) {
														
 
															+    return {
														
 
															+      color: '#505968',
														
 
															+      backgroundColor: 'rgba(245, 245, 245, 0.9)',
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+</script>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+::v-deep(.el-form--default.el-form--label-top .el-form-item .el-form-item__label) {
														
 
															+  font-weight: 500;
														
 
															+}
														
 
															+.demo-tabs > .el-tabs__content {
														
 
															+  padding: 52px;
														
 
															+  color: #6b778c;
														
 
															+  font-size: 32px;
														
 
															+  font-weight: 600;
														
 
															+}
														
 
															+/* 左侧表格Tab栏 */
														
 
															+::v-deep(.el-tabs__nav-scroll) {
														
 
															+  overflow: hidden;
														
 
															+  margin-left: 20px;
														
 
															+}
														
 
															+::v-deep(.el-table__inner-wrapper::before) {
														
 
															+  background-color: white;
														
 
															+}
														
 
															+// 表格内容边距
														
 
															+div {
														
 
															+  & #pane-first,
														
 
															+  & #pane-second {
														
 
															+    margin: 10px;
														
 
															+  }
														
 
															+}
														
 
															+.card-header {
														
 
															+  display: flex;
														
 
															+  justify-content: space-between;
														
 
															+  align-items: center;
														
 
															+}
														
 
															+.box-card {
														
 
															+  width: 100%;
														
 
															+  margin-right: 10px;
														
 
															+}
														
 
															+.data-color {
														
 
															+  color: rgb(30, 33, 41);
														
 
															+}
														
 
															+</style>
														
--- a/src/views/adManage/sb/campaigns/CreateCampaigns/component/NegativeGood.vue
+++ b/src/views/adManage/sb/campaigns/CreateCampaigns/component/NegativeGood.vue
@@ -0,0 +1,354 @@
 
															+<template>
														
 
															+  <div prop="matchType" style="width: 100%; margin-top: 20px">
														
 
															+    <el-divider content-position="left">
														
 
															+      <span style="font-size: 18px; font-weight: 700">否定商品</span>
														
 
															+    </el-divider>
														
 
															+    <div style="width: 100%; height: 600px; display: flex; border: 1px solid #e5e7ec; border-radius: 6px" v-loading="negativeGoodsLoading">
														
 
															+      <div style="width: 50%; border-right: 1px solid #e5e7ec">
														
 
															+        <el-tabs v-model="topTabs" stretch>
														
 
															+          <el-tab-pane label="排除商品" name="first">
														
 
															+            <el-tabs v-model="negativeTabs" class="demo-tabs">
														
 
															+              <el-tab-pane label="搜索" name="first">
														
 
															+                <div style="margin-bottom: 10px">
														
 
															+                  <el-input placeholder="按ASIN搜索" v-model="negativeInput" @change="searchNegativeGoods" clearable />
														
 
															+                </div>
														
 
															+                <el-table
														
 
															+                  height="495"
														
 
															+                  style="width: 100%"
														
 
															+                  v-loading="loading"
														
 
															+                  :data="negativeTableData"
														
 
															+                  :header-cell-style="headerCellStyle"
														
 
															+                  :show-header="false">
														
 
															+                  <el-table-column prop="asin" label="商品">
														
 
															+                    <template #default="scope">
														
 
															+                      <div style="display: flex; align-items: center">
														
 
															+                        <div style="margin-right: 8px; line-height: normal">
														
 
															+                          <el-image class="img-box" :src="scope.row.image_link" />
														
 
															+                        </div>
														
 
															+                        <div>
														
 
															+                          <el-tooltip class="box-item" effect="dark" :content="scope.row.title" placement="top">
														
 
															+                            <div class="single-line">{{ scope.row.title ? scope.row.title : '--' }}</div>
														
 
															+                          </el-tooltip>
														
 
															+                          <span>
														
 
															+                            ASIN: <span class="data-color" style="margin-right: 8px">{{ scope.row.asin ? scope.row.asin : '--' }}</span>
														
 
															+                          </span>
														
 
															+                        </div>
														
 
															+                      </div>
														
 
															+                    </template>
														
 
															+                  </el-table-column>
														
 
															+                  <el-table-column prop="name" label="Name" width="120" align="right">
														
 
															+                    <template #header> </template>
														
 
															+                    <template #default="scope">
														
 
															+                      <el-button type="primary" size="small" @click="addSingleNegativeGoods(scope)" text>添加</el-button>
														
 
															+                    </template>
														
 
															+                  </el-table-column>
														
 
															+                </el-table>
														
 
															+              </el-tab-pane>
														
 
															+              <el-tab-pane label="输入" name="second">
														
 
															+                <el-input
														
 
															+                  v-model="negativeGoodsTextarea"
														
 
															+                  :rows="17"
														
 
															+                  type="textarea"
														
 
															+                  disabled="true"
														
 
															+                  maxlength="11000"
														
 
															+                  style="padding: 10px 10px" />
														
 
															+                <div style="display: flex; flex-direction: row-reverse; margin-top: 10px">
														
 
															+                  <el-button style="margin-right: 10px" type="primary" text bg @click="addNegativeGoods">添加</el-button>
														
 
															+                </div>
														
 
															+              </el-tab-pane>
														
 
															+            </el-tabs>
														
 
															+          </el-tab-pane>
														
 
															+          <el-tab-pane label="排除品牌" name="second">
														
 
															+
														
 
															+          </el-tab-pane>
														
 
															+        </el-tabs>
														
 
															+      </div>
														
 
															+      <div style="width: 50%">
														
 
															+        <el-card class="box-card" shadow="never" style="border: none">
														
 
															+          <template #header>
														
 
															+            <div class="card-header">
														
 
															+              <span style="font-weight: 550; font-size: 15px; color: #1f2128">已添加: {{ addedNegetiveTableData.length }}</span>
														
 
															+              <el-button class="button" type="danger" text bg @click="delAllNegativeGoods">全部删除</el-button>
														
 
															+            </div>
														
 
															+          </template>
														
 
															+          <div class="card-body"></div>
														
 
															+        </el-card>
														
 
															+        <div style="padding: 0 10px 0 10px; margin-top: -30px">
														
 
															+          <el-table
														
 
															+            :data="addedNegetiveTableData"
														
 
															+            height="473"
														
 
															+            style="width: 100%"
														
 
															+            :header-cell-style="headerCellStyle"
														
 
															+            @selection-change="handleAddedNegGoods">
														
 
															+            <el-table-column prop="asin" label="商品">
														
 
															+              <template #default="scope">
														
 
															+                <div style="display: flex; align-items: center">
														
 
															+                  <div style="margin-right: 8px; line-height: normal">
														
 
															+                    <el-image class="img-box" :src="scope.row.image_link" />
														
 
															+                  </div>
														
 
															+                  <div>
														
 
															+                    <el-tooltip class="box-item" effect="dark" :content="scope.row.title" placement="top">
														
 
															+                      <div class="single-line">{{ scope.row.title ? scope.row.title : '--' }}</div>
														
 
															+                    </el-tooltip>
														
 
															+                    <span
														
 
															+                      >ASIN:
														
 
															+                      <span class="data-color" style="margin-right: 8px">{{ scope.row.asin ? scope.row.asin : '--' }}</span>
														
 
															+                    </span>
														
 
															+                  </div>
														
 
															+                </div>
														
 
															+              </template>
														
 
															+            </el-table-column>
														
 
															+            <el-table-column label="操作" width="120" align="right">
														
 
															+              <template #default="scope">
														
 
															+                <el-button type="primary" size="small" @click="delSingleNegativeGoods(scope)" text>删除</el-button>
														
 
															+              </template>
														
 
															+            </el-table-column>
														
 
															+          </el-table>
														
 
															+        </div>
														
 
															+        <div style="display: flex; justify-content: space-around; padding-top: 10px">
														
 
															+          <el-button plain type="primary" @click="negativeGoodsSave" :disabled="!addedNegetiveTableData.length">保存</el-button>
														
 
															+        </div>
														
 
															+      </div>
														
 
															+    </div>
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<script setup lang="ts">
														
 
															+import { Ref, inject, reactive, ref } from 'vue'
														
 
															+import { useShopInfo } from '/@/stores/shopInfo'
														
 
															+import { storeToRefs } from 'pinia'
														
 
															+import { ElMessage } from 'element-plus'
														
 
															+import { request } from '/@/utils/service'
														
 
															+
														
 
															+let selections = [] // 添加选中的项
														
 
															+let addedSels = [] // 删除选中的项
														
 
															+const currentPage = ref() // 当前页
														
 
															+const pageSize = ref(20) // 每页显示条目数
														
 
															+const totalItems = ref() // 数据总量
														
 
															+const negativeTabs = ref('first')
														
 
															+const topTabs = ref('first')
														
 
															+const loading = ref(false)
														
 
															+const respCampaignId = inject<Ref>('respCampaignId')
														
 
															+const respAdGroupId = inject<Ref>('respAdGroupId')
														
 
															+const shopInfo = useShopInfo()
														
 
															+const { profile } = storeToRefs(shopInfo)
														
 
															+const negativeTableData = ref([])
														
 
															+const addedNegetiveTableData = ref([])
														
 
															+let negativeGoodsLoading = ref(false)
														
 
															+let negativeList = reactive([])
														
 
															+const tableData = negativeList
														
 
															+let inputAddedNegGoods = ref([])
														
 
															+const negativeInput = ref('')
														
 
															+
														
 
															+function setNegativeTableData(asin = '') {
														
 
															+  negativeGoodsLoading.value = true
														
 
															+  return request({
														
 
															+    url: '/api/sellers/listings/all/',
														
 
															+    method: 'GET',
														
 
															+    params: {
														
 
															+      page: currentPage.value,
														
 
															+      limit: pageSize.value,
														
 
															+      profile_id: profile.value.profile_id,
														
 
															+      asin,
														
 
															+    },
														
 
															+  })
														
 
															+    .then((resp) => {
														
 
															+      negativeTableData.value = resp.data
														
 
															+      inputAddedNegGoods.value = resp.data
														
 
															+      negativeGoodsLoading.value = false
														
 
															+    })
														
 
															+    .catch((error) => {
														
 
															+      console.error('Error fetching data:', error)
														
 
															+      negativeGoodsLoading.value = false
														
 
															+    })
														
 
															+}
														
 
															+
														
 
															+ const negativeGoodsTextarea = ref('')
														
 
															+// 输入tab的textarea
														
 
															+function addNegativeGoods() {
														
 
															+  console.log('negativeGoodsTextarea', negativeGoodsTextarea.value)
														
 
															+  loading.value = true
														
 
															+
														
 
															+  setNegativeTableData(negativeGoodsTextarea.value)
														
 
															+    .then(() => {
														
 
															+      addedNegetiveTableData.value = [...addedNegetiveTableData.value, ...inputAddedNegGoods.value]
														
 
															+    })
														
 
															+    .catch((error) => {
														
 
															+      console.error('Error fetching data:', error)
														
 
															+    })
														
 
															+    .finally(() => {
														
 
															+      loading.value = false
														
 
															+    })
														
 
															+}
														
 
															+
														
 
															+function addSingleNegativeGoods(scope) {
														
 
															+  const isAlreadyAdded = addedNegetiveTableData.value.some((item) => item.asin === scope.row.asin)
														
 
															+  if (!isAlreadyAdded) {
														
 
															+    addedNegetiveTableData.value.push(scope.row)
														
 
															+  } else {
														
 
															+    console.log('Item is already added.')
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+function delAllNegativeGoods() {
														
 
															+  addedNegetiveTableData.value = []
														
 
															+}
														
 
															+
														
 
															+function delSingleNegativeGoods(scope) {
														
 
															+  const index = addedNegetiveTableData.value.findIndex((item) => item.asin === scope.row.asin)
														
 
															+
														
 
															+  if (index !== -1) {
														
 
															+    addedNegetiveTableData.value.splice(index, 1)
														
 
															+    console.log('Item removed successfully.')
														
 
															+  } else {
														
 
															+    console.log('Item not found.')
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+function searchNegativeGoods(e) {
														
 
															+  console.log(e)
														
 
															+  if (e === '') {
														
 
															+    negativeTableData.value = []
														
 
															+  } else {
														
 
															+    setNegativeTableData(e)
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+function handleAddedNegGoods(selection) {
														
 
															+  addedSels = selection
														
 
															+}
														
 
															+
														
 
															+
														
 
															+async function negativeGoodsSave() {
														
 
															+  console.log(addedNegetiveTableData.value)
														
 
															+  const asinList = addedNegetiveTableData.value.map((item) => item.asin)
														
 
															+  console.log('🚀 ~ negativeGoodsSave ~ asinList-->>', asinList)
														
 
															+  negativeGoodsLoading.value = true
														
 
															+  console.log('addedNegetiveTableData', addedNegetiveTableData.value)
														
 
															+  try {
														
 
															+    const requestData = {
														
 
															+      profile_id: profile.value.profile_id,
														
 
															+      campaignId: respCampaignId.value,
														
 
															+      adGroupId: respAdGroupId.value,
														
 
															+      asinList: asinList,
														
 
															+      matchType: 'ASIN_SAME_AS',
														
 
															+      state: 'PAUSED',
														
 
															+    }
														
 
															+    const filteredRequestData = Object.fromEntries(Object.entries(requestData).filter(([_, v]) => v != null))
														
 
															+    const resp = await request({
														
 
															+      url: '/api/ad_manage/sptargets/add/negative/targets/',
														
 
															+      method: 'POST',
														
 
															+      data: filteredRequestData,
														
 
															+    })
														
 
															+    console.log('🚀 ~ negativeWordsSave ~ resp-->>', resp)
														
 
															+    negativeGoodsLoading.value = false
														
 
															+    if (resp.data.success.length !== 0) {
														
 
															+      ElMessage({
														
 
															+        message: '否定商品创建成功',
														
 
															+        type: 'success',
														
 
															+      })
														
 
															+      delAllNegative()
														
 
															+    } else {
														
 
															+      ElMessage.error('否定商品创建失败!')
														
 
															+    }
														
 
															+  } catch (error) {
														
 
															+    console.error('请求失败：', error)
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+function delAllNegative() {
														
 
															+  negativeList.length = 0
														
 
															+}
														
 
															+
														
 
															+const headerCellStyle = (args) => {
														
 
															+  if (args.rowIndex === 0) {
														
 
															+    return {
														
 
															+      backgroundColor: 'rgba(245, 245, 245, 0.9)',
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+</script>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+::v-deep(.el-form--default.el-form--label-top .el-form-item .el-form-item__label) {
														
 
															+  font-weight: 500;
														
 
															+}
														
 
															+.column-margin-bottom label.el-radio.is-bordered {
														
 
															+  margin-bottom: 10px;
														
 
															+  padding: 35px;
														
 
															+}
														
 
															+::v-deep(.column-margin-bottom label.el-radio.is-bordered span.el-radio__inner) {
														
 
															+  margin-top: -18px;
														
 
															+  margin-left: -15px;
														
 
															+}
														
 
															+.demo-tabs > .el-tabs__content {
														
 
															+  padding: 52px;
														
 
															+  color: #6b778c;
														
 
															+  font-size: 32px;
														
 
															+  font-weight: 600;
														
 
															+}
														
 
															+/* 广告组商品Tab栏 */
														
 
															+::v-deep(.demo-tabs .el-tabs__nav-scroll) {
														
 
															+  overflow: hidden;
														
 
															+  margin-left: 20px;
														
 
															+}
														
 
															+::v-deep(.el-tabs__nav-wrap::after) {
														
 
															+  height: 2px !important;
														
 
															+}
														
 
															+::v-deep(.el-table__inner-wrapper::before) {
														
 
															+  background-color: white;
														
 
															+}
														
 
															+// 表格内容边距
														
 
															+div {
														
 
															+  & #pane-first,
														
 
															+  & #pane-second {
														
 
															+    margin: 10px;
														
 
															+  }
														
 
															+}
														
 
															+// 输入底部样式
														
 
															+::v-deep(.card-box .el-card__body) {
														
 
															+  display: flex;
														
 
															+  align-items: center;
														
 
															+  justify-content: space-between;
														
 
															+  padding: 12px;
														
 
															+}
														
 
															+.card-header {
														
 
															+  display: flex;
														
 
															+  justify-content: space-between;
														
 
															+  align-items: center;
														
 
															+}
														
 
															+.box-card {
														
 
															+  width: 100%;
														
 
															+  // margin: 10px 0 10px 10px;
														
 
															+  margin-right: 10px;
														
 
															+}
														
 
															+.single-line {
														
 
															+  color: rgb(30, 33, 41);
														
 
															+  overflow: hidden;
														
 
															+  display: -webkit-box;
														
 
															+  -webkit-box-orient: vertical;
														
 
															+  -webkit-line-clamp: 1;
														
 
															+  white-space: pre-wrap;
														
 
															+  word-break: break-word;
														
 
															+}
														
 
															+.data-color {
														
 
															+  color: rgb(30, 33, 41);
														
 
															+}
														
 
															+.img-box {
														
 
															+  width: 60px;
														
 
															+  height: 60px;
														
 
															+  margin-top: 5px;
														
 
															+  border: 1px solid rgb(194, 199, 207);
														
 
															+  border-radius: 4px;
														
 
															+}
														
 
															+::v-deep(.goods-orientation-tabs .el-tabs__nav-scroll) {
														
 
															+  margin-left: -20px !important;
														
 
															+}
														
 
															+::v-deep(.category-tabs .el-tabs__nav) {
														
 
															+  margin-left: 20px;
														
 
															+}
														
 
															+::v-deep(.goods-orientation-tabs #tab-1) {
														
 
															+  /* 商品定向Tab栏 */
														
 
															+  border-right: 0;
														
 
															+}
														
 
															+</style>
														
--- a/src/views/adManage/sb/campaigns/CreateCampaigns/component/NegativeWord.vue
+++ b/src/views/adManage/sb/campaigns/CreateCampaigns/component/NegativeWord.vue
@@ -0,0 +1,247 @@
 
															+<template>
														
 
															+  <div style="width: 100%; margin-top: 20px">
														
 
															+    <el-divider content-position="left">
														
 
															+      <span style="font-size: 18px;font-weight: 700;">否定词</span>
														
 
															+    </el-divider>
														
 
															+    <div style="width: 100%; height: 520px; display: flex; border: 1px solid #e5e7ec; border-radius: 6px">
														
 
															+      <div style="width: 50%; border-right: 1px solid #e5e7ec">
														
 
															+        <div style="margin: 10px 0">
														
 
															+          <span style="margin-left: 25px; color: #e47470">*</span>
														
 
															+          <span style="color: #666666; margin-right: 10px">匹配类型: </span>
														
 
															+          <el-checkbox v-model="NEGATIVE_PHRASE" label="词组否定" />
														
 
															+          <el-checkbox v-model="NEGATIVE_EXACT" label="精确否定" />
														
 
															+        </div>
														
 
															+        <el-input
														
 
															+          v-model="negativeWordsTextarea"
														
 
															+          :rows="17"
														
 
															+          type="textarea"
														
 
															+          placeholder="请输入关键词，多个关键词使用逗号或者换行符分隔。(最多添加1000个关键词)"
														
 
															+          maxlength="11000"
														
 
															+          style="padding: 0 20px" />
														
 
															+        <div style="display: flex; flex-direction: row-reverse; margin-top: 10px">
														
 
															+          <el-button style="margin-right: 18px" type="primary" text bg @click="addNegative">添加</el-button>
														
 
															+        </div>
														
 
															+      </div>
														
 
															+      <div style="width: 50%">
														
 
															+        <el-card class="box-card" shadow="never" style="border: none">
														
 
															+          <template #header>
														
 
															+            <div class="card-header">
														
 
															+              <span style="font-weight: 550; font-size: 15px; color: #1f2128">已添加: {{ negativeList.length }}</span>
														
 
															+              <el-button class="button" type="danger" text bg @click="delAllNegative">全部删除</el-button>
														
 
															+            </div>
														
 
															+          </template>
														
 
															+          <div class="card-body">
														
 
															+            <el-table :data="negativeList" style="width: 100%; height: 370px; padding-bottom: 0" :header-row-style="changeNegTableHeader">
														
 
															+              <el-table-column prop="negativeWords" label="否定词" width="auto" />
														
 
															+              <el-table-column prop="operate" label="操作" width="60" align="right">
														
 
															+                <template #default="scope">
														
 
															+                  <el-button type="primary" size="small" @click="delSingleNegative(scope)" text>删除</el-button>
														
 
															+                </template>
														
 
															+              </el-table-column>
														
 
															+            </el-table>
														
 
															+          </div>
														
 
															+        </el-card>
														
 
															+        <div style="display: flex; justify-content: space-around">
														
 
															+          <el-button type="primary" plain @click="negativeWordsSave" :disabled="!negativeList.length">保存</el-button>
														
 
															+        </div>
														
 
															+      </div>
														
 
															+    </div>
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<script setup lang="ts">
														
 
															+import { ElMessage } from 'element-plus'
														
 
															+import { Ref, inject, reactive, ref } from 'vue'
														
 
															+import { useShopInfo } from '/@/stores/shopInfo'
														
 
															+import { storeToRefs } from 'pinia'
														
 
															+import { postNegativeWordData } from '../api/index'
														
 
															+
														
 
															+const shopInfo = useShopInfo()
														
 
															+const { profile } = storeToRefs(shopInfo)
														
 
															+const respCampaignId = inject<Ref>('respCampaignId')
														
 
															+const respAdGroupId = inject<Ref>('respAdGroupId')
														
 
															+
														
 
															+const tableData = reactive([])
														
 
															+let negativeWordsLoading = ref(false)
														
 
															+let negativeList = reactive([])
														
 
															+let negativeWordsTextarea = ref('')
														
 
															+let NEGATIVE_PHRASE = ref(true)
														
 
															+let NEGATIVE_EXACT = ref(true)
														
 
															+let exactNegativeList = reactive([]) // 用于存储精确否定的数组
														
 
															+let phraseNegativeList = reactive([]) // 用于存储词组否定的数组
														
 
															+
														
 
															+function addNegative() {
														
 
															+  const trimmedText = negativeWordsTextarea.value.trim()
														
 
															+  const items = trimmedText.split(/,|\n/)
														
 
															+
														
 
															+  items.forEach((item) => {
														
 
															+    const trimmedItem = item.trim()
														
 
															+    if (trimmedItem) {
														
 
															+      let phraseEntry = '词组: ' + trimmedItem
														
 
															+      let exactEntry = '精确: ' + trimmedItem
														
 
															+
														
 
															+      if (NEGATIVE_PHRASE.value && !negativeList.some((n) => n.negativeWords === phraseEntry)) {
														
 
															+        negativeList.push({ negativeWords: phraseEntry })
														
 
															+        phraseNegativeList.push(trimmedItem) // 添加到词组否定数组
														
 
															+      }
														
 
															+      if (NEGATIVE_EXACT.value && !negativeList.some((n) => n.negativeWords === exactEntry)) {
														
 
															+        negativeList.push({ negativeWords: exactEntry })
														
 
															+        exactNegativeList.push(trimmedItem) // 添加到精确否定数组
														
 
															+      }
														
 
															+    } else {
														
 
															+      console.log('有空项目,未被添加到列表中')
														
 
															+    }
														
 
															+  })
														
 
															+
														
 
															+  negativeWordsTextarea.value = ''
														
 
															+  console.log('🚀 ~ exactNegativeList-->>', exactNegativeList)
														
 
															+  console.log('🚀 ~ phraseNegativeList-->>', phraseNegativeList)
														
 
															+}
														
 
															+
														
 
															+function delAllNegative() {
														
 
															+  // negativeList.splice(0, negativeList.length)
														
 
															+  negativeList.length = 0
														
 
															+  exactNegativeList.length = 0
														
 
															+  phraseNegativeList.length = 0
														
 
															+}
														
 
															+
														
 
															+function delSingleNegative(scope) {
														
 
															+  const index = negativeList.findIndex((item) => item.negativeWords === scope.row.negativeWords)
														
 
															+  if (index !== -1) {
														
 
															+    // 确定被删除的项是词组还是精确
														
 
															+    const isPhrase = scope.row.negativeWords.startsWith('词组: ')
														
 
															+    const isExact = scope.row.negativeWords.startsWith('精确: ')
														
 
															+
														
 
															+    // 从 negativeList 删除
														
 
															+    if (negativeList.length) {
														
 
															+      negativeList.splice(index, 1)
														
 
															+      console.log(`已删除索引为 ${index} 的条目`)
														
 
															+    } else {
														
 
															+      console.log('无效的索引，无法删除条目')
														
 
															+    }
														
 
															+
														
 
															+    // 从 exactNegativeList 或 phraseNegativeList 删除
														
 
															+    const trimmedItem = scope.row.negativeWords.substring(4).trim() // 从 '词组: ' 或 '精确: ' 后开始截取
														
 
															+    if (isPhrase) {
														
 
															+      const phraseIndex = phraseNegativeList.findIndex((item) => item === trimmedItem)
														
 
															+      if (phraseIndex !== -1) {
														
 
															+        phraseNegativeList.splice(phraseIndex, 1)
														
 
															+      }
														
 
															+    } else if (isExact) {
														
 
															+      const exactIndex = exactNegativeList.findIndex((item) => item === trimmedItem)
														
 
															+      if (exactIndex !== -1) {
														
 
															+        exactNegativeList.splice(exactIndex, 1)
														
 
															+      }
														
 
															+    }
														
 
															+  } else {
														
 
															+    console.log('无效的索引，无法删除条目')
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+async function negativeWordsSave() {
														
 
															+  negativeWordsLoading.value = true
														
 
															+  console.log('negativeList', negativeList)
														
 
															+  createNegativeWords()
														
 
															+  // try {
														
 
															+  //   const requestData = {
														
 
															+  //     profile_id: profile.value.profile_id,
														
 
															+  //     campaignId: respCampaignId.value,
														
 
															+  //     adGroupId: respAdGroupId.value,
														
 
															+  //     state: 'PAUSED',
														
 
															+  //     EkeywordList: exactNegativeList,
														
 
															+  //     PkeywordList: phraseNegativeList,
														
 
															+  //   }
														
 
															+  //   const filteredRequestData = Object.fromEntries(Object.entries(requestData).filter(([_, v]) => v != null))
														
 
															+
														
 
															+  //   console.log('🚀 ~ negativeWordsSave ~ resp-->>', resp)
														
 
															+  //   negativeWordsLoading.value = false
														
 
															+  //   if (resp.data.negativeKeyworderror.length !== 0) {
														
 
															+  //     ElMessage({
														
 
															+  //       message: '否定词创建成功',
														
 
															+  //       type: 'success',
														
 
															+  //     })
														
 
															+  //     delAllNegative()
														
 
															+  //   } else {
														
 
															+  //     ElMessage.error('否定词创建失败!')
														
 
															+  //   }
														
 
															+  // } catch (error) {
														
 
															+  //   console.error('请求失败：', error)
														
 
															+  // }
														
 
															+}
														
 
															+
														
 
															+async function createNegativeWords() {
														
 
															+  const negativeWordsData = {
														
 
															+    profile_id: profile.value.profile_id,
														
 
															+    campaignId: respCampaignId.value,
														
 
															+    adGroupId: respAdGroupId.value,
														
 
															+    state: 'PAUSED',
														
 
															+    EkeywordList: exactNegativeList,
														
 
															+    PkeywordList: phraseNegativeList,
														
 
															+  }
														
 
															+  const filteredRequestData = Object.fromEntries(Object.entries(negativeWordsData).filter(([_, v]) => v != null))
														
 
															+  try {
														
 
															+    const response = await postNegativeWordData(filteredRequestData)
														
 
															+    console.log('🚀 ~ createCampaigns ~ response-->>', response)
														
 
															+      if (response.data.negativeKeyworderror.length !== 0) {
														
 
															+      ElMessage({
														
 
															+        message: '否定词创建成功',
														
 
															+        type: 'success',
														
 
															+      })
														
 
															+      delAllNegative()
														
 
															+    } else {
														
 
															+      ElMessage.error('否定词创建失败!')
														
 
															+    }
														
 
															+  } catch (error) {
														
 
															+    console.error('请求失败：', error)
														
 
															+  } finally {
														
 
															+    negativeWordsLoading.value = false
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+function changeNegTableHeader(args) {
														
 
															+  if (args.rowIndex === 0) {
														
 
															+    return {
														
 
															+      color: '#505968',
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+</script>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+::v-deep(.el-form--default.el-form--label-top .el-form-item .el-form-item__label) {
														
 
															+  font-weight: 500;
														
 
															+}
														
 
															+.demo-tabs > .el-tabs__content {
														
 
															+  padding: 52px;
														
 
															+  color: #6b778c;
														
 
															+  font-size: 32px;
														
 
															+  font-weight: 600;
														
 
															+}
														
 
															+/* 左侧表格Tab栏 */
														
 
															+::v-deep(.el-tabs__nav-scroll) {
														
 
															+  overflow: hidden;
														
 
															+  margin-left: 20px;
														
 
															+}
														
 
															+::v-deep(.el-table__inner-wrapper::before) {
														
 
															+  background-color: white;
														
 
															+}
														
 
															+// 表格内容边距
														
 
															+div {
														
 
															+  & #pane-first,
														
 
															+  & #pane-second {
														
 
															+    margin: 10px;
														
 
															+  }
														
 
															+}
														
 
															+.card-header {
														
 
															+  display: flex;
														
 
															+  justify-content: space-between;
														
 
															+  align-items: center;
														
 
															+}
														
 
															+.box-card {
														
 
															+  width: 100%;
														
 
															+  margin-right: 10px;
														
 
															+}
														
 
															+.data-color {
														
 
															+  color: rgb(30, 33, 41);
														
 
															+}
														
 
															+</style>
														
--- a/src/views/adManage/sb/campaigns/CreateCampaigns/component/ProductOrientation.vue
+++ b/src/views/adManage/sb/campaigns/CreateCampaigns/component/ProductOrientation.vue
@@ -0,0 +1,810 @@
 
															+<template>
														
 
															+  <div style="width: 100%; margin-top: 20px">
														
 
															+    <el-divider content-position="left">
														
 
															+      <span style="font-size: 18px; font-weight: 700">商品定向</span>
														
 
															+    </el-divider>
														
 
															+    <div style="width: 100%; height: 600px; display: flex; border: 1px solid #e5e7eb; border-radius: 6px" v-loading="productOrientationLoading">
														
 
															+      <div style="width: 50%; border-right: 1px solid #e5e7eb">
														
 
															+        <el-tabs
														
 
															+          type="border-card"
														
 
															+          stretch
														
 
															+          class="goods-orientation-tabs"
														
 
															+          style="border: 0; border-right: 0; border-bottom-left-radius: 6px; border-top-left-radius: 5px; overflow: hidden">
														
 
															+          <el-tab-pane label="品类" style="border-top-left-radius: 6px">
														
 
															+            <div style="display: flex; align-items: center">
														
 
															+              <span style="width: 40px">竞价:</span>
														
 
															+              <el-select v-model="categoryBiddingType" @change="singleGoodsBidSelectChanged" class="m-2" placeholder="Select">
														
 
															+                <el-option v-for="item in categoryBiddingTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
														
 
															+              </el-select>
														
 
															+              <el-input v-model="singleGoodsBidInput" :disabled="categoryBiddingType === 'defaultBid'" style="width: 200px">
														
 
															+                <template #prepend>$</template>
														
 
															+              </el-input>
														
 
															+            </div>
														
 
															+
														
 
															+            <el-tabs v-model="categoryTabs" class="category-tabs">
														
 
															+              <el-tab-pane label="建议" name="first">
														
 
															+                <el-table :data="proposalTableData" style="width: 100%" height="422">
														
 
															+                  <el-table-column prop="proposal" label="建议" width="520">
														
 
															+                    <template #header> 0建议 </template>
														
 
															+                  </el-table-column>
														
 
															+                  <el-table-column prop="address" label="Address">
														
 
															+                    <template #header>
														
 
															+                      <el-button type="primary" size="normal" link @click="handleGoodsAdd">全部添加</el-button>
														
 
															+                    </template>
														
 
															+                    <template #default="scope">
														
 
															+                      <el-button type="primary" size="small" @click="addSingleGoods(scope)" text>添加</el-button>
														
 
															+                    </template>
														
 
															+                  </el-table-column>
														
 
															+                </el-table>
														
 
															+              </el-tab-pane>
														
 
															+              <el-tab-pane label="搜索" name="second">
														
 
															+                <el-input placeholder="请输入关键词过滤" />
														
 
															+                <el-scrollbar height="390px">
														
 
															+                  <el-tree :data="searchClassifyTableData" :props="defaultProps">
														
 
															+                    <template #default="{ node, data }">
														
 
															+                      <span class="custom-tree-node">
														
 
															+                        <span style="width: 75%">{{ node.label }}</span>
														
 
															+                        <span style="color: rgb(50, 108, 216)" v-if="data.ta == true">
														
 
															+                          <a @click="refine(data)"> 细化 </a>
														
 
															+                          <a style="margin-left: 8px" @click="orientate(node, data)"> 定向 </a>
														
 
															+                        </span>
														
 
															+                      </span>
														
 
															+                    </template>
														
 
															+                  </el-tree>
														
 
															+                </el-scrollbar>
														
 
															+                <el-dialog v-model="visible" :title="`细化分类: ${dialogTitle}`" @close="dialogClose" destroy-on-close>
														
 
															+                  <div style="display: flex; justify-content: space-between">
														
 
															+                    <span>根据特定品牌、价格范围、星级和Prime配送资格，细化分类</span>
														
 
															+                    <span>
														
 
															+                      <el-checkbox v-model="dialogForm.isCount" label="显示商品数量" @change="isCountChanged" />
														
 
															+                    </span>
														
 
															+                  </div>
														
 
															+                  <el-form :model="dialogForm" :rules="dialogRules" ref="dialogFormRef" style="margin-top: 20px">
														
 
															+                    <el-form-item style="padding-left: 140px">
														
 
															+                      <span style="margin-right: 10px; color: #616266; font-weight: 500">品牌</span>
														
 
															+                      <el-select
														
 
															+                        v-model="dialogForm.dialogselectValue"
														
 
															+                        @change="dialogSelectChange"
														
 
															+                        multiple
														
 
															+                        placeholder="请选择"
														
 
															+                        :loading="dialogSelectLoading">
														
 
															+                        <el-option v-for="item in dialogForm.dialogOptions" :key="item.value" :label="item.label" :value="item.value" />
														
 
															+                      </el-select>
														
 
															+                    </el-form-item>
														
 
															+                    <el-form-item prop="prices" style="padding-left: 112px; margin-top: 10px">
														
 
															+                      <span style="margin-right: 10px; color: #616266; font-weight: 500">价格范围</span>
														
 
															+                      <el-input-number v-model="dialogForm.prices.lowest" :min="1" :controls="false" placeholder="无最低商品价格" />
														
 
															+                      --
														
 
															+                      <el-input-number v-model="dialogForm.prices.highest" :min="1" :controls="false" placeholder="无最高商品价格" />
														
 
															+                    </el-form-item>
														
 
															+                    <el-form-item prop="starRating" style="padding-left: 85px; margin-top: 10px">
														
 
															+                      <span style="margin-right: 15px; color: #616266; font-weight: 500">查看星级评定</span>
														
 
															+                      <el-slider v-model="dialogForm.starRating" range show-stops :max="5" :marks="marks" style="width: 70%" />
														
 
															+                    </el-form-item>
														
 
															+                    <el-form-item prop="delivery" style="padding-left: 140px; margin-top: 30px">
														
 
															+                      <span style="margin-right: 10px; color: #616266; font-weight: 500">配送</span>
														
 
															+                      <el-radio-group v-model="dialogForm.delivery">
														
 
															+                        <el-radio label="all" style="font-weight: 400">所有</el-radio>
														
 
															+                        <el-radio label="eligible" style="font-weight: 400">具备Prime资格</el-radio>
														
 
															+                        <el-radio label="diseligible" style="font-weight: 400">不具备Prime资格</el-radio>
														
 
															+                      </el-radio-group>
														
 
															+                    </el-form-item>
														
 
															+                  </el-form>
														
 
															+                  <template #footer>
														
 
															+                    <div style="display: flex; justify-content: space-between">
														
 
															+                      <span v-loading="countLoadig">定位到的商品数量:
														
 
															+                        <span v-if="dialogForm.isCount == true">{{ commodityCount[0]?.min }} - {{ commodityCount[0]?.max }}</span>
														
 
															+                      </span>
														
 
															+                      <span class="dialog-footer">
														
 
															+                        <el-button @click="visible = false">取消</el-button>
														
 
															+                        <el-button type="primary" @click="dialogFormSubmit">确定</el-button>
														
 
															+                      </span>
														
 
															+                    </div>
														
 
															+                  </template>
														
 
															+                </el-dialog>
														
 
															+              </el-tab-pane>
														
 
															+            </el-tabs>
														
 
															+          </el-tab-pane>
														
 
															+          <el-tab-pane label="单个商品">
														
 
															+            <div style="display: flex; align-items: center">
														
 
															+              <span style="width: 40px">竞价:</span>
														
 
															+              <el-select class="m-2" v-model="singleGoodsBidSelect" @change="singleGoodsBidSelectChanged">
														
 
															+                <el-option v-for="item in singleGoodsBidTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
														
 
															+              </el-select>
														
 
															+              <el-input v-model="singleGoodsBidInput" :disabled="singleGoodsBidSelect == 'defaultBid'" style="width: 200px">
														
 
															+                <template #prepend>$</template>
														
 
															+              </el-input>
														
 
															+              <!-- <div style="margin-left: 20px">
														
 
															+                <span style="margin-right: 10px">类型:</span>
														
 
															+                <el-checkbox v-model="expand" label="扩展" />
														
 
															+                <el-checkbox v-model="accurate" label="精准" />
														
 
															+              </div> -->
														
 
															+            </div>
														
 
															+            <el-tabs v-model="singleGoodsTabs" class="category-tabs">
														
 
															+              <el-tab-pane label="建议" name="first">
														
 
															+                <el-table :data="proposalTableData" style="width: 100%" height="342">
														
 
															+                  <el-table-column prop="proposal" label="商品" width="520" />
														
 
															+                  <el-table-column prop="address" label="类型" />
														
 
															+                  <el-table-column prop="operational" label="操作" />
														
 
															+                </el-table>
														
 
															+              </el-tab-pane>
														
 
															+              <el-tab-pane label="搜索" name="second">
														
 
															+                <el-input v-model="singleGoodsSearchInp" @change="singleGoodsSearchChaneged" placeholder="按ASIN搜索"></el-input>
														
 
															+                <el-table :data="searchTableData" style="width: 100%" height="309">
														
 
															+                  <el-table-column prop="asin" label="商品" width="520">
														
 
															+                    <template #default="{ row }">
														
 
															+                      <div style="display: flex; align-items: center">
														
 
															+                        <img :src="row.image_link" style="width: 40px; height: 40px; margin-right: 10px" />
														
 
															+                        <span>{{ row.title }}</span>
														
 
															+                      </div>
														
 
															+                    </template>
														
 
															+                  </el-table-column>
														
 
															+                  <el-table-column prop="productTypes" label="类型">
														
 
															+                    <template #default="scope">
														
 
															+                      <div v-if="expand">扩展</div>
														
 
															+                      <div v-if="accurate">精准</div>
														
 
															+                    </template>
														
 
															+                  </el-table-column>
														
 
															+                  <el-table-column prop="operational" label="操作">
														
 
															+                    <template #default="scope">
														
 
															+                      <el-button class="button" text @click="addSingleSearch(scope)">添加</el-button>
														
 
															+                    </template>
														
 
															+                  </el-table-column>
														
 
															+                </el-table>
														
 
															+              </el-tab-pane>
														
 
															+              <!-- TODO: 商品定向TextArea -->
														
 
															+              <el-tab-pane label="输入" name="third">待完成</el-tab-pane>
														
 
															+            </el-tabs>
														
 
															+          </el-tab-pane>
														
 
															+        </el-tabs>
														
 
															+      </div>
														
 
															+      <div style="width: 50%">
														
 
															+        <el-card class="box-card" shadow="never" style="border: none">
														
 
															+          <template #header>
														
 
															+            <div class="card-header">
														
 
															+              <span style="font-weight: 550; font-size: 15px; color: #1f2128">已添加: {{ productOrientationTableData.length }}</span>
														
 
															+              <el-button class="button" type="danger" text bg @click="delAllCna">全部删除</el-button>
														
 
															+            </div>
														
 
															+          </template>
														
 
															+          <div class="card-body">
														
 
															+            <el-table
														
 
															+              height="460"
														
 
															+              :data="productOrientationTableData"
														
 
															+              style="width: 100%"
														
 
															+              :header-row-style="changeKeyWordsTableHeader"
														
 
															+              :header-cell-style="headerCellStyle">
														
 
															+              <el-table-column prop="cna" label="分类 & 商品" width="300">
														
 
															+                <template #default="scope">
														
 
															+                  <div v-if="scope.row.cna || scope.row.classification">
														
 
															+                    分类: <span style="color: #000000">{{ scope.row.cna ? scope.row.cna : scope.row.classification }}</span>
														
 
															+                  </div>
														
 
															+                  <div v-if="scope.row.asin">
														
 
															+                    {{ scope.row.asin ? scope.row.asin : '--' }}
														
 
															+                  </div>
														
 
															+                  <div v-if="scope.row.brand">
														
 
															+                    品牌: <span style="color: #000000">{{ scope.row.brand }}</span>
														
 
															+                  </div>
														
 
															+                  <div v-if="scope.row.low_price || scope.row.high_price">
														
 
															+                    品牌价格:
														
 
															+                    <span style="color: #000000">
														
 
															+                      {{ scope.row.low_price ? '$' + scope.row.low_price : '--' }} -
														
 
															+                      {{ scope.row.high_price ? '$' + scope.row.high_price : '--' }}
														
 
															+                    </span>
														
 
															+                  </div>
														
 
															+                  <div v-if="scope.row.low_rating || scope.row.high_rating">
														
 
															+                    评分: <span style="color: #000000">{{ scope.row.low_rating }} - {{ scope.row.high_rating }}</span>
														
 
															+                  </div>
														
 
															+                  <div v-if="scope.row.deliveryText">
														
 
															+                    配送: <span style="color: #000000">{{ scope.row.deliveryText }}</span>
														
 
															+                  </div>
														
 
															+                </template>
														
 
															+              </el-table-column>
														
 
															+              <el-table-column prop="type" label="类型">
														
 
															+                <template #default="scope">
														
 
															+                  {{ scope.row.productTypeText ? scope.row.productTypeText : '--' }}
														
 
															+                </template>
														
 
															+              </el-table-column>
														
 
															+              <el-table-column prop="bid" label="竞价">
														
 
															+                <template #default="scope">
														
 
															+                  <el-input-number v-model="scope.row.bid" :min="0.02" :max="1000000" :controls="false" size="small" />
														
 
															+                </template>
														
 
															+              </el-table-column>
														
 
															+              <el-table-column prop="operate" label="操作" width="60" align="right">
														
 
															+                <template #default="scope">
														
 
															+                  <el-button text size="small" @click="delCna(scope.$index)">删除</el-button>
														
 
															+                </template>
														
 
															+              </el-table-column>
														
 
															+            </el-table>
														
 
															+          </div>
														
 
															+        </el-card>
														
 
															+        <div style="display: flex; justify-content: space-around; margin-top: -8px">
														
 
															+          <el-button type="primary" plain @click="productTagetSave">保存</el-button>
														
 
															+        </div>
														
 
															+      </div>
														
 
															+    </div>
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<script setup lang="ts">
														
 
															+import { CSSProperties, Ref, inject, onMounted, reactive, ref } from 'vue'
														
 
															+import { useShopInfo } from '/@/stores/shopInfo'
														
 
															+import { storeToRefs } from 'pinia'
														
 
															+import { ElMessage } from 'element-plus'
														
 
															+import { request } from '/@/utils/service'
														
 
															+
														
 
															+
														
 
															+let adsTableData = ref([])
														
 
															+let selections = [] // 添加选中的项
														
 
															+let addedSels = [] // 删除选中的项
														
 
															+
														
 
															+const singleGoodsTabs = ref('first')
														
 
															+const respCampaignId = inject<Ref>('respCampaignId')
														
 
															+const respAdGroupId = inject<Ref>('respAdGroupId')
														
 
															+const shopInfo = useShopInfo()
														
 
															+const { profile } = storeToRefs(shopInfo)
														
 
															+const categoryTabs = ref('first')
														
 
															+const categoryBiddingType = ref('customBid')
														
 
															+const categoryBiddingTypeOptions = [
														
 
															+  {
														
 
															+    value: 'defaultBid',
														
 
															+    label: '默认竞价',
														
 
															+  },
														
 
															+  {
														
 
															+    value: 'customBid',
														
 
															+    label: '自定义竞价',
														
 
															+  },
														
 
															+]
														
 
															+const categoryBidInput = ref('0.75')
														
 
															+const singleGoodsBidSelect = ref('customBid')
														
 
															+const singleGoodsBidTypeOptions = [
														
 
															+  {
														
 
															+    value: 'defaultBid',
														
 
															+    label: '默认竞价',
														
 
															+  },
														
 
															+  {
														
 
															+    value: 'customBid',
														
 
															+    label: '自定义竞价',
														
 
															+  },
														
 
															+]
														
 
															+const singleGoodsBidInput = ref('0.75')
														
 
															+const expand = ref(true)
														
 
															+const accurate = ref(false)
														
 
															+const proposalTableData = ref([])
														
 
															+const searchClassifyTableData = ref([])
														
 
															+const productOrientationLoading = ref(false)
														
 
															+const dialogSelectLoading = ref(false)
														
 
															+const defaultProps = {
														
 
															+  children: 'ch',
														
 
															+  label: 'cna',
														
 
															+}
														
 
															+const countLoadig = ref(false)
														
 
															+const visible = ref(false)
														
 
															+let dialogTitle = ref('')
														
 
															+let categoryId = ref('')
														
 
															+const dialogselectValue = ref('')
														
 
															+let dialogOptions: any = ref([])
														
 
															+const dialogForm: any = reactive({
														
 
															+  prices: {
														
 
															+    lowest: undefined,
														
 
															+    highest: undefined,
														
 
															+  },
														
 
															+  starRating: [0, 5],
														
 
															+  dialogselectValue: [],
														
 
															+  delivery: 'all',
														
 
															+  isCount: false,
														
 
															+})
														
 
															+const dialogFormRef = ref()
														
 
															+const dialogRules = reactive({
														
 
															+  prices: [{ validator: validatePrices, trigger: 'blur' }],
														
 
															+})
														
 
															+
														
 
															+interface Mark {
														
 
															+  style: CSSProperties
														
 
															+  label: string
														
 
															+}
														
 
															+type Marks = Record<number, Mark | string>
														
 
															+const marks = reactive<Marks>({
														
 
															+  0: '0',
														
 
															+  1: '1',
														
 
															+  2: '2',
														
 
															+  3: '3',
														
 
															+  4: '4',
														
 
															+  5: '5',
														
 
															+})
														
 
															+let commodityCount = ref([])
														
 
															+let currentDialogIndex = ref(0)
														
 
															+let productOrientationTableData = ref([])
														
 
															+
														
 
															+async function validatePrices(rule, value) {
														
 
															+  if (value.highest !== '' && value.lowest !== '' && value.highest <= value.lowest) {
														
 
															+    return Promise.reject('最高价格必须大于最低价格')
														
 
															+  }
														
 
															+  return Promise.resolve()
														
 
															+}
														
 
															+
														
 
															+async function setProductOrientationData() {
														
 
															+  productOrientationLoading.value = true
														
 
															+  try {
														
 
															+    const resp = await request({
														
 
															+      url: '/api/ad_manage/targetable/categories/',
														
 
															+      method: 'GET',
														
 
															+      params: {
														
 
															+        profile_id: profile.value.profile_id,
														
 
															+      },
														
 
															+    })
														
 
															+    searchClassifyTableData.value = resp.data
														
 
															+    productOrientationLoading.value = false
														
 
															+  } catch (error) {
														
 
															+    console.error('请求失败：', error)
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+async function setDialogOption() {
														
 
															+  try {
														
 
															+    const resp = await request({
														
 
															+      url: '/api/ad_manage/categories/brands/',
														
 
															+      method: 'GET',
														
 
															+      params: {
														
 
															+        profile_id: profile.value.profile_id,
														
 
															+        category_id: categoryId.value,
														
 
															+      },
														
 
															+    })
														
 
															+    const options = resp.data
														
 
															+    dialogForm.dialogOptions = options.brands.map((brand) => {
														
 
															+      return {
														
 
															+        label: brand.name,
														
 
															+        value: brand.id,
														
 
															+      }
														
 
															+    })
														
 
															+    dialogSelectLoading.value = false
														
 
															+  } catch (error) {
														
 
															+    console.error('请求失败：', error)
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+async function getCount(instanceId) {
														
 
															+  try {
														
 
															+    const resp = await request({
														
 
															+      url: '/api/ad_manage/products/count/',
														
 
															+      method: 'POST',
														
 
															+      data: {
														
 
															+        profile_id: profile.value.profile_id,
														
 
															+        category_id: categoryId.value,
														
 
															+      },
														
 
															+    })
														
 
															+    if (instanceId === currentDialogIndex.value) {
														
 
															+      commodityCount.value = resp.data.AsinCounts
														
 
															+    }
														
 
															+  } catch (error) {
														
 
															+    console.error('请求失败：', error)
														
 
															+  } finally {
														
 
															+    if (instanceId === currentDialogIndex.value) {
														
 
															+      countLoadig.value = false
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+function dialogClose() {
														
 
															+  currentDialogIndex.value++
														
 
															+  resetDialogForm()
														
 
															+  dialogForm.isCount = false
														
 
															+  commodityCount.value = []
														
 
															+  countLoadig.value = false
														
 
															+}
														
 
															+
														
 
															+function resetDialogForm() {
														
 
															+  dialogForm.prices.lowest = undefined
														
 
															+  dialogForm.prices.highest = undefined
														
 
															+  dialogForm.starRating = [0, 5]
														
 
															+  dialogForm.dialogselectValue = []
														
 
															+  dialogForm.delivery = 'all'
														
 
															+  dialogForm.isCount = false
														
 
															+}
														
 
															+
														
 
															+function isCountChanged() {
														
 
															+  if (dialogForm.isCount) {
														
 
															+    const instanceId = currentDialogIndex.value
														
 
															+    countLoadig.value = true
														
 
															+    getCount(instanceId)
														
 
															+  } else {
														
 
															+    countLoadig.value = false
														
 
															+    commodityCount.value = []
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+function delCna(index) {
														
 
															+  productOrientationTableData.value.splice(index, 1)
														
 
															+}
														
 
															+
														
 
															+function delAllCna() {
														
 
															+  productOrientationTableData.value = []
														
 
															+}
														
 
															+
														
 
															+function singleGoodsBidSelectChanged() {
														
 
															+  if (singleGoodsBidSelect.value === 'defaultBid' || categoryBiddingType.value === 'defaultBid') {
														
 
															+    singleGoodsBidInput.value = ''
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+let singleGoodsSearchInp = ref('')
														
 
															+let searchTableData = ref([])
														
 
															+function setSearchTableData(asin = '', sku = '') {
														
 
															+  return request({
														
 
															+    url: '/api/sellers/listings/our/',
														
 
															+    method: 'GET',
														
 
															+    params: {
														
 
															+      profile_id: profile.value.profile_id,
														
 
															+      asin,
														
 
															+      sku,
														
 
															+    },
														
 
															+  })
														
 
															+    .then((resp) => {
														
 
															+      searchTableData.value = resp.data
														
 
															+      productOrientationLoading.value = false
														
 
															+    })
														
 
															+    .catch((error) => {
														
 
															+      console.error('Error fetching data:', error)
														
 
															+      productOrientationLoading.value = false
														
 
															+    })
														
 
															+}
														
 
															+function singleGoodsSearchChaneged() {
														
 
															+  productOrientationLoading.value = true
														
 
															+  setSearchTableData()
														
 
															+}
														
 
															+function addSingleSearch(scope) {
														
 
															+  console.log('🚀 ~ addSingleSearch ~ scope-->>', scope);
														
 
															+
														
 
															+  const typesToAdd = [];
														
 
															+  if (expand.value) {
														
 
															+    typesToAdd.push('ASIN_EXPANDED_FROM');
														
 
															+  }
														
 
															+  if (accurate.value) {
														
 
															+    typesToAdd.push('ASIN_SAME_AS');
														
 
															+  }
														
 
															+  const productTypeMap = {
														
 
															+    ASIN_EXPANDED_FROM: '扩展',
														
 
															+    ASIN_SAME_AS: '精确',
														
 
															+  };
														
 
															+
														
 
															+  typesToAdd.forEach((productType) => {
														
 
															+    const isAlreadyAdded = productOrientationTableData.value.some(item => item.sku === scope.row.sku && item.productType === productType);
														
 
															+
														
 
															+    if (!isAlreadyAdded) {
														
 
															+      const newData = {
														
 
															+        type: 'p',
														
 
															+        asin: scope.row.asin,
														
 
															+        sku: scope.row.sku,
														
 
															+        productType: productType,
														
 
															+        productTypeText: productTypeMap[productType],
														
 
															+      };
														
 
															+      productOrientationTableData.value.push(newData);
														
 
															+    } else {
														
 
															+      console.log(`${productType} item is already added.`);
														
 
															+    }
														
 
															+  });
														
 
															+}
														
 
															+
														
 
															+
														
 
															+let selectedLabels = ref([]) // 选中的label数组
														
 
															+function dialogSelectChange(event) {
														
 
															+  console.log('🚀 ~ dialogSelectChange ~ event-->>', event)
														
 
															+
														
 
															+  // 使用 map 来转换每个选中项的 value 为其对应的 label
														
 
															+  selectedLabels.value = event.map((selectedValue) => {
														
 
															+    const selectedOption = dialogForm.dialogOptions.find((option) => option.value === selectedValue)
														
 
															+    return selectedOption ? selectedOption.label : ''
														
 
															+  })
														
 
															+
														
 
															+  console.log('🚀 ~ dialogSelectChange ~ selectedLabels-->>', selectedLabels.value)
														
 
															+}
														
 
															+
														
 
															+let refineItem = ref([])
														
 
															+// 细化按钮功能
														
 
															+function refine(data) {
														
 
															+  console.log('🚀 ~ refine ~ data-->>', data)
														
 
															+  commodityCount.value = []
														
 
															+  dialogTitle.value = data.cna
														
 
															+  categoryId.value = data.cid
														
 
															+  refineItem.value.push(data)
														
 
															+  visible.value = true
														
 
															+  dialogSelectLoading.value = true
														
 
															+  setDialogOption()
														
 
															+}
														
 
															+// 弹框提交功能
														
 
															+function dialogFormSubmit() {
														
 
															+  dialogFormRef.value.validate((valid) => {
														
 
															+    if (valid) {
														
 
															+      console.log('表单提交')
														
 
															+      visible.value = false
														
 
															+      const dialogClassification = dialogTitle.value
														
 
															+      const dialogPrices_low = dialogForm.prices.lowest
														
 
															+      const dialogPrices_high = dialogForm.prices.highest
														
 
															+      const dialogStartRating = dialogForm.starRating
														
 
															+      const ratingLow = dialogStartRating[0]
														
 
															+      const ratingHigh = dialogStartRating[1]
														
 
															+      const dialogDelivery = dialogForm.delivery
														
 
															+      console.log('🚀 ~ dialogFormRef.value.validate ~ dialogDelivery-->>', dialogDelivery)
														
 
															+      const deliveryMap = {
														
 
															+        all: '所有',
														
 
															+        eligible: '具备Prime资格',
														
 
															+        diseligible: '不具备Prime资格',
														
 
															+      }
														
 
															+
														
 
															+      selectedLabels.value.forEach((brandLabel) => {
														
 
															+        // 查找与当前 brandLabel 相对应的选项
														
 
															+        const selectedOption = dialogForm.dialogOptions.find((option) => option.label === brandLabel)
														
 
															+        // 获取对应的 brandId，如果没有找到则默认为空
														
 
															+        const brandId = selectedOption ? selectedOption.value : ''
														
 
															+        const refineObj = {
														
 
															+          type: 'c',
														
 
															+          classification: dialogClassification,
														
 
															+          classificationId: categoryId.value,
														
 
															+          brand: brandLabel,
														
 
															+          brandId: brandId, // 使用找到的 brandId
														
 
															+          low_price: dialogPrices_low,
														
 
															+          high_price: dialogPrices_high,
														
 
															+          low_rating: ratingLow,
														
 
															+          high_rating: ratingHigh,
														
 
															+          delivery: dialogDelivery,
														
 
															+          deliveryText: deliveryMap[dialogDelivery],
														
 
															+        }
														
 
															+        console.log('🚀 ~ dialogFormRef.value.validate ~ refineObj-->>', refineObj)
														
 
															+        productOrientationTableData.value.push(refineObj)
														
 
															+      })
														
 
															+    } else {
														
 
															+      console.log('验证失败')
														
 
															+    }
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+// 定向按钮功能
														
 
															+function orientate(node, data) {
														
 
															+  console.log('🚀 ~ orientate ~ data-->>', data);
														
 
															+  const exists = productOrientationTableData.value.some(item => item.cid === data.cid);
														
 
															+
														
 
															+  if (!exists) {
														
 
															+    const newData = {
														
 
															+      type: 'c',
														
 
															+      classification: data.cna,
														
 
															+      classificationId: data.cid,
														
 
															+    };
														
 
															+    productOrientationTableData.value.push(newData);
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+
														
 
															+
														
 
															+let productTargetBidList = ref([])
														
 
															+async function productTagetSave() {
														
 
															+  console.log('tableData', productOrientationTableData.value)
														
 
															+  // 检查是否存在 bid 为空的行
														
 
															+  const hasEmptyBid = productOrientationTableData.value.some(row => row.bid == null || row.bid === '')
														
 
															+  // 直接返回，不继续执行
														
 
															+  if (hasEmptyBid) {
														
 
															+    console.log('存在空的 bid，不发送请求')
														
 
															+    ElMessage.error('存在空的 bid，无法创建商品!')
														
 
															+    return
														
 
															+  }
														
 
															+  productOrientationTableData.value.forEach((row) => {
														
 
															+    productTargetBidList.value.push(row.bid)
														
 
															+  })
														
 
															+  console.log('productTargetBidList', productTargetBidList.value)
														
 
															+  productOrientationLoading.value = true
														
 
															+  try {
														
 
															+    const requestData = {
														
 
															+      profile_id: profile.value.profile_id,
														
 
															+      adGroupId: respAdGroupId.value,
														
 
															+      campaignId: respCampaignId.value,
														
 
															+      expressionList: productOrientationTableData.value,
														
 
															+      state: "PAUSED"
														
 
															+    }
														
 
															+    const filteredRequestData = Object.fromEntries(Object.entries(requestData).filter(([_, v]) => v != null))
														
 
															+    const resp = await request({
														
 
															+      url: '/api/ad_manage/sptargets/manual/create/',
														
 
															+      method: 'POST',
														
 
															+      data: filteredRequestData,
														
 
															+    })
														
 
															+
														
 
															+    console.log('🚀 ~ createTargetGroup ~ resp-->>', resp)
														
 
															+    productOrientationLoading.value = false
														
 
															+
														
 
															+    if (respAdGroupId.value) {
														
 
															+      ElMessage({
														
 
															+        message: '商品创建成功',
														
 
															+        type: 'success',
														
 
															+      })
														
 
															+    } else {
														
 
															+      ElMessage.error('商品创建失败!')
														
 
															+    }
														
 
															+  } catch (error) {
														
 
															+    console.error('请求失败：', error)
														
 
															+  }
														
 
															+
														
 
															+  // 清空表格和 bid 列表
														
 
															+  productOrientationTableData.value = []
														
 
															+  productTargetBidList.value = []
														
 
															+}
														
 
															+
														
 
															+function handleGoodsAdd() {
														
 
															+  // 过滤掉已经存在于addedData.value中的项
														
 
															+  const newSelections = selections.filter(
														
 
															+    (sel) => !adsTableData.value.some((added) => added.sku === sel.sku) // 使用sku作为唯一标识
														
 
															+  )
														
 
															+  // 如果有新的不重复项，加入到addedData.value中
														
 
															+  if (newSelections.length > 0) {
														
 
															+    adsTableData.value.push(...newSelections)
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+function addSingleGoods(scope) {
														
 
															+  // console.log('scope', scope.row)
														
 
															+  const isAlreadyAdded = adsTableData.value.some((item) => item.sku === scope.row.sku)
														
 
															+  if (!isAlreadyAdded) {
														
 
															+    adsTableData.value.push(scope.row)
														
 
															+  } else {
														
 
															+    console.log('Item is already added.')
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+const headerCellStyle = (args) => {
														
 
															+  if (args.rowIndex === 0) {
														
 
															+    return {
														
 
															+      backgroundColor: 'rgba(245, 245, 245, 0.9)',
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+function changeKeyWordsTableHeader(args) {
														
 
															+  if (args.rowIndex === 0) {
														
 
															+    return {
														
 
															+      color: '#505968',
														
 
															+      backgroundColor: 'rgba(245, 245, 245, 0.9)',
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+onMounted(() => {
														
 
															+  setProductOrientationData()
														
 
															+})
														
 
															+
														
 
															+</script>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+::v-deep(.el-form--default.el-form--label-top .el-form-item .el-form-item__label) {
														
 
															+  font-weight: 500;
														
 
															+}
														
 
															+.column-item .el-radio-group {
														
 
															+  display: inline-flex;
														
 
															+  font-size: 0;
														
 
															+  flex-direction: column;
														
 
															+  align-items: flex-start;
														
 
															+}
														
 
															+.radio-description {
														
 
															+  font-size: 12px;
														
 
															+  color: #666;
														
 
															+  margin-top: -18px;
														
 
															+  margin-left: 22px;
														
 
															+}
														
 
															+.radio-description-2 {
														
 
															+  font-size: 12px;
														
 
															+  color: #666;
														
 
															+  margin-top: -10px;
														
 
															+}
														
 
															+.column-margin-bottom label.el-radio.is-bordered {
														
 
															+  margin-bottom: 10px;
														
 
															+  padding: 35px;
														
 
															+}
														
 
															+::v-deep(.column-margin-bottom label.el-radio.is-bordered span.el-radio__inner) {
														
 
															+  margin-top: -18px;
														
 
															+  margin-left: -15px;
														
 
															+}
														
 
															+.gap-items {
														
 
															+  display: flex;
														
 
															+  justify-content: flex-start;
														
 
															+  width: 100%;
														
 
															+  margin-bottom: 20px;
														
 
															+}
														
 
															+.gap-item {
														
 
															+  width: 200px;
														
 
															+  margin-left: 30px;
														
 
															+  color: #0b0d0d;
														
 
															+}
														
 
															+.demo-tabs > .el-tabs__content {
														
 
															+  padding: 52px;
														
 
															+  color: #6b778c;
														
 
															+  font-size: 32px;
														
 
															+  font-weight: 600;
														
 
															+}
														
 
															+/* 广告组商品Tab栏 */
														
 
															+::v-deep(.el-tabs__nav-scroll) {
														
 
															+  overflow: hidden;
														
 
															+  margin-left: 20px;
														
 
															+}
														
 
															+::v-deep(.el-tabs__nav-wrap::after) {
														
 
															+  height: 2px !important;
														
 
															+}
														
 
															+::v-deep(.el-table__inner-wrapper::before) {
														
 
															+  background-color: white;
														
 
															+}
														
 
															+// 表格内容边距
														
 
															+div {
														
 
															+  & #pane-first,
														
 
															+  & #pane-second {
														
 
															+    margin: 10px;
														
 
															+  }
														
 
															+}
														
 
															+// 输入底部样式
														
 
															+::v-deep(.card-box .el-card__body) {
														
 
															+  display: flex;
														
 
															+  align-items: center;
														
 
															+  justify-content: space-between;
														
 
															+  padding: 12px;
														
 
															+}
														
 
															+.card-header {
														
 
															+  display: flex;
														
 
															+  justify-content: space-between;
														
 
															+  align-items: center;
														
 
															+}
														
 
															+.box-card {
														
 
															+  width: 100%;
														
 
															+  // margin: 10px 0 10px 10px;
														
 
															+  margin-right: 10px;
														
 
															+}
														
 
															+.single-line {
														
 
															+  color: rgb(30, 33, 41);
														
 
															+  overflow: hidden;
														
 
															+  display: -webkit-box;
														
 
															+  -webkit-box-orient: vertical;
														
 
															+  -webkit-line-clamp: 1;
														
 
															+  white-space: pre-wrap;
														
 
															+  word-break: break-word;
														
 
															+}
														
 
															+.data-color {
														
 
															+  color: rgb(30, 33, 41);
														
 
															+}
														
 
															+.img-box {
														
 
															+  width: 60px;
														
 
															+  height: 60px;
														
 
															+  margin-top: 5px;
														
 
															+  border: 1px solid rgb(194, 199, 207);
														
 
															+  border-radius: 4px;
														
 
															+}
														
 
															+.target-group-item {
														
 
															+  margin-top: 15px;
														
 
															+}
														
 
															+.suggested-bid-item {
														
 
															+  margin-left: 230px;
														
 
															+  margin-right: 60px;
														
 
															+}
														
 
															+.bid-input {
														
 
															+  width: 200px;
														
 
															+  margin-left: 15px;
														
 
															+}
														
 
															+
														
 
															+::v-deep(.goods-orientation-tabs .el-tabs__nav-scroll) {
														
 
															+  margin-left: -20px !important;
														
 
															+}
														
 
															+::v-deep(.category-tabs .el-tabs__nav) {
														
 
															+  margin-left: 20px;
														
 
															+}
														
 
															+::v-deep(.goods-orientation-tabs #tab-1) {
														
 
															+  /* 商品定向Tab栏 */
														
 
															+  border-right: 0;
														
 
															+}
														
 
															+.custom-tree-node {
														
 
															+  /* el-tree自定义样式 */
														
 
															+  flex: 1;
														
 
															+  display: flex;
														
 
															+  align-items: center;
														
 
															+  justify-content: space-between;
														
 
															+  font-size: 14px;
														
 
															+  padding-right: 8px;
														
 
															+}
														
 
															+.dialog-head {
														
 
															+  /* 弹窗样式 */
														
 
															+  display: flex;
														
 
															+  flex-direction: row;
														
 
															+  justify-content: space-between;
														
 
															+}
														
 
															+</style>
														
 
															+
														
--- a/src/views/adManage/sb/campaigns/CreateCampaigns/component/ProductSetCommodity.vue
+++ b/src/views/adManage/sb/campaigns/CreateCampaigns/component/ProductSetCommodity.vue
@@ -0,0 +1,444 @@
 
															+<template>
														
 
															+  <div prop="commodity" style="width: 100%" v-loading="productLoading">
														
 
															+    <div style="width: 100%; height: 620px; display: flex; border: 1px solid #e5e7ec; border-radius: 6px">
														
 
															+      <div style="width: 50%; border-right: 1px solid #e5e7ec">
														
 
															+        <el-tabs v-model="productTabs" class="demo-tabs">
														
 
															+          <el-tab-pane label="搜索" name="first">
														
 
															+            <div style="margin-bottom: 10px">
														
 
															+              <el-input v-model="searchInp" placeholder="Please input" class="input-with-select" @change="inpChange" clearable>
														
 
															+                <template #prepend>
														
 
															+                  <el-select v-model="leftSelect" style="width: 100px" @change="selChange">
														
 
															+                    <el-option label="名称" value="name" />
														
 
															+                    <el-option label="ASIN" value="asin" />
														
 
															+                    <el-option label="SKU" value="sku" />
														
 
															+                  </el-select>
														
 
															+                </template>
														
 
															+                <template #append>
														
 
															+                  <el-select v-model="rightSelect" style="width: 100px">
														
 
															+                    <el-option label="最新优先" value="latest" />
														
 
															+                    <el-option label="最早优先" value="earliest" />
														
 
															+                    <el-option label="优选广告" value="optimal" />
														
 
															+                  </el-select>
														
 
															+                </template>
														
 
															+              </el-input>
														
 
															+            </div>
														
 
															+            <el-table
														
 
															+              height="490"
														
 
															+              style="width: 100%"
														
 
															+              v-loading="loading"
														
 
															+              :data="productTableData"
														
 
															+              :header-cell-style="headerCellStyle"
														
 
															+              @selection-change="handleSelectionChange">
														
 
															+              <el-table-column type="selection" width="50" />
														
 
															+              <el-table-column prop="asin" label="商品">
														
 
															+                <template #default="scope">
														
 
															+                  <div style="display: flex; align-items: center">
														
 
															+                    <div style="margin-right: 8px; line-height: normal">
														
 
															+                      <el-image class="img-box" :src="scope.row.image_link" />
														
 
															+                    </div>
														
 
															+                    <div>
														
 
															+                      <el-tooltip class="box-item" effect="dark" :content="scope.row.title" placement="top">
														
 
															+                        <div class="single-line">{{ scope.row.title ? scope.row.title : '--' }}</div>
														
 
															+                      </el-tooltip>
														
 
															+                      <div class="data-color">
														
 
															+                        <span style="font-weight: 500; color: rgb(30, 33, 41)">${{ scope.row.price ? scope.row.price : '--' }}</span>
														
 
															+                        <span style="margin: 0 5px; color: #cacdd4">|</span>
														
 
															+                        <span style="color: #6d7784">{{ scope.row.quantity }}</span>
														
 
															+                      </div>
														
 
															+                      <span>
														
 
															+                        ASIN: <span class="data-color" style="margin-right: 8px">{{ scope.row.asin ? scope.row.asin : '--' }}</span>
														
 
															+                      </span>
														
 
															+                      <span>
														
 
															+                        SKU: <span class="data-color">{{ scope.row.sku ? scope.row.sku : '--' }}</span>
														
 
															+                      </span>
														
 
															+                    </div>
														
 
															+                  </div>
														
 
															+                </template>
														
 
															+              </el-table-column>
														
 
															+              <el-table-column prop="name" label="Name" width="120" align="right">
														
 
															+                <template #header>
														
 
															+                  <el-button type="primary" size="normal" link @click="handleGoodsAdd">添加已选中</el-button>
														
 
															+                </template>
														
 
															+                <template #default="scope">
														
 
															+                  <el-button type="primary" size="small" @click="addSingleGoods(scope)" text>添加</el-button>
														
 
															+                </template>
														
 
															+              </el-table-column>
														
 
															+            </el-table>
														
 
															+            <el-pagination
														
 
															+              @current-change="handleCurrentChange"
														
 
															+              @size-change="handleSizeChange"
														
 
															+              :current-page="currentPage"
														
 
															+              :page-size="pageSize"
														
 
															+              :total="totalItems"
														
 
															+              layout="prev, pager, next" />
														
 
															+          </el-tab-pane>
														
 
															+          <el-tab-pane label="输入" name="second">
														
 
															+            <el-input
														
 
															+              style="padding: 10px"
														
 
															+              v-model="productTextarea"
														
 
															+              :rows="20"
														
 
															+              type="textarea"
														
 
															+              placeholder="请输入ASIN，多个ASIN使用逗号、空格或换行符分隔。(未完成)"
														
 
															+              maxlength="11000" />
														
 
															+            <div style="display: flex; flex-direction: row-reverse; margin-top: 10px">
														
 
															+              <el-button v-for="button in buttons" :key="button.text" :type="button.type" link @click="addGods">{{ button.text }}</el-button>
														
 
															+            </div>
														
 
															+          </el-tab-pane>
														
 
															+        </el-tabs>
														
 
															+      </div>
														
 
															+      <div style="width: 50%">
														
 
															+        <el-card class="box-card" shadow="never" style="border: 0">
														
 
															+          <template #header>
														
 
															+            <div class="card-header">
														
 
															+              <span style="font-weight: 550; font-size: 15px; color: #1f2128">已添加: {{ addedTableData.length }}</span>
														
 
															+              <el-tooltip content="添加最少3件商品。我们建议添加至少5件商品，以降低在商品缺货时出现广告活动暂停的可能性。" placement="top">
														
 
															+                <el-text type="warning" truncated style="width: 350px;">添加最少3件商品。我们建议添加至少5件商品，以降低在商品缺货时出现广告活动暂停的可能性</el-text>
														
 
															+              </el-tooltip>
														
 
															+              <el-button class="button" type="danger" text bg @click="delAllGoods">全部删除</el-button>
														
 
															+            </div>
														
 
															+          </template>
														
 
															+          <div class="card-body"></div>
														
 
															+        </el-card>
														
 
															+        <div style="padding: 0 10px 0 10px; margin-top: -12px">
														
 
															+          <el-table
														
 
															+            :data="addedTableData"
														
 
															+            height="510"
														
 
															+            style="width: 100%"
														
 
															+            :header-cell-style="headerCellStyle"
														
 
															+            @selection-change="handleAddedGoodsChange">
														
 
															+            <el-table-column type="selection" width="50" />
														
 
															+            <el-table-column prop="asin" label="ASIN">
														
 
															+              <template #default="scope">
														
 
															+                <div style="display: flex; align-items: center">
														
 
															+                  <div style="margin-right: 8px; line-height: normal">
														
 
															+                    <el-image class="img-box" :src="scope.row.image_link" />
														
 
															+                  </div>
														
 
															+                  <div>
														
 
															+                    <el-tooltip class="box-item" effect="dark" :content="scope.row.title" placement="top">
														
 
															+                      <div class="single-line">{{ scope.row.title ? scope.row.title : '--' }}</div>
														
 
															+                    </el-tooltip>
														
 
															+                    <div class="data-color">
														
 
															+                      <span style="font-weight: 500; color: rgb(30, 33, 41)">${{ scope.row.price ? scope.row.price : '--' }}</span>
														
 
															+                      <span style="margin: 0 5px; color: #cacdd4">|</span>
														
 
															+                      <span style="color: #6d7784">{{ scope.row.quantity }}</span>
														
 
															+                    </div>
														
 
															+                    <span
														
 
															+                      >ASIN:
														
 
															+                      <span class="data-color" style="margin-right: 8px">{{ scope.row.asin ? scope.row.asin : '--' }}</span>
														
 
															+                    </span>
														
 
															+                    <span
														
 
															+                      >SKU:
														
 
															+                      <span class="data-color">{{ scope.row.sku ? scope.row.sku : '--' }}</span>
														
 
															+                    </span>
														
 
															+                  </div>
														
 
															+                </div>
														
 
															+              </template>
														
 
															+            </el-table-column>
														
 
															+            <el-table-column prop="name" label="Name" width="120" align="right">
														
 
															+              <template #header>
														
 
															+                <el-button type="danger" size="normal" link @click="delSelectedGoods">删除已选中</el-button>
														
 
															+              </template>
														
 
															+              <template #default="scope">
														
 
															+                <el-button type="primary" size="small" @click="delSingleGoods(scope)" text>删除</el-button>
														
 
															+              </template>
														
 
															+            </el-table-column>
														
 
															+          </el-table>
														
 
															+        </div>
														
 
															+        <!-- <div style="display: flex; justify-content: space-around; padding-top: 5px">
														
 
															+          <el-button type="primary" plain :disabled="addedTableData.length < 3"  @click="submitProductForm">保存</el-button>
														
 
															+        </div> -->
														
 
															+      </div>
														
 
															+    </div>
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<script setup lang="ts">
														
 
															+import type { TabsPaneContext } from 'element-plus'
														
 
															+import { ElMessage } from 'element-plus'
														
 
															+import { storeToRefs } from 'pinia'
														
 
															+import type { Ref } from 'vue'
														
 
															+import { inject, onMounted, ref, watch } from 'vue'
														
 
															+import emitter from '/@/utils/emitter'
														
 
															+import { useShopInfo } from '/@/stores/shopInfo'
														
 
															+import { request } from '/@/utils/service'
														
 
															+
														
 
															+const shopInfo = useShopInfo()
														
 
															+const { profile } = storeToRefs(shopInfo)
														
 
															+const productTextarea = ref('')
														
 
															+const productLoading = ref(false)
														
 
															+let addedAdsTableItems = ref([])
														
 
															+const currentPage = ref() // 当前页
														
 
															+const pageSize = ref(20) // 每页显示条目数
														
 
															+const totalItems = ref() // 数据总量
														
 
															+const productTableData = ref([]) // 左侧表格数据
														
 
															+const loading = ref(false)
														
 
															+let addedTableData = ref([])
														
 
															+let selections = []
														
 
															+let addedSels = []
														
 
															+const searchInp = ref('')
														
 
															+const leftSelect = ref('name')
														
 
															+const buttons = [{ type: 'primary', text: '添加' }] as const
														
 
															+const productTabs = ref('first')
														
 
															+const rightSelect = ref('latest')
														
 
															+const respCampaignId = inject<Ref>('respCampaignId')
														
 
															+const respCampaignName = inject<Ref>('respCampaignName')
														
 
															+const respAdGroupId = inject<Ref>('respAdGroupId')
														
 
															+
														
 
															+function setTableData(asin = '', sku = '') {
														
 
															+  return request({
														
 
															+    url: '/api/sellers/listings/our/',
														
 
															+    method: 'GET',
														
 
															+    params: {
														
 
															+      page: currentPage.value,
														
 
															+      limit: pageSize.value,
														
 
															+      profile_id: profile.value.profile_id,
														
 
															+      asin,
														
 
															+      sku,
														
 
															+    },
														
 
															+  })
														
 
															+    .then((resp) => {
														
 
															+      productTableData.value = resp.data
														
 
															+      totalItems.value = resp.total
														
 
															+      currentPage.value = resp.page
														
 
															+      loading.value = false
														
 
															+    })
														
 
															+    .catch((error) => {
														
 
															+      console.error('Error fetching data:', error)
														
 
															+      loading.value = false
														
 
															+    })
														
 
															+}
														
 
															+
														
 
															+function addSingleGoods(scope) {
														
 
															+  // console.log('scope', scope.row)
														
 
															+  const isAlreadyAdded = addedTableData.value.some((item) => item.asin === scope.row.asin)
														
 
															+  if (!isAlreadyAdded) {
														
 
															+    addedTableData.value.push(scope.row)
														
 
															+  } else {
														
 
															+    console.log('Item is already added.')
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+function addGods() {
														
 
															+  const inputData = productTextarea.value
														
 
															+  const asins = inputData.split(/[\n,]+/)
														
 
															+
														
 
															+  asins.forEach((asin) => {
														
 
															+    if (asin.trim()) {
														
 
															+      setTableData(asin.trim())
														
 
															+        .then((response) => {
														
 
															+          console.log(`Data for ASIN ${asin}:`, response) // 更新这里来正确地访问数据
														
 
															+        })
														
 
															+        .catch((error) => {
														
 
															+          console.error(`Error fetching data for ASIN ${asin}:`, error)
														
 
															+        })
														
 
															+    }
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+function delSingleGoods(scope) {
														
 
															+  const index = addedTableData.value.findIndex((item) => item.asin === scope.row.asin)
														
 
															+  if (index !== -1) {
														
 
															+    addedTableData.value.splice(index, 1)
														
 
															+    console.log('Item removed successfully.')
														
 
															+  } else {
														
 
															+    console.log('Item not found.')
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+function delAllGoods() {
														
 
															+  addedTableData.value = []
														
 
															+  // addedTableData.value.splice(0, addedTableData.value.length)
														
 
															+}
														
 
															+
														
 
															+// 删除第二个table中已经选中的项
														
 
															+function delSelectedGoods() {
														
 
															+  addedTableData.value = addedTableData.value.filter((item) => !addedSels.includes(item))
														
 
															+  addedSels = []
														
 
															+}
														
 
															+
														
 
															+function inpChange(e) {
														
 
															+  const value = e
														
 
															+  if (leftSelect.value === 'asin') {
														
 
															+    loading.value = true
														
 
															+    setTableData(value)
														
 
															+  } else if (leftSelect.value === 'sku') {
														
 
															+    loading.value = true
														
 
															+    setTableData('', value)
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+function selChange(e) {
														
 
															+  console.log('e', e)
														
 
															+  const value = e
														
 
															+  if (leftSelect.value === 'asin' && searchInp.value) {
														
 
															+    loading.value = true
														
 
															+    setTableData(value)
														
 
															+  } else if (leftSelect.value === 'sku' && searchInp.value) {
														
 
															+    loading.value = true
														
 
															+    setTableData('', value)
														
 
															+  }
														
 
															+}
														
 
															+// 点击表格选项触发事件
														
 
															+function handleSelectionChange(selection) {
														
 
															+  selections = selection
														
 
															+}
														
 
															+// 获取addedTable中已选中的项
														
 
															+function handleAddedGoodsChange(selection) {
														
 
															+  addedSels = selection
														
 
															+}
														
 
															+// 添加已选中的项
														
 
															+function handleGoodsAdd() {
														
 
															+  // 过滤掉已经存在于addedData.value中的项
														
 
															+  const newSelections = selections.filter(
														
 
															+    (sel) => !addedTableData.value.some((added) => added.asin === sel.asin) // 使用asin作为唯一标识
														
 
															+  )
														
 
															+  // 如果有新的不重复项，加入到addedData.value中
														
 
															+  if (newSelections.length > 0) {
														
 
															+    addedTableData.value.push(...newSelections)
														
 
															+  }
														
 
															+}
														
 
															+// 点击Tab
														
 
															+const handleGoodsTabs = (tab: TabsPaneContext, event: Event) => {
														
 
															+  console.log(tab, event)
														
 
															+}
														
 
															+
														
 
															+function isItemInList(item, list) {
														
 
															+  return list.some((listItem) => listItem.sku === item.sku && listItem.asin === item.asin)
														
 
															+}
														
 
															+// 监听商品右侧表格已添加的数据并转化数据格式
														
 
															+watch(
														
 
															+  addedTableData,
														
 
															+  (newValue, oldValue) => {
														
 
															+    newValue.forEach((item) => {
														
 
															+      if (!isItemInList(item, addedAdsTableItems.value)) {
														
 
															+        addedAdsTableItems.value.push({ sku: item.sku, asin: item.asin })
														
 
															+      }
														
 
															+    })
														
 
															+  },
														
 
															+  { deep: true }
														
 
															+)
														
 
															+
														
 
															+async function createAds() {
														
 
															+  try {
														
 
															+    const requestData = {
														
 
															+      profile_id: profile.value.profile_id,
														
 
															+      campaignId: respCampaignId.value,
														
 
															+      adGroupId: respAdGroupId.value,
														
 
															+      asinsku: addedAdsTableItems.value,
														
 
															+      state: 'PAUSED',
														
 
															+    }
														
 
															+    const filteredRequestData = Object.fromEntries(Object.entries(requestData).filter(([_, v]) => v != null))
														
 
															+    const resp = await request({
														
 
															+      url: '/api/ad_manage/spads/create/',
														
 
															+      method: 'POST',
														
 
															+      data: filteredRequestData,
														
 
															+    })
														
 
															+    console.log('🚀 ~ createAds ~ resp-->>', resp)
														
 
															+    productLoading.value = false
														
 
															+    if (resp.data.success.length > 0) {
														
 
															+      addedTableData.value = []
														
 
															+      ElMessage({
														
 
															+        message: '商品创建成功',
														
 
															+        type: 'success',
														
 
															+      })
														
 
															+    } else {
														
 
															+      ElMessage.error('商品创建失败!')
														
 
															+    }
														
 
															+  } catch (error) {
														
 
															+    console.error('请求失败：', error)
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+function submitProductForm() {
														
 
															+  productLoading.value = true
														
 
															+  createAds()
														
 
															+}
														
 
															+
														
 
															+// 处理分页器当前页变化
														
 
															+function handleCurrentChange(newPage) {
														
 
															+  currentPage.value = newPage
														
 
															+  loading.value = true
														
 
															+  setTableData()
														
 
															+}
														
 
															+// 处理分页器每页显示条目数变化
														
 
															+function handleSizeChange(newSize) {
														
 
															+  pageSize.value = newSize
														
 
															+  currentPage.value = 1 // 重置到第一页
														
 
															+}
														
 
															+
														
 
															+watch(addedTableData, () => {
														
 
															+  if (addedTableData.value.length > 0) {
														
 
															+    emitter.emit('addedTableData', addedTableData.value)
														
 
															+  }
														
 
															+},{deep:true})
														
 
															+
														
 
															+const headerCellStyle = (args) => {
														
 
															+  if (args.rowIndex === 0) {
														
 
															+    return {
														
 
															+      backgroundColor: 'rgba(245, 245, 245, 0.9)',
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+onMounted(() => {
														
 
															+  setTableData()
														
 
															+})
														
 
															+</script>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+::v-deep(.el-form--default.el-form--label-top .el-form-item .el-form-item__label) {
														
 
															+  font-weight: 500;
														
 
															+}
														
 
															+.demo-tabs > .el-tabs__content {
														
 
															+  padding: 52px;
														
 
															+  color: #6b778c;
														
 
															+  font-size: 32px;
														
 
															+  font-weight: 600;
														
 
															+}
														
 
															+/* 广告组商品Tab栏 */
														
 
															+::v-deep(.el-tabs__nav-scroll) {
														
 
															+  overflow: hidden;
														
 
															+  margin-left: 20px;
														
 
															+}
														
 
															+::v-deep(.el-table__inner-wrapper::before) {
														
 
															+  background-color: white;
														
 
															+}
														
 
															+// 表格内容边距
														
 
															+div {
														
 
															+  & #pane-first,
														
 
															+  & #pane-second {
														
 
															+    margin: 10px;
														
 
															+  }
														
 
															+}
														
 
															+.card-header {
														
 
															+  display: flex;
														
 
															+  justify-content: space-between;
														
 
															+  align-items: center;
														
 
															+}
														
 
															+.box-card {
														
 
															+  width: 100%;
														
 
															+  margin-right: 10px;
														
 
															+}
														
 
															+.single-line {
														
 
															+  color: rgb(30, 33, 41);
														
 
															+  overflow: hidden;
														
 
															+  display: -webkit-box;
														
 
															+  -webkit-box-orient: vertical;
														
 
															+  -webkit-line-clamp: 1;
														
 
															+  white-space: pre-wrap;
														
 
															+  word-break: break-word;
														
 
															+}
														
 
															+.data-color {
														
 
															+  color: rgb(30, 33, 41);
														
 
															+}
														
 
															+.img-box {
														
 
															+  width: 60px;
														
 
															+  height: 60px;
														
 
															+  margin-top: 5px;
														
 
															+  border: 1px solid rgb(194, 199, 207);
														
 
															+  border-radius: 4px;
														
 
															+}
														
 
															+/* 商品定向Tab栏 */
														
 
															+::v-deep(.goods-orientation-tabs #tab-1) {
														
 
															+  border-right: 0;
														
 
															+}
														
 
															+</style>
														
--- a/src/views/adManage/sb/campaigns/CreateCampaigns/component/ProductSetCreativity1.vue
+++ b/src/views/adManage/sb/campaigns/CreateCampaigns/component/ProductSetCreativity1.vue
@@ -0,0 +1,896 @@
 
															+<template>
														
 
															+  <div class="customize-container">
														
 
															+    <el-card body-style="padding: 20px 80px 0 80px;">
														
 
															+      <div style="font-weight: 700; padding-bottom: 18px">
														
 
															+        <span style="color: #306cd7; font-size: 26px">|</span>
														
 
															+        <span style="font-size: 18px; padding-left: 5px">创意</span>
														
 
															+      </div>
														
 
															+      <el-form
														
 
															+        ref="ruleFormRef"
														
 
															+        :model="ruleForm"
														
 
															+        :rules="rules"
														
 
															+        label-width="120px"
														
 
															+        class="demo-ruleForm"
														
 
															+        size="default"
														
 
															+        label-position="top"
														
 
															+        status-icon>
														
 
															+        <el-form-item label="广告名称" prop="name">
														
 
															+          <el-input v-model="ruleForm.name" style="width: 50%" />
														
 
															+        </el-form-item>
														
 
															+        <div style="display: flex; border: 1px solid #dddfe6; padding: 0 0 0 5px; margin-bottom: 20px" v-loading="createLoading">
														
 
															+          <div style="width: 50%; padding-left: 5px; border-right: 1px solid #dddfe6">
														
 
															+            <el-scrollbar height="700px">
														
 
															+              <el-collapse v-model="activeNames" @change="handleChange" style="border-top: none; border-bottom: none">
														
 
															+                <el-collapse-item name="1" style="padding-right: 10px">
														
 
															+                  <template #title> <span style="color: #e47470; margin-right: 4px">*</span>品牌名称和徽标</template>
														
 
															+                  <el-form-item prop="brandName">
														
 
															+                    <el-input v-model="ruleForm.brandName" placeholder="请输入品牌名称" style="padding: 0 0 5px 0"></el-input>
														
 
															+                  </el-form-item>
														
 
															+
														
 
															+                  <el-upload
														
 
															+                    v-model:file-list="fileList"
														
 
															+                    :on-change="changeFile"
														
 
															+                    v-loading="upLoading"
														
 
															+                    :on-remove="handleRemove"
														
 
															+                    action="#"
														
 
															+                    accept=".png, .jpg"
														
 
															+                    :limit="1"
														
 
															+                    list-type="picture-card"
														
 
															+                    :auto-upload="false">
														
 
															+                    <el-icon><Plus /></el-icon>
														
 
															+                    <template #file="{ file }">
														
 
															+                      <div>
														
 
															+                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
														
 
															+                        <span class="el-upload-list__item-actions">
														
 
															+                          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
														
 
															+                            <el-icon><zoom-in /></el-icon>
														
 
															+                          </span>
														
 
															+                          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
														
 
															+                            <el-icon><Delete /></el-icon>
														
 
															+                          </span>
														
 
															+                        </span>
														
 
															+                      </div>
														
 
															+                    </template>
														
 
															+                    <template #tip>
														
 
															+                      <div style="margin-top: 10px">
														
 
															+                        <div style="display: flex; align-items: center; justify-content: space-between">
														
 
															+                          <span style="line-height: 17px; font-weight: 600; color: #1e2128">徽标规格</span>
														
 
															+                          <el-button type="primary" :icon="Picture" @click="openDialog">从素材库中选择</el-button>
														
 
															+                        </div>
														
 
															+                        <div class="introduce-item">1、图片大小: 400x400 像素或更大</div>
														
 
															+                        <div class="introduce-item">2、文件大小: 1MB 或更小</div>
														
 
															+                        <div class="introduce-item">3、文件格式: PNG 或 JPG</div>
														
 
															+                        <div class="introduce-item">
														
 
															+                          4、内容: 徽标必须填满图片或置于白色或透明背景上详细了解我们的徽标要求
														
 
															+                          <span style="margin-left: 25px; position: relative">
														
 
															+                            <el-icon size="14" style="position: absolute; left: -14px; top: 1px"><Link /></el-icon>
														
 
															+                            <el-link
														
 
															+                              type="primary"
														
 
															+                              :underline="false"
														
 
															+                              href="https://advertising.amazon.com/resources/ad-policy/sponsored-ads-policies#brandlogo"
														
 
															+                              target="_blank"
														
 
															+                              >查看要求</el-link
														
 
															+                            >
														
 
															+                          </span>
														
 
															+                        </div>
														
 
															+                      </div>
														
 
															+                    </template>
														
 
															+                  </el-upload>
														
 
															+                  <!-- 预览弹窗 -->
														
 
															+                  <el-dialog v-model="dialogVisible">
														
 
															+                    <img w-full :src="dialogImageUrl" alt="Preview Image" />
														
 
															+                  </el-dialog>
														
 
															+                </el-collapse-item>
														
 
															+                <el-collapse-item name="2" style="padding-right: 10px">
														
 
															+                  <template #title>自定义图片(可选)</template>
														
 
															+                  <el-upload
														
 
															+                    v-model:file-list="customFileList"
														
 
															+                    :on-change="changeCustomFile"
														
 
															+                    :on-remove="handleCustomRemove"
														
 
															+                    v-loading="customUpLoading"
														
 
															+                    action="#"
														
 
															+                    accept=".png, .jpg"
														
 
															+                    :limit="1"
														
 
															+                    list-type="picture-card"
														
 
															+                    :auto-upload="false">
														
 
															+                    <el-icon><Plus /></el-icon>
														
 
															+                    <template #file="{ file }">
														
 
															+                      <div>
														
 
															+                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
														
 
															+                        <span class="el-upload-list__item-actions">
														
 
															+                          <span class="el-upload-list__item-preview" @click="customPictureCardPreview(file)">
														
 
															+                            <el-icon><zoom-in /></el-icon>
														
 
															+                          </span>
														
 
															+                          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
														
 
															+                            <el-icon><Delete /></el-icon>
														
 
															+                          </span>
														
 
															+                        </span>
														
 
															+                      </div>
														
 
															+                    </template>
														
 
															+                    <template #tip>
														
 
															+                      <div style="margin-top: 10px">
														
 
															+                        <div style="display: flex; align-items: center; justify-content: space-between">
														
 
															+                          <span style="line-height: 17px; font-weight: 600; color: #1e2128">图片规格</span>
														
 
															+                          <el-button type="primary" :icon="Picture" @click="openLifeStyleDialog">从素材库中选择</el-button>
														
 
															+                        </div>
														
 
															+                        <div class="introduce-item">1、图片大小: 1200 x 628 像素或更大</div>
														
 
															+                        <div class="introduce-item">2、文件大小: 5MB 或更小</div>
														
 
															+                        <div class="introduce-item">3、文件格式: PNG 或 JPG</div>
														
 
															+                        <div class="introduce-item">4、内容: 图片中未添加文本、图形或徽标</div>
														
 
															+                      </div>
														
 
															+                    </template>
														
 
															+                  </el-upload>
														
 
															+                  <!-- 预览弹窗 -->
														
 
															+                  <el-dialog v-model="customDialogVisible">
														
 
															+                    <img w-full :src="dialogImageUrl" alt="Preview Image" />
														
 
															+                  </el-dialog>
														
 
															+                </el-collapse-item>
														
 
															+
														
 
															+                <el-collapse-item name="commodity" v-loading="commodityLoading" style="padding-right: 10px">
														
 
															+                  <template #title> <span style="color: #e47470; margin-right: 4px">*</span>商品</template>
														
 
															+                  <div v-for="(item, index) in flattenedCommodityCard" :key="index" style="margin: 0 0 5px 0">
														
 
															+                    <el-card shadow="hover" body-style="padding: 10px; display: flex;">
														
 
															+                      <div style="margin-right: 8px; line-height: normal">
														
 
															+                        <el-image class="img-box" :src="item.image_link" />
														
 
															+                      </div>
														
 
															+                      <div style="position: relative">
														
 
															+                        <el-tooltip class="box-item" effect="dark" :content="item.title" placement="top">
														
 
															+                          <div class="double-line">{{ item.title }}</div>
														
 
															+                        </el-tooltip>
														
 
															+                        <span>
														
 
															+                          <span style="color: #6d7784">ASIN: </span>
														
 
															+                          <span class="data-color" style="margin-right: 8px">{{ item.asin }}</span>
														
 
															+                        </span>
														
 
															+                        <el-button
														
 
															+                          type="primary"
														
 
															+                          size="small"
														
 
															+                          link
														
 
															+                          @click="() => openCommodityDialog(index)"
														
 
															+                          style="position: absolute; bottom: 2px; right: 0">
														
 
															+                          更换商品
														
 
															+                        </el-button>
														
 
															+                      </div>
														
 
															+                    </el-card>
														
 
															+                  </div>
														
 
															+                </el-collapse-item>
														
 
															+                <el-collapse-item name="4" style="padding-right: 10px">
														
 
															+                  <template #title> <span style="color: #e47470; margin-right: 4px">*</span>标题</template>
														
 
															+                  <el-form-item prop="title">
														
 
															+                    <el-input v-model="ruleForm.title" maxlength="50" placeholder="请输入标题" show-word-limit style="padding: 0 10px 0 0"></el-input>
														
 
															+                  </el-form-item>
														
 
															+                </el-collapse-item>
														
 
															+              </el-collapse>
														
 
															+            </el-scrollbar>
														
 
															+          </div>
														
 
															+          <div style="width: 50%; padding: 0 10px; position: relative">
														
 
															+            <el-button
														
 
															+              type="primary"
														
 
															+              plain
														
 
															+              @click="submitForm(ruleFormRef)"
														
 
															+              :disabled="!fileList.length"
														
 
															+              style="position: absolute; top: 92%; left: 46%">
														
 
															+              保存</el-button
														
 
															+            >
														
 
															+          </div>
														
 
															+        </div>
														
 
															+      </el-form>
														
 
															+    </el-card>
														
 
															+    <el-dialog v-model="centerDialogVisible" title="从素材库中选择" width="65%">
														
 
															+      <el-input :prefix-icon="Search"></el-input>
														
 
															+      <div class="grid-container">
														
 
															+        <div
														
 
															+          class="grid-item"
														
 
															+          v-for="item in cards"
														
 
															+          :key="item.id"
														
 
															+          @click="selectCard(item)"
														
 
															+          :class="{ selected: isSelected(item.id), hover: hoverId === item.id }"
														
 
															+          @mouseover="hoverId = item.id"
														
 
															+          @mouseleave="hoverId = null">
														
 
															+          <el-card :body-style="{ padding: '0px' }">
														
 
															+            <el-image class="image" :src="item.imageUrl" fit="cover" />
														
 
															+            <div style="padding: 10px">
														
 
															+              <span>
														
 
															+                <el-tooltip placement="top" :content="item.title">
														
 
															+                  {{ item.title }}
														
 
															+                </el-tooltip>
														
 
															+              </span>
														
 
															+              <div class="bottom">
														
 
															+                <div class="bottom-item">{{ item.size }}KB</div>
														
 
															+                <div class="bottom-item">{{ item.width }} * {{ item.height }}</div>
														
 
															+                <div class="bottom-item">徽标</div>
														
 
															+              </div>
														
 
															+            </div>
														
 
															+          </el-card>
														
 
															+        </div>
														
 
															+      </div>
														
 
															+      <template #footer>
														
 
															+        <span class="dialog-footer">
														
 
															+          <el-button @click="centerDialogVisible = false">取消</el-button>
														
 
															+          <el-button type="primary" @click="handleConfirmSelection">确定</el-button>
														
 
															+        </span>
														
 
															+      </template>
														
 
															+    </el-dialog>
														
 
															+    <el-dialog v-model="lifeStyleDialog" title="从素材库中选择" width="65%">
														
 
															+      <el-input :prefix-icon="Search"></el-input>
														
 
															+      <div class="grid-container">
														
 
															+        <div
														
 
															+          class="grid-item"
														
 
															+          v-for="item in lifeStyleCards"
														
 
															+          :key="item.id"
														
 
															+          @click="selectCard(item)"
														
 
															+          :class="{ selected: isSelected(item.id), hover: hoverId === item.id }"
														
 
															+          @mouseover="hoverId = item.id"
														
 
															+          @mouseleave="hoverId = null">
														
 
															+          <el-card :body-style="{ padding: '0px' }">
														
 
															+            <el-image class="image" :src="item.imageUrl" fit="cover" />
														
 
															+            <div style="padding: 10px">
														
 
															+              <span>
														
 
															+                <el-tooltip placement="top" :content="item.title">
														
 
															+                  {{ item.title }}
														
 
															+                </el-tooltip>
														
 
															+              </span>
														
 
															+              <div class="bottom">
														
 
															+                <div class="bottom-item">{{ item.size }}KB</div>
														
 
															+                <div class="bottom-item">{{ item.width }} * {{ item.height }}</div>
														
 
															+                <div class="bottom-item">徽标</div>
														
 
															+              </div>
														
 
															+            </div>
														
 
															+          </el-card>
														
 
															+        </div>
														
 
															+      </div>
														
 
															+      <template #footer>
														
 
															+        <span class="dialog-footer">
														
 
															+          <el-button @click="centerDialogVisible = false">取消</el-button>
														
 
															+          <el-button type="primary" @click="centerDialogVisible = false">确定</el-button>
														
 
															+        </span>
														
 
															+      </template>
														
 
															+    </el-dialog>
														
 
															+    <el-dialog v-model="commodityDialog" title="更换商品" width="50%">
														
 
															+      <el-radio-group
														
 
															+        v-loading="dialogLoading3"
														
 
															+        v-model="selectedCommodity"
														
 
															+        style="display: flex; flex-direction: column; align-content: flex-start; align-items: flex-start">
														
 
															+        <div v-for="(item, index) in flattenedReplaceableCommodity" :key="index">
														
 
															+          <el-radio :label="item.asin" style="height: 80px; border-bottom: 1px solid #ccc">
														
 
															+            <div style="padding: 10px; display: flex; align-items: center">
														
 
															+              <div style="margin-right: 8px; line-height: normal">
														
 
															+                <el-image class="img-box" :src="item.image_link" />
														
 
															+              </div>
														
 
															+              <div style="position: relative">
														
 
															+                <el-tooltip class="box-item" effect="dark" :content="item.title" placement="top">
														
 
															+                  <div class="double-line">{{ item.title }}</div>
														
 
															+                </el-tooltip>
														
 
															+                <span>
														
 
															+                  <span style="color: #6d7784">ASIN: </span>
														
 
															+                  <span class="data-color" style="margin-right: 8px">{{ item.asin }}</span>
														
 
															+                </span>
														
 
															+              </div>
														
 
															+            </div>
														
 
															+          </el-radio>
														
 
															+        </div>
														
 
															+      </el-radio-group>
														
 
															+      <div style="margin-top: 20px; display: flex; justify-content: center">
														
 
															+        <el-button type="primary" :disabled="!selectedCommodity" @click="handleSelectedCommodity">确定</el-button>
														
 
															+      </div>
														
 
															+    </el-dialog>
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<script setup lang="ts">
														
 
															+import { Delete, Picture, Plus, Search, ZoomIn } from '@element-plus/icons-vue'
														
 
															+import type { FormInstance, FormRules, UploadFile, UploadProps } from 'element-plus'
														
 
															+import { ElMessage } from 'element-plus'
														
 
															+import { storeToRefs } from 'pinia'
														
 
															+import { Ref, computed, inject, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
														
 
															+import { checkAsset, getAssets, getCommodityCard, getLifeStyleAssets, getPageAsins, postProductset, uploadFile } from '../api/index'
														
 
															+import { useShopInfo } from '/@/stores/shopInfo'
														
 
															+import emitter from '/@/utils/emitter'
														
 
															+
														
 
															+const respAdGroupId = inject<Ref>('respAdGroupId')
														
 
															+const shopInfo = useShopInfo()
														
 
															+const { profile } = storeToRefs(shopInfo)
														
 
															+
														
 
															+const ruleFormRef = ref<FormInstance>()
														
 
															+
														
 
															+interface RuleForm {
														
 
															+  name: string
														
 
															+  brandName: string
														
 
															+  title: string
														
 
															+}
														
 
															+const ruleForm = reactive<RuleForm>({
														
 
															+  name: '视频 广告 - 1/15/2024 17:51:10.236',
														
 
															+  brandName: '',
														
 
															+  title: '',
														
 
															+})
														
 
															+
														
 
															+const rules = reactive<FormRules<RuleForm>>({
														
 
															+  name: [{ required: true, message: '请输入广告名称', trigger: 'blur' }],
														
 
															+  brandName: [{ required: true, message: '请输入品牌名称', trigger: 'blur' }],
														
 
															+  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
														
 
															+})
														
 
															+
														
 
															+const submitForm = async (formEl: FormInstance | undefined) => {
														
 
															+  if (!formEl) return
														
 
															+  await formEl.validate((valid, fields) => {
														
 
															+    if (valid) {
														
 
															+      console.log('submit!')
														
 
															+      createCreativity()
														
 
															+    } else {
														
 
															+      console.log('error submit!', fields)
														
 
															+    }
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+const activeNames = ref(['1'])
														
 
															+const handleChange = (val: string[]) => {
														
 
															+  // console.log(val)
														
 
															+  if (val.includes('commodity')) {
														
 
															+    getCommodityCardData()
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+// 图片上传相关
														
 
															+const dialogImageUrl = ref('')
														
 
															+const dialogVisible = ref(false)
														
 
															+const customDialogVisible = ref(false)
														
 
															+const disabled = ref(false)
														
 
															+const pictureList = ref([])
														
 
															+const fileList = ref([])
														
 
															+const selectedId = ref(null)
														
 
															+const hoverId = ref(null)
														
 
															+const selectedCards = ref([])
														
 
															+const selectedImageUrl = ref('')
														
 
															+const centerDialogVisible = ref(false)
														
 
															+const cards = reactive([])
														
 
															+
														
 
															+const imageUrl = ref('')
														
 
															+
														
 
															+const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
														
 
															+  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
														
 
															+  console.log('success!')
														
 
															+}
														
 
															+
														
 
															+const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
														
 
															+  if (rawFile.type !== 'image/jpeg') {
														
 
															+    ElMessage.error('Avatar picture must be JPG format!')
														
 
															+    return false
														
 
															+  } else if (rawFile.size / 1024 / 1024 > 2) {
														
 
															+    ElMessage.error('Avatar picture size can not exceed 2MB!')
														
 
															+    return false
														
 
															+  }
														
 
															+  return true
														
 
															+}
														
 
															+
														
 
															+// 图片上传功能
														
 
															+const upLoading = ref(false)
														
 
															+function handleRemove(file: UploadFile) {
														
 
															+  fileList.value = []
														
 
															+}
														
 
															+
														
 
															+function handleCustomRemove(file: UploadFile) {
														
 
															+  customFileList.value = []
														
 
															+}
														
 
															+
														
 
															+function handlePictureCardPreview(file: UploadFile) {
														
 
															+  dialogImageUrl.value = file.url!
														
 
															+  dialogVisible.value = true
														
 
															+}
														
 
															+
														
 
															+function customPictureCardPreview(file: UploadFile) {
														
 
															+  dialogImageUrl.value = file.url!
														
 
															+  customDialogVisible.value = true
														
 
															+}
														
 
															+
														
 
															+// 自定义文件上传
														
 
															+const customFileList = ref([])
														
 
															+const customUpLoading = ref(false)
														
 
															+let customImageAssetId = ''
														
 
															+
														
 
															+function changeCustomFile(file: UploadFile) {
														
 
															+  handleCustomUpload(file)
														
 
															+}
														
 
															+
														
 
															+async function handleCustomUpload(file: UploadFile) {
														
 
															+  const formData = new FormData()
														
 
															+  formData.append('file', file.raw)
														
 
															+  formData.append('profile_id', profile.value.profile_id)
														
 
															+  formData.append('brandEntityId', brandEntityId.value)
														
 
															+  formData.append('assetType', 'IMAGE')
														
 
															+  formData.append('assetSubTypeList', JSON.stringify(['LOGO']))
														
 
															+  upLoading.value = true
														
 
															+  try {
														
 
															+    const response = await uploadFile(formData)
														
 
															+    const fileName = response.data.file_name
														
 
															+    const obj = {
														
 
															+      profile_id: profile.value.profile_id,
														
 
															+      file_name: fileName,
														
 
															+    }
														
 
															+    const resp = await checkAsset(obj)
														
 
															+    customImageAssetId = resp.data.assetId
														
 
															+    const { width, height } = resp.data.fileMetadata
														
 
															+    customImageCrop = {
														
 
															+      width,
														
 
															+      height,
														
 
															+      top: 0,
														
 
															+      left: 0,
														
 
															+    }
														
 
															+    if (resp.data.checkresult == 'success') {
														
 
															+      ElMessage({ message: '上传成功', type: 'success' })
														
 
															+    } else {
														
 
															+      ElMessage.error('上传失败')
														
 
															+    }
														
 
															+  } catch (error) {
														
 
															+    console.error('上传失败:', error)
														
 
															+  } finally {
														
 
															+    upLoading.value = false
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+const createLoading = ref(false)
														
 
															+const casins = ref('')
														
 
															+let brandLogoCrop = {}
														
 
															+let customImageCrop = {}
														
 
															+let url = ''
														
 
															+let brandName = ''
														
 
															+let brandLogoAssetID = ''
														
 
															+
														
 
															+function changeFile(file: UploadFile) {
														
 
															+  handleUpload(file)
														
 
															+}
														
 
															+
														
 
															+async function handleUpload(file: UploadFile) {
														
 
															+  const formData = new FormData()
														
 
															+  formData.append('file', file.raw)
														
 
															+  formData.append('profile_id', profile.value.profile_id)
														
 
															+  formData.append('brandEntityId', brandEntityId.value)
														
 
															+  formData.append('assetType', 'IMAGE')
														
 
															+  formData.append('assetSubTypeList', JSON.stringify(['LOGO']))
														
 
															+  upLoading.value = true
														
 
															+  try {
														
 
															+    const response = await uploadFile(formData)
														
 
															+    const fileName = response.data.file_name
														
 
															+    const obj = {
														
 
															+      profile_id: profile.value.profile_id,
														
 
															+      file_name: fileName,
														
 
															+    }
														
 
															+    const resp = await checkAsset(obj)
														
 
															+    brandLogoAssetID = resp.data.assetId
														
 
															+    const { width, height } = resp.data.fileMetadata
														
 
															+    brandLogoCrop = {
														
 
															+      width,
														
 
															+      height,
														
 
															+      top: 0,
														
 
															+      left: 0,
														
 
															+    }
														
 
															+    if (resp.data.checkresult == 'success') {
														
 
															+      ElMessage({ message: '上传成功', type: 'success' })
														
 
															+    } else {
														
 
															+      ElMessage.error('上传失败')
														
 
															+    }
														
 
															+  } catch (error) {
														
 
															+    console.error('上传失败:', error)
														
 
															+  } finally {
														
 
															+    upLoading.value = false
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+async function createCreativity() {
														
 
															+  createLoading.value = true
														
 
															+  try {
														
 
															+    const obj = {
														
 
															+      profile_id: profile.value.profile_id,
														
 
															+      casins: casins.value,
														
 
															+      lasins: [],
														
 
															+      url: url,
														
 
															+      name: ruleForm.name,
														
 
															+      state: 'PAUSED',
														
 
															+      adGroupId: respAdGroupId.value,
														
 
															+      brandName: brandName,
														
 
															+      brandLogoCrop: brandLogoCrop,
														
 
															+      brandLogoAssetID: brandLogoAssetID,
														
 
															+      customImageCrop: customImageCrop,
														
 
															+      customImageAssetId: customImageAssetId,
														
 
															+      headline: ruleForm.title,
														
 
															+    }
														
 
															+    const response = await postProductset(obj)
														
 
															+    if (response.data.creative_state == 'success') {
														
 
															+      ElMessage({ message: '创建成功', type: 'success' })
														
 
															+    } else {
														
 
															+      ElMessage.error('上传失败')
														
 
															+    }
														
 
															+  } catch (error) {
														
 
															+    console.error('error:', error)
														
 
															+  } finally {
														
 
															+    createLoading.value = false
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+// 选择卡片功能
														
 
															+function selectCard(item) {
														
 
															+  if (isSelected(item.id)) {
														
 
															+    selectedCards.value = selectedCards.value.filter((card) => card.id !== item.id)
														
 
															+  } else {
														
 
															+    selectedCards.value.push(item)
														
 
															+  }
														
 
															+  selectedId.value = item.id
														
 
															+}
														
 
															+
														
 
															+function handleConfirmSelection() {
														
 
															+  if (selectedCards.value.length > 0) {
														
 
															+    // 清空 fileList
														
 
															+    fileList.value.length = 0
														
 
															+
														
 
															+    // 假设每次只选择一个图片
														
 
															+    selectedImageUrl.value = selectedCards.value[0].imageUrl
														
 
															+
														
 
															+    // 创建一个新的 UploadFile 对象
														
 
															+    const newFile = {
														
 
															+      name: selectedCards.value[0].title, // 或者任何你希望用作文件名的字符串
														
 
															+      url: selectedImageUrl.value,
														
 
															+      // 根据需要添加更多属性
														
 
															+    }
														
 
															+    fileList.value.push(newFile) // 将新的文件对象添加到 fileList 中
														
 
															+  }
														
 
															+
														
 
															+  selectedCards.value = [] // 清空选中卡片
														
 
															+  centerDialogVisible.value = false
														
 
															+}
														
 
															+
														
 
															+function isSelected(id) {
														
 
															+  return selectedId.value === id
														
 
															+}
														
 
															+
														
 
															+async function getAssetsData() {
														
 
															+  const query = {
														
 
															+    profile_id: profile.value.profile_id,
														
 
															+    assetType: 'IMAGE',
														
 
															+    assetSubType: 'LOGO',
														
 
															+  }
														
 
															+  const response = await getAssets(query)
														
 
															+  cards.splice(0, cards.length)
														
 
															+
														
 
															+  response.data.forEach((asset) => {
														
 
															+    cards.push({
														
 
															+      id: asset.assetId,
														
 
															+      title: asset.name,
														
 
															+      imageUrl: asset.storageLocationUrls.defaultUrl,
														
 
															+      width: asset.fileMetadata.width,
														
 
															+      height: asset.fileMetadata.height,
														
 
															+      size: bytesToKB(asset.fileMetadata.sizeInBytes),
														
 
															+    })
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+function bytesToKB(bytes) {
														
 
															+  return (bytes / 1024).toFixed(2) // 保留两位小数
														
 
															+}
														
 
															+
														
 
															+function openDialog() {
														
 
															+  centerDialogVisible.value = true
														
 
															+  getAssetsData()
														
 
															+}
														
 
															+
														
 
															+const lifeStyleDialog = ref(false)
														
 
															+const lifeStyleCards = reactive([])
														
 
															+async function getLifeStyleAssetsData() {
														
 
															+  try {
														
 
															+    const query = {
														
 
															+      profile_id: profile.value.profile_id,
														
 
															+      assetType: 'IMAGE',
														
 
															+      assetSubType: 'LIFESTYLE_IMAGE',
														
 
															+    }
														
 
															+    const response = await getLifeStyleAssets(query)
														
 
															+    console.log('🚀 ~ getLifeStyleAssetsData ~ response-->>', response)
														
 
															+
														
 
															+    lifeStyleCards.splice(0, lifeStyleCards.length)
														
 
															+
														
 
															+    response.data.forEach((asset) => {
														
 
															+      lifeStyleCards.push({
														
 
															+        id: asset.assetId,
														
 
															+        title: asset.name,
														
 
															+        imageUrl: asset.storageLocationUrls.defaultUrl,
														
 
															+        width: asset.fileMetadata.width,
														
 
															+        height: asset.fileMetadata.height,
														
 
															+        size: bytesToKB(asset.fileMetadata.sizeInBytes),
														
 
															+      })
														
 
															+    })
														
 
															+  } catch (error) {
														
 
															+    console.log('error:', error)
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+function openLifeStyleDialog() {
														
 
															+  lifeStyleDialog.value = true
														
 
															+  getLifeStyleAssetsData()
														
 
															+}
														
 
															+
														
 
															+const pageOptionsValue = inject<Ref>('pageOptionsValue')
														
 
															+const asinList = ref([])
														
 
															+const commodityLoading = ref(false)
														
 
															+
														
 
															+async function getCommodityCollapseData() {
														
 
															+  commodityLoading.value = true
														
 
															+  try {
														
 
															+    const query = {
														
 
															+      profile_id: profile.value.profile_id,
														
 
															+      pageurl: pageOptionsValue.value,
														
 
															+    }
														
 
															+    const response = await getPageAsins(query)
														
 
															+    asinList.value = response.data.asinList
														
 
															+  } catch (error) {
														
 
															+    console.log('error:', error)
														
 
															+  } finally {
														
 
															+    commodityLoading.value = false
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+let lastQueriedAsins = []
														
 
															+const commodityCard = ref([])
														
 
															+async function getCommodityCardData() {
														
 
															+  try {
														
 
															+    commodityLoading.value = true
														
 
															+    const topAsins = asinList.value.slice(0, 3)
														
 
															+
														
 
															+    const newAsins = topAsins.filter((asin) => !lastQueriedAsins.includes(asin))
														
 
															+    if (newAsins.length === 0) {
														
 
															+      commodityLoading.value = false
														
 
															+      return // 如果没有新的 ASIN，直接返回
														
 
															+    }
														
 
															+
														
 
															+    lastQueriedAsins = [...topAsins]
														
 
															+
														
 
															+    // 清空commodityCard，为新数据做准备
														
 
															+    commodityCard.value = []
														
 
															+
														
 
															+    // 对每个新的 ASIN 发送请求
														
 
															+    for (const asin of newAsins) {
														
 
															+      const query = {
														
 
															+        profile_id: profile.value.profile_id,
														
 
															+        asin: asin,
														
 
															+      }
														
 
															+
														
 
															+      try {
														
 
															+        const response = await getCommodityCard(query)
														
 
															+        commodityCard.value.push(response.data)
														
 
															+        // console.log('Response for ASIN', asin, ':', response)
														
 
															+      } catch (error) {
														
 
															+        console.log('Error for ASIN', asin, ':', error)
														
 
															+      }
														
 
															+    }
														
 
															+  } catch (error) {
														
 
															+    console.log('Outer error:', error)
														
 
															+  } finally {
														
 
															+    commodityLoading.value = false
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+// 更改商品功能
														
 
															+const commodityDialog = ref(false)
														
 
															+const selectedCommodity = ref()
														
 
															+const replaceableCommodity = ref([])
														
 
															+const dialogLoading3 = ref(false)
														
 
															+let currentEditingIndex = ref(null)
														
 
															+
														
 
															+function openCommodityDialog(index) {
														
 
															+  currentEditingIndex.value = index
														
 
															+  commodityDialog.value = true
														
 
															+}
														
 
															+
														
 
															+async function getAdditionalCommodityData() {
														
 
															+  try {
														
 
															+    dialogLoading3.value = true
														
 
															+    // 获取除前三个之外的所有 ASIN
														
 
															+    const additionalAsins = asinList.value.slice(3)
														
 
															+
														
 
															+    // 清空 replaceableCommodity，为新数据做准备
														
 
															+    replaceableCommodity.value = []
														
 
															+
														
 
															+    // 对每个额外的 ASIN 发送请求
														
 
															+    for (const asin of additionalAsins) {
														
 
															+      const query = {
														
 
															+        profile_id: profile.value.profile_id,
														
 
															+        asin: asin,
														
 
															+      }
														
 
															+
														
 
															+      try {
														
 
															+        const response = await getCommodityCard(query)
														
 
															+        replaceableCommodity.value.push(response.data)
														
 
															+        console.log('🚀 ~ getAdditionalCommodityData ~ replaceableCommodity-->>', replaceableCommodity.value)
														
 
															+        // console.log('Response for additional ASIN', asin, ':', response)
														
 
															+      } catch (error) {
														
 
															+        console.log('Error for additional ASIN', asin, ':', error)
														
 
															+      }
														
 
															+    }
														
 
															+  } catch (error) {
														
 
															+    console.log('Outer error:', error)
														
 
															+  } finally {
														
 
															+    dialogLoading3.value = false
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+function handleSelectedCommodity() {
														
 
															+  if (currentEditingIndex.value !== null && selectedCommodity.value) {
														
 
															+    const selectedCommodityData = flattenedReplaceableCommodity.value.find((item) => item.asin === selectedCommodity.value)
														
 
															+    if (selectedCommodityData) {
														
 
															+      commodityCard.value[currentEditingIndex.value] = selectedCommodityData
														
 
															+    }
														
 
															+    commodityDialog.value = false
														
 
															+    console.log('commodityCard', commodityCard.value)
														
 
															+    currentEditingIndex.value = null
														
 
															+    selectedCommodity.value = null
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+watch(
														
 
															+  () => pageOptionsValue.value,
														
 
															+  async () => {
														
 
															+    await getCommodityCollapseData()
														
 
															+    getCommodityCardData()
														
 
															+    getAdditionalCommodityData()
														
 
															+  }
														
 
															+)
														
 
															+
														
 
															+const flattenedCommodityCard = computed(() => {
														
 
															+  return commodityCard.value.flat()
														
 
															+})
														
 
															+
														
 
															+const flattenedReplaceableCommodity = computed(() => {
														
 
															+  return replaceableCommodity.value.flat()
														
 
															+})
														
 
															+
														
 
															+watch(
														
 
															+  flattenedCommodityCard,
														
 
															+  (newValue: any) => {
														
 
															+    casins.value = newValue.map((item) => item.asin)
														
 
															+  },
														
 
															+  { deep: true }
														
 
															+)
														
 
															+
														
 
															+const brandEntityId = ref('')
														
 
															+
														
 
															+onMounted(() => {
														
 
															+  emitter.on('send-brandEntityId', (value: any) => {
														
 
															+    brandEntityId.value = value.brandEntityId[0].brandEntityId
														
 
															+  })
														
 
															+  emitter.on('page', (value: any) => {
														
 
															+    url = value
														
 
															+  })
														
 
															+  emitter.on('video-shop', (value: any) => {
														
 
															+    brandName = value.brandRegistryName
														
 
															+  })
														
 
															+})
														
 
															+
														
 
															+// 接收数据端在组建卸载时解绑事件
														
 
															+onUnmounted(() => {
														
 
															+  emitter.off('send-brandEntityId')
														
 
															+  emitter.off('page')
														
 
															+})
														
 
															+</script>
														
 
															+
														
 
															+<style scoped>
														
 
															+.customize-container {
														
 
															+  margin-top: 10px;
														
 
															+}
														
 
															+.upload-button-group {
														
 
															+  display: flex;
														
 
															+}
														
 
															+.introduce-item {
														
 
															+  line-height: 17px;
														
 
															+  font-size: 12px;
														
 
															+  color: #88909b;
														
 
															+}
														
 
															+.avatar-uploader .avatar {
														
 
															+  width: 178px;
														
 
															+  height: 178px;
														
 
															+  display: block;
														
 
															+}
														
 
															+::v-deep(.avatar-uploader .el-upload) {
														
 
															+  border: 1px dashed var(--el-border-color);
														
 
															+  border-radius: 6px;
														
 
															+  cursor: pointer;
														
 
															+  position: relative;
														
 
															+  overflow: hidden;
														
 
															+  transition: var(--el-transition-duration-fast);
														
 
															+}
														
 
															+
														
 
															+::v-deep(.avatar-uploader .el-upload:hover) {
														
 
															+  border-color: var(--el-color-primary);
														
 
															+}
														
 
															+::v-deep(.el-icon.avatar-uploader-icon) {
														
 
															+  font-size: 28px;
														
 
															+  color: #8c939d;
														
 
															+  width: 178px;
														
 
															+  height: 178px;
														
 
															+  text-align: center;
														
 
															+}
														
 
															+::v-deep(.avatar-uploader .el-upload.el-upload--text) {
														
 
															+  width: 100%;
														
 
															+}
														
 
															+.grid-container {
														
 
															+  flex-wrap: wrap;
														
 
															+  display: flex;
														
 
															+  width: 100%;
														
 
															+  justify-content: left;
														
 
															+}
														
 
															+.grid-item {
														
 
															+  transition: outline, background-color 0.3s;
														
 
															+  box-sizing: border-box;
														
 
															+  border: 1px solid #ffffff00;
														
 
															+  cursor: pointer;
														
 
															+  width: calc(25% - 10px);
														
 
															+  margin: 10px 5px;
														
 
															+}
														
 
															+.grid-item span {
														
 
															+  display: block; /* 或者 inline-block */
														
 
															+  white-space: nowrap; /* 保持文本在一行 */
														
 
															+  overflow: hidden; /* 隐藏超出部分 */
														
 
															+  text-overflow: ellipsis; /* 超出部分显示省略号 */
														
 
															+  max-width: 100%; /* 限制最大宽度 */
														
 
															+  font-weight: 600;
														
 
															+  line-height: 22px;
														
 
															+}
														
 
															+.grid-item.hover,
														
 
															+.grid-item.selected {
														
 
															+  border: 1px solid #306cd8;
														
 
															+  border-radius: 4px;
														
 
															+}
														
 
															+.grid-item.selected > :first-child {
														
 
															+  background-color: #f5f7fe;
														
 
															+}
														
 
															+.image {
														
 
															+  width: 100%;
														
 
															+  height: 146.49px;
														
 
															+  padding: 10px;
														
 
															+}
														
 
															+.image > :first-child {
														
 
															+  border-radius: 10px;
														
 
															+}
														
 
															+.bottom {
														
 
															+  display: flex;
														
 
															+  justify-content: space-between;
														
 
															+  align-items: center;
														
 
															+  margin-top: 5px;
														
 
															+}
														
 
															+.bottom-item {
														
 
															+  background-color: #f5f7fe;
														
 
															+  border-radius: 4px;
														
 
															+  padding: 0 3px;
														
 
															+}
														
 
															+.uploaded-image {
														
 
															+  width: 100%; /* 或根据需要调整 */
														
 
															+  height: auto; /* 保持图片的原始宽高比 */
														
 
															+  display: block;
														
 
															+  margin-bottom: 10px; /* 或根据需要调整 */
														
 
															+}
														
 
															+
														
 
															+.upload-content {
														
 
															+  text-align: center;
														
 
															+  padding: 20px;
														
 
															+}
														
 
															+.el-carousel__item h3 {
														
 
															+  color: #edf5fe;
														
 
															+  opacity: 0.75;
														
 
															+  line-height: 200px;
														
 
															+  margin: 0;
														
 
															+  text-align: center;
														
 
															+}
														
 
															+::v-deep(button.el-carousel__button) {
														
 
															+  background-color: #3569d6;
														
 
															+}
														
 
															+.img-box {
														
 
															+  width: 60px;
														
 
															+  height: 60px;
														
 
															+  border: 1px solid rgb(194, 199, 207);
														
 
															+  border-radius: 4px;
														
 
															+}
														
 
															+.double-line {
														
 
															+  color: #1e2128;
														
 
															+  font-weight: 500;
														
 
															+  overflow: hidden;
														
 
															+  display: -webkit-box;
														
 
															+  -webkit-box-orient: vertical;
														
 
															+  -webkit-line-clamp: 2;
														
 
															+  white-space: pre-wrap;
														
 
															+  word-break: break-word;
														
 
															+}
														
 
															+</style>
														
--- a/src/views/adManage/sb/campaigns/CreateCampaigns/component/ProductSetCreativity2.vue
+++ b/src/views/adManage/sb/campaigns/CreateCampaigns/component/ProductSetCreativity2.vue
@@ -0,0 +1,461 @@
 
															+<template>
														
 
															+  <div class="customize-container">
														
 
															+    <el-card body-style="padding: 20px 80px 0 80px;">
														
 
															+      <div style="font-weight: 700; padding-bottom: 18px">
														
 
															+        <span style="color: #306cd7; font-size: 26px">|</span>
														
 
															+        <span style="font-size: 18px; padding-left: 5px">创意</span>
														
 
															+      </div>
														
 
															+      <el-form
														
 
															+        ref="ruleFormRef"
														
 
															+        :model="ruleForm"
														
 
															+        :rules="rules"
														
 
															+        label-width="120px"
														
 
															+        class="demo-ruleForm"
														
 
															+        size="default"
														
 
															+        label-position="top"
														
 
															+        status-icon>
														
 
															+        <el-form-item label="广告名称" prop="name">
														
 
															+          <el-input v-model="ruleForm.name" style="width: 50%" />
														
 
															+        </el-form-item>
														
 
															+        <div style="display: flex; border: 1px solid #dddfe6; padding: 0 0 0 5px; margin-bottom: 20px" v-loading="createLoading">
														
 
															+          <div style="width: 50%; padding-left: 5px; border-right: 1px solid #dddfe6">
														
 
															+            <el-scrollbar height="700px">
														
 
															+              <el-collapse v-model="activeNames" @change="handleChange" style="border-top: none; border-bottom: none; padding-right: 10px;">
														
 
															+                <el-collapse-item name="1">
														
 
															+                  <template #title> <span style="color: #e47470; margin-right: 4px">*</span>品牌名称和徽标</template>
														
 
															+                  <el-form-item prop="brandName">
														
 
															+                    <el-input v-model="ruleForm.brandName" placeholder="请输入品牌名称" style="padding: 0 10px 5px 0"></el-input>
														
 
															+                  </el-form-item>
														
 
															+                  <el-upload
														
 
															+                    drag
														
 
															+                    v-model:file-list="fileList"
														
 
															+                    :on-change="changeFile"
														
 
															+                    v-loading="upLoading"
														
 
															+                    action="#"
														
 
															+                    accept=".png, .jpg"
														
 
															+                    :auto-upload="false"
														
 
															+                    :on-remove="handleRemove"
														
 
															+                    style="padding-right: 10px">
														
 
															+                    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
														
 
															+                    <div class="el-upload__text">Drop file here or <em>click to upload</em></div>
														
 
															+                    <template #tip>
														
 
															+                      <div style="margin-top: 10px">
														
 
															+                        <div style="display: flex; align-items: center; justify-content: space-between">
														
 
															+                          <span style="line-height: 17px; font-weight: 600; color: #1e2128">徽标规格</span>
														
 
															+                          <el-button type="primary" :icon="Picture">从素材库中选择</el-button>
														
 
															+                        </div>
														
 
															+                        <div class="introduce-item">1、图片大小: 400x400 像素或更大</div>
														
 
															+                        <div class="introduce-item">2、文件大小: 1MB 或更小</div>
														
 
															+                        <div class="introduce-item">3、文件格式: PNG 或 JPG</div>
														
 
															+                        <div class="introduce-item">
														
 
															+                          4、内容: 徽标必须填满图片或置于白色或透明背景上详细了解我们的徽标要求
														
 
															+                          <span style="margin-left: 25px; position: relative">
														
 
															+                            <el-icon size="14" style="position: absolute; left: -14px; top: 1px"><Link /></el-icon>
														
 
															+                            <el-link
														
 
															+                              type="primary"
														
 
															+                              :underline="false"
														
 
															+                              href="https://advertising.amazon.com/resources/ad-policy/sponsored-ads-policies#brandlogo"
														
 
															+                              target="_blank"
														
 
															+                              >查看要求</el-link
														
 
															+                            >
														
 
															+                          </span>
														
 
															+                        </div>
														
 
															+                      </div>
														
 
															+                    </template>
														
 
															+                  </el-upload>
														
 
															+                </el-collapse-item>
														
 
															+                <el-collapse-item name="2">
														
 
															+                  <template #title>自定义图片(可选)</template>
														
 
															+                  <el-upload
														
 
															+                    class="avatar-uploader"
														
 
															+                    v-model:file-list="customFileList"
														
 
															+                    :on-change="changeCustomFile"
														
 
															+                    v-loading="upCustomLoading"
														
 
															+                    action="#"
														
 
															+                    accept=".png, .jpg"
														
 
															+                    :auto-upload="false"
														
 
															+                    :on-remove="handleRemove"
														
 
															+                    style="padding-right: 10px">
														
 
															+                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
														
 
															+                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
														
 
															+                    <template #tip>
														
 
															+                      <div style="margin-top: 10px">
														
 
															+                        <div style="display: flex; align-items: center; justify-content: space-between">
														
 
															+                          <span style="line-height: 17px; font-weight: 600; color: #1e2128">图片规格</span>
														
 
															+                          <el-button type="primary" :icon="Picture">从素材库中选择</el-button>
														
 
															+                        </div>
														
 
															+                        <div class="introduce-item">1、图片大小: 1200 x 628 像素或更大</div>
														
 
															+                        <div class="introduce-item">2、文件大小: 5MB 或更小</div>
														
 
															+                        <div class="introduce-item">3、文件格式: PNG 或 JPG</div>
														
 
															+                        <div class="introduce-item">4、内容: 图片中未添加文本、图形或徽标</div>
														
 
															+                      </div>
														
 
															+                    </template>
														
 
															+                  </el-upload>
														
 
															+                </el-collapse-item>
														
 
															+                <el-collapse-item name="3">
														
 
															+                  <template #title> <span style="color: #e47470; margin-right: 4px">*</span>商品</template>
														
 
															+                  <div v-for="item in commodityCard" :key="item.asin" style="padding-bottom: 5px;">
														
 
															+                    <el-card shadow="hover" body-style="padding: 10px">
														
 
															+                      <div style="padding: 10px; display: flex; align-items: center">
														
 
															+                        <div style="margin-right: 8px; line-height: normal">
														
 
															+                          <el-image class="img-box" :src="item.image_link" />
														
 
															+                        </div>
														
 
															+                        <div style="position: relative">
														
 
															+                          <el-tooltip class="box-item" effect="dark" :content="item.title" placement="top">
														
 
															+                            <div class="single-line">{{ item.title }}</div>
														
 
															+                          </el-tooltip>
														
 
															+                          <span>
														
 
															+                            <span style="color: #6d7784">ASIN: </span>
														
 
															+                            <span class="data-color" style="margin-right: 8px">{{ item.asin }}</span>
														
 
															+                          </span>
														
 
															+                        </div>
														
 
															+                      </div>
														
 
															+                    </el-card>
														
 
															+                  </div>
														
 
															+                </el-collapse-item>
														
 
															+                <el-collapse-item name="4">
														
 
															+                  <template #title> <span style="color: #e47470; margin-right: 4px">*</span>标题</template>
														
 
															+                  <el-form-item prop="title">
														
 
															+                    <el-input v-model="ruleForm.title" maxlength="50" placeholder="请输入标题" show-word-limit style="padding: 0 10px 0 0"></el-input>
														
 
															+                  </el-form-item>
														
 
															+                </el-collapse-item>
														
 
															+              </el-collapse>
														
 
															+            </el-scrollbar>
														
 
															+          </div>
														
 
															+          <div style="width: 50%; padding: 0 10px; position: relative">
														
 
															+            <el-button
														
 
															+              type="primary"
														
 
															+              plain
														
 
															+              @click="submitForm(ruleFormRef)"
														
 
															+              :disabled="!fileList.length"
														
 
															+              style="position: absolute; top: 92%; left: 46%">
														
 
															+              保存
														
 
															+            </el-button>
														
 
															+          </div>
														
 
															+        </div>
														
 
															+      </el-form>
														
 
															+    </el-card>
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<script setup lang="ts">
														
 
															+import { reactive, ref, inject, Ref, watch, onMounted, onUnmounted } from 'vue'
														
 
															+import type { FormInstance, FormRules, UploadProps, UploadUserFile } from 'element-plus'
														
 
															+import { checkAsset, uploadFile, postProductset } from '../api/index'
														
 
															+import { ElMessage, ElMessageBox } from 'element-plus'
														
 
															+import { Plus, Picture } from '@element-plus/icons-vue'
														
 
															+import emitter from '/@/utils/emitter'
														
 
															+import { storeToRefs } from 'pinia'
														
 
															+import { useShopInfo } from '/@/stores/shopInfo'
														
 
															+
														
 
															+const shopInfo = useShopInfo()
														
 
															+const { profile } = storeToRefs(shopInfo)
														
 
															+const respAdGroupId = inject<Ref>('respAdGroupId')
														
 
															+const setBrandName = inject<Ref>('setBrandName')
														
 
															+const addedTableDataForVc2 = inject<Ref>('addedTableDataForVc2')
														
 
															+
														
 
															+interface RuleForm {
														
 
															+  name: string
														
 
															+  brandName: string
														
 
															+  title: string
														
 
															+}
														
 
															+
														
 
															+const ruleFormRef = ref<FormInstance>()
														
 
															+const ruleForm = reactive<RuleForm>({
														
 
															+  name: '视频 广告 - 1/15/2024 17:51:10.236',
														
 
															+  brandName: '',
														
 
															+  title: '',
														
 
															+})
														
 
															+
														
 
															+const rules = reactive<FormRules<RuleForm>>({
														
 
															+  name: [{ required: true, message: '请输入广告名称', trigger: 'blur' }],
														
 
															+  brandName: [{ required: true, message: '请输入品牌名称', trigger: 'blur' }],
														
 
															+  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
														
 
															+})
														
 
															+
														
 
															+const submitForm = async (formEl: FormInstance | undefined) => {
														
 
															+  if (!formEl) return
														
 
															+  await formEl.validate((valid, fields) => {
														
 
															+    if (valid) {
														
 
															+      console.log('submit!')
														
 
															+      createCreativity()
														
 
															+    } else {
														
 
															+      console.log('error submit!', fields)
														
 
															+    }
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+const activeNames = ref(['1'])
														
 
															+const handleChange = (val: string[]) => {
														
 
															+  console.log(val)
														
 
															+}
														
 
															+
														
 
															+const fileList = ref<UploadUserFile[]>([])
														
 
															+
														
 
															+const customFileList = ref<UploadUserFile[]>([])
														
 
															+
														
 
															+const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
														
 
															+  fileList.value = []
														
 
															+}
														
 
															+
														
 
															+const handleCustomRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
														
 
															+  fileList.value = []
														
 
															+}
														
 
															+
														
 
															+const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
														
 
															+  console.log(uploadFile)
														
 
															+}
														
 
															+
														
 
															+const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
														
 
															+  ElMessage.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + uploadFiles.length} totally`)
														
 
															+}
														
 
															+
														
 
															+const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
														
 
															+  return ElMessageBox.confirm(`Cancel the transfer of ${uploadFile.name} ?`).then(
														
 
															+    () => true,
														
 
															+    () => false
														
 
															+  )
														
 
															+}
														
 
															+
														
 
															+const upLoading = ref(false)
														
 
															+let brandLogoAssetID = ''
														
 
															+let brandLogoCrop = {}
														
 
															+let createLoading = ref(false)
														
 
															+const brandEntityId = inject<Ref>('brandEntityId')
														
 
															+
														
 
															+function changeFile(file) {
														
 
															+  handleUpload(file)
														
 
															+}
														
 
															+
														
 
															+async function handleUpload(file) {
														
 
															+  const formData = new FormData()
														
 
															+  formData.append('file', file.raw)
														
 
															+  formData.append('profile_id', profile.value.profile_id)
														
 
															+  formData.append('brandEntityId', brandEntityId.value)
														
 
															+  formData.append('assetType', 'IMAGE')
														
 
															+  formData.append('assetSubTypeList', JSON.stringify(['LOGO']))
														
 
															+  upLoading.value = true
														
 
															+  try {
														
 
															+    const response = await uploadFile(formData)
														
 
															+    const fileName = response.data.file_name
														
 
															+    const obj = {
														
 
															+      profile_id: profile.value.profile_id,
														
 
															+      file_name: fileName,
														
 
															+    }
														
 
															+    const resp = await checkAsset(obj)
														
 
															+    brandLogoAssetID = resp.data.assetId
														
 
															+    const { width, height } = resp.data.fileMetadata
														
 
															+    brandLogoCrop = {
														
 
															+      width,
														
 
															+      height,
														
 
															+      top: 0,
														
 
															+      left: 0,
														
 
															+    }
														
 
															+    if (resp.data.checkresult == 'success') {
														
 
															+      ElMessage({ message: '上传成功', type: 'success' })
														
 
															+    } else {
														
 
															+      ElMessage.error('上传失败')
														
 
															+    }
														
 
															+  } catch (error) {
														
 
															+    console.error('上传失败:', error)
														
 
															+  } finally {
														
 
															+    upLoading.value = false
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+// 自定义图片上传
														
 
															+const upCustomLoading = ref(false)
														
 
															+const lasins = ref('')
														
 
															+let customImageAssetId = ''
														
 
															+let customImageCrop = {}
														
 
															+
														
 
															+
														
 
															+function changeCustomFile(file) {
														
 
															+  handleCustomUpload(file)
														
 
															+}
														
 
															+
														
 
															+async function handleCustomUpload(file) {
														
 
															+  const formData = new FormData()
														
 
															+  formData.append('file', file.raw)
														
 
															+  formData.append('profile_id', profile.value.profile_id)
														
 
															+  formData.append('brandEntityId', brandEntityId.value)
														
 
															+  formData.append('assetType', 'IMAGE')
														
 
															+  formData.append('assetSubTypeList', JSON.stringify(['LOGO']))
														
 
															+  upCustomLoading.value = true
														
 
															+  try {
														
 
															+    const response = await uploadFile(formData)
														
 
															+    const fileName = response.data.file_name
														
 
															+    const obj = {
														
 
															+      profile_id: profile.value.profile_id,
														
 
															+      file_name: fileName,
														
 
															+    }
														
 
															+    const resp = await checkAsset(obj)
														
 
															+    customImageAssetId = resp.data.assetId
														
 
															+    const { width, height } = resp.data.fileMetadata
														
 
															+    brandLogoCrop = {
														
 
															+      width,
														
 
															+      height,
														
 
															+      top: 0,
														
 
															+      left: 0,
														
 
															+    }
														
 
															+
														
 
															+    if (resp.data.checkresult == 'success') {
														
 
															+      ElMessage({ message: '上传成功', type: 'success' })
														
 
															+    } else {
														
 
															+      ElMessage.error('上传失败')
														
 
															+    }
														
 
															+  } catch (error) {
														
 
															+    console.error('上传失败:', error)
														
 
															+  } finally {
														
 
															+    upCustomLoading.value = false
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+// TODO: url对应的是Home 暂时写死
														
 
															+async function createCreativity() {
														
 
															+  createLoading.value = true
														
 
															+  try {
														
 
															+    const obj = {
														
 
															+      profile_id: profile.value.profile_id,
														
 
															+      casins: lasins.value,
														
 
															+      lasins: lasins.value,
														
 
															+      url: 'https://www.amazon.com/stores/page/1D1DD2FD-CF54-4FE5-B1A0-9E01F12F8144',
														
 
															+      name: ruleForm.name,
														
 
															+      state: 'PAUSED',
														
 
															+      adGroupId: respAdGroupId.value,
														
 
															+      brandName: setBrandName.value,
														
 
															+      brandLogoCrop: brandLogoCrop,
														
 
															+      brandLogoAssetID: brandLogoAssetID,
														
 
															+      customImageCrop: customImageCrop,
														
 
															+      customImageAssetId: customImageAssetId,
														
 
															+      headline: ruleForm.title,
														
 
															+    }
														
 
															+    const response = await postProductset(obj)
														
 
															+    if (response.data.creative_state == 'success') {
														
 
															+      ElMessage({ message: '创建成功', type: 'success' })
														
 
															+    } else {
														
 
															+      ElMessage.error('上传失败')
														
 
															+    }
														
 
															+  } catch (error) {
														
 
															+    console.error('error:', error)
														
 
															+  } finally {
														
 
															+    createLoading.value = false
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+let asins = ref([])
														
 
															+
														
 
															+watch(
														
 
															+  addedTableDataForVc2,
														
 
															+  (newValue) => {
														
 
															+    asins.value = []
														
 
															+    if (Array.isArray(newValue) && newValue.length > 0) {
														
 
															+      newValue.forEach((item) => {
														
 
															+        if (item.asin && !asins.value.includes(item.asin)) {
														
 
															+          asins.value.push(item.asin)
														
 
															+        }
														
 
															+      })
														
 
															+    }
														
 
															+    console.log('Updated ASINs:', asins.value)
														
 
															+  },
														
 
															+  { deep: true }
														
 
															+)
														
 
															+
														
 
															+const commodityCard = ref([])
														
 
															+
														
 
															+watch(
														
 
															+  commodityCard,
														
 
															+  (newValue: any) => {
														
 
															+    lasins.value = newValue.map(item => item.asin)
														
 
															+  },
														
 
															+  { deep: true }
														
 
															+)
														
 
															+
														
 
															+onMounted(() => {
														
 
															+  emitter.on('addedTableData', (data: any) => {
														
 
															+    commodityCard.value = data
														
 
															+  })
														
 
															+})
														
 
															+
														
 
															+// 接收数据端在组件卸载时解绑事件
														
 
															+onUnmounted(() => {
														
 
															+  emitter.off('addedTableData')
														
 
															+})
														
 
															+
														
 
															+const imageUrl = ref('')
														
 
															+
														
 
															+const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
														
 
															+  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
														
 
															+}
														
 
															+
														
 
															+const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
														
 
															+  if (rawFile.type !== 'image/jpeg') {
														
 
															+    ElMessage.error('Avatar picture must be JPG format!')
														
 
															+    return false
														
 
															+  } else if (rawFile.size / 1024 / 1024 > 2) {
														
 
															+    ElMessage.error('Avatar picture size can not exceed 2MB!')
														
 
															+    return false
														
 
															+  }
														
 
															+  return true
														
 
															+}
														
 
															+</script>
														
 
															+
														
 
															+<style scoped>
														
 
															+.customize-container {
														
 
															+  margin-top: 10px;
														
 
															+}
														
 
															+.upload-button-group {
														
 
															+  display: flex;
														
 
															+}
														
 
															+.introduce-item {
														
 
															+  line-height: 17px;
														
 
															+  font-size: 12px;
														
 
															+  color: #88909b;
														
 
															+}
														
 
															+.avatar-uploader .avatar {
														
 
															+  width: 178px;
														
 
															+  height: 178px;
														
 
															+  display: block;
														
 
															+}
														
 
															+::v-deep(.avatar-uploader .el-upload) {
														
 
															+  border: 1px dashed var(--el-border-color);
														
 
															+  border-radius: 6px;
														
 
															+  cursor: pointer;
														
 
															+  position: relative;
														
 
															+  overflow: hidden;
														
 
															+  transition: var(--el-transition-duration-fast);
														
 
															+}
														
 
															+
														
 
															+::v-deep(.avatar-uploader .el-upload:hover) {
														
 
															+  border-color: var(--el-color-primary);
														
 
															+}
														
 
															+::v-deep(.el-icon.avatar-uploader-icon) {
														
 
															+  font-size: 28px;
														
 
															+  color: #8c939d;
														
 
															+  width: 178px;
														
 
															+  height: 178px;
														
 
															+  text-align: center;
														
 
															+}
														
 
															+::v-deep(.avatar-uploader .el-upload.el-upload--text) {
														
 
															+  width: 100%;
														
 
															+}
														
 
															+.img-box {
														
 
															+  width: 60px;
														
 
															+  height: 60px;
														
 
															+  margin-top: 5px;
														
 
															+  border: 1px solid rgb(194, 199, 207);
														
 
															+  border-radius: 4px;
														
 
															+}
														
 
															+.single-line {
														
 
															+  color: rgb(30, 33, 41);
														
 
															+  overflow: hidden;
														
 
															+  display: -webkit-box;
														
 
															+  -webkit-box-orient: vertical;
														
 
															+  -webkit-line-clamp: 1;
														
 
															+  white-space: pre-wrap;
														
 
															+  word-break: break-word;
														
 
															+}
														
 
															+.data-color {
														
 
															+  color: rgb(30, 33, 41);
														
 
															+}
														
 
															+</style>
														
--- a/src/views/adManage/sb/campaigns/CreateCampaigns/component/VideoCommodity.vue
+++ b/src/views/adManage/sb/campaigns/CreateCampaigns/component/VideoCommodity.vue
@@ -0,0 +1,452 @@
 
															+<template>
														
 
															+  <div prop="commodity" style="width: 100%" v-loading="productLoading">
														
 
															+    <div style="width: 100%; height: 620px; display: flex; border: 1px solid #e5e7ec; border-radius: 6px">
														
 
															+      <div style="width: 50%; border-right: 1px solid #e5e7ec">
														
 
															+        <el-tabs v-model="productTabs" class="demo-tabs">
														
 
															+          <el-tab-pane label="搜索" name="first">
														
 
															+            <div style="margin-bottom: 10px">
														
 
															+              <el-input v-model="searchInp" placeholder="Please input" class="input-with-select" @change="inpChange" clearable>
														
 
															+                <template #prepend>
														
 
															+                  <el-select v-model="leftSelect" style="width: 100px" @change="selChange">
														
 
															+                    <el-option label="名称" value="name" />
														
 
															+                    <el-option label="ASIN" value="asin" />
														
 
															+                    <el-option label="SKU" value="sku" />
														
 
															+                  </el-select>
														
 
															+                </template>
														
 
															+                <template #append>
														
 
															+                  <el-select v-model="rightSelect" style="width: 100px">
														
 
															+                    <el-option label="最新优先" value="latest" />
														
 
															+                    <el-option label="最早优先" value="earliest" />
														
 
															+                    <el-option label="优选广告" value="optimal" />
														
 
															+                  </el-select>
														
 
															+                </template>
														
 
															+              </el-input>
														
 
															+            </div>
														
 
															+            <el-table
														
 
															+              height="490"
														
 
															+              style="width: 100%"
														
 
															+              v-loading="loading"
														
 
															+              :data="productTableData"
														
 
															+              :header-cell-style="headerCellStyle"
														
 
															+              @selection-change="handleSelectionChange">
														
 
															+              <el-table-column type="selection" width="50" />
														
 
															+              <el-table-column prop="asin" label="商品">
														
 
															+                <template #default="scope">
														
 
															+                  <div style="display: flex; align-items: center">
														
 
															+                    <div style="margin-right: 8px; line-height: normal">
														
 
															+                      <el-image class="img-box" :src="scope.row.image_link" />
														
 
															+                    </div>
														
 
															+                    <div>
														
 
															+                      <el-tooltip class="box-item" effect="dark" :content="scope.row.title" placement="top">
														
 
															+                        <div class="single-line">{{ scope.row.title ? scope.row.title : '--' }}</div>
														
 
															+                      </el-tooltip>
														
 
															+                      <div class="data-color">
														
 
															+                        <span style="font-weight: 500; color: rgb(30, 33, 41)">${{ scope.row.price ? scope.row.price : '--' }}</span>
														
 
															+                        <span style="margin: 0 5px; color: #cacdd4">|</span>
														
 
															+                        <span style="color: #6d7784">{{ scope.row.quantity }}</span>
														
 
															+                      </div>
														
 
															+                      <span>
														
 
															+                        ASIN: <span class="data-color" style="margin-right: 8px">{{ scope.row.asin ? scope.row.asin : '--' }}</span>
														
 
															+                      </span>
														
 
															+                      <span>
														
 
															+                        SKU: <span class="data-color">{{ scope.row.sku ? scope.row.sku : '--' }}</span>
														
 
															+                      </span>
														
 
															+                    </div>
														
 
															+                  </div>
														
 
															+                </template>
														
 
															+              </el-table-column>
														
 
															+              <el-table-column prop="name" label="Name" width="120" align="right">
														
 
															+                <template #header>
														
 
															+                  <el-button type="primary" size="normal" link :disabled="addedTableData.length >= 1" @click="handleGoodsAdd">添加已选中</el-button>
														
 
															+                </template>
														
 
															+                <template #default="scope">
														
 
															+                  <el-button type="primary" size="small" :disabled="addedTableData.length >= 1" @click="addSingleGoods(scope)" text>添加</el-button>
														
 
															+                </template>
														
 
															+              </el-table-column>
														
 
															+            </el-table>
														
 
															+            <el-pagination
														
 
															+              @current-change="handleCurrentChange"
														
 
															+              @size-change="handleSizeChange"
														
 
															+              :current-page="currentPage"
														
 
															+              :page-size="pageSize"
														
 
															+              :total="totalItems"
														
 
															+              layout="prev, pager, next" />
														
 
															+          </el-tab-pane>
														
 
															+          <el-tab-pane label="输入" name="second">
														
 
															+            <el-input
														
 
															+              style="padding: 10px"
														
 
															+              v-model="productTextarea"
														
 
															+              :rows="20"
														
 
															+              type="textarea"
														
 
															+              placeholder="请输入ASIN，多个ASIN使用逗号、空格或换行符分隔。(未完成)"
														
 
															+              maxlength="11000" />
														
 
															+            <div style="display: flex; flex-direction: row-reverse; margin-top: 10px">
														
 
															+              <el-button v-for="button in buttons" :key="button.text" :type="button.type" link @click="addGods">{{ button.text }}</el-button>
														
 
															+            </div>
														
 
															+          </el-tab-pane>
														
 
															+        </el-tabs>
														
 
															+      </div>
														
 
															+      <div style="width: 50%">
														
 
															+        <el-card class="box-card" shadow="never" style="border: 0">
														
 
															+          <template #header>
														
 
															+            <div class="card-header">
														
 
															+              <span style="font-weight: 550; font-size: 15px; color: #1f2128">已添加: {{ addedTableData.length }}</span>
														
 
															+
														
 
															+                <el-text type="warning" truncated>最多添加一个产品</el-text>
														
 
															+
														
 
															+              <el-button class="button" type="danger" text bg @click="delAllGoods">全部删除</el-button>
														
 
															+            </div>
														
 
															+          </template>
														
 
															+          <div class="card-body"></div>
														
 
															+        </el-card>
														
 
															+        <div style="padding: 0 10px 0 10px; margin-top: -12px">
														
 
															+          <el-table
														
 
															+            :data="addedTableData"
														
 
															+            height="475"
														
 
															+            style="width: 100%"
														
 
															+            :header-cell-style="headerCellStyle"
														
 
															+            @selection-change="handleAddedGoodsChange">
														
 
															+            <el-table-column type="selection" width="50" />
														
 
															+            <el-table-column prop="asin" label="ASIN">
														
 
															+              <template #default="scope">
														
 
															+                <div style="display: flex; align-items: center">
														
 
															+                  <div style="margin-right: 8px; line-height: normal">
														
 
															+                    <el-image class="img-box" :src="scope.row.image_link" />
														
 
															+                  </div>
														
 
															+                  <div>
														
 
															+                    <el-tooltip class="box-item" effect="dark" :content="scope.row.title" placement="top">
														
 
															+                      <div class="single-line">{{ scope.row.title ? scope.row.title : '--' }}</div>
														
 
															+                    </el-tooltip>
														
 
															+                    <div class="data-color">
														
 
															+                      <span style="font-weight: 500; color: rgb(30, 33, 41)">${{ scope.row.price ? scope.row.price : '--' }}</span>
														
 
															+                      <span style="margin: 0 5px; color: #cacdd4">|</span>
														
 
															+                      <span style="color: #6d7784">{{ scope.row.quantity }}</span>
														
 
															+                    </div>
														
 
															+                    <span
														
 
															+                      >ASIN:
														
 
															+                      <span class="data-color" style="margin-right: 8px">{{ scope.row.asin ? scope.row.asin : '--' }}</span>
														
 
															+                    </span>
														
 
															+                    <span
														
 
															+                      >SKU:
														
 
															+                      <span class="data-color">{{ scope.row.sku ? scope.row.sku : '--' }}</span>
														
 
															+                    </span>
														
 
															+                  </div>
														
 
															+                </div>
														
 
															+              </template>
														
 
															+            </el-table-column>
														
 
															+            <el-table-column prop="name" label="Name" width="120" align="right">
														
 
															+              <template #header>
														
 
															+                <el-button type="danger" size="normal" link @click="delSelectedGoods">删除已选中</el-button>
														
 
															+              </template>
														
 
															+              <template #default="scope">
														
 
															+                <el-button type="primary" size="small" @click="delSingleGoods(scope)" text>删除</el-button>
														
 
															+              </template>
														
 
															+            </el-table-column>
														
 
															+          </el-table>
														
 
															+        </div>
														
 
															+        <!-- <div style="display: flex; justify-content: space-around; padding-top: 5px">
														
 
															+          <el-button type="primary" plain :disabled="productSave" @click="submitProductForm">保存</el-button>
														
 
															+        </div> -->
														
 
															+      </div>
														
 
															+    </div>
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<script setup lang="ts">
														
 
															+import { inject, onMounted, ref, watch, provide, onUnmounted } from 'vue'
														
 
															+import type { Ref } from 'vue'
														
 
															+import type { TabsPaneContext } from 'element-plus'
														
 
															+import { ElMessage } from 'element-plus'
														
 
															+import { storeToRefs } from 'pinia'
														
 
															+import { useShopInfo } from '/@/stores/shopInfo'
														
 
															+import { request } from '/@/utils/service'
														
 
															+
														
 
															+
														
 
															+const shopInfo = useShopInfo()
														
 
															+const { profile } = storeToRefs(shopInfo)
														
 
															+const productTextarea = ref('')
														
 
															+const productLoading = ref(false)
														
 
															+let addedAdsTableItems = ref([])
														
 
															+const currentPage = ref() // 当前页
														
 
															+const pageSize = ref(20) // 每页显示条目数
														
 
															+const totalItems = ref() // 数据总量
														
 
															+const productTableData = ref([]) // 左侧表格数据
														
 
															+const loading = ref(false)
														
 
															+let addedTableData = ref([])
														
 
															+let selections = []
														
 
															+let addedSels = []
														
 
															+const searchInp = ref('')
														
 
															+const leftSelect = ref('name')
														
 
															+let productSave = ref(true)
														
 
															+const buttons = [{ type: 'primary', text: '添加' }] as const
														
 
															+const productTabs = ref('first')
														
 
															+const rightSelect = ref('latest')
														
 
															+const respCampaignId = inject<Ref>('respCampaignId')
														
 
															+const respAdGroupId = inject<Ref>('respAdGroupId')
														
 
															+
														
 
															+function setTableData(asin = '', sku = '') {
														
 
															+  return request({
														
 
															+    url: '/api/sellers/listings/our/',
														
 
															+    method: 'GET',
														
 
															+    params: {
														
 
															+      page: currentPage.value,
														
 
															+      limit: pageSize.value,
														
 
															+      profile_id: profile.value.profile_id,
														
 
															+      asin,
														
 
															+      sku,
														
 
															+    },
														
 
															+  })
														
 
															+    .then((resp) => {
														
 
															+      productTableData.value = resp.data
														
 
															+      totalItems.value = resp.total
														
 
															+      currentPage.value = resp.page
														
 
															+      loading.value = false
														
 
															+    })
														
 
															+    .catch((error) => {
														
 
															+      console.error('Error fetching data:', error)
														
 
															+      loading.value = false
														
 
															+    })
														
 
															+}
														
 
															+
														
 
															+function addSingleGoods(scope) {
														
 
															+  // console.log('scope', scope.row)
														
 
															+  const isAlreadyAdded = addedTableData.value.some((item) => item.sku === scope.row.sku)
														
 
															+  if (!isAlreadyAdded) {
														
 
															+    addedTableData.value.push(scope.row)
														
 
															+  } else {
														
 
															+    console.log('Item is already added.')
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+function addGods() {
														
 
															+  const inputData = productTextarea.value
														
 
															+  const asins = inputData.split(/[\n,]+/)
														
 
															+
														
 
															+  asins.forEach((asin) => {
														
 
															+    if (asin.trim()) {
														
 
															+      setTableData(asin.trim())
														
 
															+        .then((response) => {
														
 
															+          console.log(`Data for ASIN ${asin}:`, response) // 更新这里来正确地访问数据
														
 
															+        })
														
 
															+        .catch((error) => {
														
 
															+          console.error(`Error fetching data for ASIN ${asin}:`, error)
														
 
															+        })
														
 
															+    }
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+function delSingleGoods(scope) {
														
 
															+  const index = addedTableData.value.findIndex((item) => item.sku === scope.row.sku)
														
 
															+  if (index !== -1) {
														
 
															+    addedTableData.value.splice(index, 1)
														
 
															+    console.log('Item removed successfully.')
														
 
															+  } else {
														
 
															+    console.log('Item not found.')
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+function delAllGoods() {
														
 
															+  addedTableData.value = []
														
 
															+  // addedTableData.value.splice(0, addedTableData.value.length)
														
 
															+}
														
 
															+
														
 
															+// 删除第二个table中已经选中的项
														
 
															+function delSelectedGoods() {
														
 
															+  addedTableData.value = addedTableData.value.filter((item) => !addedSels.includes(item))
														
 
															+  addedSels = []
														
 
															+}
														
 
															+
														
 
															+function inpChange(e) {
														
 
															+  const value = e
														
 
															+  if (leftSelect.value === 'asin') {
														
 
															+    loading.value = true
														
 
															+    setTableData(value)
														
 
															+  } else if (leftSelect.value === 'sku') {
														
 
															+    loading.value = true
														
 
															+    setTableData('', value)
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+function selChange(e) {
														
 
															+  console.log('e', e)
														
 
															+  const value = e
														
 
															+  if (leftSelect.value === 'asin' && searchInp.value) {
														
 
															+    loading.value = true
														
 
															+    setTableData(value)
														
 
															+  } else if (leftSelect.value === 'sku' && searchInp.value) {
														
 
															+    loading.value = true
														
 
															+    setTableData('', value)
														
 
															+  }
														
 
															+}
														
 
															+// 点击表格选项触发事件
														
 
															+function handleSelectionChange(selection) {
														
 
															+  selections = selection
														
 
															+}
														
 
															+// 获取addedTable中已选中的项
														
 
															+function handleAddedGoodsChange(selection) {
														
 
															+  addedSels = selection
														
 
															+}
														
 
															+// 添加已选中的项
														
 
															+function handleGoodsAdd() {
														
 
															+  // 过滤掉已经存在于addedData.value中的项
														
 
															+  const newSelections = selections.filter(
														
 
															+    (sel) => !addedTableData.value.some((added) => added.sku === sel.sku) // 使用sku作为唯一标识
														
 
															+  )
														
 
															+  // 如果有新的不重复项，加入到addedData.value中
														
 
															+  if (newSelections.length > 0) {
														
 
															+    addedTableData.value.push(...newSelections)
														
 
															+  }
														
 
															+}
														
 
															+// 点击Tab
														
 
															+const handleGoodsTabs = (tab: TabsPaneContext, event: Event) => {
														
 
															+  console.log(tab, event)
														
 
															+}
														
 
															+
														
 
															+function isItemInList(item, list) {
														
 
															+  return list.some((listItem) => listItem.sku === item.sku && listItem.asin === item.asin)
														
 
															+}
														
 
															+// 监听商品右侧表格已添加的数据并转化数据格式
														
 
															+watch(
														
 
															+  addedTableData,
														
 
															+  (newValue, oldValue) => {
														
 
															+    newValue.forEach((item) => {
														
 
															+      if (!isItemInList(item, addedAdsTableItems.value)) {
														
 
															+        addedAdsTableItems.value.push({ sku: item.sku, asin: item.asin })
														
 
															+      }
														
 
															+    })
														
 
															+    if (addedTableData.value.length !== 0) {
														
 
															+      productSave.value = false
														
 
															+    } else {
														
 
															+      productSave.value = true
														
 
															+    }
														
 
															+  },
														
 
															+  { deep: true }
														
 
															+)
														
 
															+
														
 
															+async function createAds() {
														
 
															+  try {
														
 
															+    const requestData = {
														
 
															+      profile_id: profile.value.profile_id,
														
 
															+      campaignId: respCampaignId.value,
														
 
															+      adGroupId: respAdGroupId.value,
														
 
															+      asinsku: addedAdsTableItems.value,
														
 
															+      state: 'PAUSED',
														
 
															+    }
														
 
															+    const filteredRequestData = Object.fromEntries(Object.entries(requestData).filter(([_, v]) => v != null))
														
 
															+    const resp = await request({
														
 
															+      url: '/api/ad_manage/spads/create/',
														
 
															+      method: 'POST',
														
 
															+      data: filteredRequestData,
														
 
															+    })
														
 
															+    console.log('🚀 ~ createAds ~ resp-->>', resp)
														
 
															+    productLoading.value = false
														
 
															+    if (resp.data.success.length > 0) {
														
 
															+      productSave.value = false
														
 
															+      addedTableData.value = []
														
 
															+      ElMessage({
														
 
															+        message: '商品创建成功',
														
 
															+        type: 'success',
														
 
															+      })
														
 
															+    } else {
														
 
															+      ElMessage.error('商品创建失败!')
														
 
															+    }
														
 
															+  } catch (error) {
														
 
															+    console.error('请求失败：', error)
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+function submitProductForm() {
														
 
															+  productLoading.value = true
														
 
															+  createAds()
														
 
															+}
														
 
															+
														
 
															+// 处理分页器当前页变化
														
 
															+function handleCurrentChange(newPage) {
														
 
															+  currentPage.value = newPage
														
 
															+  loading.value = true
														
 
															+  setTableData()
														
 
															+}
														
 
															+// 处理分页器每页显示条目数变化
														
 
															+function handleSizeChange(newSize) {
														
 
															+  pageSize.value = newSize
														
 
															+  currentPage.value = 1 // 重置到第一页
														
 
															+}
														
 
															+
														
 
															+const headerCellStyle = (args) => {
														
 
															+  if (args.rowIndex === 0) {
														
 
															+    return {
														
 
															+      backgroundColor: 'rgba(245, 245, 245, 0.9)',
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+const emit = defineEmits(['update-added-data']);
														
 
															+
														
 
															+// 当数据发生变化时，触发事件
														
 
															+watch(addedTableData, (newValue) => {
														
 
															+  emit('update-added-data', newValue);
														
 
															+}, {deep: true});
														
 
															+
														
 
															+onMounted(() => {
														
 
															+  setTableData()
														
 
															+})
														
 
															+</script>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+::v-deep(.el-form--default.el-form--label-top .el-form-item .el-form-item__label) {
														
 
															+  font-weight: 500;
														
 
															+}
														
 
															+.demo-tabs > .el-tabs__content {
														
 
															+  padding: 52px;
														
 
															+  color: #6b778c;
														
 
															+  font-size: 32px;
														
 
															+  font-weight: 600;
														
 
															+}
														
 
															+/* 广告组商品Tab栏 */
														
 
															+::v-deep(.el-tabs__nav-scroll) {
														
 
															+  overflow: hidden;
														
 
															+  margin-left: 20px;
														
 
															+}
														
 
															+::v-deep(.el-table__inner-wrapper::before) {
														
 
															+  background-color: white;
														
 
															+}
														
 
															+// 表格内容边距
														
 
															+div {
														
 
															+  & #pane-first,
														
 
															+  & #pane-second {
														
 
															+    margin: 10px;
														
 
															+  }
														
 
															+}
														
 
															+.card-header {
														
 
															+  display: flex;
														
 
															+  justify-content: space-between;
														
 
															+  align-items: center;
														
 
															+}
														
 
															+.box-card {
														
 
															+  width: 100%;
														
 
															+  margin-right: 10px;
														
 
															+}
														
 
															+.single-line {
														
 
															+  color: rgb(30, 33, 41);
														
 
															+  overflow: hidden;
														
 
															+  display: -webkit-box;
														
 
															+  -webkit-box-orient: vertical;
														
 
															+  -webkit-line-clamp: 1;
														
 
															+  white-space: pre-wrap;
														
 
															+  word-break: break-word;
														
 
															+}
														
 
															+.data-color {
														
 
															+  color: rgb(30, 33, 41);
														
 
															+}
														
 
															+.img-box {
														
 
															+  width: 60px;
														
 
															+  height: 60px;
														
 
															+  margin-top: 5px;
														
 
															+  border: 1px solid rgb(194, 199, 207);
														
 
															+  border-radius: 4px;
														
 
															+}
														
 
															+/* 商品定向Tab栏 */
														
 
															+::v-deep(.goods-orientation-tabs #tab-1) {
														
 
															+  border-right: 0;
														
 
															+}
														
 
															+</style>
														
--- a/src/views/adManage/sb/campaigns/CreateCampaigns/component/VideoCreativity1.vue
+++ b/src/views/adManage/sb/campaigns/CreateCampaigns/component/VideoCreativity1.vue
@@ -0,0 +1,908 @@
 
															+<template>
														
 
															+  <div class="customize-container">
														
 
															+    <el-card body-style="padding: 20px 80px 0 80px;">
														
 
															+      <div style="font-weight: 700; padding-bottom: 18px">
														
 
															+        <span style="color: #306cd7; font-size: 26px">|</span>
														
 
															+        <span style="font-size: 18px; padding-left: 5px">创意</span>
														
 
															+      </div>
														
 
															+      <el-form
														
 
															+        ref="ruleFormRef"
														
 
															+        :model="ruleForm"
														
 
															+        :rules="rules"
														
 
															+        label-width="120px"
														
 
															+        class="demo-ruleForm"
														
 
															+        size="default"
														
 
															+        label-position="top"
														
 
															+        status-icon>
														
 
															+        <el-form-item label="广告名称" prop="name">
														
 
															+          <el-input v-model="ruleForm.name" style="width: 50%" />
														
 
															+        </el-form-item>
														
 
															+        <div style="display: flex; border: 1px solid #dddfe6; padding: 0 0 0 5px; margin-bottom: 20px" v-loading="createLoading">
														
 
															+          <div style="width: 50%; padding-left: 5px; border-right: 1px solid #dddfe6">
														
 
															+            <el-scrollbar height="700px">
														
 
															+              <el-collapse v-model="activeNames" @change="handleChange" style="border-top: none; border-bottom: none">
														
 
															+                <el-collapse-item name="1" style="padding-right: 10px">
														
 
															+                  <template #title> <span style="color: #e47470; margin-right: 4px">*</span>品牌名称和徽标</template>
														
 
															+                  <el-form-item prop="brandName">
														
 
															+                    <el-input v-model="ruleForm.brandName" placeholder="请输入品牌名称" style="padding: 0 0 5px 0"></el-input>
														
 
															+                  </el-form-item>
														
 
															+
														
 
															+                  <el-upload
														
 
															+                    v-model:file-list="fileList"
														
 
															+                    list-type="picture-card"
														
 
															+                    :on-change="changeFile"
														
 
															+                    v-loading="upLoading"
														
 
															+                    action="#"
														
 
															+                    accept=".png, .jpg"
														
 
															+                    :limit="1"
														
 
															+                    :auto-upload="false">
														
 
															+                    <el-icon><Plus /></el-icon>
														
 
															+                    <template #file="{ file }">
														
 
															+                      <div>
														
 
															+                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
														
 
															+                        <span class="el-upload-list__item-actions">
														
 
															+                          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
														
 
															+                            <el-icon><zoom-in /></el-icon>
														
 
															+                          </span>
														
 
															+                          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
														
 
															+                            <el-icon><Delete /></el-icon>
														
 
															+                          </span>
														
 
															+                        </span>
														
 
															+                      </div>
														
 
															+                    </template>
														
 
															+                    <template #tip>
														
 
															+                      <div style="margin-top: 10px">
														
 
															+                        <div style="display: flex; align-items: center; justify-content: space-between">
														
 
															+                          <span style="line-height: 17px; font-weight: 600; color: #1e2128">徽标规格</span>
														
 
															+                          <el-button type="primary" :icon="Picture" disabled="true" @click="openDialog">从素材库中选择</el-button>
														
 
															+                        </div>
														
 
															+                        <div class="introduce-item">1、图片大小: 400x400 像素或更大</div>
														
 
															+                        <div class="introduce-item">2、文件大小: 1MB 或更小</div>
														
 
															+                        <div class="introduce-item">3、文件格式: PNG 或 JPG</div>
														
 
															+                        <div class="introduce-item">
														
 
															+                          4、内容: 徽标必须填满图片或置于白色或透明背景上详细了解我们的徽标要求
														
 
															+                          <span style="margin-left: 25px; position: relative">
														
 
															+                            <el-icon size="14" style="position: absolute; left: -14px; top: 1px"><Link /></el-icon>
														
 
															+                            <el-link
														
 
															+                              type="primary"
														
 
															+                              :underline="false"
														
 
															+                              href="https://advertising.amazon.com/resources/ad-policy/sponsored-ads-policies#brandlogo"
														
 
															+                              target="_blank"
														
 
															+                              >查看要求</el-link
														
 
															+                            >
														
 
															+                          </span>
														
 
															+                        </div>
														
 
															+                      </div>
														
 
															+                    </template>
														
 
															+                  </el-upload>
														
 
															+                  <!-- 预览弹窗 -->
														
 
															+                  <el-dialog v-model="dialogVisible">
														
 
															+                    <img w-full :src="dialogImageUrl" alt="Preview Image" />
														
 
															+                  </el-dialog>
														
 
															+                </el-collapse-item>
														
 
															+                <el-collapse-item name="2" style="padding-right: 10px">
														
 
															+                  <template #title><span style="color: #e47470; margin-right: 4px">*</span>视频</template>
														
 
															+                  <div style="display: flex; justify-content: space-between">
														
 
															+                    <div style="font-weight: 700; color: #1d2129; line-height: 18px; font-size: 14px">选择视频</div>
														
 
															+                    <el-button type="primary" link>查看视频批准提示</el-button>
														
 
															+                  </div>
														
 
															+                  <div style="margin: 10px 0; font-size: 12px; font-weight: 400; color: #666; line-height: 18px">
														
 
															+                    保持视频简短并紧扣主题。视频会自动播放，因此请确保前 2
														
 
															+                    秒极具吸引力，并且不依靠声音来传递信息。如果您在视频中使用了文字，请确保文字清晰易辨。字幕或音频必须与将展示您广告的区域相匹配。
														
 
															+                  </div>
														
 
															+                  <el-upload
														
 
															+                    v-model:file-list="videoList"
														
 
															+                    :on-change="changeVideo"
														
 
															+                    v-loading="videoLoading"
														
 
															+                    accept=".mp4, .mov"
														
 
															+                    action="#"
														
 
															+                    :limit="1"
														
 
															+                    :auto-upload="false"
														
 
															+                    :on-remove="handleRemoveVideo"
														
 
															+                    class="upload-demo">
														
 
															+                    <el-button type="primary">上传视频</el-button>
														
 
															+                    <template #tip>
														
 
															+                      <el-button type="primary" disabled="true" style="margin-left: 20px">从素材库中选择</el-button>
														
 
															+                      <!-- <div class="el-upload__tip">div> -->
														
 
															+                      <hr style="margin: 10px 0" />
														
 
															+                      <div>
														
 
															+                        <div style="display: flex; justify-content: space-between">
														
 
															+                          <span style="font-weight: 700; color: #1d2129; line-height: 18px; font-size: 14px">视频文件要求:</span>
														
 
															+                          <el-button type="primary" link>了解更多</el-button>
														
 
															+                        </div>
														
 
															+                        <div class="tip-list-title">视频格式</div>
														
 
															+                        <div class="tip-item">1.纵横比：16：9</div>
														
 
															+                        <div class="tip-item">2.尺寸：1280 x 720 像素、1920 x 1080 像素或 3840 x 2160 像素</div>
														
 
															+                        <div class="tip-item">3.文件大小：500MB 或更小</div>
														
 
															+                        <div class="tip-item">4.文件格式：MP4 或 MOV</div>
														
 
															+                        <div class="tip-item">5.长度：6-45 秒</div>
														
 
															+                        <div class="tip-item">6.帧率：23.976、23.98、24、25、29.97 或 29.98 fps</div>
														
 
															+                        <div class="tip-item">7.比特率：1 Mbps 或更高</div>
														
 
															+                        <div class="tip-item">8.编解码器：H.264 或 H.2651</div>
														
 
															+                        <div class="tip-item">9.配置文件：主配置文件或基线配置文件</div>
														
 
															+                        <div class="tip-item">10.视频流：仅为 1</div>
														
 
															+                        <div class="tip-list-title">音频规格</div>
														
 
															+                        <div class="tip-item">1.语言：必须与广告投放区域匹配</div>
														
 
															+                        <div class="tip-item">2.采样率：44.1 kHz 或更高</div>
														
 
															+                        <div class="tip-item">3.编解码器：PCM、AAC 或 MP3</div>
														
 
															+                        <div class="tip-item">4.比特率：96 kbps 或更高</div>
														
 
															+                        <div class="tip-item">5.格式：立体声或单声道</div>
														
 
															+                        <div class="tip-item">6.音频流：仅为 1</div>
														
 
															+                      </div>
														
 
															+                    </template>
														
 
															+                  </el-upload>
														
 
															+
														
 
															+                  <!-- 预览弹窗 -->
														
 
															+                  <el-dialog v-model="dialogVisible">
														
 
															+                    <img w-full :src="dialogImageUrl" alt="Preview Image" />
														
 
															+                  </el-dialog>
														
 
															+                </el-collapse-item>
														
 
															+
														
 
															+                <el-collapse-item name="commodity" v-loading="commodityLoading" style="padding-right: 10px">
														
 
															+                  <template #title> <span style="color: #e47470; margin-right: 4px">*</span>商品</template>
														
 
															+                  <div v-for="(item, index) in flattenedCommodityCard" :key="index" style="margin: 0 0 5px 0">
														
 
															+                    <el-card shadow="hover" body-style="padding: 10px; display: flex;">
														
 
															+                      <div style="margin-right: 8px; line-height: normal">
														
 
															+                        <el-image class="img-box" :src="item.image_link" />
														
 
															+                      </div>
														
 
															+                      <div style="position: relative">
														
 
															+                        <el-tooltip class="box-item" effect="dark" :content="item.title" placement="top">
														
 
															+                          <div class="double-line">{{ item.title }}</div>
														
 
															+                        </el-tooltip>
														
 
															+                        <span>
														
 
															+                          <span style="color: #6d7784">ASIN: </span>
														
 
															+                          <span class="data-color" style="margin-right: 8px">{{ item.asin }}</span>
														
 
															+                        </span>
														
 
															+                        <el-button
														
 
															+                          type="primary"
														
 
															+                          size="small"
														
 
															+                          link
														
 
															+                          @click="() => openCommodityDialog(index)"
														
 
															+                          style="position: absolute; bottom: 2px; right: 0">
														
 
															+                          更换商品
														
 
															+                        </el-button>
														
 
															+                      </div>
														
 
															+                    </el-card>
														
 
															+                  </div>
														
 
															+                </el-collapse-item>
														
 
															+                <el-collapse-item name="4" style="padding-right: 10px">
														
 
															+                  <template #title> <span style="color: #e47470; margin-right: 4px">*</span>标题</template>
														
 
															+                  <el-form-item prop="title">
														
 
															+                    <el-input v-model="ruleForm.title" maxlength="50" placeholder="请输入标题" show-word-limit style="padding: 0 10px 0 0"></el-input>
														
 
															+                  </el-form-item>
														
 
															+                </el-collapse-item>
														
 
															+              </el-collapse>
														
 
															+            </el-scrollbar>
														
 
															+          </div>
														
 
															+          <div style="width: 50%; padding: 0 10px; position: relative">
														
 
															+            <el-button type="primary" plain @click="submitForm(ruleFormRef)" :disabled="!fileList.length" style="position: absolute; top: 92%; left: 46%"
														
 
															+              >保存</el-button
														
 
															+            >
														
 
															+          </div>
														
 
															+        </div>
														
 
															+      </el-form>
														
 
															+    </el-card>
														
 
															+    <el-dialog v-model="centerDialogVisible" title="从素材库中选择" width="65%">
														
 
															+      <el-input :prefix-icon="Search"></el-input>
														
 
															+      <div class="grid-container">
														
 
															+        <div
														
 
															+          class="grid-item"
														
 
															+          v-for="item in cards"
														
 
															+          :key="item.id"
														
 
															+          @click="selectCard(item)"
														
 
															+          :class="{ selected: isSelected(item.id), hover: hoverId === item.id }"
														
 
															+          @mouseover="hoverId = item.id"
														
 
															+          @mouseleave="hoverId = null">
														
 
															+          <el-card :body-style="{ padding: '0px' }">
														
 
															+            <el-image class="image" :src="item.imageUrl" fit="cover" />
														
 
															+            <div style="padding: 10px">
														
 
															+              <span>
														
 
															+                <el-tooltip placement="top" :content="item.title">
														
 
															+                  {{ item.title }}
														
 
															+                </el-tooltip>
														
 
															+              </span>
														
 
															+              <div class="bottom">
														
 
															+                <div class="bottom-item">{{ item.size }}KB</div>
														
 
															+                <div class="bottom-item">{{ item.width }} * {{ item.height }}</div>
														
 
															+                <div class="bottom-item">徽标</div>
														
 
															+              </div>
														
 
															+            </div>
														
 
															+          </el-card>
														
 
															+        </div>
														
 
															+      </div>
														
 
															+      <template #footer>
														
 
															+        <span class="dialog-footer">
														
 
															+          <el-button @click="centerDialogVisible = false">取消</el-button>
														
 
															+          <el-button type="primary" @click="handleConfirmSelection">确定</el-button>
														
 
															+        </span>
														
 
															+      </template>
														
 
															+    </el-dialog>
														
 
															+    <el-dialog v-model="lifeStyleDialog" title="从素材库中选择" width="65%">
														
 
															+      <el-input :prefix-icon="Search"></el-input>
														
 
															+      <div class="grid-container">
														
 
															+        <div
														
 
															+          class="grid-item"
														
 
															+          v-for="item in lifeStyleCards"
														
 
															+          :key="item.id"
														
 
															+          @click="selectCard(item)"
														
 
															+          :class="{ selected: isSelected(item.id), hover: hoverId === item.id }"
														
 
															+          @mouseover="hoverId = item.id"
														
 
															+          @mouseleave="hoverId = null">
														
 
															+          <el-card :body-style="{ padding: '0px' }">
														
 
															+            <el-image class="image" :src="item.imageUrl" fit="cover" />
														
 
															+            <div style="padding: 10px">
														
 
															+              <span>
														
 
															+                <el-tooltip placement="top" :content="item.title">
														
 
															+                  {{ item.title }}
														
 
															+                </el-tooltip>
														
 
															+              </span>
														
 
															+              <div class="bottom">
														
 
															+                <div class="bottom-item">{{ item.size }}KB</div>
														
 
															+                <div class="bottom-item">{{ item.width }} * {{ item.height }}</div>
														
 
															+                <div class="bottom-item">徽标</div>
														
 
															+              </div>
														
 
															+            </div>
														
 
															+          </el-card>
														
 
															+        </div>
														
 
															+      </div>
														
 
															+      <template #footer>
														
 
															+        <span class="dialog-footer">
														
 
															+          <el-button @click="centerDialogVisible = false">取消</el-button>
														
 
															+          <el-button type="primary" @click="centerDialogVisible = false">确定</el-button>
														
 
															+        </span>
														
 
															+      </template>
														
 
															+    </el-dialog>
														
 
															+    <el-dialog v-model="commodityDialog" title="更换商品" width="50%">
														
 
															+      <el-radio-group
														
 
															+        v-loading="dialogLoading3"
														
 
															+        v-model="selectedCommodity"
														
 
															+        style="display: flex; flex-direction: column; align-content: flex-start; align-items: flex-start">
														
 
															+        <div v-for="(item, index) in flattenedReplaceableCommodity" :key="index">
														
 
															+          <el-radio :label="item.asin" style="height: 80px; border-bottom: 1px solid #ccc">
														
 
															+            <div style="padding: 10px; display: flex; align-items: center">
														
 
															+              <div style="margin-right: 8px; line-height: normal">
														
 
															+                <el-image class="img-box" :src="item.image_link" />
														
 
															+              </div>
														
 
															+              <div style="position: relative">
														
 
															+                <el-tooltip class="box-item" effect="dark" :content="item.title" placement="top">
														
 
															+                  <div class="double-line">{{ item.title }}</div>
														
 
															+                </el-tooltip>
														
 
															+                <span>
														
 
															+                  <span style="color: #6d7784">ASIN: </span>
														
 
															+                  <span class="data-color" style="margin-right: 8px">{{ item.asin }}</span>
														
 
															+                </span>
														
 
															+              </div>
														
 
															+            </div>
														
 
															+          </el-radio>
														
 
															+        </div>
														
 
															+      </el-radio-group>
														
 
															+      <div style="margin-top: 20px; display: flex; justify-content: center">
														
 
															+        <el-button type="primary" :disabled="!selectedCommodity" @click="handleSelectedCommodity">确定</el-button>
														
 
															+      </div>
														
 
															+    </el-dialog>
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<script setup lang="ts">
														
 
															+import { reactive, ref, inject, Ref, watch, computed, onMounted, onUnmounted } from 'vue'
														
 
															+import type { FormInstance, FormRules, UploadProps, UploadUserFile } from 'element-plus'
														
 
															+import { ElMessage, ElMessageBox } from 'element-plus'
														
 
															+import { Plus, Picture, Search, Delete, Download, ZoomIn } from '@element-plus/icons-vue'
														
 
															+import type { UploadFile } from 'element-plus'
														
 
															+import { getAssets, getLifeStyleAssets, getPageAsins, getCommodityCard, uploadFile, checkAsset, postBrandVideo } from '../api/index'
														
 
															+import emitter from '/@/utils/emitter'
														
 
															+import { storeToRefs } from 'pinia'
														
 
															+import { useShopInfo } from '/@/stores/shopInfo'
														
 
															+
														
 
															+const shopInfo = useShopInfo()
														
 
															+const { profile } = storeToRefs(shopInfo)
														
 
															+
														
 
															+const ruleFormRef = ref<FormInstance>()
														
 
															+
														
 
															+interface RuleForm {
														
 
															+  name: string
														
 
															+  brandName: string
														
 
															+  title: string
														
 
															+}
														
 
															+const ruleForm = reactive<RuleForm>({
														
 
															+  name: '视频 广告 - 1/15/2024 17:51:10.236',
														
 
															+  brandName: '',
														
 
															+  title: '',
														
 
															+})
														
 
															+
														
 
															+const rules = reactive<FormRules<RuleForm>>({
														
 
															+  name: [{ required: true, message: '请输入广告名称', trigger: 'blur' }],
														
 
															+  brandName: [{ required: true, message: '请输入品牌名称', trigger: 'blur' }],
														
 
															+  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
														
 
															+})
														
 
															+
														
 
															+const submitForm = async (formEl: FormInstance | undefined) => {
														
 
															+  if (!formEl) return
														
 
															+  await formEl.validate((valid, fields) => {
														
 
															+    if (valid) {
														
 
															+      console.log('submit!')
														
 
															+      createBrandVideo()
														
 
															+    } else {
														
 
															+      console.log('error submit!', fields)
														
 
															+    }
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+const activeNames = ref(['1'])
														
 
															+const handleChange = (val: string[]) => {
														
 
															+  // console.log(val)
														
 
															+  if (val.includes('commodity')) {
														
 
															+    getCommodityCardData()
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+const imageUrl = ref('')
														
 
															+
														
 
															+const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
														
 
															+  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
														
 
															+  console.log('success!')
														
 
															+}
														
 
															+
														
 
															+const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
														
 
															+  if (rawFile.type !== 'image/jpeg') {
														
 
															+    ElMessage.error('Avatar picture must be JPG format!')
														
 
															+    return false
														
 
															+  } else if (rawFile.size / 1024 / 1024 > 2) {
														
 
															+    ElMessage.error('Avatar picture size can not exceed 2MB!')
														
 
															+    return false
														
 
															+  }
														
 
															+  return true
														
 
															+}
														
 
															+
														
 
															+const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
														
 
															+  console.log(uploadFile)
														
 
															+}
														
 
															+
														
 
															+const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
														
 
															+  ElMessage.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + uploadFiles.length} totally`)
														
 
															+}
														
 
															+
														
 
															+const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
														
 
															+  return ElMessageBox.confirm(`Cancel the transfer of ${uploadFile.name} ?`).then(
														
 
															+    () => true,
														
 
															+    () => false
														
 
															+  )
														
 
															+}
														
 
															+
														
 
															+// 图片上传相关
														
 
															+const dialogImageUrl = ref('')
														
 
															+const dialogVisible = ref(false)
														
 
															+const disabled = ref(false)
														
 
															+const fileList = ref([])
														
 
															+const videoList = ref([])
														
 
															+const selectedId = ref(null)
														
 
															+const hoverId = ref(null)
														
 
															+const selectedCards = ref([])
														
 
															+const selectedImageUrl = ref('')
														
 
															+const centerDialogVisible = ref(false)
														
 
															+const cards = reactive([])
														
 
															+const upLoading = ref(false)
														
 
															+
														
 
															+function handleRemove(file: UploadFile) {
														
 
															+  fileList.value = []
														
 
															+}
														
 
															+
														
 
															+function handlePictureCardPreview(file: UploadFile) {
														
 
															+  dialogImageUrl.value = file.url!
														
 
															+  dialogVisible.value = true
														
 
															+}
														
 
															+
														
 
															+function changeFile(file: UploadFile) {
														
 
															+  handleUpload(file)
														
 
															+}
														
 
															+let brandLogoCrop = {}
														
 
															+let respAssetId = ''
														
 
															+let brandEntityId = ''
														
 
															+
														
 
															+async function handleUpload(file: UploadFile) {
														
 
															+  const formData = new FormData()
														
 
															+  formData.append('file', file.raw)
														
 
															+  formData.append('profile_id', profile.value.profile_id)
														
 
															+  formData.append('brandEntityId', brandEntityId)
														
 
															+  formData.append('assetType', 'IMAGE')
														
 
															+  formData.append('assetSubTypeList', JSON.stringify(['LOGO']))
														
 
															+  upLoading.value = true
														
 
															+  try {
														
 
															+    const response = await uploadFile(formData)
														
 
															+    const fileName = response.data.file_name
														
 
															+    const obj = {
														
 
															+      profile_id: profile.value.profile_id,
														
 
															+      file_name: fileName,
														
 
															+    }
														
 
															+    const resp = await checkAsset(obj)
														
 
															+    respAssetId = resp.data.assetId
														
 
															+    const { width, height } = resp.data.fileMetadata
														
 
															+    brandLogoCrop = {
														
 
															+      width,
														
 
															+      height,
														
 
															+      top: 0,
														
 
															+      left: 0,
														
 
															+    }
														
 
															+    if (resp.data.checkresult == 'success') {
														
 
															+      ElMessage({ message: '上传成功', type: 'success' })
														
 
															+    } else {
														
 
															+      ElMessage.error('上传失败')
														
 
															+    }
														
 
															+  } catch (error) {
														
 
															+    console.error('上传失败:', error)
														
 
															+  } finally {
														
 
															+    upLoading.value = false
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+const videoLoading = ref(false)
														
 
															+let videoAssetIds = ''
														
 
															+function handleRemoveVideo(file: UploadFile) {
														
 
															+  videoList.value = []
														
 
															+}
														
 
															+
														
 
															+function changeVideo(file: UploadFile) {
														
 
															+  uploadVideo(file)
														
 
															+}
														
 
															+
														
 
															+// 上传视频
														
 
															+async function uploadVideo(file: UploadFile) {
														
 
															+  const formData = new FormData()
														
 
															+  formData.append('file', file.raw)
														
 
															+  formData.append('profile_id', profile.value.profile_id)
														
 
															+  formData.append('brandEntityId', brandEntityId)
														
 
															+  formData.append('assetType', 'VIDEO')
														
 
															+  formData.append('assetSubTypeList', JSON.stringify([]))
														
 
															+  videoLoading.value = true
														
 
															+  try {
														
 
															+    const response = await uploadFile(formData)
														
 
															+    const fileName = response.data.file_name
														
 
															+    const obj = {
														
 
															+      profile_id: profile.value.profile_id,
														
 
															+      file_name: fileName,
														
 
															+    }
														
 
															+    const resp = await checkAsset(obj)
														
 
															+    videoAssetIds = resp.data.assetId
														
 
															+    
														
 
															+
														
 
															+    if (resp.data.checkresult == 'success') {
														
 
															+      ElMessage({ message: '上传成功', type: 'success' })
														
 
															+    } else {
														
 
															+      ElMessage.error('上传失败')
														
 
															+    }
														
 
															+  } catch (error) {
														
 
															+    console.error('上传失败:', error)
														
 
															+  } finally {
														
 
															+    videoLoading.value = false
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+const respAdGroupId = inject<Ref>('respAdGroupId')
														
 
															+let brandName = ''
														
 
															+let selectedPage = ''
														
 
															+const createLoading = ref(false)
														
 
															+async function createBrandVideo() {
														
 
															+  createLoading.value = true
														
 
															+  try {
														
 
															+    const obj = {
														
 
															+      profile_id: profile.value.profile_id,
														
 
															+      casins: asinListFromCommodityCard.value,
														
 
															+      url: selectedPage,
														
 
															+      name: ruleForm.name,
														
 
															+      state: 'PAUSED',
														
 
															+      adGroupId: respAdGroupId.value,
														
 
															+      brandName: brandName,
														
 
															+      brandLogoAssetID: respAssetId,
														
 
															+      brandLogoCrop: brandLogoCrop,
														
 
															+      consentToTranslate: false,
														
 
															+      videoAssetIds: videoAssetIds,
														
 
															+      headline: ruleForm.title,
														
 
															+    }
														
 
															+    const response = await postBrandVideo(obj)
														
 
															+    console.log('response', response)
														
 
															+  } catch (error) {
														
 
															+    console.log('error:', error)
														
 
															+  } finally {
														
 
															+    createLoading.value = false
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+onMounted(() => {
														
 
															+  emitter.on('video-shop', (value: any) => {
														
 
															+    brandName = value.brandRegistryName
														
 
															+    brandEntityId = value.brandEntityId
														
 
															+  })
														
 
															+  emitter.on('page', (newPageValue: any) => {
														
 
															+    selectedPage = newPageValue
														
 
															+  })
														
 
															+})
														
 
															+
														
 
															+// 接收数据端在组件卸载时解绑事件
														
 
															+onUnmounted(() => {
														
 
															+  emitter.off('video-shop')
														
 
															+  emitter.off('page')
														
 
															+})
														
 
															+
														
 
															+function selectCard(item) {
														
 
															+  if (isSelected(item.id)) {
														
 
															+    selectedCards.value = selectedCards.value.filter((card) => card.id !== item.id)
														
 
															+  } else {
														
 
															+    selectedCards.value.push(item)
														
 
															+  }
														
 
															+  selectedId.value = item.id
														
 
															+}
														
 
															+
														
 
															+function handleConfirmSelection() {
														
 
															+  if (selectedCards.value.length > 0) {
														
 
															+    // 清空 fileList
														
 
															+    fileList.value.length = 0
														
 
															+
														
 
															+    // 假设每次只选择一个图片
														
 
															+    selectedImageUrl.value = selectedCards.value[0].imageUrl
														
 
															+
														
 
															+    // 创建一个新的 UploadFile 对象
														
 
															+    const newFile = {
														
 
															+      name: selectedCards.value[0].title, // 或者任何你希望用作文件名的字符串
														
 
															+      url: selectedImageUrl.value,
														
 
															+      // 根据需要添加更多属性
														
 
															+    }
														
 
															+
														
 
															+    // 将新的文件对象添加到 fileList 中
														
 
															+    fileList.value.push(newFile)
														
 
															+  }
														
 
															+
														
 
															+  // 清空选中卡片
														
 
															+  selectedCards.value = []
														
 
															+  // 关闭对话框
														
 
															+  centerDialogVisible.value = false
														
 
															+}
														
 
															+
														
 
															+function isSelected(id) {
														
 
															+  return selectedId.value === id
														
 
															+}
														
 
															+
														
 
															+async function getAssetsData() {
														
 
															+  const query = {
														
 
															+    profile_id: profile.value.profile_id,
														
 
															+    assetType: 'IMAGE',
														
 
															+    assetSubType: 'LOGO',
														
 
															+  }
														
 
															+  const response = await getAssets(query)
														
 
															+  console.log('🚀 ~ getAssetsData ~ response-->>', response)
														
 
															+
														
 
															+  cards.splice(0, cards.length)
														
 
															+
														
 
															+  response.data.forEach((asset) => {
														
 
															+    cards.push({
														
 
															+      id: asset.assetId,
														
 
															+      title: asset.name,
														
 
															+      imageUrl: asset.storageLocationUrls.defaultUrl,
														
 
															+      width: asset.fileMetadata.width,
														
 
															+      height: asset.fileMetadata.height,
														
 
															+      size: bytesToKB(asset.fileMetadata.sizeInBytes),
														
 
															+    })
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+function bytesToKB(bytes) {
														
 
															+  return (bytes / 1024).toFixed(2) // 保留两位小数
														
 
															+}
														
 
															+
														
 
															+function openDialog() {
														
 
															+  centerDialogVisible.value = true
														
 
															+  getAssetsData()
														
 
															+}
														
 
															+
														
 
															+const lifeStyleDialog = ref(false)
														
 
															+const lifeStyleCards = reactive([])
														
 
															+async function getLifeStyleAssetsData() {
														
 
															+  try {
														
 
															+    const query = {
														
 
															+      profile_id: profile.value.profile_id,
														
 
															+      assetType: 'IMAGE',
														
 
															+      assetSubType: 'LIFESTYLE_IMAGE',
														
 
															+    }
														
 
															+    const response = await getLifeStyleAssets(query)
														
 
															+    console.log('🚀 ~ getLifeStyleAssetsData ~ response-->>', response)
														
 
															+
														
 
															+    lifeStyleCards.splice(0, lifeStyleCards.length)
														
 
															+
														
 
															+    response.data.forEach((asset) => {
														
 
															+      lifeStyleCards.push({
														
 
															+        id: asset.assetId,
														
 
															+        title: asset.name,
														
 
															+        imageUrl: asset.storageLocationUrls.defaultUrl,
														
 
															+        width: asset.fileMetadata.width,
														
 
															+        height: asset.fileMetadata.height,
														
 
															+        size: bytesToKB(asset.fileMetadata.sizeInBytes),
														
 
															+      })
														
 
															+    })
														
 
															+  } catch (error) {
														
 
															+    console.log('error:', error)
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+function openLifeStyleDialog() {
														
 
															+  lifeStyleDialog.value = true
														
 
															+  getLifeStyleAssetsData()
														
 
															+}
														
 
															+
														
 
															+const pageOptionsValue = inject<Ref>('pageOptionsValue')
														
 
															+const asinList = ref([])
														
 
															+const commodityLoading = ref(false)
														
 
															+
														
 
															+async function getCommodityCollapseData() {
														
 
															+  commodityLoading.value = true
														
 
															+  try {
														
 
															+    const query = {
														
 
															+      profile_id: profile.value.profile_id,
														
 
															+      pageurl: pageOptionsValue.value,
														
 
															+    }
														
 
															+    const response = await getPageAsins(query)
														
 
															+    asinList.value = response.data.asinList
														
 
															+    console.log('asinList', asinList.value)
														
 
															+  } catch (error) {
														
 
															+    console.log('error:', error)
														
 
															+  } finally {
														
 
															+    commodityLoading.value = false
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+function clickSave() {
														
 
															+  console.log(123, fileList.value)
														
 
															+}
														
 
															+
														
 
															+let lastQueriedAsins = []
														
 
															+const commodityCard = ref([])
														
 
															+async function getCommodityCardData() {
														
 
															+  try {
														
 
															+    commodityLoading.value = true
														
 
															+    const topAsins = asinList.value.slice(0, 3)
														
 
															+
														
 
															+    const newAsins = topAsins.filter((asin) => !lastQueriedAsins.includes(asin))
														
 
															+    if (newAsins.length === 0) {
														
 
															+      commodityLoading.value = false
														
 
															+      return // 如果没有新的 ASIN，直接返回
														
 
															+    }
														
 
															+    lastQueriedAsins = [...topAsins]
														
 
															+    // 清空commodityCard，为新数据做准备
														
 
															+    commodityCard.value = []
														
 
															+    // 对每个新的 ASIN 发送请求
														
 
															+    for (const asin of newAsins) {
														
 
															+      const query = {
														
 
															+        profile_id: profile.value.profile_id,
														
 
															+        asin: asin,
														
 
															+      }
														
 
															+
														
 
															+      try {
														
 
															+        const response = await getCommodityCard(query)
														
 
															+        commodityCard.value.push(response.data)
														
 
															+        // console.log('Response for ASIN', asin, ':', response)
														
 
															+      } catch (error) {
														
 
															+        console.log('Error for ASIN', asin, ':', error)
														
 
															+      }
														
 
															+    }
														
 
															+  } catch (error) {
														
 
															+    console.log('Outer error:', error)
														
 
															+  } finally {
														
 
															+    commodityLoading.value = false
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+// 更改商品功能
														
 
															+const commodityDialog = ref(false)
														
 
															+const selectedCommodity = ref()
														
 
															+const replaceableCommodity = ref([])
														
 
															+const dialogLoading3 = ref(false)
														
 
															+let currentEditingIndex = ref(null)
														
 
															+
														
 
															+function openCommodityDialog(index) {
														
 
															+  currentEditingIndex.value = index
														
 
															+  commodityDialog.value = true
														
 
															+}
														
 
															+
														
 
															+async function getAdditionalCommodityData() {
														
 
															+  try {
														
 
															+    dialogLoading3.value = true
														
 
															+    // 获取除前三个之外的所有 ASIN
														
 
															+    const additionalAsins = asinList.value.slice(3)
														
 
															+    // 清空 replaceableCommodity，为新数据做准备
														
 
															+    replaceableCommodity.value = []
														
 
															+    // 对每个额外的 ASIN 发送请求
														
 
															+    for (const asin of additionalAsins) {
														
 
															+      const query = {
														
 
															+        profile_id: profile.value.profile_id,
														
 
															+        asin: asin,
														
 
															+      }
														
 
															+      try {
														
 
															+        const response = await getCommodityCard(query)
														
 
															+        replaceableCommodity.value.push(response.data)
														
 
															+      } catch (error) {
														
 
															+        console.log('Error for additional ASIN', asin, ':', error)
														
 
															+      }
														
 
															+    }
														
 
															+  } catch (error) {
														
 
															+    console.log('Outer error:', error)
														
 
															+  } finally {
														
 
															+    dialogLoading3.value = false
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+function handleSelectedCommodity() {
														
 
															+  if (currentEditingIndex.value !== null && selectedCommodity.value) {
														
 
															+    const selectedCommodityData = flattenedReplaceableCommodity.value.find((item) => item.asin === selectedCommodity.value)
														
 
															+    if (selectedCommodityData) {
														
 
															+      commodityCard.value[currentEditingIndex.value] = selectedCommodityData
														
 
															+    }
														
 
															+    commodityDialog.value = false
														
 
															+    currentEditingIndex.value = null
														
 
															+    selectedCommodity.value = null
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+watch(
														
 
															+  () => pageOptionsValue.value,
														
 
															+  async () => {
														
 
															+    await getCommodityCollapseData()
														
 
															+    getCommodityCardData()
														
 
															+    getAdditionalCommodityData()
														
 
															+  }
														
 
															+)
														
 
															+
														
 
															+const flattenedCommodityCard = computed(() => {
														
 
															+  return commodityCard.value.flat()
														
 
															+})
														
 
															+
														
 
															+const asinListFromCommodityCard = computed(() => {
														
 
															+  return flattenedCommodityCard.value.map((item) => item.asin)
														
 
															+})
														
 
															+
														
 
															+// watch(asinListFromCommodityCard, (newAsinList) => {
														
 
															+//   console.log('New ASIN list:', newAsinList);
														
 
															+// });
														
 
															+
														
 
															+const flattenedReplaceableCommodity = computed(() => {
														
 
															+  return replaceableCommodity.value.flat()
														
 
															+})
														
 
															+</script>
														
 
															+
														
 
															+<style scoped>
														
 
															+.customize-container {
														
 
															+  margin-top: 10px;
														
 
															+}
														
 
															+.upload-button-group {
														
 
															+  display: flex;
														
 
															+}
														
 
															+.introduce-item {
														
 
															+  line-height: 17px;
														
 
															+  font-size: 12px;
														
 
															+  color: #88909b;
														
 
															+}
														
 
															+.tip-list-title {
														
 
															+  line-height: 17px;
														
 
															+  font-size: 12px;
														
 
															+  font-weight: 600;
														
 
															+  color: #1d2129;
														
 
															+  padding-top: 8px;
														
 
															+  padding-bottom: 4px;
														
 
															+}
														
 
															+.tip-item {
														
 
															+  line-height: 17px;
														
 
															+  font-size: 12px;
														
 
															+  color: #86909c;
														
 
															+}
														
 
															+.avatar-uploader .avatar {
														
 
															+  width: 178px;
														
 
															+  height: 178px;
														
 
															+  display: block;
														
 
															+}
														
 
															+::v-deep(.avatar-uploader .el-upload) {
														
 
															+  border: 1px dashed var(--el-border-color);
														
 
															+  border-radius: 6px;
														
 
															+  cursor: pointer;
														
 
															+  position: relative;
														
 
															+  overflow: hidden;
														
 
															+  transition: var(--el-transition-duration-fast);
														
 
															+}
														
 
															+
														
 
															+::v-deep(.avatar-uploader .el-upload:hover) {
														
 
															+  border-color: var(--el-color-primary);
														
 
															+}
														
 
															+::v-deep(.el-icon.avatar-uploader-icon) {
														
 
															+  font-size: 28px;
														
 
															+  color: #8c939d;
														
 
															+  width: 178px;
														
 
															+  height: 178px;
														
 
															+  text-align: center;
														
 
															+}
														
 
															+::v-deep(.avatar-uploader .el-upload.el-upload--text) {
														
 
															+  width: 100%;
														
 
															+}
														
 
															+.grid-container {
														
 
															+  flex-wrap: wrap;
														
 
															+  display: flex;
														
 
															+  width: 100%;
														
 
															+  justify-content: left;
														
 
															+}
														
 
															+.grid-item {
														
 
															+  transition: outline, background-color 0.3s;
														
 
															+  box-sizing: border-box;
														
 
															+  border: 1px solid #ffffff00;
														
 
															+  cursor: pointer;
														
 
															+  width: calc(25% - 10px);
														
 
															+  margin: 10px 5px;
														
 
															+}
														
 
															+.grid-item span {
														
 
															+  display: block; /* 或者 inline-block */
														
 
															+  white-space: nowrap; /* 保持文本在一行 */
														
 
															+  overflow: hidden; /* 隐藏超出部分 */
														
 
															+  text-overflow: ellipsis; /* 超出部分显示省略号 */
														
 
															+  max-width: 100%; /* 限制最大宽度 */
														
 
															+  font-weight: 600;
														
 
															+  line-height: 22px;
														
 
															+}
														
 
															+.grid-item.hover,
														
 
															+.grid-item.selected {
														
 
															+  border: 1px solid #306cd8;
														
 
															+  border-radius: 4px;
														
 
															+}
														
 
															+.grid-item.selected > :first-child {
														
 
															+  background-color: #f5f7fe;
														
 
															+}
														
 
															+.image {
														
 
															+  width: 100%;
														
 
															+  height: 146.49px;
														
 
															+  padding: 10px;
														
 
															+}
														
 
															+.image > :first-child {
														
 
															+  border-radius: 10px;
														
 
															+}
														
 
															+.bottom {
														
 
															+  display: flex;
														
 
															+  justify-content: space-between;
														
 
															+  align-items: center;
														
 
															+  margin-top: 5px;
														
 
															+}
														
 
															+.bottom-item {
														
 
															+  background-color: #f5f7fe;
														
 
															+  border-radius: 4px;
														
 
															+  padding: 0 3px;
														
 
															+}
														
 
															+.uploaded-image {
														
 
															+  width: 100%; /* 或根据需要调整 */
														
 
															+  height: auto; /* 保持图片的原始宽高比 */
														
 
															+  display: block;
														
 
															+  margin-bottom: 10px; /* 或根据需要调整 */
														
 
															+}
														
 
															+
														
 
															+.upload-content {
														
 
															+  text-align: center;
														
 
															+  padding: 20px;
														
 
															+}
														
 
															+.el-carousel__item h3 {
														
 
															+  color: #edf5fe;
														
 
															+  opacity: 0.75;
														
 
															+  line-height: 200px;
														
 
															+  margin: 0;
														
 
															+  text-align: center;
														
 
															+}
														
 
															+::v-deep(button.el-carousel__button) {
														
 
															+  background-color: #3569d6;
														
 
															+}
														
 
															+.img-box {
														
 
															+  width: 60px;
														
 
															+  height: 60px;
														
 
															+  border: 1px solid rgb(194, 199, 207);
														
 
															+  border-radius: 4px;
														
 
															+}
														
 
															+.double-line {
														
 
															+  color: #1e2128;
														
 
															+  font-weight: 500;
														
 
															+  overflow: hidden;
														
 
															+  display: -webkit-box;
														
 
															+  -webkit-box-orient: vertical;
														
 
															+  -webkit-line-clamp: 2;
														
 
															+  white-space: pre-wrap;
														
 
															+  word-break: break-word;
														
 
															+}
														
 
															+</style>
														
--- a/src/views/adManage/sb/campaigns/CreateCampaigns/component/VideoCreativity2.vue
+++ b/src/views/adManage/sb/campaigns/CreateCampaigns/component/VideoCreativity2.vue
@@ -0,0 +1,511 @@
 
															+<template>
														
 
															+  <div class="customize-container">
														
 
															+    <el-card body-style="padding: 20px 80px 0 80px;" v-loading="loading">
														
 
															+      <div style="font-weight: 700; padding-bottom: 18px">
														
 
															+        <span style="color: #306cd7; font-size: 26px">|</span>
														
 
															+        <span style="font-size: 18px; padding-left: 5px">创意</span>
														
 
															+      </div>
														
 
															+      <el-form
														
 
															+        ref="ruleFormRef"
														
 
															+        :model="ruleForm"
														
 
															+        :rules="rules"
														
 
															+        label-width="120px"
														
 
															+        class="demo-ruleForm"
														
 
															+        size="default"
														
 
															+        label-position="top"
														
 
															+        status-icon>
														
 
															+        <el-form-item label="广告名称" prop="name">
														
 
															+          <el-input v-model="ruleForm.name" style="width: 50%" />
														
 
															+        </el-form-item>
														
 
															+        <div style="display: flex; border: 1px solid #dddfe6; padding: 0 0 0 5px; margin-bottom: 20px" v-loading="createLoading">
														
 
															+          <div style="width: 50%; padding-left: 5px; border-right: 1px solid #dddfe6">
														
 
															+            <el-scrollbar height="700px">
														
 
															+              <el-collapse v-model="activeNames" @change="handleChange" style="border-top: none; border-bottom: none">
														
 
															+                <el-collapse-item name="video" style="padding: 0 10px 0 5px">
														
 
															+                  <template #title> <span style="color: #e47470; margin-right: 4px">*</span>视频 </template>
														
 
															+                  <div>
														
 
															+                    <div style="display: flex; align-items: center; justify-content: space-between">
														
 
															+                      <span style="color: #1e2128; font-size: 15px; font-weight: 450">选择视频</span>
														
 
															+                      <el-button type="primary" link>查看视频批准提示</el-button>
														
 
															+                    </div>
														
 
															+                    <div style="color: #666666; margin-bottom: 10px">
														
 
															+                      保持视频简短并紧扣主题。视频会自动播放，因此请确保前 2
														
 
															+                      秒极具吸引力，并且不依靠声音来传递信息。如果您在视频中使用了文字，请确保文字清晰易辨。字幕或音频必须与将展示您广告的区域相匹配。
														
 
															+                    </div>
														
 
															+                    <div class="upload-button-group">
														
 
															+                      <el-upload
														
 
															+                        v-model:file-list="fileList"
														
 
															+                        :on-change="changeFile"
														
 
															+                        v-loading="upLoading"
														
 
															+                        accept=".mp4, .mov"
														
 
															+                        action="#"
														
 
															+                        :limit="1"
														
 
															+                        :auto-upload="false"
														
 
															+                        :on-remove="handleRemove"
														
 
															+                        class="upload-demo">
														
 
															+                        <el-button type="primary">上传文件</el-button>
														
 
															+
														
 
															+                        <!-- <template #tip>
														
 
															+                          <div class="el-upload__tip"><el-button type="primary" :icon="Picture"  :disabled="true" @click="handleSelect">从素材库中选择</el-button></div>
														
 
															+                        </template> -->
														
 
															+                      </el-upload>
														
 
															+                      <!-- <el-button type="primary" :icon="Picture" style="margin-left: -120px" :disabled="true" @click="handleSelect">从素材库中选择</el-button> -->
														
 
															+                    </div>
														
 
															+                  </div>
														
 
															+                </el-collapse-item>
														
 
															+                <div style="display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 5px">
														
 
															+                  <span style="color: #1e2128; font-size: 15px; font-weight: 450">视频文件要求:</span>
														
 
															+                  <el-button type="primary" link>了解更多</el-button>
														
 
															+                </div>
														
 
															+                <div style="padding: 0 10px 0 5px">
														
 
															+                  <span style="color: #1e2128; font-size: 13px; font-weight: 450">视频规格</span>
														
 
															+                  <div class="introduce-item">1.纵横比：16：9</div>
														
 
															+                  <div class="introduce-item">2.尺寸：1280 x 720 像素、1920 x 1080 像素或 3840 x 2160 像素</div>
														
 
															+                  <div class="introduce-item">3.文件大小：500MB 或更小</div>
														
 
															+                  <div class="introduce-item">4.文件格式：MP4 或 MOV</div>
														
 
															+                  <div class="introduce-item">5.长度：6-45 秒</div>
														
 
															+                  <div class="introduce-item">6.帧率：23.976、23.98、24、25、29.97 或 29.98 fps</div>
														
 
															+                  <div class="introduce-item">7.比特率：1 Mbps 或更高</div>
														
 
															+                  <div class="introduce-item">8.编解码器：H.264 或 H.265</div>
														
 
															+                  <div class="introduce-item">9.配置文件：主配置文件或基线配置文件</div>
														
 
															+                  <div class="introduce-item">10.视频流：仅为 1</div>
														
 
															+                </div>
														
 
															+                <div style="padding: 0 10px 0 5px">
														
 
															+                  <span style="color: #1e2128; font-size: 13px; font-weight: 450">音频规格</span>
														
 
															+                  <div class="introduce-item">1.语言：必须与广告投放区域匹配</div>
														
 
															+                  <div class="introduce-item">2.采样率：44.1 kHz 或更高</div>
														
 
															+                  <div class="introduce-item">3.编解码器：PCM、AAC 或 MP3</div>
														
 
															+                  <div class="introduce-item">4.比特率：96 kbps 或更高</div>
														
 
															+                  <div class="introduce-item">5.格式：立体声或单声道</div>
														
 
															+                  <div class="introduce-item">6.音频流：仅为 1</div>
														
 
															+                </div>
														
 
															+                <hr style="color: #eceef4; margin: 8px 10px 0 5px" />
														
 
															+                <el-collapse-item name="commodity" style="padding: 0 10px 0 5px">
														
 
															+                  <template #title> <span style="color: #e47470; margin-right: 4px">*</span>商品 </template>
														
 
															+                  <div v-for="item in addedTableDataForVc2" :key="item.asin">
														
 
															+                    <el-card shadow="hover" body-style="padding: 10px">
														
 
															+                      <div style="padding: 10px; display: flex; align-items: center">
														
 
															+                        <div style="margin-right: 8px; line-height: normal">
														
 
															+                          <el-image class="img-box" :src="item.image_link" />
														
 
															+                        </div>
														
 
															+                        <div style="position: relative">
														
 
															+                          <el-tooltip class="box-item" effect="dark" :content="item.title" placement="top">
														
 
															+                            <div class="double-line">{{ item.title }}</div>
														
 
															+                          </el-tooltip>
														
 
															+                          <span>
														
 
															+                            <span style="color: #6d7784">ASIN: </span>
														
 
															+                            <span class="data-color" style="margin-right: 8px">{{ item.asin }}</span>
														
 
															+                          </span>
														
 
															+                        </div>
														
 
															+                      </div>
														
 
															+                    </el-card>
														
 
															+                  </div>
														
 
															+                </el-collapse-item>
														
 
															+              </el-collapse>
														
 
															+            </el-scrollbar>
														
 
															+          </div>
														
 
															+          <div style="width: 50%; padding: 0 10px; position: relative">
														
 
															+            <el-button
														
 
															+              type="primary"
														
 
															+              plain
														
 
															+              @click="submitForm(ruleFormRef)"
														
 
															+              :disabled="!commodityCard.length && addedTableDataForVc2"
														
 
															+              style="position: absolute; top: 92%; left: 46%"
														
 
															+              >保存</el-button
														
 
															+            >
														
 
															+          </div>
														
 
															+        </div>
														
 
															+      </el-form>
														
 
															+    </el-card>
														
 
															+    <el-dialog v-model="centerDialogVisible" title="从素材库中选择" width="65%">
														
 
															+      <el-input :prefix-icon="Search"></el-input>
														
 
															+      <div class="grid-container">
														
 
															+        <div
														
 
															+          class="grid-item"
														
 
															+          v-for="item in cards"
														
 
															+          :key="item.id"
														
 
															+          @click="selectCard(item)"
														
 
															+          :class="{ selected: isSelected(item.id), hover: hoverId === item.id }"
														
 
															+          @mouseover="hoverId = item.id"
														
 
															+          @mouseleave="hoverId = null">
														
 
															+          <el-card :body-style="{ padding: '0px' }">
														
 
															+            <video class="image" :src="item.imageUrl" controls preload="none" @click.stop></video>
														
 
															+            <div style="padding: 10px">
														
 
															+              <span>
														
 
															+                <el-tooltip placement="top" :content="item.title">
														
 
															+                  {{ item.title }}
														
 
															+                </el-tooltip>
														
 
															+              </span>
														
 
															+              <div class="bottom">
														
 
															+                <div class="bottom-item">{{ item.size }}KB</div>
														
 
															+                <div class="bottom-item">{{ item.width }} * {{ item.height }}</div>
														
 
															+                <div class="bottom-item">背景视频</div>
														
 
															+              </div>
														
 
															+            </div>
														
 
															+          </el-card>
														
 
															+        </div>
														
 
															+      </div>
														
 
															+      <template #footer>
														
 
															+        <span class="dialog-footer">
														
 
															+          <el-button @click="centerDialogVisible = false">取消</el-button>
														
 
															+          <el-button type="primary" @click="handleConfirmSelection">确定</el-button>
														
 
															+        </span>
														
 
															+      </template>
														
 
															+    </el-dialog>
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<script setup lang="ts">
														
 
															+import { reactive, ref, watch, inject, Ref, onMounted } from 'vue'
														
 
															+import type { FormInstance, FormRules, UploadProps, UploadUserFile } from 'element-plus'
														
 
															+import { ElMessage, ElMessageBox } from 'element-plus'
														
 
															+import { Plus, Picture, Search } from '@element-plus/icons-vue'
														
 
															+import { getVideoAssets, videoDetailCreate, uploadFile, checkAsset, postVideo } from '../api/index'
														
 
															+import emitter from '/@/utils/emitter'
														
 
															+import { storeToRefs } from 'pinia'
														
 
															+import { useShopInfo } from '/@/stores/shopInfo'
														
 
															+
														
 
															+const shopInfo = useShopInfo()
														
 
															+const { profile } = storeToRefs(shopInfo)
														
 
															+
														
 
															+const respAdGroupId = inject<Ref>('respAdGroupId')
														
 
															+const addedTableDataForVc2 = inject<Ref>('addedTableDataForVc2')
														
 
															+
														
 
															+interface RuleForm {
														
 
															+  name: string
														
 
															+}
														
 
															+const ruleFormRef = ref<FormInstance>()
														
 
															+const ruleForm = reactive<RuleForm>({
														
 
															+  name: '视频 广告 - 1/15/2024 17:51:10.236',
														
 
															+})
														
 
															+const rules = reactive<FormRules<RuleForm>>({
														
 
															+  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
														
 
															+})
														
 
															+const submitForm = async (formEl: FormInstance | undefined) => {
														
 
															+  if (!formEl) return
														
 
															+  await formEl.validate((valid, fields) => {
														
 
															+    if (valid) {
														
 
															+      console.log('submit!')
														
 
															+      createVideo()
														
 
															+    } else {
														
 
															+      console.log('error submit!', fields)
														
 
															+    }
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+const activeNames = ref(['video'])
														
 
															+const handleChange = (val: string[]) => {
														
 
															+  // console.log(val)
														
 
															+}
														
 
															+
														
 
															+const fileList = ref<UploadUserFile[]>([]) // 上传的文件列表
														
 
															+
														
 
															+const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
														
 
															+  fileList.value.length = 0
														
 
															+  // console.log(file, uploadFiles)
														
 
															+}
														
 
															+
														
 
															+const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
														
 
															+  console.log(uploadFile)
														
 
															+}
														
 
															+
														
 
															+const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
														
 
															+  ElMessage.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + uploadFiles.length} totally`)
														
 
															+}
														
 
															+
														
 
															+const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
														
 
															+  return ElMessageBox.confirm(`Cancel the transfer of ${uploadFile.name} ?`).then(
														
 
															+    () => true,
														
 
															+    () => false
														
 
															+  )
														
 
															+}
														
 
															+
														
 
															+function changeFile(file) {
														
 
															+  // console.log('file', file)
														
 
															+  handleUpload(file)
														
 
															+}
														
 
															+
														
 
															+const upLoading = ref(false)
														
 
															+let brandLogoCrop = {}
														
 
															+let respAssetId = ''
														
 
															+let brandEntityId = ''
														
 
															+
														
 
															+async function handleUpload(file) {
														
 
															+  const formData = new FormData()
														
 
															+  formData.append('file', file.raw)
														
 
															+  formData.append('profile_id', profile.value.profile_id)
														
 
															+  formData.append('brandEntityId', brandEntityId)
														
 
															+  formData.append('assetType', 'VIDEO')
														
 
															+  formData.append('assetSubTypeList', JSON.stringify([]))
														
 
															+  upLoading.value = true
														
 
															+  try {
														
 
															+    const response = await uploadFile(formData)
														
 
															+    const fileName = response.data.file_name
														
 
															+    const obj = {
														
 
															+      profile_id: profile.value.profile_id,
														
 
															+      file_name: fileName,
														
 
															+    }
														
 
															+    const resp = await checkAsset(obj)
														
 
															+    respAssetId = resp.data.assetId
														
 
															+    if (resp.data.checkresult == 'success') {
														
 
															+      ElMessage({ message: '上传成功', type: 'success' })
														
 
															+    } else {
														
 
															+      ElMessage.error('上传失败')
														
 
															+    }
														
 
															+  } catch (error) {
														
 
															+    console.error('上传失败:', error)
														
 
															+  } finally {
														
 
															+    upLoading.value = false
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+const createLoading = ref(false)
														
 
															+async function createVideo() {
														
 
															+  createLoading.value = true
														
 
															+  try {
														
 
															+    const obj = {
														
 
															+      profile_id: profile.value.profile_id,
														
 
															+      casins: asins.value,
														
 
															+      name: ruleForm.name,
														
 
															+      state: 'PAUSED',
														
 
															+      adGroupId: respAdGroupId.value,
														
 
															+      videoAssetIds: respAssetId,
														
 
															+      consentToTranslate: false,
														
 
															+    }
														
 
															+    const response = await postVideo(obj)
														
 
															+    if (response.data.creative_state == 'success') {
														
 
															+      ElMessage({ message: '创建成功', type: 'success' })
														
 
															+    } else {
														
 
															+      ElMessage.error('上传失败')
														
 
															+    }
														
 
															+  } catch (error) {
														
 
															+    console.error('error:', error)
														
 
															+  } finally {
														
 
															+    createLoading.value = false
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+let asins = ref([])
														
 
															+watch(
														
 
															+  addedTableDataForVc2,
														
 
															+  (newValue) => {
														
 
															+    asins.value = []
														
 
															+    if (Array.isArray(newValue) && newValue.length > 0) {
														
 
															+      newValue.forEach((item) => {
														
 
															+        if (item.asin && !asins.value.includes(item.asin)) {
														
 
															+          asins.value.push(item.asin)
														
 
															+        }
														
 
															+      })
														
 
															+    }
														
 
															+    console.log('Updated ASINs:', asins.value)
														
 
															+  },
														
 
															+  { deep: true }
														
 
															+)
														
 
															+
														
 
															+// dialog以及选择card相关功能
														
 
															+const selectedId = ref(null)
														
 
															+const hoverId = ref(null)
														
 
															+const selectedCards = ref([])
														
 
															+const selectedImageUrl = ref('')
														
 
															+const centerDialogVisible = ref(false)
														
 
															+const cards = reactive([])
														
 
															+let selectedAssetId = ''
														
 
															+
														
 
															+function resetSelection() {
														
 
															+  selectedCards.value = []
														
 
															+  selectedId.value = null
														
 
															+}
														
 
															+
														
 
															+function bytesToKB(bytes) {
														
 
															+  return (bytes / 1024).toFixed(2) // 保留两位小数
														
 
															+}
														
 
															+
														
 
															+async function getAssetsData() {
														
 
															+  const query = {
														
 
															+    profile_id: profile.value.profile_id,
														
 
															+    assetType: 'VIDEO',
														
 
															+    specCheckApprovedPrograms: 'SPONSORED_BRANDS_VIDEO',
														
 
															+  }
														
 
															+  const response = await getVideoAssets(query)
														
 
															+
														
 
															+  cards.splice(0, cards.length)
														
 
															+
														
 
															+  response.data.forEach((asset) => {
														
 
															+    cards.push({
														
 
															+      id: asset.assetId,
														
 
															+      title: asset.name,
														
 
															+      imageUrl: asset.storageLocationUrls.defaultUrl,
														
 
															+      width: asset.fileMetadata.resolutionWidth,
														
 
															+      height: asset.fileMetadata.resolutionHeight,
														
 
															+      size: bytesToKB(asset.fileMetadata.sizeInBytes),
														
 
															+    })
														
 
															+  })
														
 
															+}
														
 
															+
														
 
															+function isSelected(id) {
														
 
															+  return selectedCards.value.some((card) => card.id === id)
														
 
															+}
														
 
															+
														
 
															+function selectCard(item) {
														
 
															+  if (isSelected(item.id)) {
														
 
															+    selectedCards.value = selectedCards.value.filter((card) => card.id !== item.id)
														
 
															+  } else {
														
 
															+    selectedCards.value.push({
														
 
															+      id: item.id,
														
 
															+      assetId: item.id,
														
 
															+      title: item.title,
														
 
															+      imageUrl: item.imageUrl,
														
 
															+    })
														
 
															+  }
														
 
															+  selectedId.value = item.id
														
 
															+}
														
 
															+
														
 
															+function handleConfirmSelection() {
														
 
															+  if (selectedCards.value.length > 0) {
														
 
															+    // 获取选中卡片的 assetId
														
 
															+    selectedAssetId = selectedCards.value[0].assetId
														
 
															+    const newFile = {
														
 
															+      name: selectedCards.value[0].title, // 任何可以用作文件名的字符串
														
 
															+      url: selectedImageUrl.value,
														
 
															+      // 根据需要添加更多属性
														
 
															+    }
														
 
															+    fileList.value.push(newFile)
														
 
															+
														
 
															+    // 清空选中卡片
														
 
															+    resetSelection()
														
 
															+    centerDialogVisible.value = false
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+function handleSelect() {
														
 
															+  centerDialogVisible.value = true
														
 
															+  getAssetsData()
														
 
															+}
														
 
															+
														
 
															+// 创建商品创意相关
														
 
															+const loading = ref(false)
														
 
															+async function createCommodity() {
														
 
															+  try {
														
 
															+    loading.value = true
														
 
															+    const obj = {
														
 
															+      profile_id: profile.value.profile_id,
														
 
															+      casins: commodityCard.value[0].asin,
														
 
															+      name: ruleForm.name,
														
 
															+      state: 'ENABLED',
														
 
															+      adGroupId: respAdGroupId.value,
														
 
															+      consentToTranslate: false,
														
 
															+      videoAssetIds: selectedAssetId,
														
 
															+    }
														
 
															+    const response = await videoDetailCreate(obj)
														
 
															+    if (response.data.creative_state == 'success') {
														
 
															+      ElMessage({
														
 
															+        message: '商品创意创建成功',
														
 
															+        type: 'success',
														
 
															+      })
														
 
															+    } else {
														
 
															+      ElMessage.error('商品创意创建失败!')
														
 
															+    }
														
 
															+  } catch (error) {
														
 
															+    console.log('error:', error)
														
 
															+  } finally {
														
 
															+    loading.value = false
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+function clickSave() {
														
 
															+  console.log(123, fileList.value)
														
 
															+  createCommodity()
														
 
															+  commodityCard.value.length = 0
														
 
															+}
														
 
															+
														
 
															+// 已选择的商品
														
 
															+const commodityCard = ref([])
														
 
															+
														
 
															+watch(
														
 
															+  addedTableDataForVc2,
														
 
															+  (newValue) => {
														
 
															+    commodityCard.value = newValue
														
 
															+  },
														
 
															+  { deep: true }
														
 
															+)
														
 
															+</script>
														
 
															+
														
 
															+<style scoped>
														
 
															+.customize-container {
														
 
															+  margin-top: 10px;
														
 
															+}
														
 
															+.upload-button-group {
														
 
															+  display: flex;
														
 
															+}
														
 
															+.introduce-item {
														
 
															+  line-height: 17px;
														
 
															+  font-size: 12px;
														
 
															+  color: #88909b;
														
 
															+}
														
 
															+.grid-container {
														
 
															+  flex-wrap: wrap;
														
 
															+  display: flex;
														
 
															+  width: 100%;
														
 
															+  justify-content: left;
														
 
															+}
														
 
															+.grid-item {
														
 
															+  transition: outline, background-color 0.3s;
														
 
															+  box-sizing: border-box;
														
 
															+  border: 1px solid #ffffff00;
														
 
															+  cursor: pointer;
														
 
															+  width: calc(25% - 10px);
														
 
															+  margin: 10px 5px;
														
 
															+}
														
 
															+.grid-item span {
														
 
															+  display: block; /* 或者 inline-block */
														
 
															+  white-space: nowrap; /* 保持文本在一行 */
														
 
															+  overflow: hidden; /* 隐藏超出部分 */
														
 
															+  text-overflow: ellipsis; /* 超出部分显示省略号 */
														
 
															+  max-width: 100%; /* 限制最大宽度 */
														
 
															+  font-weight: 600;
														
 
															+  line-height: 22px;
														
 
															+}
														
 
															+.grid-item.hover,
														
 
															+.grid-item.selected {
														
 
															+  border: 1px solid #306cd8;
														
 
															+  border-radius: 4px;
														
 
															+}
														
 
															+.grid-item.selected > :first-child {
														
 
															+  background-color: #f5f7fe;
														
 
															+}
														
 
															+.image {
														
 
															+  width: 100%;
														
 
															+  height: 146.49px;
														
 
															+  padding: 10px;
														
 
															+}
														
 
															+.image > :first-child {
														
 
															+  border-radius: 10px;
														
 
															+}
														
 
															+.bottom {
														
 
															+  display: flex;
														
 
															+  justify-content: space-between;
														
 
															+  align-items: center;
														
 
															+  margin-top: 5px;
														
 
															+}
														
 
															+.bottom-item {
														
 
															+  background-color: #f5f7fe;
														
 
															+  border-radius: 4px;
														
 
															+  padding: 0 3px;
														
 
															+}
														
 
															+.img-box {
														
 
															+  width: 60px;
														
 
															+  height: 60px;
														
 
															+  border: 1px solid rgb(194, 199, 207);
														
 
															+  border-radius: 4px;
														
 
															+}
														
 
															+.double-line {
														
 
															+  color: #1e2128;
														
 
															+  font-weight: 500;
														
 
															+  overflow: hidden;
														
 
															+  display: -webkit-box;
														
 
															+  -webkit-box-orient: vertical;
														
 
															+  -webkit-line-clamp: 2;
														
 
															+  white-space: pre-wrap;
														
 
															+  word-break: break-word;
														
 
															+}
														
 
															+</style>
														
--- a/src/views/adManage/sb/campaigns/CreateCampaigns/img/img_1.jpg
+++ b/src/views/adManage/sb/campaigns/CreateCampaigns/img/img_1.jpg
--- a/src/views/adManage/sb/campaigns/CreateCampaigns/index.vue
+++ b/src/views/adManage/sb/campaigns/CreateCampaigns/index.vue
@@ -1,264 +1,106 @@
 
															 <template>
														
 
															-    <!--<p>新建广告页面</p>-->
														
 
															-    <div>
														
 
															-        <!-- 设置 -->
														
 
															-        <el-card style="margin: 5px">
														
 
															-            <div style="font-size: 19px; font-weight: bold"><span style="background-color: rgb(53, 105, 214); margin-right: 5px">|</span>设置</div>
														
 
															-            <div class="container">
														
 
															-                <el-form
														
 
															-                        ref="ruleFormRef"
														
 
															-                        :model="ruleForm"
														
 
															-                        :rules="rules"
														
 
															-                        label-width="120px"
														
 
															-                        class="demo-ruleForm"
														
 
															-                        :size="formSize"
														
 
															-                        status-icon
														
 
															-                        :label-position="labelPosition"
														
 
															-                >
														
 
															-                    <el-form-item class="form-item" label="广告活动名称" prop="name" style="width: 50%;">
														
 
															-                        <el-input v-model="ruleForm.name"/>
														
 
															-                    </el-form-item>
														
 
															-                    <el-form-item class="form-item" label="广告组合" prop="portfolios" style="margin-left: 9px">
														
 
															-                        <el-select v-model="ruleForm.portfolios" placeholder="请选择" style="margin-left: -9px">
														
 
															-                            <el-option label="Zone one" value="shanghai"/>
														
 
															-                            <el-option label="Zone two" value="beijing"/>
														
 
															-                        </el-select>
														
 
															-                    </el-form-item>
														
 
															-                    <el-form-item class="form-item" label="预算" prop="budget">
														
 
															-                        <el-select-v2
														
 
															-                                v-model="ruleForm.budget"
														
 
															-                                placeholder="Activity budget"
														
 
															-                                :options="options"
														
 
															-                        />
														
 
															-                    </el-form-item>
														
 
															-                    <el-form-item class="form-item" label="活动时间" required>
														
 
															-                        <el-col :span="11">
														
 
															-                            <el-form-item prop="date1">
														
 
															-                                <el-date-picker
														
 
															-                                        v-model="ruleForm.date1"
														
 
															-                                        type="date"
														
 
															-                                        label="Pick a date"
														
 
															-                                        placeholder="开始时间"
														
 
															-                                        style="width: 100%"
														
 
															-                                />
														
 
															-                            </el-form-item>
														
 
															-                        </el-col>
														
 
															-                        <el-col class="text-center" style="margin-bottom: 22px !important;" :span="1">
														
 
															-                            <span class="text-center">—</span>
														
 
															-                        </el-col>
														
 
															-                        <el-col :span="11">
														
 
															-                            <el-form-item prop="date2">
														
 
															-                                <el-date-picker
														
 
															-                                        v-model="ruleForm.date2"
														
 
															-                                        type="date"
														
 
															-                                        label="Pick a date"
														
 
															-                                        placeholder="结束时间"
														
 
															-                                        style="width: 100%"
														
 
															-                                />
														
 
															-                            </el-form-item>
														
 
															-                        </el-col>
														
 
															-                    </el-form-item>
														
 
															-                    <el-form-item class="form-item" label="自动竞价" prop="delivery" @click.prevent style="margin-left: 9px">
														
 
															-                        <el-switch v-model="ruleForm.delivery" style="margin-left: -9px"/>
														
 
															-                        <span style="margin-left: 15px; color: #7a7a7a">允许亚马逊自动优化搜索结果首页以外的广告位竞价</span>
														
 
															-                    </el-form-item>
														
 
															-                    <el-form-item>
														
 
															-                        <el-button type="primary" @click="submitForm(ruleFormRef)">
														
 
															-                            Create
														
 
															-                        </el-button>
														
 
															-                        <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
														
 
															-                    </el-form-item>
														
 
															-                </el-form>
														
 
															-            </div>
														
 
															-        </el-card>
														
 
															-        <!-- 广告组 -->
														
 
															-        <el-card style="margin: 5px">
														
 
															-            <div style="font-size: 19px; font-weight: bold">
														
 
															-                <span style="background-color: rgb(53, 105, 214); margin-right: 5px">|</span>
														
 
															-                广告组
														
 
															-            </div>
														
 
															-            <div>
														
 
															-                <el-form ref="ruleFormRef"
														
 
															-                           :model="ruleForm"
														
 
															-                           :rules="rules"
														
 
															-                           label-width="120px"
														
 
															-                           class="demo-ruleForm"
														
 
															-                           :size="formSize"
														
 
															-                           status-icon
														
 
															-                           :label-position="labelPosition">
														
 
															-                    <el-form-item class="form-item" label="广告组名称" prop="groupName" style="width: 50%;">
														
 
															-                        <el-input v-model="ruleForm.groupName"/>
														
 
															-                    </el-form-item>
														
 
															-                </el-form>
														
 
															-            </div>
														
 
															-        </el-card>
														
 
															-        <!-- 广告格式 -->
														
 
															-        <el-card style="margin: 5px">
														
 
															-            <div style="font-size: 19px; font-weight: bold">
														
 
															-                <span style="background-color: rgb(53, 105, 214); margin-right: 5px">|</span>
														
 
															-                广告格式
														
 
															-            </div>
														
 
															-            <div>
														
 
															-                <el-form ref="ruleFormRef"
														
 
															-                         :model="ruleForm"
														
 
															-                         :rules="rules"
														
 
															-                         label-width="120px"
														
 
															-                         class="demo-ruleForm"
														
 
															-                         :size="formSize"
														
 
															-                         status-icon
														
 
															-                         :label-position="labelPosition">
														
 
															-                </el-form>
														
 
															-            </div>
														
 
															-            <el-tabs>
														
 
															-                <el-tab-pane label="商品集"><CommoditySet/></el-tab-pane>
														
 
															-                <el-tab-pane label="品牌旗舰店焦点">品牌旗舰店焦点</el-tab-pane>
														
 
															-                <el-tab-pane label="视频">视频</el-tab-pane>
														
 
															-            </el-tabs>
														
 
															-        </el-card>
														
 
															-    </div>
														
 
															+  <div class="page-container">
														
 
															+    <AdCampaign @update-campaign="handleCampaignUpdate"></AdCampaign>
														
 
															+    <AdGroup @update-group-id="handleGroupIdUpdate"></AdGroup>
														
 
															+    <AdFormat
														
 
															+      @update:adFormatRadio="handleAdFormatRadioChange"
														
 
															+      @update:arrivalsRadio="handleArrivalsRadioChange"
														
 
															+      @update:flagshipStoreShop="handleFlagshipStoreShopChange"
														
 
															+      @update:pageOptions="handlePageOptionsChange"
														
 
															+      @update:addedTableData="handleUpdateAddedData"
														
 
															+      @update:focusShopSelect="handleFocusShopSelectChange"></AdFormat>
														
 
															+    
														
 
															+    <ProductSetCreativity1 v-if="adFormatRadioValue === 'productSet' && arrivalsRadioValue === 'flagshipStore' && flagshipStoreShopValue === 'ZOSI'">
														
 
															+    </ProductSetCreativity1>
														
 
															+    <FocusCreativity v-if="adFormatRadioValue === 'focus' && focusShop === 'ENTITY2NJKG6JSUTTPB'"></FocusCreativity>
														
 
															+    <VideoCreativity1 v-if="adFormatRadioValue === 'video' && arrivalsRadioValue === 'flagshipStore' && flagshipStoreShopValue === 'ZOSI'">
														
 
															+    </VideoCreativity1>
														
 
															+    <VideoCreativity2 v-if="adFormatRadioValue === 'video' && arrivalsRadioValue === 'productDetailsPage'"></VideoCreativity2>
														
 
															+    <ProductSetCreativity2 v-if="adFormatRadioValue === 'productSet' && arrivalsRadioValue === 'newArrivals'"></ProductSetCreativity2>
														
 
															+    <DeliveryType></DeliveryType>
														
 
															+  </div>
														
 
															 </template>
														
 
															 <script lang="ts" setup>
														
 
															-import {reactive, ref} from 'vue'
														
 
															-import type {FormInstance, FormRules, FormProps} from 'element-plus'
														
 
															-import CommoditySet from './adFormat/CommoditySet.vue'
														
 
															+import { provide, ref, onMounted, onUnmounted} from 'vue'
														
 
															+import AdCampaign from './component/AdCampaign.vue'
														
 
															+import AdGroup from './component/AdGroup.vue'
														
 
															+import AdFormat from './component/AdFormat.vue'
														
 
															+import DeliveryType from './component/DeliveryType.vue'
														
 
															+import VideoCreativity1 from './component/VideoCreativity1.vue'
														
 
															+import VideoCreativity2 from './component/VideoCreativity2.vue'
														
 
															+import ProductSetCreativity1 from './component/ProductSetCreativity1.vue'
														
 
															+import ProductSetCreativity2 from './component/ProductSetCreativity2.vue'
														
 
															+import FocusCreativity from './component/FocusCreativity.vue'
														
 
															+import emitter from '/@/utils/emitter'
														
 
															-interface RuleForm {
														
 
															-    name: string
														
 
															-    portfolios: string
														
 
															-    budget: string
														
 
															-    date1: string
														
 
															-    date2: string
														
 
															-    delivery: boolean
														
 
															-    type: string[]
														
 
															-    resource: string
														
 
															-    desc: string
														
 
															-    groupName: string
														
 
															-}
														
 
															-
														
 
															-const formSize = ref('default')
														
 
															-const ruleFormRef = ref<FormInstance>()
														
 
															-const ruleForm = reactive<RuleForm>({
														
 
															-    name: '',
														
 
															-    portfolios: '',
														
 
															-    budget: '',
														
 
															-    date1: '',
														
 
															-    date2: '',
														
 
															-    delivery: false,
														
 
															-    type: [],
														
 
															-    resource: '',
														
 
															-    desc: '',
														
 
															-    groupName: '',
														
 
															-})
														
 
															+const respCampaignId = ref('')
														
 
															+const respCampaignName = ref('')
														
 
															+const respAdGroupId = ref('')
														
 
															+const adFormatRadioValue = ref('')
														
 
															+const arrivalsRadioValue = ref('')
														
 
															+const flagshipStoreShopValue = ref('')
														
 
															+const pageOptionsValue = ref('')
														
 
															+const addedTableDataForVc2 = ref('')
														
 
															+const focusShop = ref('')
														
 
															+const focusShopLabel = ref('')
														
 
															+const brandEntityId = ref('')
														
 
															+const setBrandName = ref('')
														
 
															-const rules = reactive<FormRules<RuleForm>>({
														
 
															-    name: [
														
 
															-        {required: true, message: 'Please input Activity name', trigger: 'blur'},
														
 
															-        {min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur'},
														
 
															-    ],
														
 
															-    portfolios: [
														
 
															-        {
														
 
															-            required: false,
														
 
															-            message: 'Please select Activity zone',
														
 
															-            trigger: 'change',
														
 
															-        },
														
 
															-    ],
														
 
															-    budget: [
														
 
															-        {
														
 
															-            required: true,
														
 
															-            message: 'Please select Activity budget',
														
 
															-            trigger: 'change',
														
 
															-        },
														
 
															-    ],
														
 
															-    date1: [
														
 
															-        {
														
 
															-            type: 'date',
														
 
															-            required: true,
														
 
															-            message: 'Please pick a date',
														
 
															-            trigger: 'change',
														
 
															-        },
														
 
															-    ],
														
 
															-    date2: [
														
 
															-        {
														
 
															-            type: 'date',
														
 
															-            required: false,
														
 
															-            message: 'Please pick a time',
														
 
															-            trigger: 'change',
														
 
															-        },
														
 
															-    ],
														
 
															-    type: [
														
 
															-        {
														
 
															-            type: 'array',
														
 
															-            required: true,
														
 
															-            message: 'Please select at least one activity type',
														
 
															-            trigger: 'change',
														
 
															-        },
														
 
															-    ],
														
 
															-    resource: [
														
 
															-        {
														
 
															-            required: true,
														
 
															-            message: 'Please select activity resource',
														
 
															-            trigger: 'change',
														
 
															-        },
														
 
															-    ],
														
 
															-    desc: [
														
 
															-        {required: true, message: 'Please input activity form', trigger: 'blur'},
														
 
															-    ],
														
 
															-    groupName: [
														
 
															-        {required: true, message: 'Please input Group Name', trigger: 'blur'},
														
 
															-    ]
														
 
															-})
														
 
															+provide('respCampaignId', respCampaignId)
														
 
															+provide('respCampaignName', respCampaignName)
														
 
															+provide('respAdGroupId', respAdGroupId)
														
 
															+provide('pageOptionsValue', pageOptionsValue)
														
 
															+provide('addedTableDataForVc2', addedTableDataForVc2)
														
 
															+provide('focusShop', focusShop)
														
 
															+provide('focusShopLabel', focusShopLabel)
														
 
															+provide('brandEntityId', brandEntityId)
														
 
															+provide('setBrandName', setBrandName)
														
 
															-const submitForm = async (formEl: FormInstance | undefined) => {
														
 
															-    if (!formEl) return
														
 
															-    await formEl.validate((valid, fields) => {
														
 
															-        if (valid) {
														
 
															-            console.log('submit!')
														
 
															-            console.log(ruleForm)
														
 
															-        } else {
														
 
															-            console.log('error submit!', fields)
														
 
															-        }
														
 
															-    })
														
 
															+const handleCampaignUpdate = (data) => {
														
 
															+  respCampaignId.value = data.id
														
 
															+  respCampaignName.value = data.name
														
 
															 }
														
 
															-
														
 
															-const resetForm = (formEl: FormInstance | undefined) => {
														
 
															-    if (!formEl) return
														
 
															-    formEl.resetFields()
														
 
															+const handleGroupIdUpdate = (data) => {
														
 
															+  respAdGroupId.value = data.id
														
 
															+}
														
 
															+const handleAdFormatRadioChange = (newValue) => {
														
 
															+  adFormatRadioValue.value = newValue // 更新 adFormatRadioValue
														
 
															+}
														
 
															+const handleArrivalsRadioChange = (newValue) => {
														
 
															+  arrivalsRadioValue.value = newValue
														
 
															+}
														
 
															+const handleFlagshipStoreShopChange = (newValue) => {
														
 
															+  flagshipStoreShopValue.value = newValue
														
 
															+}
														
 
															+const handlePageOptionsChange = (newValue) => {
														
 
															+  pageOptionsValue.value = newValue
														
 
															 }
														
 
															-const options = Array.from({length: 10000}).map((_, idx) => ({
														
 
															-    value: `${idx + 1}`,
														
 
															-    label: `${idx + 1}`,
														
 
															-}))
														
 
															+function handleUpdateAddedData(data) {
														
 
															+  addedTableDataForVc2.value = data
														
 
															+}
														
 
															-const labelPosition = ref<FormProps['labelPosition']>('left')
														
 
															+function handleFocusShopSelectChange(newValue) {
														
 
															+  focusShop.value = newValue
														
 
															+  focusShopLabel.value = 'ZOSI'
														
 
															+}
														
 
															+onMounted(()=>{
														
 
															+  emitter.on('brandEntityId',(value: any)=>{
														
 
															+    brandEntityId.value = value[0].brandEntityId
														
 
															+    setBrandName.value = value[0].brandRegistryName
														
 
															+  })
														
 
															+})
														
 
															 </script>
														
 
															 <style scoped>
														
 
															-    .form-item :deep(.el-form-item__label) {
														
 
															-        font-weight: bold;
														
 
															-    }
														
 
															-    :deep(.el-tabs__nav-scroll) {
														
 
															-        display: flex;
														
 
															-        justify-content: space-around;
														
 
															-    }
														
 
															-    :deep([id^="tab"]) {
														
 
															-        padding: 0;
														
 
															-        margin-right: 230px;
														
 
															-        border: 1px solid #D3D3D3;
														
 
															-        border-radius: 5px;
														
 
															-    }
														
 
															-    :deep(div#tab-0) {
														
 
															-        padding: 15px;
														
 
															-    }
														
 
															-    :deep(div#tab-1) {
														
 
															-        padding: 15px;
														
 
															-    }
														
 
															-    :deep(div#tab-2) {
														
 
															-        padding: 15px;
														
 
															-    }
														
 
															-    :deep(.el-tabs__nav-wrap::after) {
														
 
															-        width: 0;
														
 
															-    }
														
 
															+.page-container {
														
 
															+  padding: 12px;
														
 
															+  background-color: #fafafa;
														
 
															+}
														
 
															+::v-deep(.el-form--default.el-form--label-top .el-form-item .el-form-item__label) {
														
 
															+  font-weight: 500;
														
 
															+  color: #505968;
														
 
															+}
														
 
															 </style>
														
--- a/src/views/adManage/sb/campaigns/api.ts
+++ b/src/views/adManage/sb/campaigns/api.ts
@@ -1,18 +1,17 @@
 
															 import { request } from '/@/utils/service';
														
 
															-import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
														
 
															-import XEUtils from 'xe-utils';
														
 
															+import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
														
 
															-export const apiPrefix = '/api/ad_manage/spCampaigns/';
														
 
															-export function GetList(query: PageQuery) {
														
 
															+export const apiPrefix = '/api/ad_manage/sbcampaigns/';
														
 
															+export function GetList(query: UserPageQuery) {
														
 
															     return request({
														
 
															-        url: apiPrefix,
														
 
															+        url: apiPrefix + 'list/',
														
 
															         method: 'get',
														
 
															         params: query,
														
 
															     })
														
 
															 }
														
 
															-export function GetObj(id: InfoReq) {
														
 
															+export function GetObj(id: any) {
														
 
															     return request({
														
 
															-        url: apiPrefix + id,
														
 
															+        url: apiPrefix + id + "/",
														
 
															         method: 'get',
														
 
															     });
														
 
															 }
														
@@ -40,3 +39,46 @@ export function DelObj(id: DelReq) {
 
															         data: { id },
														
 
															     });
														
 
															 }
														
 
															+
														
 
															+export function getCardData(query: UserPageQuery) {
														
 
															+    return request({
														
 
															+        url: apiPrefix + "total/",
														
 
															+        method: 'GET',
														
 
															+        params: query
														
 
															+    })
														
 
															+}
														
 
															+
														
 
															+export function getLineData(query: UserPageQuery) {
														
 
															+    query["dateRangeType"] = "D"
														
 
															+    return request({
														
 
															+        url: apiPrefix + "daily/",
														
 
															+        method: 'GET',
														
 
															+        params: query
														
 
															+    })
														
 
															+}
														
 
															+
														
 
															+export function getLineWeekData(query: UserPageQuery) {
														
 
															+    query["dateRangeType"] = "W"
														
 
															+    return request({
														
 
															+        url: apiPrefix + "daily/",
														
 
															+        method: 'GET',
														
 
															+        params: query
														
 
															+    })
														
 
															+}
														
 
															+
														
 
															+export function getLineMonthData(query: UserPageQuery) {
														
 
															+    query["dateRangeType"] = "M"
														
 
															+    return request({
														
 
															+        url: apiPrefix + "daily/",
														
 
															+        method: 'GET',
														
 
															+        params: query
														
 
															+    })
														
 
															+}
														
 
															+
														
 
															+export function getAdStructureData(query: UserPageQuery) {
														
 
															+    return request({
														
 
															+        url: apiPrefix + "structure/",
														
 
															+        method: 'GET',
														
 
															+        params: query
														
 
															+    })
														
 
															+}
														
--- a/src/views/adManage/sb/campaigns/campaignDetail/adGroups/adGroupDetail/ads/api.ts
+++ b/src/views/adManage/sb/campaigns/campaignDetail/adGroups/adGroupDetail/ads/api.ts
@@ -0,0 +1,59 @@
 
															+import { request } from '/@/utils/service';
														
 
															+import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
														
 
															+
														
 
															+export const apiPrefix = '/api/ad_manage/sbgroupdetail/ads/';
														
 
															+export function GetList(query: UserPageQuery) {
														
 
															+    return request({
														
 
															+        url: apiPrefix + 'list/',
														
 
															+        method: 'get',
														
 
															+        params: query,
														
 
															+    })
														
 
															+}
														
 
															+export function GetObj(id: InfoReq) {
														
 
															+    return request({
														
 
															+        url: apiPrefix + id + "/",
														
 
															+        method: 'get',
														
 
															+    });
														
 
															+}
														
 
															+
														
 
															+export function AddObj(obj: AddReq) {
														
 
															+    return request({
														
 
															+        url: apiPrefix,
														
 
															+        method: 'post',
														
 
															+        data: obj,
														
 
															+    });
														
 
															+}
														
 
															+
														
 
															+export function UpdateObj(obj: EditReq) {
														
 
															+    return request({
														
 
															+        url: apiPrefix + obj.id + '/',
														
 
															+        method: 'put',
														
 
															+        data: obj,
														
 
															+    });
														
 
															+}
														
 
															+
														
 
															+export function DelObj(id: DelReq) {
														
 
															+    return request({
														
 
															+        url: apiPrefix + id + '/',
														
 
															+        method: 'delete',
														
 
															+        data: { id },
														
 
															+    });
														
 
															+}
														
 
															+
														
 
															+
														
 
															+export function getCardData(query: UserPageQuery) {
														
 
															+    return request({
														
 
															+        url: apiPrefix + "total/",
														
 
															+        method: 'GET',
														
 
															+        params: query
														
 
															+    })
														
 
															+  }
														
 
															+
														
 
															+export function getLineData(query: UserPageQuery) {
														
 
															+  query['dateRangeType'] = 'D'
														
 
															+  return request({
														
 
															+    url: apiPrefix + 'daily/',
														
 
															+    method: 'GET',
														
 
															+    params: query
														
 
															+  })
														
 
															+}
														
--- a/src/views/adManage/sb/campaigns/campaignDetail/adGroups/adGroupDetail/ads/crud.tsx
+++ b/src/views/adManage/sb/campaigns/campaignDetail/adGroups/adGroupDetail/ads/crud.tsx
@@ -0,0 +1,130 @@
 
															+import * as api from './api'
														
 
															+import { dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud'
														
 
															+import { inject } from 'vue'
														
 
															+import { parseQueryParams } from '/@/views/adManage/utils/tools.js'
														
 
															+import XEUtils from 'xe-utils'
														
 
															+import { BaseColumn } from '/@/views/adManage/utils/commonTabColumn.js'
														
 
															+
														
 
															+export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
														
 
															+	const pageRequest = async (query: UserPageQuery) => {
														
 
															+		const params = parseQueryParams(context.value)
														
 
															+		XEUtils.assign(query, params)
														
 
															+		return await api.GetList(query);
														
 
															+	};
														
 
															+	const editRequest = async ({ form, row }: EditReq) => {
														
 
															+		form.id = row.id;
														
 
															+		return await api.UpdateObj(form);
														
 
															+	};
														
 
															+	const delRequest = async ({ row }: DelReq) => {
														
 
															+		return await api.DelObj(row.id);
														
 
															+	};
														
 
															+	const addRequest = async ({ form }: AddReq) => {
														
 
															+		return await api.AddObj(form);
														
 
															+	};
														
 
															+
														
 
															+	//权限判定
														
 
															+	const hasPermissions = inject('$hasPermissions');
														
 
															+
														
 
															+	return {
														
 
															+		crudOptions: {
														
 
															+			table: {
														
 
															+				height: 750,
														
 
															+				headerCellStyle: {
														
 
															+					backgroundColor: '#f6f7fa', // 直接设置背景颜色
														
 
															+					height: '20px',
														
 
															+					// border: '0.5px solid #ddd',
														
 
															+				},
														
 
															+				cellStyle: {
														
 
															+					border: 'none',
														
 
															+					borderBottom: '0.5px solid #ddd',
														
 
															+				},
														
 
															+			},
														
 
															+			container: {
														
 
															+        fixedHeight: false
														
 
															+      },
														
 
															+			actionbar: {
														
 
															+				show: true,
														
 
															+				color: "#626aef",
														
 
															+				buttons: {
														
 
															+					add: {
														
 
															+						show: false
														
 
															+					},
														
 
															+					create: {
														
 
															+						text: '添加广告',
														
 
															+						// type: 'primary',
														
 
															+						color: "#626aef",
														
 
															+						plain: true,
														
 
															+						show: true,
														
 
															+						click() {
														
 
															+
														
 
															+						}
														
 
															+					},
														
 
															+				}
														
 
															+			},
														
 
															+			search: {
														
 
															+				show: true,
														
 
															+				buttons: {
														
 
															+					search: {
														
 
															+						show: false
														
 
															+					},
														
 
															+					reset: {
														
 
															+						show: false
														
 
															+					}
														
 
															+				}
														
 
															+			},
														
 
															+			toolbar: {
														
 
															+        buttons: {
														
 
															+					search: {
														
 
															+						show: true
														
 
															+					},
														
 
															+					compact: {
														
 
															+						show: false
														
 
															+					}
														
 
															+				}
														
 
															+			},
														
 
															+			request: {
														
 
															+				pageRequest,
														
 
															+				addRequest,
														
 
															+				editRequest,
														
 
															+				delRequest,
														
 
															+			},
														
 
															+			rowHandle: {
														
 
															+				fixed: 'right',
														
 
															+				width: 80,
														
 
															+				buttons: {
														
 
															+					view: {
														
 
															+						show: false,
														
 
															+					},
														
 
															+					edit: {
														
 
															+						iconRight: 'Edit',
														
 
															+						type: 'text',
														
 
															+            text: null
														
 
															+						// show: hasPermissions('dictionary:Update'),
														
 
															+					},
														
 
															+					remove: {
														
 
															+						iconRight: 'Delete',
														
 
															+						type: 'text',
														
 
															+            text: null
														
 
															+						// show: hasPermissions('dictionary:Delete'),
														
 
															+					},
														
 
															+				},
														
 
															+			},
														
 
															+			columns: {
														
 
															+        adGroupName: {
														
 
															+					title: '广告组名称',
														
 
															+					column: {
														
 
															+						width: 230,
														
 
															+						fixed: 'left',
														
 
															+					}
														
 
															+				},
														
 
															+				state: {
														
 
															+					title: '状态',
														
 
															+					column: {
														
 
															+						width: "100px"
														
 
															+					}
														
 
															+				},
														
 
															+				...BaseColumn
														
 
															+			}
														
 
															+		}
														
 
															+	}
														
 
															+}
														
--- a/src/views/adManage/sb/campaigns/campaignDetail/adGroups/adGroupDetail/ads/index.vue
+++ b/src/views/adManage/sb/campaigns/campaignDetail/adGroups/adGroupDetail/ads/index.vue
@@ -0,0 +1,73 @@
 
															+<template>
														
 
															+	<fs-page class="fs-page-custom">
														
 
															+		<fs-crud ref="crudRef" v-bind="crudBinding">
														
 
															+			<template #search-left>
														
 
															+				<DateRangePicker v-model="dateRange"></DateRangePicker>
														
 
															+			</template>
														
 
															+			<template #header-middle>
														
 
															+				<DataTendencyChart :query="queryParams" :fetch-card="getCardData" :fetch-line="getLineData"> </DataTendencyChart>
														
 
															+			</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>
														
 
															+          <span>数据对比 </span>
														
 
															+          <el-switch v-model="showCompare" size="small" />
														
 
															+        </div>
														
 
															+      </template>
														
 
															+		</fs-crud>
														
 
															+	</fs-page>
														
 
															+</template>
														
 
															+
														
 
															+<script lang="ts" setup>
														
 
															+import { ref, onMounted, watch } from 'vue'
														
 
															+import { useFs, FsPage } from '@fast-crud/fast-crud'
														
 
															+import { createCrudOptions } from './crud'
														
 
															+import { LocationQueryValue } from 'vue-router'
														
 
															+import DataTendencyChart from '/@/views/adManage/sp/chartComponents/dataTendency.vue'
														
 
															+// import { useShopInfo } from '/@/stores/shopInfo'
														
 
															+import { usePublicData } from '/@/stores/publicData'
														
 
															+import { getCardData, getLineData } from './api'
														
 
															+import { storeToRefs } from 'pinia'
														
 
															+import DateRangePicker from '/@/components/DateRangePicker/index.vue'
														
 
															+import { BaseColumn } from '/@/views/adManage/utils/commonTabColumn.js'
														
 
															+import DataCompare from '/@/components/dataCompare/index.vue'
														
 
															+
														
 
															+
														
 
															+interface Props {
														
 
															+	adGroupId: LocationQueryValue | LocationQueryValue[]
														
 
															+}
														
 
															+const props = defineProps<Props>()
														
 
															+const publicData = usePublicData()
														
 
															+const { dateRange } = storeToRefs(publicData)
														
 
															+const showCompare = ref(false)
														
 
															+const queryParams = ref({
														
 
															+	adGroupId: props.adGroupId,
														
 
															+	dateRange,
														
 
															+})
														
 
															+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })
														
 
															+
														
 
															+onMounted(() => {
														
 
															+	crudExpose.doRefresh()
														
 
															+})
														
 
															+watch(queryParams, async () => {
														
 
															+	crudExpose.doRefresh()
														
 
															+}, { deep: true })
														
 
															+</script>
														
 
															+
														
 
															+<style lang="scss">
														
 
															+.chart-tabs {
														
 
															+	margin: 5px 0;
														
 
															+
														
 
															+	.el-tabs__nav {
														
 
															+		padding-left: 0 !important;
														
 
															+	}
														
 
															+}
														
 
															+</style>
														
--- a/src/views/adManage/sb/campaigns/campaignDetail/adGroups/adGroupDetail/api.ts
+++ b/src/views/adManage/sb/campaigns/campaignDetail/adGroups/adGroupDetail/api.ts
@@ -0,0 +1,12 @@
 
															+import { request } from '/@/utils/service'
														
 
															+import { LocationQueryValue } from 'vue-router'
														
 
															+
														
 
															+export const apiPrefix = '/api/ad_manage/sbgroupdetail/'
														
 
															+
														
 
															+export function GetObj(adGroupId: LocationQueryValue | LocationQueryValue[]) {
														
 
															+	return request({
														
 
															+		url: apiPrefix + 'head/',
														
 
															+		method: 'get',
														
 
															+		params: { adGroupId },
														
 
															+	})
														
 
															+}
														
--- a/src/views/adManage/sb/campaigns/campaignDetail/adGroups/adGroupDetail/autoTarget/api.ts
+++ b/src/views/adManage/sb/campaigns/campaignDetail/adGroups/adGroupDetail/autoTarget/api.ts
@@ -0,0 +1,11 @@
 
															+import { request } from '/@/utils/service';
														
 
															+import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
														
 
															+
														
 
															+export const apiPrefix = '/api/ad_manage/sbgroupdetail/targets/';
														
 
															+export function GetList(query: UserPageQuery) {
														
 
															+    return request({
														
 
															+        url: apiPrefix + 'list/',
														
 
															+        method: 'get',
														
 
															+        params: query,
														
 
															+    })
														
 
															+}
														
--- a/src/views/adManage/sb/campaigns/campaignDetail/adGroups/adGroupDetail/autoTarget/crud.tsx
+++ b/src/views/adManage/sb/campaigns/campaignDetail/adGroups/adGroupDetail/autoTarget/crud.tsx
@@ -0,0 +1,95 @@
 
															+import * as api from './api'
														
 
															+import { dict, UserPageQuery, compute, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud'
														
 
															+import { inject } from 'vue'
														
 
															+import { BaseColumn } from '/@/views/adManage/utils/commonTabColumn.js'
														
 
															+import { parseQueryParams } from '/@/views/adManage/utils/tools.js'
														
 
															+import XEUtils from 'xe-utils'
														
 
															+
														
 
															+export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
														
 
															+  const pageRequest = async (query: UserPageQuery) => {
														
 
															+    const params = parseQueryParams(context.value)
														
 
															+    XEUtils.assign(query, params)
														
 
															+    return await api.GetList(query)
														
 
															+  }
														
 
															+
														
 
															+  //权限判定
														
 
															+  const hasPermissions = inject('$hasPermissions')
														
 
															+
														
 
															+  return {
														
 
															+    crudOptions: {
														
 
															+      table: {},
														
 
															+      container: {
														
 
															+        fixedHeight: true,
														
 
															+      },
														
 
															+      actionbar: {
														
 
															+        show: false,
														
 
															+      },
														
 
															+      search: {
														
 
															+        show: true,
														
 
															+        buttons: {
														
 
															+					search: {
														
 
															+						show: false
														
 
															+					},
														
 
															+					reset: {
														
 
															+						show: false
														
 
															+					}
														
 
															+				}
														
 
															+      },
														
 
															+      // toolbar: {
														
 
															+      //   buttons: {
														
 
															+      //     search: {
														
 
															+      //       show: true,
														
 
															+      //     },
														
 
															+      //     compact: {
														
 
															+      //       show: false,
														
 
															+      //     },
														
 
															+      //   },
														
 
															+      // },
														
 
															+      request: {
														
 
															+        pageRequest,
														
 
															+      },
														
 
															+      rowHandle: {
														
 
															+        show: false,
														
 
															+      },
														
 
															+      columns: {
														
 
															+        keyword: {
														
 
															+          title: '目标群体',
														
 
															+          column: {
														
 
															+            width: '200px',
														
 
															+            fixed: 'left',
														
 
															+            align: 'center',
														
 
															+          },
														
 
															+        },
														
 
															+        state: {
														
 
															+          title: '状态',
														
 
															+          column: {
														
 
															+            width: '100px',
														
 
															+            align: 'center',
														
 
															+          },
														
 
															+        },
														
 
															+        suggestedBid: {
														
 
															+          title: '建议竞价',
														
 
															+          column: {
														
 
															+            width: '100px',
														
 
															+            align: 'center',
														
 
															+          },
														
 
															+        },
														
 
															+        bid: {
														
 
															+          title: '出价',
														
 
															+          column: {
														
 
															+            width: '60px',
														
 
															+            align: 'center',
														
 
															+          },
														
 
															+        },
														
 
															+        // currentBid: {
														
 
															+        //   title: '当前竞价',
														
 
															+        //   column: {
														
 
															+        //     width: '100px',
														
 
															+        //     align: 'center',
														
 
															+        //   },
														
 
															+        // },
														
 
															+        ...BaseColumn,
														
 
															+      },
														
 
															+    },
														
 
															+  }
														
 
															+}
														
--- a/src/views/adManage/sb/campaigns/campaignDetail/adGroups/adGroupDetail/autoTarget/index.vue
+++ b/src/views/adManage/sb/campaigns/campaignDetail/adGroups/adGroupDetail/autoTarget/index.vue
@@ -0,0 +1,67 @@
 
															+<template>
														
 
															+  <fs-page class="fs-page-custom">
														
 
															+    <fs-crud ref="crudRef" v-bind="crudBinding">
														
 
															+      <template #search-left>
														
 
															+        <DateRangePicker v-model="dateRange"></DateRangePicker>
														
 
															+      </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>
														
 
															+
														
 
															+<script lang="ts" setup>
														
 
															+import { ref, onMounted, computed, watch, onBeforeMount } from 'vue'
														
 
															+import { useFs, FsPage } from '@fast-crud/fast-crud'
														
 
															+import { createCrudOptions } from './crud'
														
 
															+// import { useShopInfo } from '/@/stores/shopInfo'
														
 
															+import { usePublicData } from '/@/stores/publicData'
														
 
															+import { storeToRefs } from 'pinia'
														
 
															+import { LocationQueryValue } from 'vue-router'
														
 
															+import { BaseColumn } from '/@/views/adManage/utils/commonTabColumn.js'
														
 
															+import DataCompare from '/@/components/dataCompare/index.vue'
														
 
															+import DateRangePicker from '/@/components/DateRangePicker/index.vue'
														
 
															+
														
 
															+interface Props {
														
 
															+  adGroupId: LocationQueryValue | LocationQueryValue[]
														
 
															+}
														
 
															+const props = defineProps<Props>()
														
 
															+// const shopInfo = useShopInfo()
														
 
															+const publicData = usePublicData()
														
 
															+const { dateRange } = storeToRefs(publicData)
														
 
															+// const { profile } = storeToRefs(shopInfo)
														
 
															+const queryParams = ref({
														
 
															+  adGroupId: props.adGroupId,
														
 
															+  dateRange,
														
 
															+})
														
 
															+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })
														
 
															+const showCompare = ref(false)
														
 
															+
														
 
															+onMounted(async () => {
														
 
															+  crudExpose.doRefresh()
														
 
															+})
														
 
															+watch(
														
 
															+  queryParams,
														
 
															+  async () => {
														
 
															+    crudExpose.doRefresh()
														
 
															+  },
														
 
															+  { deep: true }
														
 
															+)
														
 
															+</script>
														
 
															+
														
 
															+<style scoped></style>
														
--- a/src/views/adManage/sb/campaigns/campaignDetail/adGroups/adGroupDetail/index.vue
+++ b/src/views/adManage/sb/campaigns/campaignDetail/adGroups/adGroupDetail/index.vue
@@ -0,0 +1,84 @@
 
															+<template>
														
 
															+  <div class="asj-container">
														
 
															+    <div class="asj-detail-header">
														
 
															+      <span style="font-size: x-large; font-weight: bold; color: #0f1111;margin: 5px;">
														
 
															+        <span> {{ adGroupInfo.adGroupName }} </span>
														
 
															+      </span>
														
 
															+      <div class="asj-detail-info">
														
 
															+        <span style="color: rgb(177, 177, 177);">状态: </span>
														
 
															+        <span>
														
 
															+          <el-button class="no-hover-effect" type="success" size="small" round plain>{{ dynStatusEnum[adGroupInfo.state] }}</el-button>
														
 
															+        </span>
														
 
															+        <span class="head-span">投放类型: </span> <span>{{ targetTypeEnum[adGroupInfo.creative_type] }}</span>
														
 
															+        <!-- <span>默认竞价：{{ profile.currency_symbol + adGroupInfo.defaultBid }}</span> -->
														
 
															+        <span class="head-span">投放日期: </span> <span>{{ adGroupInfo.startDate }} ~ {{ adGroupInfo.endDate ?? '无结束日期' }}</span>
														
 
															+      </div>
														
 
															+    </div>
														
 
															+    <el-tabs type="border-card" class="asj-detail-tabs" v-model="tabActiveName">
														
 
															+      <el-tab-pane label="广告" name="ads">
														
 
															+        <Ads v-if="tabActiveName==='ads'" :adGroupId="route.query.adGroupId"></Ads>
														
 
															+      </el-tab-pane>
														
 
															+      <template v-if="route.query.targetingType ==='target'">
														
 
															+        <el-tab-pane label="商品投放" name="tab2">
														
 
															+          <ManualTarget v-if="tabActiveName === 'tab2'" :adGroupId="route.query.adGroupId">商品投放</ManualTarget>
														
 
															+        </el-tab-pane>
														
 
															+        <!--<el-tab-pane label="否定商品" name="tab3">-->
														
 
															+        <!--  <NegProduct v-if="tabActiveName === 'tab3'" :adGroupId="route.query.adGroupId">否定商品</NegProduct>-->
														
 
															+        <!--</el-tab-pane>-->
														
 
															+      </template>
														
 
															+      <template v-else>
														
 
															+        <el-tab-pane label="关键词" name="tab2">
														
 
															+          <Keyword v-if="tabActiveName === 'tab2'" :ad-group-id="route.query.adGroupId">关键词</Keyword>
														
 
															+        </el-tab-pane>
														
 
															+        <el-tab-pane label="否定词" name="tab3">
														
 
															+          <NegKeyword v-if="tabActiveName === 'tab3'" :ad-group-id="route.query.adGroupId">否定词</NegKeyword>
														
 
															+        </el-tab-pane>
														
 
															+        <el-tab-pane label="搜索关键词" name="searchTerm">
														
 
															+          <SearchTerm v-if="tabActiveName === 'searchTerm'" :adGroupId="route.query.adGroupId" />
														
 
															+        </el-tab-pane>
														
 
															+      </template>
														
 
															+    </el-tabs>
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<script lang="ts" setup>
														
 
															+import {onMounted, ref, Ref} from 'vue'
														
 
															+import {useRoute} from 'vue-router'
														
 
															+import {GetObj} from './api'
														
 
															+import {useShopInfo} from '/@/stores/shopInfo'
														
 
															+import {storeToRefs} from 'pinia'
														
 
															+import Ads from './ads/index.vue'
														
 
															+import SearchTerm from './searchTerm/index.vue'
														
 
															+import Keyword from './keyword/index.vue'
														
 
															+import AutoTarget from './autoTarget/index.vue'
														
 
															+import ManualTarget from './manualTarget/index.vue'
														
 
															+import NegProduct from './negProduct/index.vue'
														
 
															+import NegKeyword from './negKeyword/index.vue'
														
 
															+import NegTarget from './negTarget/index.vue'
														
 
															+import {dynStatusEnum, targetTypeEnum} from '/@/views/adManage/utils/enum'
														
 
															+// import { usePublicData } from '/@/stores/publicData'
														
 
															+
														
 
															+
														
 
															+const tabActiveName = ref('ads')
														
 
															+const shopInfo = useShopInfo()
														
 
															+const { profile } = storeToRefs(shopInfo)
														
 
															+const route = useRoute()
														
 
															+const adGroupInfo: Ref<SpAdGroup> = ref({})
														
 
															+
														
 
															+onMounted(async () => {
														
 
															+  const resp = await GetObj(route.query.adGroupId)
														
 
															+  adGroupInfo.value = resp.data
														
 
															+  console.log(111, route.query)
														
 
															+})
														
 
															+
														
 
															+</script>
														
 
															+
														
 
															+<style scoped>
														
 
															+.head-span {
														
 
															+  color: rgb(177, 177, 177);
														
 
															+  margin-left: 40px;
														
 
															+}
														
 
															+:deep(.el-tabs--border-card) {
														
 
															+  border: none;
														
 
															+}
														
 
															+</style>
														
--- a/src/views/adManage/sb/campaigns/campaignDetail/adGroups/adGroupDetail/keyword/api.ts
+++ b/src/views/adManage/sb/campaigns/campaignDetail/adGroups/adGroupDetail/keyword/api.ts
@@ -0,0 +1,28 @@
 
															+import { request } from '/@/utils/service';
														
 
															+import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
														
 
															+
														
 
															+export const apiPrefix = '/api/ad_manage/sbgroupdetail/keywords/';
														
 
															+export function GetList(query: UserPageQuery) {
														
 
															+    return request({
														
 
															+        url: apiPrefix + 'list/',
														
 
															+        method: 'get',
														
 
															+        params: query,
														
 
															+    })
														
 
															+}
														
 
															+
														
 
															+export function getCardData(query: UserPageQuery) {
														
 
															+    return request({
														
 
															+        url: apiPrefix + "total/",
														
 
															+        method: 'GET',
														
 
															+        params: query
														
 
															+    })
														
 
															+}
														
 
															+
														
 
															+export function getLineData(query: UserPageQuery) {
														
 
															+    query["dateRangeType"] = "D"
														
 
															+    return request({
														
 
															+        url: apiPrefix + "daily/",
														
 
															+        method: 'GET',
														
 
															+        params: query
														
 
															+    })
														
 
															+}
														
--- a/src/views/adManage/sb/campaigns/campaignDetail/adGroups/adGroupDetail/keyword/crud.tsx
+++ b/src/views/adManage/sb/campaigns/campaignDetail/adGroups/adGroupDetail/keyword/crud.tsx
@@ -0,0 +1,122 @@
 
															+import * as api from './api'
														
 
															+import {CreateCrudOptionsProps, CreateCrudOptionsRet, UserPageQuery} from '@fast-crud/fast-crud'
														
 
															+import {inject} from 'vue'
														
 
															+import {BaseColumn} from '/@/views/adManage/utils/commonTabColumn.js'
														
 
															+import {parseQueryParams} from '/@/views/adManage/utils/tools.js'
														
 
															+import XEUtils from 'xe-utils'
														
 
															+
														
 
															+export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
														
 
															+  const pageRequest = async (query: UserPageQuery) => {
														
 
															+    const params = parseQueryParams(context.value)
														
 
															+    XEUtils.assign(query, params)
														
 
															+    return await api.GetList(query)
														
 
															+  }
														
 
															+
														
 
															+  //权限判定
														
 
															+  const hasPermissions = inject('$hasPermissions')
														
 
															+
														
 
															+  return {
														
 
															+    crudOptions: {
														
 
															+      table: {
														
 
															+        height: 750,
														
 
															+        headerCellStyle: {
														
 
															+          backgroundColor: '#f6f7fa', // 直接设置背景颜色
														
 
															+          height: '20px',
														
 
															+          // border: '0.5px solid #ddd',
														
 
															+        },
														
 
															+        cellStyle: {
														
 
															+          border: 'none',
														
 
															+          borderBottom: '0.5px solid #ddd',
														
 
															+        },
														
 
															+      },
														
 
															+      container: {
														
 
															+        fixedHeight: false,
														
 
															+      },
														
 
															+      actionbar: {
														
 
															+        show: true,
														
 
															+        color: "#626aef",
														
 
															+        buttons: {
														
 
															+          add: {
														
 
															+            show: false
														
 
															+          },
														
 
															+          create: {
														
 
															+            text: '添加关键词',
														
 
															+            // type: 'primary',
														
 
															+            color: "#626aef",
														
 
															+            plain: true,
														
 
															+            show: true,
														
 
															+            click() {
														
 
															+
														
 
															+            }
														
 
															+          },
														
 
															+        }
														
 
															+      },
														
 
															+      search: {
														
 
															+        show: true,
														
 
															+        buttons: {
														
 
															+					search: {
														
 
															+						show: false
														
 
															+					},
														
 
															+					reset: {
														
 
															+						show: false
														
 
															+					}
														
 
															+				}
														
 
															+      },
														
 
															+      // toolbar: {
														
 
															+      //   buttons: {
														
 
															+      //     search: {
														
 
															+      //       show: true,
														
 
															+      //     },
														
 
															+      //     compact: {
														
 
															+      //       show: false,
														
 
															+      //     },
														
 
															+      //   },
														
 
															+      // },
														
 
															+      request: {
														
 
															+        pageRequest,
														
 
															+      },
														
 
															+      rowHandle: {
														
 
															+        show: false,
														
 
															+      },
														
 
															+      columns: {
														
 
															+        keywordText: {
														
 
															+          title: '关键词',
														
 
															+          column: {
														
 
															+            width: '200px',
														
 
															+            fixed: 'left',
														
 
															+            align: 'center',
														
 
															+          },
														
 
															+        },
														
 
															+        state: {
														
 
															+          title: '状态',
														
 
															+          column: {
														
 
															+            width: '100px',
														
 
															+            align: 'center',
														
 
															+          },
														
 
															+        },
														
 
															+        suggestedBid: {
														
 
															+          title: '建议竞价',
														
 
															+          column: {
														
 
															+            width: '100px',
														
 
															+            align: 'center',
														
 
															+          },
														
 
															+        },
														
 
															+        bid: {
														
 
															+          title: '出价',
														
 
															+          column: {
														
 
															+            width: '60px',
														
 
															+            align: 'center',
														
 
															+          },
														
 
															+        },
														
 
															+        // currentBid: {
														
 
															+        //   title: '当前竞价',
														
 
															+        //   column: {
														
 
															+        //     width: '100px',
														
 
															+        //     align: 'center',
														
 
															+        //   },
														
 
															+        // },
														
 
															+        ...BaseColumn,
														
 
															+      },
														
 
															+    },
														
 
															+  }
														
 
															+}
														
--- a/src/views/adManage/sb/campaigns/campaignDetail/adGroups/adGroupDetail/keyword/index.vue
+++ b/src/views/adManage/sb/campaigns/campaignDetail/adGroups/adGroupDetail/keyword/index.vue
@@ -0,0 +1,71 @@
 
															+<template>
														
 
															+  <fs-page class="fs-page-custom">
														
 
															+    <fs-crud ref="crudRef" v-bind="crudBinding">
														
 
															+      <template #search-left>
														
 
															+        <DateRangePicker v-model="dateRange"></DateRangePicker>
														
 
															+      </template>
														
 
															+      <template #header-middle>
														
 
															+        <DataTendencyChart :query="queryParams" :fetch-card="getCardData" :fetch-line="getLineData"> </DataTendencyChart>
														
 
															+      </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>
														
 
															+
														
 
															+<script lang="ts" setup>
														
 
															+import { ref, onMounted, computed, watch, onBeforeMount } from 'vue'
														
 
															+import { useFs, FsPage } from '@fast-crud/fast-crud'
														
 
															+import { createCrudOptions } from './crud'
														
 
															+// import { useShopInfo } from '/@/stores/shopInfo'
														
 
															+import { usePublicData } from '/@/stores/publicData'
														
 
															+import { storeToRefs } from 'pinia'
														
 
															+import { LocationQueryValue } from 'vue-router'
														
 
															+import { BaseColumn } from '/@/views/adManage/utils/commonTabColumn.js'
														
 
															+import DataCompare from '/@/components/dataCompare/index.vue'
														
 
															+import DateRangePicker from '/@/components/DateRangePicker/index.vue'
														
 
															+import {getCardData, getLineData} from '/@/views/adManage/sb/campaigns/campaignDetail/adGroups/adGroupDetail/keyword/api'
														
 
															+import DataTendencyChart from '/@/views/adManage/sp/chartComponents/dataTendency.vue'
														
 
															+
														
 
															+interface Props {
														
 
															+  adGroupId: LocationQueryValue | LocationQueryValue[]
														
 
															+}
														
 
															+const props = defineProps<Props>()
														
 
															+// const shopInfo = useShopInfo()
														
 
															+const publicData = usePublicData()
														
 
															+const { dateRange } = storeToRefs(publicData)
														
 
															+// const { profile } = storeToRefs(shopInfo)
														
 
															+const queryParams = ref({
														
 
															+  adGroupId: props.adGroupId,
														
 
															+  dateRange,
														
 
															+})
														
 
															+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })
														
 
															+const showCompare = ref(false)
														
 
															+
														
 
															+onMounted(async () => {
														
 
															+  crudExpose.doRefresh()
														
 
															+})
														
 
															+watch(
														
 
															+  queryParams,
														
 
															+  async () => {
														
 
															+    crudExpose.doRefresh()
														
 
															+  },
														
 
															+  { deep: true }
														
 
															+)
														
 
															+</script>
														
 
															+
														
 
															+<style scoped></style>
作者	SHA1 メッセージ	日付
WanGxC	7f243627e6 Merge branch 'wang' into test	1 年間前
WanGxC	30a68e889d ✨ feat: 修改logo; 相关bug修复	1 年間前
WanGxC	6a51a4d86d Merge branch 'wang' into test	1 年間前
WanGxC	556bb1c947 ✨ feat: SD新建广告活动: 内容相关投放已完成	1 年間前
WanGxC	7805d19038 ✨ feat:	1 年間前
WanGxC	2bab1f2d8f ✨ feat:	1 年間前
WanGxC	c64be9d675 ✨ feat: 自定义定向--浏览再营销已完成	1 年間前
WanGxC	9c2940fafc ✨ feat: 自定义定向--浏览再营销细化功能完成	1 年間前
WanGxC	c1c1d07f4f 🎈 perf:	1 年間前
WanGxC	52d2632b18 过年前的git	1 年間前
WanGxC	0769532cdc Merge branch 'wang' into test	1 年間前
WanGxC	7deae2dd2b ✨ feat: 新增sb关键词定向; 修复重复调用上传错误;	1 年間前
WanGxC	8e05690587 ✨ feat: 新增sb关键词定向	1 年間前
WanGxC	ed368aedec Merge branch 'wang' into test	1 年間前
WanGxC	061c1424fe ✨ feat: 新增sp新建广告活动-关键词定向	1 年間前
guojing_wu	d47b959496 Merge branch 'test' of http://34.206.75.59:10880/ASJ_ADS/ads_web into test	1 年間前
guojing_wu	798bd4ffef 修改广告活动头部信息	1 年間前
WanGxC	70c1347c57 Merge branch 'wang' into test	1 年間前
WanGxC	92cbe02319 ✨ feat: 新增SD部分功能, 修复SP创建bug	1 年間前
WanGxC	3129e75d9a Merge branch 'wang' into test	1 年間前
WanGxC	7d4ed3f101 ✨ feat: sd新增: 创建广告活动,广告组...	1 年間前
guojing_wu	3eaa9601a3 Merge branch 'test' of http://34.206.75.59:10880/ASJ_ADS/ads_web into test	1 年間前
guojing_wu	2835edc8d4 升级element-plus	1 年間前
WanGxC	12f10ef3d6 Merge branch 'wang' into test	1 年間前
WanGxC	d2d32edce1 ✨ feat: sb新建广告活动基本完成	1 年間前
guojing_wu	7d0f9aab61 ✨ feat: 完善自动化条件参数	1 年間前
WanGxC	94e68a9ef1 Merge branch 'wang' into test	1 年間前
WanGxC	4486df1f90 test	1 年間前
WanGxC	5113447d07 ✨ feat: 新增上传图片和视频接口	1 年間前
guojing_wu	1bfc5f55c7 enum.js改为enum.ts	1 年間前
guojing_wu	f512a4dfe0 fix bug	1 年間前
guojing_wu	416da85aeb 修复自动化竞价和预算	1 年間前
guojing_wu	c6bfa3a0e2 移除baidu埋点	1 年間前
WanGxC	82971f1f9b ✨ feat: 新增SD新建广告活动页面	1 年間前
WanGxC	e1ebed88ec ✨ feat:	1 年間前
guojing_wu	5a0d0cd97f 修复sd否定词组件导入缺失错误	1 年間前
WanGxC	894713b945 ✨ feat: 新增加载动画以及按钮禁用	1 年間前
guojing_wu	0f00bc667d finish auto	1 年間前
WanGxC	7bdda08b7a ✨ feat: 新增添加商品,更换商品功能	1 年間前
WanGxC	ec52cf7785 ✨ feat: 新增商品集下着陆页创意模块从素材库中选择	1 年間前
WanGxC	a7e391cb73 ✨ feat: 新增视频下的创意板块	1 年間前
WanGxC	d76074049c ✨ feat: SB新建活动页面布局	1 年間前
WanGxC	3f6b8edbea ✨ feat: 新增SB新建广告活动-广告组,广告格式	1 年間前
guojing_wu	cae8f36263 Merge branch 'test' of http://34.206.75.59:10880/ASJ_ADS/ads_web into test	1 年間前
guojing_wu	49bd75dc10 add auto-templates	1 年間前
WanGxC	4c28d65a29 Merge branch 'wang' into test	1 年間前
WanGxC	4a1d1fccef ✨ feat: SP新建广告活动大部分完成	1 年間前
WanGxC	4644e8f6ae ✨ feat: 大部分SP新建广告活动,新增SB新建广告活动	1 年間前
WanGxC	4165998f46 ✨ feat: 更改UI布局,接口调用	1 年間前
WanGxC	db55116be3 feat: ✨ SP新建广告活动-细化分类dialog	1 年間前
WanGxC	0a44562fa9 新建广告活动界面	1 年間前
guojing_wu	35e51b0c1a Merge branch 'test' of http://34.206.75.59:10880/ASJ_ADS/ads_web into test	1 年間前
guojing_wu	be5298ddf5 完成分时预算和分时调价组件	1 年間前
WanGxC	03bc6aa469 商品定向	1 年間前
WanGxC	ba118fcb3d 否定商品输入添加商品	1 年間前
WanGxC	d995b41396 否定词,否定商品	1 年間前
WanGxC	56e5e7f502 完善表单校验	1 年間前
WanGxC	86476bd371 表单校验	1 年間前
WanGxC	27fb356b5d SP新建广告活动--商品搜索,添加,删除功能已完成	1 年間前
WanGxC	f853584ec7 新增: 新建广告活动-广告组商品表格添加已选中商品,删除已选中商品功能; 按ASIN和SKU搜索功能;	1 年間前
WanGxC	4c148ada5b 新增: 新建广告活动-广告组内容	1 年間前
WanGxC	83afc93919 新增: SD广告活动详情页; SD广告组详情页	1 年間前
WanGxC	3778737406 新增: SP新建广告活动-广告活动; SD表格数据展示;	1 年間前
WanGxC	1ea8f81418 新增: 展示型推广SD-受众页面	1 年間前
WanGxC	ca46f943a3 新增: 展示型推广SD-商品投放页面	1 年間前
WanGxC	3f00ddcf9a test2.0	1 年間前
WanGxC	38e03c131f 测试	1 年間前
WanGxC	2836b71699 部分样式修改	1 年間前
WanGxC	217dca0dad 新增展示型推广SD-广告活动;修改表格样式以及边框弧度	1 年間前
WanGxC	bf63047117 新增sbgroupdetail/targets页面	1 年間前
WanGxC	8b74157da8 新增sb/groupdetail/ads,keywords,negativekeywords,searchwords页面	1 年間前
WanGxC	57a1313be9 新增品牌推广SB-detail-预算,广告位	1 年間前
WanGxC	a4c7df3fc5 新增品牌推广SB-Detail页面; 修改Detail-head页面	1 年間前
WanGxC	29e9f4ef29 新增广告位页面;页面优化;	1 年間前
WanGxC	6626503528 修改表格数据为0或null时显示'--'	1 年間前
WanGxC	3c9c037b05 新增推广商品SB-商品投放页面;修改布局样式	1 年間前
WanGxC	36879b9968 新增SB数据趋势和广告结构页面;更改部分样式	1 年間前
WanGxC	da9a326fbb 修改表格样式以及新增表头样式	1 年間前
WanGxC	b0f99188d9 Merge branch 'wang' into test	1 年間前
WanGxC	ee3de8049f 新增广告总览页面数据展示	1 年間前
WanGxC	0a9aea5b55 新增广告总览:总览页面	1 年間前
guojing_wu	08be276546 SP补全日周月曲线图	1 年間前
guojing_wu	26b8a9b1f3 demo	1 年間前
guojing_wu	01423356c4 完成广告组详情的定向、否定版块	1 年間前
WanGxC	8765f52888 Merge branch 'wang' into test	1 年間前
WanGxC	29e271636b 修改tab样式	1 年間前
guojing_wu	2f0cf7cf10 完成广告组详情的推广商品和搜索词	1 年間前
WanGxC	c37e742576 Merge branch 'test' into wang	1 年間前
WanGxC	c0430c5ecb 新增广告总览页面	1 年間前
guojing_wu	00528b6786 完善单个广告活动信息展示	1 年間前
guojing_wu	d0e099622d 数据对比组件进一步封装	1 年間前
guojing_wu	8ab710e2ba 调整广告组和广告版块的路径	1 年間前
WanGxC	55ef4a114e 同步修改	1 年間前
WanGxC	336b10531f 同步数据趋势图分离查询参数	1 年間前
WanGxC	8a2881a10d Merge branch 'wang' into test	1 年間前
WanGxC	a7994f8530 请求参数修改	1 年間前
guojing_wu	eb78d61056 数据趋势图分离查询参数	1 年間前
guojing_wu	c4eaba619b 修复日期选择后返回天数据问题；设置本地化时间格式	1 年間前
guojing_wu	69a0c35fa8 修复日月周切换问题	1 年間前
guojing_wu	b119e88dfc 广告活动、购买的其它商品、搜索词i添加周和月统计数据	1 年間前
guojing_wu	752a35b820 Merge branch 'test' of http://34.206.75.59:10880/ASJ_ADS/ads_web into test	1 年間前
guojing_wu	66065af443 数据趋势添加周月筛选	1 年間前
WanGxC	88581ef4be 合并代码	1 年間前
WanGxC	3660b9cd60 Merge branch 'wang' into test	1 年間前
WanGxC	d5776a2430 新增广告位,优化样式	1 年間前
guojing_wu	c49d006eb5 完成搜索词和购买其它商品	1 年間前
WanGxC	437ba6a66f 新增推广商品页面;修改封装点击下拉框方法;添加下拉框以及柱状图x轴映射关系;	1 年間前
guojing_wu	9a6f154729 广告活动添加数据对比；组件化数据趋势图	1 年間前
WanGxC	bc18d65bc1 Merge branch 'test' into wang	1 年間前
WanGxC	fb37f99c54 修改图表部分样式;	1 年間前
guojing_wu	8852c57ffe sp版块命名	1 年間前
guojing_wu	b8d4dd56ef tabs改为动态渲染	1 年間前
WanGxC	a2cf16b646 Merge branch 'wang' into test	1 年間前
guojing_wu	d43f0a8c24 广告活动添加时间联动功能	1 年間前
WanGxC	e1738cab1d 修改图表部分样式;封装禁用下拉框方法;	1 年間前
guojing_wu	d0342c92b0 修复图标resize报错问题	1 年間前
guojing_wu	95562f1081 调换change-metric的值顺序	1 年間前
WanGxC	fef39e915e Merge remote-tracking branch 'origin/test' into test	1 年間前
WanGxC	f3a49866f7 完成关键词-数据趋势的数据展示和广告结构的数据展示;	1 年間前
guojing_wu	5e281c97b5 修复路由参数类型	1 年間前
guojing_wu	5158f8eb4a Merge branch 'test' of http://34.206.75.59:10880/ASJ_ADS/ads_web into test	1 年間前
guojing_wu	6c6afdba04 完成sp单个广告活动的广告位	1 年間前
WanGxC	c68843b3f7 完成广告活动-广告结构页面开发;修改mCard组件和TextSelector的@change暴露的newVal和oldVal顺序	1 年間前
WanGxC	9d316a894d Merge remote-tracking branch 'origin/test' into test	1 年間前
WanGxC	6723faf96f 完成广告活动-广告结构页面开发;修改mCard组件和TextSelector的@change暴露的newVal和oldVal顺序	1 年間前
WanGxC	ff9f018fa7 完成广告活动-广告结构页面开发;修改mCard组件和TextSelector的@change暴露的newVal和oldVal顺序	1 年間前
guojing_wu	9e5e11963c 完成指标曲线图	1 年間前
WanGxC	f38e2dd964 Merge branch 'wang' into test	1 年間前
WanGxC	8582df7929 Merge remote-tracking branch 'origin/test' into test	1 年間前
guojing_wu	1dad2dae82 完成SP广告活动指标曲线展示	1 年間前
WanGxC	c1922fe863 test git	1 年間前
WanGxC	1b7e86f907 修改SB样式	1 年間前
guojing_wu	3609e5d250 添加全局样式chart-tabs	1 年間前
WanGxC	76a11d5679 Merge branch 'test' into wang	1 年間前
WanGxC	3c2002d6c5 更新部分组件样式	1 年間前
guojing_wu	961bd00a66 统一样式	1 年間前
WanGxC	f18725ab77 更新部分组件和页面	1 年間前
WanGxC	3e3311e217 更新部分组件和页面	1 年間前
WanGxC	b2eb6964c0 Merge branch 'wang' into test	1 年間前
WanGxC	324125ccfa 更新部分组件和页面	1 年間前
guojing_wu	a45ba27f3c Merge branch 'test' of http://34.206.75.59:10880/ASJ_ADS/ads_web into test	1 年間前
WanGxC	b6e89472d1 Merge branch 'wang' of ASJ_ADS/ads_web into test	1 年間前
WanGxC	18bdf83793 Merge branch 'wang' of ASJ_ADS/ads_web into test	1 年間前