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

<!-- eslint-disable vue/no-duplicate-attributes -->
<template>
  <view>
    <topHeader ref="topHeaderRef" @search="search"></topHeader>
    <!-- 关键词热度榜 -->
    <a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 0 20px" class="mb-24px">
      <div class="title-row">
        <span class="title mr-4px">关键词热度榜</span>
        <a-tooltip>
          <template #content>基于该行业用户内容中提及频率较高的关键词，按热度进行排序，反映近期关注焦点。</template>
          <icon-question-circle size="16" class="color-#737478" />
        </a-tooltip>
      </div>

      <a-table
        :columns="columns"
        :data="dataList"
        :filter-icon-align-left="alignLeft"
        :scroll="true"
        :pagination="false"
        @change="handleChange"
      >
        <template #heatLevel>
          <a-space>
            <span>热度指数</span>
            <a-tooltip>
              <template #content>综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</template>
              <icon-question-circle size="14" class="color-#737478" />
            </a-tooltip>
          </a-space>
        </template>
        <template #trendTitle>
          <a-space>
            <span>变化幅度</span>
            <a-tooltip>
              <template #content>仅基于关键词出现频次。</template>
              <icon-question-circle size="14" class="color-#737478" />
            </a-tooltip>
          </a-space>
        </template>

        <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" class="w-24px h-24px" />
          <img v-else-if="record.felling == '1'" src="@/assets/img/hottranslation/normal.png" class="w-24px h-24px" />
          <img v-else-if="record.felling == '0'" src="@/assets/img/hottranslation/poor.png" class="w-24px h-24px" />
        </template>
        <template #tred="{ record }">
          <div class="flex items-center" :class="record.trend > 0 ? 'color-#F64B31' : 'color-#25C883'">
            <icon-arrow-up v-if="record.trend > 0" size="16" />
            <icon-arrow-down v-else size="16" />
            {{ `${record.trend * 100}%` }}
          </div>
        </template>
      </a-table>
    </a-space>
    <!-- 行业情绪 -->
    <a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 0 20px" class="mb-24px">
      <div class="title-row">
        <span class="title mr-4px">行业情绪</span>
        <a-tooltip>
          <template #content
            >对该行业下用户内容进行情绪分析，按情绪类别统计占比，提取占比最高者作为行业情绪代表。</template
          >
          <icon-question-circle size="16" class="color-#737478" />
        </a-tooltip>
      </div>

      <a-space align="center">
        <a-space>
          <a-space style="width: 320px">
            <div id="container" style="height: 180px; width: 180px"></div>
            <a-space v-if="fellingRate.length > 0" direction="vertical" style="font-size: 14px">
              <a-space>
                <span style="width: 8px; height: 8px; background-color: #25c883; border-radius: 50%"></span>
                <span>正面情绪 </span>
                <span style="width: 40px">{{ getFormatter(fellingRate[0] * 100) }}</span>
              </a-space>
              <a-space>
                <span style="width: 8px; height: 8px; background-color: #f64b31; border-radius: 50%"></span>
                <span>负面情绪 </span>
                <span style="width: 40px">{{ getFormatter(fellingRate[1] * 100) }}</span>
              </a-space>
            </a-space>
          </a-space>
          <a-table
            :columns="columns2"
            :data="rowData"
            :span-method="spanMethod"
            :filter-icon-align-left="alignLeft"
            :scroll="true"
            :pagination="false"
            @change="handleChange"
          >
            <template #felling="{ 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>
          </a-table>
        </a-space>
      </a-space>
    </a-space>
    <!-- 新兴关键词 -->
    <a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 0 20px" class="mb-24px">
      <div class="title-row">
        <span class="title mr-4px">新兴关键词</span>
        <a-tooltip>
          <template #content
            >指当前周期中首次出现，或相较上一周期词频显著增长的关键词，反映近期出现的新关注点。</template
          >
          <icon-question-circle size="16" class="color-#737478" />
        </a-tooltip>
      </div>

      <a-table
        :columns="columns3"
        :data="keywordList"
        :filter-icon-align-left="alignLeft"
        :scroll="true"
        :pagination="false"
        @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 #felling="{ 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 #first_appeared_at="{ record }">
          <div>{{ formatTimestamp(record.first_appeared_at) }}</div>
        </template>
        <template #hot="{ record }">
          <img v-for="i in record.hot" :key="i" :src="starImages[i - 1]" style="width: 16px; height: 16px" />
        </template>

        <template #hotTitle="{ record }">
          <a-space>
            <span>当前热度指数</span>
            <a-popover position="tr">
              <a-button type="primary" class="pop-btn2">
                <template #icon>
                  <icon-question-circle />
                </template>
              </a-button>
              <template #content>
                <p style="margin: 0">综合关键词出现频次、互动表现（如点赞、收藏、评论）加权计算的热度得分。</p>
              </template>
            </a-popover>
          </a-space>
        </template>
        <template #trendTitle="{ record }">
          <a-space>
            <span>变化幅度</span>
            <a-popover position="tr">
              <a-button type="primary" class="pop-btn2">
                <template #icon>
                  <icon-question-circle />
                </template>
              </a-button>
              <template #content>
                <p style="margin: 0">仅基于关键词出现频次。</p>
              </template>
            </a-popover>
          </a-space>
        </template>
        <template #tred="{ record }">
          <div class="flex items-center" :class="record.trend > 0 ? 'color-#F64B31' : 'color-#25C883'">
            <icon-arrow-up v-if="record.trend > 0" size="16" />
            <icon-arrow-down v-else size="16" />
            {{ `${record.trend * 100}%` }}
          </div>
        </template>
        <template #optional="{ record }">
          <a-button type="outline" @click="gotoDetail(record)">详情</a-button>
        </template>
      </a-table>
    </a-space>
    <!-- modal -->
    <a-modal :visible="visible" unmountOnClose @ok="handleOk" @cancel="handleCancel">
      <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>{{ formatTimestamp(topicInfo.first_appeared_at) }}</span>
          </a-space>
          <a-space>
            <span style="margin-right: 16px">变化幅度</span>
            <div>
              <a-statistic
                v-if="topicInfo?.trend > 0"
                style="font-size: 14px"
                :value="topicInfo.trend * 100"
                :value-style="{ color: '#F64B31' }"
              >
                <template #prefix>
                  <IconArrowRise />
                </template>
                <template #suffix>%</template>
              </a-statistic>
              <a-statistic
                v-else
                style="font-size: 14px"
                :value="topicInfo?.trend * 100 || 0"
                :value-style="{ color: '#25C883' }"
              >
                <template #prefix>
                  <IconArrowFall />
                </template>
                <template #suffix>%</template>
              </a-statistic>
            </div>
          </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 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_new_keyword_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 {
  fetchKeywordTrendsList,
  fetchIndustryEmotions,
  fetchNewKeywordList,
  fetchNewKeywordDetail,
} from '@/api/all/index';
import { ref, onMounted, onBeforeUnmount, watchEffect, computed } from 'vue';
import * as echarts from 'echarts';
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';

const starImages = [star1, star2, star3, star4, star5];
const topImages = [top1, top2, top3];

const chartRef = (ref < HTMLElement) | (null > null);
const topHeaderRef = ref();
// 从topHeader获取统一的状态
const selectedIndustry = computed(() => topHeaderRef.value?.selectedIndustry);
const selectedSubCategory = computed(() => topHeaderRef.value?.selectedSubCategory);
const selectedTimePeriod = computed(() => topHeaderRef.value?.selectedTimePeriod);
const dataList = ref([]);
const rowData = ref([]);
const keywordList = ref([]);
const fellingRate = ref([]);
const visible = ref(false);
const topicInfo = ref({});
const columns = [
  {
    title: '排名',
    dataIndex: 'rank',
    slotName: 'rank',
    width: 100,
  },
  {
    title: '关键词名称',
    dataIndex: 'name',
    width: 300,
  },
  {
    titleSlotName: 'heatLevel',
    title: '热度指数',
    dataIndex: 'hot',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
    slotName: 'hot',
    width: 220,
  },
  {
    titleSlotName: 'trendTitle',
    title: '变化幅度',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
    dataIndex: 'tred',
    slotName: 'tred',
    width: 220,
  },
  {
    title: '情感倾向',
    dataIndex: 'sentiment',
    slotName: 'sentiment',
    width: 220,
  },
];
const columns2 = [
  {
    title: '情绪分布',
    dataIndex: 'felling',
    slotName: 'felling',
    width: 120,
    minWidth: 120,
  },
  {
    title: '主要观点',
    dataIndex: 'content',
  },
];

const spanMethod = ({ record, columnIndex }) => {
  // console.log(record.felling);
  // if (record.felling === 2) {
  //   return {
  //     rowspan: 3,
  //   };
  // }
};

const columns3 = [
  {
    title: '排名',
    dataIndex: 'rank',
    slotName: 'rank',
    width: 180,
    minWidth: 180,
  },
  {
    title: '新兴关键词名称',
    dataIndex: 'name',
  },
  {
    title: '首次大规模出现',
    dataIndex: 'first_appeared_at',
    slotName: 'first_appeared_at',
  },
  {
    titleSlotName: 'hotTitle',
    title: '当前热度指数',
    dataIndex: 'hot',
    slotName: 'hot',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    titleSlotName: 'trendTitle',
    title: '变化幅度',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
    dataIndex: 'tred',
    slotName: 'tred',
    width: 180,
    minWidth: 180,
  },
  {
    title: '操作',
    slotName: 'optional',
    width: 120,
    minWidth: 120,
  },
];
const getFormatter = (value) => {
  const formattedValue = Number.isInteger(value) ? value.toString() : value.toFixed(2);
  return formattedValue + '%';
};
const getIndustryEmotions = async () => {
  const params = {
    industry_id: selectedIndustry.value,
    time_dimension: selectedTimePeriod.value,
  };
  if (selectedIndustry.value == undefined) {
    return;
  }
  if (selectedSubCategory.value == undefined) {
    return;
  }
  if (selectedSubCategory.value != 0) {
    params['industry_id'] = selectedSubCategory.value;
  }
  const res = await fetchIndustryEmotions(params);
  if (res.code == 200) {
    let data = res['data'];
    fellingRate.value = [];
    fellingRate.value.push(data['good_felling_rate']);
    fellingRate.value.push(data['bad_felling_rate']);

    drawChart();
    rowData.value = data['industry_emotion_view_points'];
    let items = groupedData();
  }
};

// 详情
const gotoDetail = async (record) => {
  const res = await fetchNewKeywordDetail(record.id);
  if (res.code === 200) {
    visible.value = true;
    topicInfo.value = res.data;
  }
};
const groupedData = () => {
  const groups = {
    negative: { name: '负面', items: [], color: '#F64B31' },
    neutral: { name: '中性', items: [], color: '#FFAA16' },
    positive: { name: '正面', items: [], color: '#25C883' },
  };
  rowData.value.forEach((item) => {
    if (item.felling === 0) groups.negative.items.push(item);
    else if (item.felling === 1) groups.neutral.items.push(item);
    else if (item.felling === 2) groups.positive.items.push(item);
  });

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

// 弹窗的确定
const handleOk = () => {
  visible.value = false;
};
const getKeywordTrendsList = async () => {
  const params = {
    industry_id: selectedIndustry.value,
    time_dimension: selectedTimePeriod.value,
  };
  if (selectedIndustry.value == undefined) {
    return;
  }
  if (selectedSubCategory.value == undefined) {
    return;
  }
  if (selectedSubCategory.value != 0) {
    params['industry_id'] = selectedSubCategory.value;
  }
  const res = await fetchKeywordTrendsList(params);
  if (res.code === 200) {
    dataList.value = res.data;
  }
};

const formatTimestamp = (timestamp) => {
  if (!timestamp) return '未记录';
  try {
    return dayjs.unix(timestamp).format('YYYY-MM-DD HH:mm');
  } catch (e) {
    return '格式错误';
  }
};

const getNewKeywordList = async () => {
  const params = {
    industry_id: selectedIndustry.value,
    time_dimension: selectedTimePeriod.value,
  };
  if (selectedIndustry.value == undefined) {
    return;
  }
  if (selectedSubCategory.value == undefined) {
    return;
  }
  if (selectedSubCategory.value != 0 && selectedSubCategory.value != undefined) {
    params['industry_id'] = selectedSubCategory.value;
  }
  const res = await fetchNewKeywordList(params);
  if (res.code == 200) {
    // 这里需要根据API返回的数据结构处理成tagRows需要的格式
    keywordList.value = res.data;
  }
};

const drawChart = () => {
  let dom = document.getElementById('container');
  let myChart = echarts.init(dom, null, {
    renderer: 'canvas',
    useDirtyRect: false,
  });
  let option;
  option = {
    color: ['#25C883', '#F64B31'],
    series: [
      {
        type: 'pie',
        avoidLabelOverlap: false,
        data: fellingRate.value,
        labelLine: {
          show: false, // 不显示引导线
        },
        radius: ['40%', '55%'],
      },
    ],
  };
  if (option && typeof option === 'object') {
    myChart.setOption(option);
  }
};

const search = () => {
  getKeywordTrendsList();
  getIndustryEmotions();
  getNewKeywordList();
};

// 监听筛选条件变化
watch([selectedTimePeriod, selectedSubCategory], () => {
  getKeywordTrendsList();
  getIndustryEmotions();
  getNewKeywordList();
});

watch([selectedIndustry], () => {
  selectedSubCategory.value = 0;
  getKeywordTrendsList();
  getIndustryEmotions();
  getNewKeywordList();
});

onMounted(() => {
  getKeywordTrendsList();
  getIndustryEmotions();
  getNewKeywordList();
});
</script>

<style scoped lang="scss">
/* 自定义样式 */
:deep(.arco-table-th) {
  background-color: var(--color-fill-2);
}

:deep(.arco-table-tr):hover {
  background-color: var(--color-fill-1);
}
:deep(.arco-statistic-content .arco-statistic-value-integer) {
  font-size: 14px;
}

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

.pop-btn2 {
  background: transparent !important;
  border-color: transparent !important;
  color: #737478 !important;
  margin-left: -8px;
}
.title-row {
  display: flex;
  height: 64px;
  padding: 10px 0 2px 0;
  align-items: center;
  .title {
    color: var(--Text-1, #211f24);
    font-family: 'Alibaba PuHuiTi';
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
}
</style>