|
@@ -32,6 +32,9 @@
|
|
|
v-model="formModel.platform"
|
|
v-model="formModel.platform"
|
|
|
class="filter-control"
|
|
class="filter-control"
|
|
|
placeholder="平台"
|
|
placeholder="平台"
|
|
|
|
|
+ multiple
|
|
|
|
|
+ :max-tag-count="2"
|
|
|
|
|
+ tag-nowrap
|
|
|
allow-clear
|
|
allow-clear
|
|
|
@change="onPlatformChange"
|
|
@change="onPlatformChange"
|
|
|
>
|
|
>
|
|
@@ -46,8 +49,10 @@
|
|
|
<a-select
|
|
<a-select
|
|
|
v-model="formModel.typename"
|
|
v-model="formModel.typename"
|
|
|
class="filter-control"
|
|
class="filter-control"
|
|
|
- :disabled="!formModel.platform"
|
|
|
|
|
- :placeholder="formModel.platform ? '类型' : '先选平台'"
|
|
|
|
|
|
|
+ :disabled="!formModel.platform.length"
|
|
|
|
|
+ :placeholder="
|
|
|
|
|
+ formModel.platform.length ? '类型' : '先选平台'
|
|
|
|
|
+ "
|
|
|
allow-clear
|
|
allow-clear
|
|
|
@change="onLocalFilterChange"
|
|
@change="onLocalFilterChange"
|
|
|
>
|
|
>
|
|
@@ -220,6 +225,8 @@
|
|
|
v-model="formModel.platform"
|
|
v-model="formModel.platform"
|
|
|
class="link-section-filter"
|
|
class="link-section-filter"
|
|
|
placeholder="平台"
|
|
placeholder="平台"
|
|
|
|
|
+ multiple
|
|
|
|
|
+ :max-tag-count="1"
|
|
|
allow-clear
|
|
allow-clear
|
|
|
size="small"
|
|
size="small"
|
|
|
@change="onPlatformChange"
|
|
@change="onPlatformChange"
|
|
@@ -627,6 +634,7 @@
|
|
|
const CHANNEL_TB = 0;
|
|
const CHANNEL_TB = 0;
|
|
|
const CHANNEL_JD = 1;
|
|
const CHANNEL_JD = 1;
|
|
|
const CHANNEL_PDD = 3;
|
|
const CHANNEL_PDD = 3;
|
|
|
|
|
+ const defaultPlatforms = ['淘宝', '拼多多', '京东'];
|
|
|
const defaultDimensionSortOrder = 1000;
|
|
const defaultDimensionSortOrder = 1000;
|
|
|
const dimensionSortRules: DimensionSortRule[] = [
|
|
const dimensionSortRules: DimensionSortRule[] = [
|
|
|
{ source: '淘宝', scene: 'os', order: 10 },
|
|
{ source: '淘宝', scene: 'os', order: 10 },
|
|
@@ -909,7 +917,7 @@
|
|
|
const dateRange = ref<string[]>(defaultDateRange());
|
|
const dateRange = ref<string[]>(defaultDateRange());
|
|
|
const formModel = reactive({
|
|
const formModel = reactive({
|
|
|
event_type: '',
|
|
event_type: '',
|
|
|
- platform: '',
|
|
|
|
|
|
|
+ platform: [...defaultPlatforms],
|
|
|
typename: '',
|
|
typename: '',
|
|
|
scene: '',
|
|
scene: '',
|
|
|
riskStrategy: '',
|
|
riskStrategy: '',
|
|
@@ -1029,12 +1037,21 @@
|
|
|
);
|
|
);
|
|
|
|
|
|
|
|
const typenameOptions = computed(() => {
|
|
const typenameOptions = computed(() => {
|
|
|
- if (!formModel.platform) return [];
|
|
|
|
|
- return Array.from(platformTypeMap.value.get(formModel.platform) || [])
|
|
|
|
|
|
|
+ if (!formModel.platform.length) return [];
|
|
|
|
|
+ const types = new Set<string>();
|
|
|
|
|
+ formModel.platform.forEach((platform) => {
|
|
|
|
|
+ platformTypeMap.value
|
|
|
|
|
+ .get(platform)
|
|
|
|
|
+ ?.forEach((typename) => types.add(typename));
|
|
|
|
|
+ });
|
|
|
|
|
+ return Array.from(types)
|
|
|
.sort((left, right) => left.localeCompare(right, 'zh-Hans-CN'))
|
|
.sort((left, right) => left.localeCompare(right, 'zh-Hans-CN'))
|
|
|
.map((value) => ({ label: value, value }));
|
|
.map((value) => ({ label: value, value }));
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
+ const matchesPlatform = (source: string) =>
|
|
|
|
|
+ !formModel.platform.length || formModel.platform.includes(source);
|
|
|
|
|
+
|
|
|
const riskStrategyOptions = computed(() => {
|
|
const riskStrategyOptions = computed(() => {
|
|
|
const set = new Set<string>();
|
|
const set = new Set<string>();
|
|
|
const append = (
|
|
const append = (
|
|
@@ -1042,7 +1059,7 @@
|
|
|
typename: string,
|
|
typename: string,
|
|
|
riskStrategy: string
|
|
riskStrategy: string
|
|
|
) => {
|
|
) => {
|
|
|
- if (formModel.platform && source !== formModel.platform) return;
|
|
|
|
|
|
|
+ if (!matchesPlatform(source)) return;
|
|
|
if (formModel.typename && typename !== formModel.typename) return;
|
|
if (formModel.typename && typename !== formModel.typename) return;
|
|
|
if (riskStrategy) set.add(riskStrategy);
|
|
if (riskStrategy) set.add(riskStrategy);
|
|
|
};
|
|
};
|
|
@@ -1086,7 +1103,7 @@
|
|
|
const scene = getSceneLabel(record);
|
|
const scene = getSceneLabel(record);
|
|
|
const uniqueId = getUniqueLabel(record);
|
|
const uniqueId = getUniqueLabel(record);
|
|
|
|
|
|
|
|
- if (formModel.platform && source !== formModel.platform) {
|
|
|
|
|
|
|
+ if (!matchesPlatform(source)) {
|
|
|
return false;
|
|
return false;
|
|
|
}
|
|
}
|
|
|
if (formModel.typename && typename !== formModel.typename) {
|
|
if (formModel.typename && typename !== formModel.typename) {
|
|
@@ -1119,7 +1136,7 @@
|
|
|
const { source, typename, scene, uniqueId } =
|
|
const { source, typename, scene, uniqueId } =
|
|
|
getTrackDimensionMeta(record);
|
|
getTrackDimensionMeta(record);
|
|
|
|
|
|
|
|
- if (formModel.platform && source !== formModel.platform) {
|
|
|
|
|
|
|
+ if (!matchesPlatform(source)) {
|
|
|
return false;
|
|
return false;
|
|
|
}
|
|
}
|
|
|
if (formModel.typename && typename !== formModel.typename) {
|
|
if (formModel.typename && typename !== formModel.typename) {
|
|
@@ -1151,7 +1168,7 @@
|
|
|
const typename = getParseMetricTypeLabel(record);
|
|
const typename = getParseMetricTypeLabel(record);
|
|
|
const scene = getParseMetricSceneLabel(record);
|
|
const scene = getParseMetricSceneLabel(record);
|
|
|
|
|
|
|
|
- if (formModel.platform && source !== formModel.platform) {
|
|
|
|
|
|
|
+ if (!matchesPlatform(source)) {
|
|
|
return false;
|
|
return false;
|
|
|
}
|
|
}
|
|
|
if (formModel.typename && typename !== formModel.typename) {
|
|
if (formModel.typename && typename !== formModel.typename) {
|
|
@@ -2043,7 +2060,7 @@
|
|
|
const resetFilters = () => {
|
|
const resetFilters = () => {
|
|
|
dateRange.value = defaultDateRange();
|
|
dateRange.value = defaultDateRange();
|
|
|
formModel.event_type = '';
|
|
formModel.event_type = '';
|
|
|
- formModel.platform = '';
|
|
|
|
|
|
|
+ formModel.platform = [...defaultPlatforms];
|
|
|
formModel.typename = '';
|
|
formModel.typename = '';
|
|
|
formModel.scene = '';
|
|
formModel.scene = '';
|
|
|
formModel.riskStrategy = '';
|
|
formModel.riskStrategy = '';
|
|
@@ -2317,7 +2334,10 @@
|
|
|
.filter-bar {
|
|
.filter-bar {
|
|
|
display: grid;
|
|
display: grid;
|
|
|
grid-template-columns:
|
|
grid-template-columns:
|
|
|
- 270px 140px 140px 140px 140px minmax(180px, 1fr)
|
|
|
|
|
|
|
+ minmax(240px, 1fr)
|
|
|
|
|
+ minmax(150px, 1fr)
|
|
|
|
|
+ minmax(220px, 1.25fr)
|
|
|
|
|
+ repeat(3, minmax(150px, 1fr))
|
|
|
auto;
|
|
auto;
|
|
|
gap: 10px;
|
|
gap: 10px;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
@@ -2424,7 +2444,7 @@
|
|
|
|
|
|
|
|
.link-section-tools {
|
|
.link-section-tools {
|
|
|
display: grid;
|
|
display: grid;
|
|
|
- grid-template-columns: repeat(2, 180px);
|
|
|
|
|
|
|
+ grid-template-columns: 220px 180px;
|
|
|
gap: 8px;
|
|
gap: 8px;
|
|
|
flex: 0 0 auto;
|
|
flex: 0 0 auto;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
@@ -2435,7 +2455,7 @@
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.link-section-filter {
|
|
.link-section-filter {
|
|
|
- width: 180px;
|
|
|
|
|
|
|
+ width: 100%;
|
|
|
min-width: 0;
|
|
min-width: 0;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -2697,7 +2717,7 @@
|
|
|
margin-top: 4px;
|
|
margin-top: 4px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- @media (max-width: 1200px) {
|
|
|
|
|
|
|
+ @media (max-width: 1440px) {
|
|
|
.filter-bar {
|
|
.filter-bar {
|
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
|
}
|
|
}
|
|
@@ -2705,7 +2725,9 @@
|
|
|
.filter-actions {
|
|
.filter-actions {
|
|
|
justify-content: flex-start;
|
|
justify-content: flex-start;
|
|
|
}
|
|
}
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
|
|
+ @media (max-width: 1200px) {
|
|
|
.metric-grid {
|
|
.metric-grid {
|
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
|
}
|
|
}
|