添加店铺选择器，时区等

src/components/DateRangePicker/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-date-picker
-      v-model="dateRangeValue"
+      v-model="dateRange"
       type="daterange"
       unlink-panels
       range-separator="To"
@@ -13,23 +13,41 @@
       :disabled-date="disabledDate"
       :clearable="false"
       :popper-options="{placement: props.popperPlacement}"
-      @change="$emit('change', dateRangeValue)"
+      @change="changedValue"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import dayjs, { Dayjs } from 'dayjs'
 
+defineOptions({
+  name: 'DateRangePicker'
+})
 
 const props = defineProps({
+  modelValue: {type: Array, required: true },
   timezone: { type: String, required: true },
   popperPlacement: { type: String, default: 'bottom-start' }
 })
 
-const dateRangeValue = ref(['2023-10-01', '2023-10-10'])
+const dateRange = ref(props.modelValue)
+const emits = defineEmits(['update:modelValue', 'change'])
+const changedValue = (newVal: string[]) => {
+  emits('update:modelValue', newVal)
+  emits('change', newVal)
+}
 
+// onMounted(() => {
+//   if(dateRange.value.length === 0 && props.defaultRecentDay > 0) {
+//     const now_tz = dayjs(new Date()).tz(props.timezone)
+//     const start = now_tz.subtract(props.defaultRecentDay, 'day')
+//     const end = now_tz.subtract(1, 'day')
+//     dateRange.value = [start.format("YYYY-MM-DD"), end.format("YYYY-MM-DD")]
+//     emits('update:modelValue', dateRange.value)
+//   }
+// })
 
 function disabledDate(datetime: Date) {
   const now = dayjs(new Date()).tz(props.timezone)

src/components/DynamicTime/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <p>时区：[{{ props.timezone }}] {{ curTime }}</p>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import dayjs, { Dayjs } from 'dayjs'
+
+const props = defineProps({
+  timezone: { type: String, default: 'America/Los_Angeles' }
+})
+
+let timer: NodeJS.Timeout
+let curTime = ref('')
+
+function getTime():string {
+  const now: Dayjs = dayjs(new Date()).tz(props.timezone)
+  return now.format("YYYY-MM-DD HH:mm")
+}
+
+onMounted(() => {
+  curTime.value = getTime()
+  timer = setInterval(() => {
+    curTime.value = getTime()
+  }, 1000 * 60)
+})
+
+onBeforeUnmount(() => {
+  if (timer) {
+    clearInterval(timer)
+  }
+})
+
+</script>

src/components/shopSelector/api.ts

@@ -0,0 +1,13 @@
+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/profiles/';
+
+export function GetList(query: PageQuery) {
+    return request({
+        url: apiPrefix,
+        method: 'get',
+        params: query,
+    })
+}

src/components/shopSelector/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <el-select v-model="selectedId" @change="changedVal">
+      <!-- <template #prefix>美国</template> -->
+      <el-option v-for="info in allShops" :label=info.name :value=info.id :key="info.id"></el-option>
+    </el-select>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue';
+import type { Ref } from 'vue'
+import { GetList } from './api'
+import { Profile } from './types'
+import { useShopInfo } from '/@/stores/shopInfo'
+
+const selectedId: Ref<number> = ref(null)
+const allShops: Ref<Profile[]> = ref([])
+const shopInfo = useShopInfo()
+
+onMounted(async () => {
+  const resp = await GetList({ page: {pageSize: 1000} })
+  console.log(resp)
+  allShops.value = resp.data
+})
+
+async function changedVal() {
+  console.log(selectedId)
+  await shopInfo.updateShopInfo(selectedId)
+}
+
+</script>

src/components/shopSelector/types.ts

@@ -0,0 +1,10 @@
+export interface Profile {
+  id: number,
+  profileId: string,
+	name: string,
+	timezone: string,
+	advertiserId: string,
+	countryCode: string,
+	currencyCode: string,
+	marketplaceId: string
+}

src/layout/navBars/breadcrumb/user.vue

@@ -1,5 +1,7 @@
 <template>
 	<div class="layout-navbars-breadcrumb-user pr15" :style="{ flex: layoutUserFlexNum }">
+		<DynamicTime></DynamicTime>
+		<div class="layout-navbars-breadcrumb-user-icon">店铺</div>
 		<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>
@@ -69,7 +71,7 @@
 				<el-dropdown-menu>
 					<el-dropdown-item command="/home">{{ $t('message.user.dropdown1') }}</el-dropdown-item>
 					<el-dropdown-item command="/personal">{{ $t('message.user.dropdown2') }}</el-dropdown-item>
-					<el-dropdown-item command="wareHouse">{{ $t('message.user.dropdown6') }}</el-dropdown-item>
+					<!-- <el-dropdown-item command="wareHouse">{{ $t('message.user.dropdown6') }}</el-dropdown-item> -->
 					<el-dropdown-item divided command="logOut">{{ $t('message.user.dropdown5') }}</el-dropdown-item>
 				</el-dropdown-menu>
 			</template>
@@ -90,6 +92,8 @@ import { useThemeConfig } from '/@/stores/themeConfig';
 import other from '/@/utils/other';
 import mittBus from '/@/utils/mitt';
 import { Session, Local } from '/@/utils/storage';
+// import tableSelector  from '/@/components/tableSelector.vue'
+import DynamicTime from '/@/components/DynamicTime/index.vue'
 
 // 引入组件
 const UserNews = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/userNews.vue'));
@@ -109,6 +113,9 @@ const state = reactive({
 	disabledSize: 'large',
 });
 
+const shops = reactive([])
+const selectedShop = ref("")
+
 // 设置分割样式
 const layoutUserFlexNum = computed(() => {
 	let num: string | number = '';
@@ -256,5 +263,10 @@ const messageCenter = messageCenterStore();
 	:deep(.el-badge__content.is-fixed) {
 		top: 12px;
 	}
+
+	// .profile-select {
+	// 	background-color: #f4f7fe;
+	// 	border-radius: 16px
+	// }
 }
 </style>

src/stores/interface/index.ts

@@ -101,3 +101,12 @@ export interface DictionaryStates {
 export interface ConfigStates {
 	systemConfig: any;
 }
+export interface ShopInfo {
+	profileId: string,
+	name: string,
+	timezone: string,
+	advertiserId: string,
+	countryCode: string,
+	currencyCode: string,
+	marketplaceId: string
+}

src/stores/shopInfo.ts

@@ -0,0 +1,63 @@
+import { defineStore } from 'pinia'
+import { Profile } from '/@/components/shopSelector/types'
+import { request } from '../utils/service'
+import { ref, Ref } from 'vue'
+
+// export const useShopInfo = defineStore('shopInfo', {
+//   state: (): Profile => ({
+//     id: 0,
+//     profileId: '',
+//     name: '',
+//     timezone: 'America/Los_Angeles',
+//     advertiserId: '',
+//     countryCode: '',
+//     currencyCode: '',
+//     marketplaceId: ''
+//   }),
+//   actions: {
+//     async updateShopInfo(id: number) {
+//       const resp = await this.getShopInfo(id)
+//       this.id = id
+//       this.profileId = resp.data.profile_id
+//       this.name = resp.data.account_name
+//       this.timezone = resp.data.time_zone
+//       this.advertiserId = resp.data.advertiser_id
+//       this.countryCode = resp.data.country_code
+//       this.currencyCode = resp.data.currency_code
+//       this.marketplaceId = resp.data.marketplace_str_id
+//     },
+//     async getShopInfo(id: number) {
+//       return request({
+//         url: '/api/adManage/profiles/' + id + '/',
+//         method: 'GET'
+//       })
+//     }
+//   }
+// })
+
+export const userShopInfo = defineStore('shopInfo', () => {
+  let profile: Ref<Profile> = ref({
+    id: 0,
+    profileId: '',
+    name: '',
+    timezone: 'America/Los_Angeles',
+    advertiserId: '',
+    countryCode: '',
+    currencyCode: '',
+    marketplaceId: ''
+  })
+
+  async function getShopInfo(id: number) {
+    return request({
+      url: '/api/adManage/profiles/' + id + '/',
+      method: 'GET'
+    })
+  }
+
+  async function updateShopInfo(id: number) {
+    const resp = await getShopInfo(id)
+    profile.value = resp.data
+  }
+
+  return { profile, updateShopInfo }
+})

src/theme/app.scss

@@ -325,7 +325,7 @@ body,
 
 // 自定义全局样式
 .ads-container {
-  padding: 5px;
+  padding: 3px 5px;
 }
 
 .fs-page-custom {

src/theme/element.scss

@@ -320,7 +320,7 @@
 	}
 }
 
-
+// 自定义样式
 .fs-crud-header {
 	padding: 0 0 5px 0 !important;
 }
@@ -332,6 +332,3 @@
 	height: auto;
 	padding: auto;
 }
-.fs-search-box {
-	height: 45px;
-}

src/views/adManage/portfolios/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="ads-container">
 		<div class="public-search">
-			<DateRangePicker timezone="America/Los_Angeles"></DateRangePicker>
+			<DateRangePicker v-model="dateRange" timezone="America/Los_Angeles" ></DateRangePicker>
 		</div>
 		<fs-page class="fs-page-custom">
 			<fs-crud ref="crudRef" v-bind="crudBinding">
@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts" setup name="Portfolios">
-import { ref, onMounted, defineAsyncComponent } from 'vue';
+import { ref, onMounted } from 'vue';
 import { useFs } from '@fast-crud/fast-crud';
 import { createCrudOptions } from './crud';
 import DateRangePicker from '/@/components/DateRangePicker/index.vue'
@@ -25,6 +25,9 @@ const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context:
 onMounted(() => {
 	crudExpose.doRefresh();
 });
+
+const dateRange = ref([])
+
 </script>
 
 <style scoped>
@@ -35,7 +38,7 @@ onMounted(() => {
   padding-bottom: 3px;
   position: sticky;
   top: 0;
-  z-index: 2;
+  z-index: 10;
   width: 100%;
   background-color: #f8f8f8;
   box-shadow: 0px 0px 0px rgba(51,89,181,0.16);

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

@@ -2,22 +2,54 @@
 	<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>
+				<el-card style="margin-bottom: 5px;" shadow="hover">
+					<div style="height: 500px;" ref="lineRef" id="line-changes"></div>
+				</el-card>
 			</template>
 		</fs-crud>
 	</fs-page>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, defineAsyncComponent } from 'vue';
+import { ref, onMounted, onBeforeMount } from 'vue';
 import { useFs, FsPage } from '@fast-crud/fast-crud';
 import { createCrudOptions } from './crud';
+import * as echarts from 'echarts';
 
 const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: {} });
+const lineRef = ref()
+let chartObj:any = null
 
 onMounted(() => {
 	crudExpose.doRefresh();
+	// initLine()
+	setTimeout(() => { initLine() }, 0);
+	window.addEventListener('resize', () => chartObj.resize())
 });
+
+onBeforeMount(() => {
+	if(chartObj) {
+		chartObj.dispose()
+    chartObj = null
+	}
+})
+
+const initLine = () => {
+	chartObj = echarts.init(lineRef.value)
+	const option = {
+		xAxis: {
+			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+		},
+		yAxis: {},
+		series: [
+			{
+				type: 'bar',
+				data: [23, 24, 18, 25, 27, 28, 25]
+			}
+		]
+	}
+	chartObj.setOption(option)
+}
 </script>
 
 <style scoped>

src/views/adManage/sp/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="ads-container">
     <div class="public-search">
-      <DateRangePicker timezone="America/Los_Angeles" @change="changeDateRange"></DateRangePicker>
+      <DateRangePicker v-model="dateRange" timezone="America/Los_Angeles" @change="changeDateRange"></DateRangePicker>
       <el-select v-model="portfolios" placeholder="广告组合"></el-select>
     </div>
     <el-tabs>
@@ -22,9 +22,10 @@ import campaigns from './campaigns/index.vue'
 import { ref } from 'vue'
 
 const portfolios = ref([])
+const dateRange = ref([])
 
-function changeDateRange(val: string[]) {
-  console.log(val)
+function changeDateRange(val: []) {
+  
 }
 
 </script>
@@ -36,7 +37,7 @@ function changeDateRange(val: string[]) {
   padding-bottom: 3px;
   position: sticky;
   top: 0;
-  z-index: 2;
+  z-index: 10;
   width: 100%;
   background-color: #f8f8f8;
   box-shadow: 0px 0px 0px rgba(51,89,181,0.16);
@@ -45,7 +46,7 @@ function changeDateRange(val: string[]) {
   background-color: #fff;
   position: sticky;
   top: 32px;
-  z-index: 1;
+  z-index: 9;
   box-shadow: 0px 0px 12px rgba(51,89,181,0.16);
 }
 :deep(.el-tabs__nav) {

src/views/demo/index.vue

@@ -1,28 +1,38 @@
 <template>
   <div>
     <DateRangePicker
+      v-model="dateRange"
       timezone="America/Los_Angeles"
       @change="changedValue">
     </DateRangePicker>
-     {{ startDate }} To {{ endDate }}
+     <p>{{ dateRange }}</p>
+     <!-- <tableSelector v-model="selectedData" :tableConfig="tableConfig"></tableSelector> -->
+     <!-- {{ selectedData }} -->
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive } from 'vue'
+import { ref } from 'vue'
 import DateRangePicker from '/@/components/DateRangePicker/index.vue'
+// import tableSelector from '/@/components/tableSelector/index.vue'
 
-
-// let dateRangeVal = reactive([])
-const startDate = ref('')
-const endDate = ref('')
-
-function changedValue(value: string[]) {
-  // dateRangeVal = value
-  console.log(value[0], value[1])
-  startDate.value = value[0]
-  endDate.value = value[1]
-
+const dateRange = ref([])
+function changedValue(newVal: string[]) {
+  // dateRange.value = value
+  console.log(newVal)
 }
 
+// 测试表格选择器
+// const selectedData = ref("")
+// const tableConfig = ref({
+//   url: '/api/ad_manage/portfolios/',
+//   label: 'name',
+//   value: 'portfolioId',
+//   // data: [],
+//   columns: [
+//     { prop:'portfolioId',  label: '广告组合ID' },
+//     { prop:'name',  label: '广告组合' },
+//   ]
+// })
+
 </script>