first commit
This commit is contained in:
muzi
217
src/views/components/dataEngine/topHeader.vue
Normal file
217
src/views/components/dataEngine/topHeader.vue
Normal file
@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 头部 -->
|
||||
<a-space
|
||||
direction="vertical"
|
||||
style="background-color: #fff; width: 100%; padding: 24px; margin: 24px 0; color: #737478; font-size: 14px"
|
||||
>
|
||||
<a-space align="center">
|
||||
<!-- 行业选择 -->
|
||||
<a-space align="center">
|
||||
<span>行业大类</span>
|
||||
<a-tag
|
||||
size="Medium"
|
||||
v-for="item in industriesTree"
|
||||
:key="item.id"
|
||||
:checkable="true"
|
||||
:checked="selectedIndustry == item.id"
|
||||
@check="handleIndustryCheck(item.id)"
|
||||
style="padding: 4px 16px; border-radius: 30px; height: 28px"
|
||||
:style="
|
||||
selectedIndustry == item.id
|
||||
? 'color: #6d4cfe; background-color: #f0edff'
|
||||
: 'color: #3C4043; background-color: #F7F8FA'
|
||||
"
|
||||
>{{ item.name }}</a-tag
|
||||
>
|
||||
</a-space>
|
||||
</a-space>
|
||||
<a-space align="center" style="margin-left: 'auto'; margin-top: 20px">
|
||||
<!-- 二级类目 -->
|
||||
<a-space align="center">
|
||||
<span>二级类目</span>
|
||||
<a-tag
|
||||
size="Medium"
|
||||
v-for="item in subCategories"
|
||||
:key="item.value"
|
||||
:checkable="true"
|
||||
:checked="selectedSubCategory == item.value"
|
||||
@check="handleSubCategoryCheck(item.value)"
|
||||
style="padding: 4px 16px; border-radius: 30px; height: 28px"
|
||||
:style="
|
||||
selectedSubCategory == item.value
|
||||
? 'color: #6d4cfe; background-color: #f0edff'
|
||||
: 'color: #3C4043; background-color: #F7F8FA'
|
||||
"
|
||||
>{{ item.label }}</a-tag
|
||||
>
|
||||
</a-space>
|
||||
</a-space>
|
||||
<a-space align="center" style="margin-left: 'auto'; margin-top: 20px">
|
||||
<!-- 时间筛选 -->
|
||||
<a-space align="center">
|
||||
<span>时间筛选</span>
|
||||
<a-tag
|
||||
size="Medium"
|
||||
v-for="item in timePeriods"
|
||||
:key="item.value"
|
||||
:checkable="true"
|
||||
:checked="selectedTimePeriod == item.value"
|
||||
@check="handleTimePeriodCheck(item.value)"
|
||||
style="padding: 4px 16px; border-radius: 30px; height: 28px"
|
||||
:style="
|
||||
selectedTimePeriod == item.value
|
||||
? 'color: #6d4cfe; background-color: #f0edff'
|
||||
: 'color: #3C4043; background-color: #F7F8FA'
|
||||
"
|
||||
>{{ item.label }}
|
||||
</a-tag>
|
||||
</a-space>
|
||||
</a-space>
|
||||
<!-- 搜索区域 -->
|
||||
<a-space style="margin-left: 'auto'; margin-top: 20px">
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
<template #icon>
|
||||
<icon-search />
|
||||
</template>
|
||||
<!-- Use the default slot to avoid extra spaces -->
|
||||
<template #default>搜索</template>
|
||||
</a-button>
|
||||
<a-button type="primary" style="background-color: #fff; color: #000">
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
</template>
|
||||
<!-- Use the default slot to avoid extra spaces -->
|
||||
<template #default>重置</template>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-space>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { fetchIndustriesTree, fetchIndustryTopics, fetchIndustryTopicDetail } from '@/api/all/index';
|
||||
import star1 from '@/assets/img/hottranslation/star-fill1.png';
|
||||
import star2 from '@/assets/img/hottranslation/star-fill2.png';
|
||||
import star3 from '@/assets/img/hottranslation/star-fill3.png';
|
||||
import star4 from '@/assets/img/hottranslation/star-fill4.png';
|
||||
import star5 from '@/assets/img/hottranslation/star-fill5.png';
|
||||
const starImages = [star1, star2, star3, star4, star5];
|
||||
// 行业大类
|
||||
const industriesTree = ref([]);
|
||||
// 数据状态
|
||||
const selectedIndustry = ref();
|
||||
const selectedSubCategory = ref('all');
|
||||
const selectedTimePeriod = ref('7');
|
||||
|
||||
// 暴露这些状态给父组件
|
||||
defineExpose({
|
||||
selectedIndustry,
|
||||
selectedSubCategory,
|
||||
selectedTimePeriod,
|
||||
});
|
||||
// 行业热门话题洞察
|
||||
const dataList = ref([]);
|
||||
// 显示详情
|
||||
const visible = ref(false);
|
||||
const topicInfo = ref({});
|
||||
// 二级类目选项
|
||||
const subCategories = [
|
||||
{ value: 'all', label: '全部' },
|
||||
{ value: 'airline', label: '航司' },
|
||||
{ value: 'hotel', label: '酒店' },
|
||||
{ value: 'entertainment', label: '玩乐' },
|
||||
{ value: 'cruise', label: '游轮' },
|
||||
];
|
||||
|
||||
// 时间周期选项
|
||||
const timePeriods = [
|
||||
{
|
||||
value: '7',
|
||||
label: '近7天',
|
||||
},
|
||||
{
|
||||
value: '15',
|
||||
label: '近15天',
|
||||
},
|
||||
{
|
||||
value: '30',
|
||||
label: '近30天',
|
||||
},
|
||||
];
|
||||
|
||||
onMounted(() => {
|
||||
getIndustriesTree();
|
||||
});
|
||||
// 获取行业大类数据
|
||||
const getIndustriesTree = async () => {
|
||||
const res = await fetchIndustriesTree();
|
||||
industriesTree.value = res;
|
||||
selectedIndustry.value = res[0].id;
|
||||
getIndustryTopics();
|
||||
};
|
||||
|
||||
// 行业热门话题
|
||||
const getIndustryTopics = async () => {
|
||||
let parms = {
|
||||
industry_id: selectedIndustry.value,
|
||||
time_dimension: selectedTimePeriod.value,
|
||||
};
|
||||
const res = await fetchIndustryTopics(parms);
|
||||
dataList.value = res;
|
||||
};
|
||||
const handleIndustryCheck = (value) => {
|
||||
selectedIndustry.value = value;
|
||||
};
|
||||
|
||||
const handleSubCategoryCheck = (value) => {
|
||||
selectedSubCategory.value = value;
|
||||
};
|
||||
|
||||
const handleTimePeriodCheck = (value) => {
|
||||
selectedTimePeriod.value = value;
|
||||
};
|
||||
|
||||
// 详情
|
||||
const gotoDetail = async (record) => {
|
||||
console.log(record);
|
||||
const res = await fetchIndustryTopicDetail(record.id);
|
||||
console.log(res);
|
||||
visible.value = true;
|
||||
topicInfo.value = res;
|
||||
};
|
||||
|
||||
// 搜索
|
||||
const handleSearch = () => {
|
||||
getIndustryTopics();
|
||||
};
|
||||
|
||||
// 弹窗的取消
|
||||
const handleCancel = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
// 弹窗的确定
|
||||
const handleBeforeOk = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 自定义样式 */
|
||||
:deep(.arco-table-th) {
|
||||
background-color: var(--color-fill-2);
|
||||
}
|
||||
|
||||
:deep(.arco-table-tr):hover {
|
||||
background-color: var(--color-fill-1);
|
||||
}
|
||||
:deep(.arco-btn-outline) {
|
||||
color: #6d4cfe !important;
|
||||
border-color: #6d4cfe !important;
|
||||
}
|
||||
:deep(.arco-modal-body) {
|
||||
padding: 0px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user