ads_web/src/views/adManage/portfolios/index.vue

<template>
	<div class="ads-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 #header-middle>
					<el-card style="height: 500px;">此处用于显示可视化图形</el-card>
				</template>
			</fs-crud>
		</fs-page>
	</div>
</template>

<script lang="ts" setup name="Portfolios">
import { ref, onMounted } from 'vue';
import { useFs } from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud';
import DateRangePicker from '/@/components/DateRangePicker/index.vue'

const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: {} });

// 页面打开后获取列表数据
onMounted(() => {
	crudExpose.doRefresh();
});

const dateRange = ref([])

</script>

<style scoped>

.public-search {
  display: flex;
  gap: 3px;
  padding-bottom: 3px;
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
  background-color: #f8f8f8;
  box-shadow: 0px 0px 0px rgba(51,89,181,0.16);
}

</style>