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

<template>
  <view>
    <topHeader ref="topHeaderRef" @search="search"></topHeader>
    <!-- tabel -->
    <a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 24px; margin-bottom: 24px">
      <a-space align="center">
        <span>行业热门话题洞察</span>
        <a-popover position="tl">
          <a-button type="primary" class="pop-btn">
            <template #icon>
              <icon-question-circle />
            </template>
          </a-button>
          <template #content>
            <p style="margin: 0">基于社交内容平台的行业数据，分析用户关注的热门话题与趋势。</p>
          </template>
        </a-popover>
      </a-space>
      <a-table :columns="columns" :data="dataList" :filter-icon-align-left="alignLeft" @change="handleChange">
        <template #rank="{ record }">
          <img v-if="record.rank == 1" :src="topImages[0]" style="width: 25px; height: 17px" />
          <img v-else-if="record.rank == 2" :src="topImages[1]" style="width: 25px; height: 17px" />
          <img v-else-if="record.rank == 3" :src="topImages[2]" style="width: 25px; height: 17px" />
          <span v-else>{{ record.rank }}</span>
        </template>
        <template #keywords="{ record }">
          <a-tag v-for="item in record.keywords" :key="item" style="margin-right: 5px">{{ item }}</a-tag>
        </template>
        <template #hot="{ record }">
          <img v-for="i in record.hot" :key="i" :src="starImages[i - 1]" style="width: 16px; height: 16px" />
        </template>
        <template #sentiment="{ record }">
          <img
            v-if="record.felling == '2'"
            src="@/assets/img/hottranslation/good.png"
            style="width: 16px; height: 16px"
          />
          <img
            v-else-if="record.felling == '1'"
            src="@/assets/img/hottranslation/normal.png"
            style="width: 16px; height: 16px"
          />
          <img
            v-else-if="record.felling == '0'"
            src="@/assets/img/hottranslation/poor.png"
            style="width: 16px; height: 16px"
          />
        </template>

        <template #optional="{ record }">
          <a-button type="outline" @click="gotoDetail(record)">详情</a-button>
        </template>
      </a-table>
    </a-space>
    <a-modal :visible="visible" @ok="handleOk" @cancel="handleCancel" unmountOnClose>
      <template #title>
        <span style="text-align: left; width: 100%">行业热门话题洞察</span>
      </template>
      <div>
        <a-space direction="vertical">
          <a-space>
            <span style="margin-right: 16px">话题名称</span>
            <span>{{ topicInfo.name }}</span>
          </a-space>
          <a-space>
            <span style="margin-right: 16px">话题简介</span>
            <span>{{ topicInfo.intro }}</span>
          </a-space>
          <a-space>
            <span style="margin-right: 16px">关键词</span>
            <a-tag v-for="item in topicInfo.keywords" :key="item" style="margin-right: 5px">{{ item }}</a-tag>
          </a-space>
          <a-space>
            <span style="margin-right: 16px">热度指数</span>
            <img v-for="i in topicInfo.hot" :key="i" :src="starImages[i - 1]" style="width: 16px; height: 16px" />
          </a-space>
          <a-space>
            <span style="margin-right: 16px">情感指数</span>
            <img
              v-if="topicInfo.felling == '2'"
              src="@/assets/img/hottranslation/good.png"
              style="width: 16px; height: 16px"
            />
            <img
              v-else-if="topicInfo.felling == '1'"
              src="@/assets/img/hottranslation/normal.png"
              style="width: 16px; height: 16px"
            />
            <img
              v-else-if="topicInfo.felling == '0'"
              src="@/assets/img/hottranslation/poor.png"
              style="width: 16px; height: 16px"
            />
          </a-space>
          <a-space direction="top">
            <span style="margin-right: 16px; width: 60px; font-size: 12px">原始来源 </span>
            <a-space direction="vertical" style="margin-left: 15px">
              <a-space v-for="item in topicInfo.industry_topic_sources" :key="item">
                <a-link style="background-color: initial" :href="item.link" target="_blank">{{ item.title }}</a-link>
                <img src="@/assets/img/hottranslation/xhs.png" style="width: 16px; height: 16px" />
              </a-space>
            </a-space>
          </a-space>
        </a-space>
      </div>
    </a-modal>
  </view>
</template>

<script setup>
import topHeader from './topHeader.vue';
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';
import top1 from '@/assets/img/captcha/top1.svg';
import top2 from '@/assets/img/captcha/top2.svg';
import top3 from '@/assets/img/captcha/top3.svg';
import { IconQuestionCircle, IconArrowUp, IconArrowDown } from '@arco-design/web-vue/es/icon';
// 新增排序状态和函数
const heatSortDirection = ref('desc'); // 默认降序排列
const columns = [
  {
    title: '排名',
    dataIndex: 'rank',
    slotName: 'rank',
  },
  {
    title: '话题名称',
    dataIndex: 'name',
  },
  {
    title: '关键词',
    dataIndex: 'keywords',
    slotName: 'keywords',
  },
  {
    title: '热度指数',
    dataIndex: 'hot',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
    slotName: 'hot',
  },
  {
    title: '情感倾向',
    dataIndex: 'sentiment',
    slotName: 'sentiment',
  },
  {
    title: '操作',
    slotName: 'optional',
  },
];
// 切换排序方向
const toggleHeatSort = () => {
  heatSortDirection.value = heatSortDirection.value === 'asc' ? 'desc' : 'asc';
  sortDataByHeat();
};

// 实际排序逻辑
const sortDataByHeat = () => {
  dataList.value.sort((a, b) => {
    return heatSortDirection.value === 'asc' ? a.hot - b.hot : b.hot - a.hot;
  });
  // 排序后更新排名
  dataList.value.forEach((item, index) => {
    item.rank = index + 1;
  });
};

const starImages = [star1, star2, star3, star4, star5];
const topImages = [top1, top2, top3];
// 行业大类
const industriesTree = ref([]);
// 行业热门话题洞察
const dataList = ref([]);
// 显示详情
const visible = ref(false);
const topicInfo = ref({});
const topHeaderRef = ref();
// 从topHeader获取统一的状态
const selectedIndustry = computed(() => topHeaderRef.value?.selectedIndustry);
const selectedSubCategory = computed(() => topHeaderRef.value?.selectedSubCategory);
const selectedTimePeriod = computed(() => topHeaderRef.value?.selectedTimePeriod);
const search = () => {
  getIndustryTopics();
};
// 监听筛选条件变化
watch([selectedIndustry, selectedTimePeriod, selectedSubCategory], () => {
  getIndustryTopics();
});
watch(selectedIndustry, () => {
  selectedSubCategory.value = 0;
  getIndustryTopics();
});

onMounted(() => {
  getIndustriesTree();
});
// 获取行业大类数据
const getIndustriesTree = async () => {
  const res = await fetchIndustriesTree();
  industriesTree.value = res;
  selectedIndustry.value = res[0].id;
  getIndustryTopics();
};

const handleSort = () => {
  console.log('table change');
};

// 行业热门话题
const getIndustryTopics = async () => {
  let parms = {
    industry_id: selectedIndustry.value,
    time_dimension: selectedTimePeriod.value,
  };
  if (selectedIndustry.value == undefined) {
    return;
  }
  if (selectedSubCategory.value != undefined && selectedSubCategory.value != 0) {
    parms['industry_id'] = selectedSubCategory.value;
  }
  const res = await fetchIndustryTopics(parms);
  if (res.code == 200) {
    dataList.value = res.data;
  }
};

// 详情
const gotoDetail = async (record) => {
  console.log(record);
  const res = await fetchIndustryTopicDetail(record.id);
  if (res.code == 200) {
    visible.value = true;
    topicInfo.value = res.data;
  }
};

// 弹窗的取消
const handleCancel = () => {
  visible.value = false;
};

// 弹窗的确定
const handleOk = () => {
  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;
}

.pop-btn {
  background: #fff !important;
  border-color: #fff !important;
  color: #737478 !important;
  margin-left: -5px;
}

:deep(.arco-icon) {
  display: inline-block;
  vertical-align: middle;
}

/* 按钮悬停效果 */
:deep(.arco-btn-text:not(.arco-btn-disabled):hover) {
  background-color: transparent;
}
</style>