合并之前缺少部分

src/views/components/dataEngine/keyWord.vue

@@ -1,6 +1,6 @@
 <template>
   <view>
-    <topHeader ref="topHeaderRef"></topHeader>
+    <topHeader ref="topHeaderRef" @search="search"></topHeader>
     <!-- 关键词热度榜 -->
     <a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 24px; margin: 24px 0">
       <a-space align="center">
@@ -51,7 +51,12 @@
                 style="font-size: 14px"
                 :value="record.trend * 100"
                 :value-style="{ color: '#25C883' }"
-              ></a-statistic>
+              >
+                <template #prefix>
+                  <icon-arrow-fall />
+                </template>
+                <template #suffix>%</template>
+              </a-statistic>
             </template>
           </a-table-column>
           <a-table-column title="情感倾向" data-index="sentiment">
@@ -170,9 +175,9 @@
             <template #cell="{ record }">
               <a-statistic
                 style="font-size: 14px"
-                v-if="record.trend > 0"
                 :value="record.trend * 100"
                 :value-style="{ color: '#F64B31' }"
+                v-if="record.trend > 0"
               >
                 <template #prefix>
                   <icon-arrow-rise />
@@ -184,18 +189,92 @@
                 style="font-size: 14px"
                 :value="record.trend * 100"
                 :value-style="{ color: '#25C883' }"
-              ></a-statistic>
+              >
+                <template #prefix>
+                  <icon-arrow-fall />
+                </template>
+                <template #suffix>%</template>
+              </a-statistic>
+            </template>
+          </a-table-column>
+          <a-table-column title="操作" data-index="optional">
+            <template #cell="{ record }">
+              <a-button type="outline" @click="gotoDetail(record)">详情</a-button>
             </template>
           </a-table-column>
         </template>
       </a-table>
     </a-space>
+    <!-- modal -->
+    <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>{{ 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 } from '@/api/all/index';
+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';
@@ -220,12 +299,18 @@ const dataList = ref([]);
 const rowData = ref([]);
 const keywordList = ref([]);
 const fellingRate = ref([]);
+const visible = ref(false);
+const topicInfo = ref({});
 const getIndustryEmotions = async () => {
   const params = {
     industry_id: selectedIndustry.value,
     time_dimension: selectedTimePeriod.value,
   };
+  if (selectedSubCategory.value != 0) {
+    params['industry_id'] = selectedSubCategory.value;
+  }
   const res = await fetchIndustryEmotions(params);
+  fellingRate.value = [];
   fellingRate.value.push(res['good_felling_rate']);
   fellingRate.value.push(res['bad_felling_rate']);
 
@@ -235,6 +320,14 @@ const getIndustryEmotions = async () => {
   console.log('行业情绪', items);
 };
 
+// 详情
+const gotoDetail = async (record) => {
+  console.log(record);
+  const res = await fetchNewKeywordDetail(record.id);
+  console.log(res);
+  visible.value = true;
+  topicInfo.value = res;
+};
 const groupedData = () => {
   const groups = {
     negative: { name: '负面', items: [], color: '#F64B31' },
@@ -249,12 +342,23 @@ const groupedData = () => {
 
   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 (selectedSubCategory.value != 0) {
+    params['industry_id'] = selectedSubCategory.value;
+  }
   const res = await fetchKeywordTrendsList(params);
   console.log('关键词热度榜', res);
   // 这里需要根据API返回的数据结构处理成tagRows需要的格式
@@ -276,6 +380,9 @@ const getNewKeywordList = async () => {
     industry_id: selectedIndustry.value,
     time_dimension: selectedTimePeriod.value,
   };
+  if (selectedSubCategory.value != 0) {
+    params['industry_id'] = selectedSubCategory.value;
+  }
   const res = await fetchNewKeywordList(params);
   // 这里需要根据API返回的数据结构处理成tagRows需要的格式
   keywordList.value = res;
@@ -307,8 +414,21 @@ const drawChart = () => {
   }
 };
 
+const search = () => {
+  getKeywordTrendsList();
+  getIndustryEmotions();
+  getNewKeywordList();
+};
+
 // 监听筛选条件变化
-watch([selectedIndustry, selectedTimePeriod], () => {
+watch([selectedTimePeriod, selectedSubCategory], () => {
+  getKeywordTrendsList();
+  getIndustryEmotions();
+  getNewKeywordList();
+});
+
+watch([selectedIndustry], () => {
+  selectedSubCategory.value = 0;
   getKeywordTrendsList();
   getIndustryEmotions();
   getNewKeywordList();
@@ -319,22 +439,6 @@ onMounted(() => {
   getIndustryEmotions();
   getNewKeywordList();
 });
-
-// const chartData = computed(() => {
-//   const result = [
-//     { name: '正面', value: 0, color: '#25C883' },
-//     { name: '中性', value: 0, color: '#FFAA16' },
-//     { name: '负面', value: 0, color: '#F64B31' },
-//   ];
-
-//   rawData.value.forEach((item) => {
-//     if (item.felling === 2) result[0].value++;
-//     else if (item.felling === 1) result[1].value++;
-//     else result[2].value++;
-//   });
-
-//   return result.filter((item) => item.value > 0); // 过滤空数据
-// });
 </script>
 
 <style scoped>