新增双折线图组件；柱线图组件；动态卡片组件

src/components/cardComponents/dynamicCard.vue

@@ -1,67 +1,68 @@
 <template>
-  <div>
-    <el-row>
-      <el-col :span="6">
-        <el-card :body-style="{ padding: '0px' }" @click="changeFn">
-          <div style="display: flex; align-items: center;">
-            <div>
-              <div>
-                <el-select v-model="value" placeholder="Select" size="small">
-                  <el-option
-                      v-for="item in options"
-                      :key="item.value"
-                      :label="item.label"
-                      :value="item.value"
-                      :disabled="item.disabled"
-                  />
-                </el-select>
-              </div>
-              <!--<div style="color:#909399;margin-left: 8px">{{ color }}</div>-->
-              <div style="font-weight: bold;font-size: large;margin-left: 8px">{{ cardMiddle }}</div>
-              <div style="margin-left: 8px">
-                <span style="color:#909399;">{{ cardBottom }}</span> ⬇️
-                <span style="color:orangered;">{{ `${ cardBottomRight }%` }}</span>
-              </div>
-            </div>
-          </div>
-        </el-card>
-      </el-col>
-    </el-row>
-  </div>
+    <div>
+        <el-row>
+            <el-col :span="6">
+                <el-card :body-style="{ padding: '0px' }" @click="changeFn">
+                    <div style="display: flex; align-items: center;">
+                        <div>
+                            <div>
+                                <el-select v-model="value" placeholder="Select" size="small">
+                                    <el-option
+                                            v-for="item in options"
+                                            :key="item.value"
+                                            :label="item.label"
+                                            :value="item.value"
+                                            :disabled="item.disabled"
+                                    />
+                                </el-select>
+                            </div>
+                            <!--<div style="color:#909399;margin-left: 8px">{{ color }}</div>-->
+                            <div style="font-weight: bold;font-size: large;margin-left: 8px">{{ cardMiddle }}</div>
+                            <div style="margin-left: 8px">
+                                <span style="color:#909399;">{{ cardBottom }}</span> ⬇️
+                                <span style="color:orangered;">{{ `${ cardBottomRight }%` }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </el-card>
+            </el-col>
+        </el-row>
+    </div>
 </template>
 
 <script>
 import { ref, toRefs, computed, reactive } from 'vue'
 
 export default {
-  props: ['dynamicCardData', 'selectOptions'],
-  emits: ['change'],
+    props: ['dynamicCardData', 'selectOptions'],
+    emits: ['change'],
 
-  setup(props, context) {
-    // 父组件传递的卡片数据
-    let cardData = props.dynamicCardData
-    // 父组件传递的下拉框数据
-    let selectOptions = props.selectOptions
-    // el-selection配置
-    const value = ref('')
-    const options = selectOptions
+    setup(props, context) {
+        // 父组件传递的卡片数据
+        let cardData = props.dynamicCardData
+        // 父组件传递的下拉框数据
+        let selectOptions = props.selectOptions
+        // el-selection配置
+        const value = ref('')
+        const options = selectOptions
 
-    // todo 抛出点击后切换显示图线的方法
-    let status = true
-    function changeFn() {
-      status = !status
-      context.emit('change', status)
-    }
+        // todo 抛出点击后切换显示图线的方法
+        let status = true
+
+        function changeFn() {
+            status = !status
+            context.emit('change', status)
+        }
 
-    return {
-      cardData,
-      ...toRefs(cardData),
-      selectOptions,
-      value,
-      options,
-      changeFn
+        return {
+            cardData,
+            ...toRefs(cardData),
+            selectOptions,
+            value,
+            options,
+            changeFn
+        }
     }
-  }
 }
 
 

src/components/echartsComponents/BarLineChart.vue

@@ -0,0 +1,178 @@
+<template>
+    <div id="barLine" ref="barLine" style="height: 400px;"></div>
+</template>
+
+<script>
+import { onMounted, onBeforeUnmount, ref, } from 'vue'
+import * as echarts from 'echarts'
+
+export default {
+    props: ['barLineData'],
+
+    setup(props, context) {
+        let lineChart = ref()
+
+        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,
+                // },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'cross',
+                        label: {
+                            backgroundColor: '#6a7985'
+                        }
+                    }
+                },
+                // legend: {data: ['数据1', '数据2'], right: '50%',left: '50%'},
+                toolbox: {
+                    feature: {
+                        saveAsImage: { yAxisIndex: 'none' }
+                    }
+                },
+                grid: {
+                    top: 70, right: 60, bottom: 30, left: 55,
+
+                },
+                xAxis: [
+                    {
+                        type: 'category',
+                        boundaryGap: true,
+                        data: chartData.xData,
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: 'value',
+                        // name: yTitle1,
+                        splitLine: {
+                            show: true // 设置显示分割线
+                        },
+                        axisLabel: {
+                            formatter: '{value} 单位1'
+                        }
+                    },
+                    {
+                        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(108,80,243,0.3)' },
+                                { offset: 1, color: 'rgba(108,80,243,0)' },
+                            ]),
+                            //柱状图圆角
+                            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)
+        }
+
+        // 自适应调整窗口
+        function resizeChart() {
+            if (lineChart) {
+                lineChart.resize()
+            }
+        }
+
+        return {}
+    },
+
+}
+
+
+</script>
+
+<style>
+</style>

src/components/echartsComponents/LineChart.vue

@@ -1,19 +1,18 @@
 <template>
-  <div>
-    <el-row :gutter="5">
-      <el-col :span="14">
-        <el-card>
-          <div id="main" ref="line" style="height: 400px;"></div>
-        </el-card>
-      </el-col>
-      <el-col :span="10">
-        <el-card>
-          <div class="grid-content ep-bg-purple-light" style="background-color:#9b9da1; height: 400px;">占个位置</div>
-          <el-button type="primary" @click="changeFn">更改数据</el-button>
-        </el-card>
-      </el-col>
-    </el-row>
-  </div>
+    <div>
+        <el-row :gutter="5">
+            <el-col :span="14">
+                <el-card>
+                    <div id="main" ref="line" style="height: 400px;"></div>
+                </el-card>
+            </el-col>
+            <el-col :span="10">
+                <el-card>
+                    <div class="grid-content ep-bg-purple-light" style="background-color:#9b9da1; height: 400px;">占个位置</div>
+                </el-card>
+            </el-col>
+        </el-row>
+    </div>
 </template>
 
 <script>
@@ -21,151 +20,147 @@ import { onMounted, onBeforeUnmount, ref, } from 'vue'
 import * as echarts from 'echarts'
 
 export default {
-  props: ['chartData'],
-  emits: ['change'],
+    props: ['chartData'],
 
-  setup(props, context) {
-    let lineChart = ref()
-    onMounted(() => {
-      lineChart = echarts.init(document.getElementById('main'))
-      updateChart()
-      resizeChart()
-      window.addEventListener('resize', resizeChart)  // 监听窗口大小变化，调整图表大小
-    })
-    onBeforeUnmount(() => {
-      window.removeEventListener('resize', resizeChart)   // 在组件销毁前移除事件监听，避免内存泄漏
-    })
-    // 获取图像数据 lieChartData
-    let lieChartData = props.chartData
-    function updateChart() {
-      const option = {
-        title: {
-          text: props.chartData.title,
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'cross',
-            label: {
-              backgroundColor: '#6a7985'
-            }
-          }
-        },
-        // legend: {data: ['数据1', '数据2'], right: '50%',left: '50%'},
-        toolbox: {
-          feature: {
-            saveAsImage: { yAxisIndex: 'none' }
-          }
-        },
-        grid: {
-          top: 70, right: 60, bottom: 30, left: 55,
-        },
-        xAxis: [
-          {
-            type: 'category',
-            boundaryGap: false,
-            data: lieChartData.xData
-          }
-        ],
-        yAxis: [
-          {
-            type: 'value',
-            // name: yTitle1,
-            splitLine: {
-              show: true // 设置显示分割线
-            },
-            axisLabel: {
-              formatter: '{value} 单位1'
+    setup(props, context) {
+        let lineChart = ref()
+        let line  = ref()
+        onMounted(() => {
+            lineChart = echarts.init(document.getElementById('main'))
+            updateChart()
+            // updateChart()
+            setTimeout(()=>{
+                resizeChart()
+            }, 0)
+
+            window.addEventListener('resize', resizeChart)  // 监听窗口大小变化，调整图表大小
+        })
+        onBeforeUnmount(() => {
+            window.removeEventListener('resize', resizeChart)   // 在组件销毁前移除事件监听，避免内存泄漏
+        })
+        // 获取图像数据 lieChartData
+        let lieChartData = props.chartData
+        console.log('lieChartData', lieChartData)
+        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: 70, right: 60, bottom: 30, left: 55,
+                },
+                xAxis: [
+                    {
+                        type: 'category',
+                        boundaryGap: false,
+                        data: lieChartData.xData
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: 'value',
+                        // name: yTitle1,
+                        splitLine: {
+                            show: true // 设置显示分割线
+                        },
+                        axisLabel: {
+                            formatter: '{value} 单位1'
+                        }
+                    },
+                    {
+                        type: 'value',
+                        // name: yTitle2,
+                        splitLine: {
+                            show: false
+                        },
+                        axisLabel: {
+                            formatter: '{value} 单位2'
+                        }
+                    }
+                ],
+                series: [
+                    {
+                        name: '数据1',
+                        type: 'line',
+                        symbolSize: 6,
+                        symbol: 'circle',
+                        smooth: true,
+                        data: lieChartData.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: lieChartData.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,
+                            },
+                        },
+                    },
+                ],
             }
-          },
-          {
-            type: 'value',
-            // name: yTitle2,
-            splitLine: {
-              show: false
-            },
-            axisLabel: {
-              formatter: '{value} 单位2'
+            lineChart.setOption(option)
+        }
+
+        // 自适应调整窗口
+        function resizeChart() {
+            if (lineChart) {
+                lineChart.resize()
             }
-          }
-        ],
-        series: [
-          {
-            name: '数据1',
-            type: 'line',
-            symbolSize: 6,
-            symbol: 'circle',
-            smooth: true,
-            data: lieChartData.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: lieChartData.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)
-    }
-    // 自适应调整窗口
-    function resizeChart() {
-      if (lineChart) {
-        lineChart.resize()
-      }
-    }
+        }
 
-    function changeFn() {
-      context.emit('change')
-      console.log(lieChartData.yData1)
-      updateChart()
+        return {  }
     }
-
-    return {changeFn}
-  }
 }
 
-
 // let props = defineProps({
 //     chartData: {
 //         type: Object,

src/router/route.ts

@@ -45,7 +45,15 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
 			isIframe: false,
 			icon: 'iconfont icon-gerenzhongxin',
 		},
-	}
+	},
+	{
+		path: '/createcampaigns',
+		name: 'createcampaigns',
+		component: () => import('/@/views/adManage/sb/campaigns/CreateCampaigns/index.vue'),
+		meta: {
+			title: '新建广告活动',
+		},
+	},
 ];
 
 /**

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

@@ -0,0 +1,186 @@
+<template>
+    <!--<p>新建广告页面</p>-->
+    <el-card style="margin: 5px">
+        <p style="font-size: 19px; font-weight: bold">设置</p>
+        <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 label="广告活动名称" prop="name">
+                    <el-input v-model="ruleForm.name" />
+                </el-form-item>
+                <el-form-item label="广告组合" prop="region">
+                    <el-select v-model="ruleForm.region" placeholder="Activity zone">
+                        <el-option label="Zone one" value="shanghai" />
+                        <el-option label="Zone two" value="beijing" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="预算" prop="count">
+                    <el-select-v2
+                            v-model="ruleForm.count"
+                            placeholder="Activity count"
+                            :options="options"
+                    />
+                </el-form-item>
+                <el-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="Pick a date"
+                                    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 time"
+                                    placeholder="Pick a time"
+                                    style="width: 100%"
+                            />
+                        </el-form-item>
+                    </el-col>
+                </el-form-item>
+                <el-form-item label="自动竞价" prop="delivery" @click.prevent>
+                    <el-switch v-model="ruleForm.delivery"/>
+                    <span style="margin-left: 5px; 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>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import type { FormInstance, FormRules, FormProps } from 'element-plus'
+
+interface RuleForm {
+    name: string
+    region: string
+    count: string
+    date1: string
+    date2: string
+    delivery: boolean
+    type: string[]
+    resource: string
+    desc: string
+}
+
+const formSize = ref('default')
+const ruleFormRef = ref<FormInstance>()
+const ruleForm = reactive<RuleForm>({
+    name: 'Hello',
+    region: '',
+    count: '',
+    date1: '',
+    date2: '',
+    delivery: false,
+    type: [],
+    resource: '',
+    desc: '',
+})
+
+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' },
+    ],
+    region: [
+        {
+            required: true,
+            message: 'Please select Activity zone',
+            trigger: 'change',
+        },
+    ],
+    count: [
+        {
+            required: true,
+            message: 'Please select Activity count',
+            trigger: 'change',
+        },
+    ],
+    date1: [
+        {
+            type: 'date',
+            required: true,
+            message: 'Please pick a date',
+            trigger: 'change',
+        },
+    ],
+    date2: [
+        {
+            type: 'date',
+            required: true,
+            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' },
+    ],
+})
+
+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 resetForm = (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+    formEl.resetFields()
+}
+
+const options = Array.from({ length: 10000 }).map((_, idx) => ({
+    value: `${idx + 1}`,
+    label: `${idx + 1}`,
+}))
+
+const labelPosition = ref<FormProps['labelPosition']>('top')
+
+</script>
+
+<style scoped>
+</style>

src/views/adManage/sb/campaigns/api.ts

@@ -0,0 +1,42 @@
+import { request } from '/@/utils/service';
+import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
+import XEUtils from 'xe-utils';
+
+export const apiPrefix = '/api/ad_manage/spCampaigns/';
+export function GetList(query: PageQuery) {
+    return request({
+        url: apiPrefix,
+        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 },
+    });
+}

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

@@ -0,0 +1,146 @@
+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'
+import {useRouter} from 'vue-router'
+
+export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+	const pageRequest = async (query: UserPageQuery) => {
+		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');
+
+	// todo 点击新建广告活动进行路由跳转（还有问题）
+	const router = useRouter()
+	function goCreate() {
+		router.push('/createcampaigns')
+	}
+
+	return {
+		crudOptions: {
+			table: {
+				height: 800
+			},
+			container: {
+        fixedHeight: false
+      },
+			actionbar: {
+				show: true,
+				buttons: {
+					add: {
+						text: 'xxx',
+						show: false
+					},
+					create: {
+						text: '新建广告活动',
+						type: "primary",
+						show: true,
+						click() {
+							goCreate()
+						}
+					}
+				}
+			},
+			search: {
+				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: {
+        name: {
+          title: '广告活动',
+          column: {
+            width: '150px'
+          },
+					search: {
+						show: true,
+						component: {
+							props: {
+								clearable: true
+							}
+						}
+					},
+					form: {
+						rules: [{required: true, message:'必填项'}]
+					}
+        },
+				targetingType: {
+					title: '投放类型',
+					type: 'dict-select',
+					search: {
+						show: true
+					},
+					dict: dict({
+						data: [
+							{ value: 'AUTO', label: '自动' },
+							{ value: 'MANUAL', label: '手动' },
+						]
+					})
+				},
+				state: {
+					title: '状态'
+				},
+				startDate: {
+					title: '开始日期'
+				},
+				endDate: {
+					title: '结束日期'
+				},
+				budget: {
+					title: '预算'
+				},
+				portfolio: {
+					title: '广告组合'
+				},
+        ...BaseColumn
+			}
+		}
+	}
+}

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

@@ -0,0 +1,51 @@
+<template>
+    <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">
+                    <BarLineChart :barLineData="barLineData"/>
+                    <!--<line-chart :chartData="chartData"/>-->
+                </el-card>
+
+            </template>
+        </fs-crud>
+    </fs-page>
+</template>
+
+<script lang="ts" setup>
+import {ref, onMounted, defineAsyncComponent, reactive} from 'vue'
+import {useFs, FsPage} from '@fast-crud/fast-crud'
+import {createCrudOptions} from './crud'
+import BarLineChart from '/@/components/echartsComponents/BarLineChart.vue'
+import LineChart from '/@/components/echartsComponents/LineChart.vue'
+import {useLineStore} from '/@/stores/chartData/line'
+
+
+const {crudBinding, crudRef, crudExpose} = useFs({createCrudOptions, context: {}})
+
+
+const lineStore = useLineStore()
+let barLineData = lineStore.barLineData
+
+// let barLineData
+//
+// function initData() {
+//     barLineData = reactive({
+//         xData: ['2023-10-18', '2023-10-19', '2023-10-20', '2023-10-21', '2023-10-22', '2023-10-23', '2023-10-24'],
+//         barData: [12, 13.4, 12.5, 16, 14.5, 15.6, 12.3],
+//         yData1: [5, 6, 7, 8, 9, 10, 11],
+//         yData2: [14, 15, 12, 16, 15, 13, 14.5]
+//     })
+// }
+// initData()
+
+
+
+onMounted(() => {
+    crudExpose.doRefresh()
+})
+</script>
+
+<style scoped>
+
+</style>

src/views/adManage/sb/index.vue

@@ -0,0 +1,57 @@
+<template>
+    <div class="ads-container">
+        <div class="public-search">
+            <DateRangePicker timezone="America/Los_Angeles" @change="changeDateRange"></DateRangePicker>
+            <el-select v-model="portfolios" placeholder="广告组合"></el-select>
+        </div>
+        <el-tabs>
+            <el-tab-pane label="广告活动">
+                <campaigns></campaigns>
+            </el-tab-pane>
+            <el-tab-pane label="关键词"></el-tab-pane>
+            <el-tab-pane label="商品投放"></el-tab-pane>
+            <el-tab-pane label="搜索词"></el-tab-pane>
+            <el-tab-pane label="广告位"></el-tab-pane>
+        </el-tabs>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import DateRangePicker from '/@/components/DateRangePicker/index.vue'
+import campaigns from './campaigns/index.vue'
+import {ref} from 'vue'
+
+const portfolios = ref([])
+
+function changeDateRange(val: string[]) {
+    console.log(val)
+}
+
+</script>
+
+<style scoped>
+    .public-search {
+        display: flex;
+        gap: 3px;
+        padding-bottom: 3px;
+        position: sticky;
+        top: 0;
+        z-index: 2;
+        width: 100%;
+        background-color: #f8f8f8;
+        box-shadow: 0px 0px 0px rgba(51, 89, 181, 0.16);
+    }
+
+    :deep(.el-tabs__header.is-top) {
+        background-color: #fff;
+        position: sticky;
+        top: 32px;
+        z-index: 1;
+        box-shadow: 0px 0px 12px rgba(51, 89, 181, 0.16);
+    }
+
+    :deep(.el-tabs__nav) {
+        padding-left: 10px;
+    }
+
+</style>

src/views/system/menu/types.ts

@@ -1,63 +1,63 @@
 export interface TreeTypes {
-  id?: number;
-  name?: string;
-  status?: boolean;
-  children?: TreeTypes[];
+    id?: number;
+    name?: string;
+    status?: boolean;
+    children?: TreeTypes[];
 }
 
 export interface APIResponseData {
-  code?: number;
-  data: [];
-  msg?: string;
+    code?: number;
+    data: [];
+    msg?: string;
 }
 
 export interface FormTypes<T> {
-  [key: string]: T;
+    [key: string]: T;
 }
 
 export interface ComponentFileItem {
-  value: string;
-  label: string;
+    value: string;
+    label: string;
 }
 
 export interface MenuTreeItemType {
-  id: number | string;
-  modifier_name: string;
-  creator_name: string;
-  create_datetime: string;
-  update_datetime: string;
-  menuPermission: string[];
-  hasChild: boolean;
-  description: string;
-  modifier: string;
-  dept_belong_id: string;
-  icon: string;
-  name: string;
-  sort: number;
-  is_link: boolean;
-  is_catalog: boolean;
-  web_path: string;
-  component: string;
-  component_name: string;
-  status: boolean;
-  cache: boolean;
-  visible: boolean;
-  creator: string;
-  parent: number | string;
+    id: number | string;
+    modifier_name: string;
+    creator_name: string;
+    create_datetime: string;
+    update_datetime: string;
+    menuPermission: string[];
+    hasChild: boolean;
+    description: string;
+    modifier: string;
+    dept_belong_id: string;
+    icon: string;
+    name: string;
+    sort: number;
+    is_link: boolean;
+    is_catalog: boolean;
+    web_path: string;
+    component: string;
+    component_name: string;
+    status: boolean;
+    cache: boolean;
+    visible: boolean;
+    creator: string;
+    parent: number | string;
 }
 
 export interface MenuFormDataType {
-  id?: number | string;
-  parent: number | string;
-  name: string;
-  component: string;
-  web_path: string;
-  icon: string;
-  cache: boolean;
-  status: boolean;
-  visible: boolean;
-  component_name: string;
-  description: string;
-  is_catalog: boolean;
-  is_link: boolean;
-}
+    id?: number | string;
+    parent: number | string;
+    name: string;
+    component: string;
+    web_path: string;
+    icon: string;
+    cache: boolean;
+    status: boolean;
+    visible: boolean;
+    component_name: string;
+    description: string;
+    is_catalog: boolean;
+    is_link: boolean;
+}