更新部分组件样式

src/components/echartsComponents/BarLineChart.vue

@@ -1,15 +1,16 @@
 <template>
     <div id="barLine" ref="barLine" style="height: 400px;"></div>
+
 </template>
 
 <script>
-import { onMounted, onBeforeUnmount, ref, defineExpose  } from 'vue'
+import { onMounted, onBeforeUnmount, ref } from 'vue'
 import * as echarts from 'echarts'
 
 export default {
     props: ['barLineData'],
 
-    setup(props, context) {
+    setup(props) {
         let lineChart = ref()
 
         onMounted(() => {
@@ -41,13 +42,13 @@ export default {
                     }
                 },
                 // legend: {data: ['数据1', '数据2'], right: '50%',left: '50%'},
-                toolbox: {
-                    feature: {
-                        saveAsImage: { yAxisIndex: 'none' }
-                    }
-                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: { yAxisIndex: 'none' }
+                //     }
+                // },
                 grid: {
-                    top: 70, right: 150, bottom: 30, left: 55,
+                    top: 50, right: 150, bottom: 30, left: 55,
 
                 },
                 xAxis: [
@@ -66,6 +67,9 @@ export default {
                         },
                         axisLabel: {
                             formatter: '{value} 单位1'
+                        },
+                        axisLine: {
+                            show: true
                         }
                     },
                     {
@@ -77,18 +81,24 @@ export default {
                         },
                         axisLabel: {
                             formatter: '{value} 单位2'
+                        },
+                        axisLine: {
+                            show: true
                         }
                     },
                     {
                         type: 'value',
                         position: 'right',
-                        offset: 100,
+                        offset: 80,
                         name: '订单数',
                         splitLine: {
                             show: false
                         },
                         axisLabel: {
-                            formatter: '{value} 单位2'
+                            formatter: '{value} 单位3'
+                        },
+                        axisLine: {
+                            show: true
                         }
                     }
                 ],
@@ -103,7 +113,7 @@ export default {
                         // },
                         barWidth: '30%',
                         data: chartData.barData,
-                        yAxisIndex: 1,
+                        yAxisIndex: 0,
                         itemStyle: {
                             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                 { offset: 0, color: 'rgba(111, 209, 206, 0.8)' },
@@ -120,7 +130,7 @@ export default {
                         symbol: 'circle',
                         smooth: true,
                         data: chartData.yData1,
-                        yAxisIndex: 0,
+                        yAxisIndex: 1,
                         lineStyle: { color: '#fe9a8b' },
                         itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' },
                         areaStyle: {
@@ -137,7 +147,7 @@ export default {
                         symbol: 'circle',
                         smooth: true,
                         data: chartData.yData2,
-                        yAxisIndex: 1,
+                        yAxisIndex: 2,
                         lineStyle: { color: '#9E87FF' },
                         itemStyle: { color: '#9E87FF', borderColor: '#9E87FF' },
                         areaStyle: {

src/components/echartsComponents/PieBarChart.vue

@@ -70,6 +70,9 @@ function setChartData() {
                 name: '数据1',
                 axisLabel: {
                     formatter: '{value} 单位1'
+                },
+                axisLine: {
+                    show: true
                 }
             },
             {
@@ -80,6 +83,9 @@ function setChartData() {
                 },
                 axisLabel: {
                     formatter: '{value} 单位2'
+                },
+                axisLine: {
+                    show: true
                 }
             }
         ],

src/components/echartsComponents/ScatterChart.vue

@@ -20,6 +20,11 @@ onMounted(() => {
 onBeforeUnmount(() => {
     window.removeEventListener('resize', resizeChart)   // 在组件销毁前移除事件监听，避免内存泄漏
 })
+const props = defineProps({
+    scatterData: {
+        type: Object,
+    }
+})
 
 function setChartData() {
     const option = {
@@ -28,30 +33,7 @@ function setChartData() {
         series: [
             {
                 symbolSize: 20,
-                data: [
-                    [10.0, 8.04],
-                    [8.07, 6.95],
-                    [13.0, 7.58],
-                    [9.05, 8.81],
-                    [11.0, 8.33],
-                    [14.0, 7.66],
-                    [13.4, 6.81],
-                    [10.0, 6.33],
-                    [14.0, 8.96],
-                    [12.5, 6.82],
-                    [9.15, 7.2],
-                    [11.5, 7.2],
-                    [3.03, 4.23],
-                    [12.2, 7.83],
-                    [2.02, 4.47],
-                    [1.05, 3.33],
-                    [4.05, 4.96],
-                    [6.03, 7.24],
-                    [12.0, 6.26],
-                    [12.0, 8.84],
-                    [7.08, 5.82],
-                    [5.02, 5.68]
-                ],
+                data: props.scatterData,
                 type: 'scatter'
             }
         ]

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

@@ -129,9 +129,9 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
                 state: {
                     title: '状态'
                 },
-                state: {
-                    title: '竞价'
-                },
+                // state: {
+                //     title: '竞价'
+                // },
                 startDate: {
                     title: '开始日期'
                 },

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

@@ -2,17 +2,27 @@
     <fs-page class="fs-page-custom">
         <fs-crud ref="crudRef" v-bind="crudBinding">
             <template #header-middle>
-                <el-card style="height: 500px;margin-bottom: 5px;" shadow="hover">
+                <el-card style="height: 680px;margin-bottom: 5px;" shadow="hover">
 
                     <!--<line-chart :chartData="chartData"/>-->
                     <el-tabs type="border-card" @click="clickFn">
                         <el-tab-pane label="数据趋势">
+                            <MetricsCards v-model="metrics" :metric-items="options" @change="changeMetric"></MetricsCards>
+                            <div style="display: flex; justify-content: flex-end">
+                                <el-button-group class="ml-4" style="margin-top: 10px; margin-right: 30px">
+                                    <el-button type="primary">日</el-button>
+                                    <el-button type="primary">周</el-button>
+                                    <el-button type="primary">月</el-button>
+                                </el-button-group>
+                            </div>
                             <BarLineChart ref="barLine" :barLineData="barLineData"/>
                         </el-tab-pane>
                         <el-tab-pane label="广告结构">
                             <PieBarChart ref="pieBar"/>
                         </el-tab-pane>
-                        <el-tab-pane label="散点透视"><ScatterChart ref="scatter"/></el-tab-pane>
+                        <el-tab-pane label="散点透视">
+                            <ScatterChart ref="scatter" :scatterData="scatterData"/>
+                        </el-tab-pane>
                     </el-tabs>
                 </el-card>
 
@@ -22,16 +32,15 @@
 </template>
 
 <script setup>
-import {ref, onMounted, reactive} from 'vue'
-import {useFs, FsPage} from '@fast-crud/fast-crud'
-import {createCrudOptions} from './crud'
+import { ref, onMounted, reactive } from 'vue'
+import { useFs, FsPage } from '@fast-crud/fast-crud'
+import { createCrudOptions } from './crud'
 import BarLineChart from '/@/components/echartsComponents/BarLineChart.vue'
 import PieBarChart from '/@/components/echartsComponents/PieBarChart.vue'
 import ScatterChart from '/@/components/echartsComponents/ScatterChart.vue'
+import MetricsCards from "/@/components/MetricsCards/index.vue"
 
-
-const {crudBinding, crudRef, crudExpose} = useFs({createCrudOptions, context: {}})
-
+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: {} })
 
 let barLineData = reactive({
     xData: ['2023-10-18', '2023-10-19', '2023-10-20', '2023-10-21', '2023-10-22', '2023-10-23', '2023-10-24'],
@@ -40,6 +49,31 @@ let barLineData = reactive({
     yData2: [14, 15, 12, 16, 15, 13, 14.5]
 })
 
+let scatterData = [
+    [10.0, 8.04],
+    [8.07, 6.95],
+    [13.0, 7.58],
+    [9.05, 8.81],
+    [11.0, 8.33],
+    [14.0, 7.66],
+    [13.4, 6.81],
+    [10.0, 6.33],
+    [14.0, 8.96],
+    [12.5, 6.82],
+    [9.15, 7.2],
+    [11.5, 7.2],
+    [3.03, 4.23],
+    [12.2, 7.83],
+    [2.02, 4.47],
+    [1.05, 3.33],
+    [4.05, 4.96],
+    [6.03, 7.24],
+    [12.0, 6.26],
+    [12.0, 8.84],
+    [7.08, 5.82],
+    [5.02, 5.68]
+]
+
 onMounted(() => {
     crudExpose.doRefresh()
 })
@@ -54,6 +88,23 @@ function clickFn() {
     scatter.value.resizeChart()
 }
 
+const metrics = ref([{ metric: 'ACOS', color: 'blue' }])
+const options = ref([
+    { label: 'ACOS', value: 'ACOS', metricVal: "18.00%", preVal: '20.15%', gapVal: '-2.00%', disabled: true },
+    { label: '点击量', value: 'clicks', metricVal: "19.00%", preVal: '20.15%', gapVal: '-1.00%', disabled: true },
+    { label: '曝光量', value: 'impression', metricVal: "20.00%", preVal: '15.00%', gapVal: '5.00%', disabled: true },
+    { label: '转化率1', value: 'rate1', metricVal: "1.00%", preVal: '15.00%', gapVal: '5.00%', disabled: true },
+    { label: '转化率2', value: 'rate2', metricVal: "2.00%", preVal: '15.00%', gapVal: '5.00%', disabled: true },
+    { label: '转化率3', value: 'rate3', metricVal: "3.00%", preVal: '15.00%', gapVal: '5.00%', disabled: true },
+    { label: '转化率4', value: 'rate4', metricVal: "4.00%", preVal: '15.00%', gapVal: '5.00%' },
+    { label: '转化率5', value: 'rate5', metricVal: "5.00%", preVal: '15.00%', gapVal: '5.00%' },
+    { label: '转化率6', value: 'rate6', metricVal: "6.00%", preVal: '15.00%', gapVal: '5.00%' },
+])
+
+function changeMetric() {
+    console.log(metrics.value)
+}
+
 </script>
 
 <style scoped>

src/views/adManage/sb/index.vue

@@ -46,6 +46,7 @@ function changeDateRange(val: string[]) {
     }
 
     ::v-deep(.el-tabs__header) {
+
         background-color: #fff;
         position: sticky;
         box-shadow: 0 0 12px rgba(51, 89, 181, 0.16);