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

<template>
  <view>
    <topHeader ref="topHeaderRef"></topHeader>
    <!-- 重点品牌列表 -->
    <a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 24px; margin: 24px 0">
      <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>基于xxx获取数据xxx，一段文字描述该数据的获取方式和来源等xxx</p>
          </template>
        </a-popover>
      </a-space>
      <a-table :data="dataList" :pagination="false" style="font-size: 12px">
        <template #columns>
          <a-table-column title="排名" data-index="rank">
            <template #cell="{ 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>
          </a-table-column>
          <a-table-column title="品牌名称" data-index="name" />
          <a-table-column title="热度指数" data-index="keywords">
            <template #cell="{ record }">
              <img v-for="i in record.hot" :key="i" :src="starImages[i - 1]" style="width: 16px; height: 16px" />
            </template>
          </a-table-column>
          <a-table-column title="变化幅度" data-index="frequency">
            <template #cell="{ record }">
              <a-statistic
                style="font-size: 14px"
                v-if="record.trend > 0"
                :value="record.trend * 100"
                :value-style="{ color: '#F64B31' }"
              >
                <template #prefix>
                  <icon-arrow-rise />
                </template>
                <template #suffix>%</template>
              </a-statistic>
              <a-statistic
                v-else
                style="font-size: 14px"
                :value="record.trend * 100"
                :value-style="{ color: '#25C883' }"
              ></a-statistic>
            </template>
          </a-table-column>
          <a-table-column title="占总声量比例" data-index="content">
            <template #cell="{ record }"> <a-statistic :value="record.volume_rate * 100" />% </template>
          </a-table-column>
        </template>
      </a-table>
    </a-space>
    <!--  舆情 & 敏感动态-->
    <a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 24px; margin: 24px 0">
      <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>基于xxx获取数据xxx，一段文字描述该数据的获取方式和来源等xxx</p>
          </template>
        </a-popover>
      </a-space>
      <a-table :data="otherList" :pagination="false" style="font-size: 12px">
        <template #columns>
          <a-table-column title="品牌" data-index="brand" />
          <a-table-column title="事件标题" data-index="title" />
          <a-table-column title="事件详情" data-index="content" />
        </template>
      </a-table>
    </a-space>
  </view>
</template>

<script setup>
import topHeader from './topHeader.vue';
import { fetchFocusBrandsList, fetchEventDynamicsList } from '@/api/all/index';
import { ref, onMounted, computed } from 'vue';
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 topImages = [top1, top2, top3];
const starImages = [star1, star2, star3, star4, star5];
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 otherList = ref([]);

const getFocusBrandsList = async () => {
  const params = {
    industry_id: selectedIndustry.value,
    time_dimension: selectedTimePeriod.value,
  };
  const res = await fetchFocusBrandsList(params);
  // 这里需要根据API返回的数据结构处理成tagRows需要的格式
  dataList.value = res;
};

const getEventDynamicsList = async () => {
  const params = {
    industry_id: selectedIndustry.value,
    time_dimension: selectedTimePeriod.value,
  };
  const res = await fetchEventDynamicsList(params);
  // 这里需要根据API返回的数据结构处理成tagRows需要的格式
  otherList.value = res;
};

onMounted(() => {
  getFocusBrandsList();
  getEventDynamicsList();
});
// 监听筛选条件变化
watch([selectedIndustry, selectedTimePeriod], () => {
  getFocusBrandsList();
  getEventDynamicsList();
});
</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-statistic-content .arco-statistic-value-integer) {
  font-size: 14px;
}

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

:deep(.arco-btn-outline) {
  color: #6d4cfe !important;
  border-color: #6d4cfe !important;
}
</style>