新增广告总览页面

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>
 

src/theme/app.scss

@@ -338,7 +338,7 @@ body,
   top: 32px;
   z-index: 9;
   box-shadow: 0px 0px 12px rgba(51,89,181,0.16);
-	
+
 	padding: 0 12px;
 	display: flex;
 	height: 40px;

src/views/adManage/ad-overview/index.vue

@@ -0,0 +1,787 @@
+<template>
+  <div class="asj-container">
+    <div class="public-search">
+      <DateRangePicker v-model="dateRange"></DateRangePicker>
+    </div>
+    <div class="container-main">
+      <!--<div class="top-car" style="display: flex; justify-content: space-around">-->
+      <!--  <ShowCard :cardData="cardData"></ShowCard>-->
+      <!--  <ShowCard :cardData="cardData" style="margin: 0 5px"></ShowCard>-->
+      <!--  <ShowCard :cardData="cardData" style="margin-right: 5px;"></ShowCard>-->
+      <!--  <ShowCard :cardData="cardData"></ShowCard>-->
+      <!--</div>-->
+
+      <!-- 不要删除这个类 -->
+      <div class="home-container">
+        <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">
+                    {{ v.compareNum }}
+                  </div>
+                  <el-icon :style="{ color: v.num2.includes('-') ? '#59b939' : '#e36f53' }" style="display: inline-block; padding-top: 2px">
+                    <template v-if="v.num2.includes('-')" style="line-height: 25px;">
+                      <Top/>
+                    </template>
+                    <template v-else>
+                      <Bottom/>
+                    </template>
+                  </el-icon>
+                  <span class="ml5 font16" :style="{ color: 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>
+            <div style="height: 350px;" ref="chartRefAcos"></div>
+          </el-card>
+        </el-col>
+        <el-col :span="12">
+          <el-card>
+            <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>
+            <div style="height: 350px;" ref="chartRefTotalPurchases"></div>
+          </el-card>
+        </el-col>
+        <el-col :span="12">
+          <el-card>
+            <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 {onBeforeMount, onMounted, provide, reactive, ref} from 'vue'
+import * as echarts from 'echarts'
+import {useShopInfo} from '/@/stores/shopInfo'
+import {usePublicData} from '/@/stores/publicData'
+import {storeToRefs} from 'pinia'
+import DateRangePicker from '/@/components/DateRangePicker/index.vue'
+
+const shopInfo = useShopInfo()
+const publicData = usePublicData()
+const {dateRange} = storeToRefs(publicData)
+const tabActiveName = ref('Campaigns')
+provide('dateRange', dateRange)
+
+// 卡片相关功能
+const state = reactive({
+  homeOne: [
+    {
+      num1: '125,12',
+      compareNum: '140,23',
+      num2: '-12.32',
+      cardTitle: '订单统计信息',
+      num4: 'fa fa-meetup',
+      // color1: '#FF6462',
+      color2: '--next-color-primary-lighter',
+      color3: '--el-color-primary',
+    },
+    {
+      num1: '653,33',
+      compareNum: '1000,23',
+      num2: '-42.32',
+      cardTitle: '月度计划信息',
+      num4: 'iconfont icon-ditu',
+      color2: '--next-color-success-lighter',
+      color3: '--el-color-success',
+    },
+    {
+      num1: '125,65',
+      compareNum: '140,23',
+      num2: '17.32',
+      cardTitle: '年度计划信息',
+      num4: 'iconfont icon-zaosheng',
+      color2: '--next-color-warning-lighter',
+      color3: '--el-color-warning',
+    },
+    {
+      num1: '520,43',
+      compareNum: '590,23',
+      num2: '10.23',
+      cardTitle: '访问统计信息',
+      num4: 'fa fa-github-alt',
+      color2: '--next-color-danger-lighter',
+      color3: '--el-color-danger',
+    },
+  ],
+
+  myCharts: [],
+  charts: {
+    theme: '',
+    bgColor: '',
+    color: '#303133',
+  },
+})
+
+let cardData = reactive({
+  cardTitle: '花费',
+  cardMiddle: 123,
+  cardBottom: 1123,
+  cardBottomRight: 12
+})
+
+// 接收一个newData对象，更新cardData
+function updateCardData(newData) {
+  for (const key in newData) {
+    if (cardData.hasOwnProperty(key)) {
+      cardData[key] = newData[key]
+    }
+  }
+}
+
+function changeCardData() {
+  updateCardData({
+    cardTitle: '新销量',
+    cardMiddle: 50,
+    cardBottom: 60,
+    cardBottomRight: 70
+  })
+}
+
+
+// 折线图相关功能
+const loading = ref(true)
+const chartRefOne = ref()
+let chartObjOne
+const option = {
+  title: {text: '花费 & 销售额'},
+  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,
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+  },
+  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,
+      data: [820, 932, 901, 934, 1290, 1330, 1320],
+      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.5, color: 'rgba(58, 131, 247, 0.2)' // 中间更透明
+          }, {
+            offset: 1, color: 'rgba(58, 131, 247, 0)' // 底部完全透明
+          }],
+          global: false // 缺省为 false
+        }
+      }
+    },
+    {
+      name: '销售额',
+      yAxisIndex: 1,
+      data: [220, 182, 191, 234, 290, 330, 310],
+      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.5, 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'},
+  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,
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+  },
+  yAxis: [
+    {
+      type: 'value',
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#3a83f7'
+        }
+      }
+    }
+  ],
+  series: [
+    {
+      name: 'Acos',
+      yAxisIndex: 0,
+      data: [820, 932, 901, 934, 1290, 1330, 1320],
+      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.5, 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: '点击成本 & 点击率'},
+  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,
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+  },
+  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,
+      data: [820, 932, 901, 934, 1290, 1330, 1320],
+      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.5, color: 'rgba(58, 131, 247, 0.2)' // 中间更透明
+          }, {
+            offset: 1, color: 'rgba(58, 131, 247, 0)' // 底部完全透明
+          }],
+          global: false // 缺省为 false
+        }
+      }
+    },
+    {
+      name: '点击率',
+      yAxisIndex: 1,
+      data: [220, 182, 191, 234, 290, 330, 310],
+      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.5, 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: '订单数'},
+  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,
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+  },
+  yAxis: [
+    {
+      type: 'value',
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#3a83f7'
+        }
+      }
+    }
+  ],
+  series: [
+    {
+      name: '订单数',
+      yAxisIndex: 0,
+      data: [820, 932, 901, 934, 1290, 1330, 1320],
+      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.5, 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: '曝光量 & 点击量'},
+  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,
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+  },
+  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,
+      data: [820, 932, 901, 934, 1290, 1330, 1320],
+      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.5, color: 'rgba(58, 131, 247, 0.2)' // 中间更透明
+          }, {
+            offset: 1, color: 'rgba(58, 131, 247, 0)' // 底部完全透明
+          }],
+          global: false // 缺省为 false
+        }
+      }
+    },
+    {
+      name: '点击量',
+      yAxisIndex: 1,
+      data: [220, 182, 191, 234, 290, 330, 310],
+      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.5, color: 'rgba(241, 154, 55, 0.2)' // 中间更透明
+          }, {
+            offset: 1, color: 'rgba(241, 154, 55, 0)' // 底部完全透明
+          }],
+          global: false // 缺省为 false
+        }
+      }
+    },
+  ]
+}
+
+
+const initLine = async () => {
+  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)
+  // const items = await getDataset()
+  // option.dataset.source = items
+  chartObjOne.setOption(option)
+  chartObjAcos.setOption(option2)
+  chartObjCPCandCTR.setOption(option3)
+  chartObjTotalPurchases.setOption(option4)
+  chartObjImpandCli.setOption(option5)
+  loading.value = false
+}
+
+function resizeChart() {
+  chartObjOne.resize()
+  chartObjAcos.resize()
+  chartObjCPCandCTR.resize()
+  chartObjTotalPurchases.resize()
+  chartObjImpandCli.resize()
+}
+
+onMounted(async () => {
+  await initLine()
+  window.addEventListener('resize', resizeChart)  // 监听窗口大小变化，调整图表大小
+  setTimeout(() => {
+    resizeChart()
+  }, 0)
+})
+
+onBeforeMount(async () => {
+
+})
+
+</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;
+}
+</style>

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

@@ -28,8 +28,7 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
   return {
     crudOptions: {
       table: {
-        height: 800,
-        border: false
+        height: 800
       },
       container: {
         fixedHeight: false