lingji-work-fe/src/views/components/dataEngine/topHeader.vue

<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>