合并之前缺少部分

src/views/components/dataEngine/topHeader.vue

@@ -33,17 +33,17 @@
           <a-tag
             size="Medium"
             v-for="item in subCategories"
-            :key="item.value"
+            :key="item.id"
             :checkable="true"
-            :checked="selectedSubCategory == item.value"
-            @check="handleSubCategoryCheck(item.value)"
+            :checked="selectedSubCategory == item.id"
+            @check="handleSubCategoryCheck(item.id)"
             style="padding: 4px 16px; border-radius: 30px; height: 28px"
             :style="
-              selectedSubCategory == item.value
+              selectedSubCategory == item.id
                 ? 'color: #6d4cfe; background-color: #f0edff'
                 : 'color: #3C4043; background-color: #F7F8FA'
             "
-            >{{ item.label }}</a-tag
+            >{{ item.name }}</a-tag
           >
         </a-space>
       </a-space>
@@ -77,32 +77,36 @@
           <!-- 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>
+        <div
+          @click="handleReset"
+          style="
+            width: 92px;
+            height: 32px;
+            font-size: 14px;
+            color: #3c4043;
+            border: 1px solid #d7d7d9;
+            text-align: center;
+            line-height: 32px;
+            border-radius: 4px;
+          "
+        >
+          <icon-refresh></icon-refresh>
+          <span>重置</span>
+        </div>
       </a-space>
     </a-space>
   </view>
 </template>
 
-<script setup>
+<script setup lang="ts">
 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];
+import { fetchIndustriesTree } from '@/api/all/index';
+
 // 行业大类
 const industriesTree = ref([]);
 // 数据状态
 const selectedIndustry = ref();
-const selectedSubCategory = ref('all');
+const selectedSubCategory = ref(0);
 const selectedTimePeriod = ref('7');
 
 // 暴露这些状态给父组件
@@ -111,20 +115,8 @@ defineExpose({
   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 subCategories = ref([]);
 // 时间周期选项
 const timePeriods = [
   {
@@ -141,6 +133,28 @@ const timePeriods = [
   },
 ];
 
+const handleIndustryCheck = (id) => {
+  selectedIndustry.value = id;
+  console.log(industriesTree.value);
+  for (let i = 0; i < industriesTree.value.length; i++) {
+    if (industriesTree.value[i].id == id) {
+      subCategories.value = [];
+      subCategories.value = [...industriesTree.value[i].children];
+      subCategories.value.unshift({ id: 0, name: '全部' });
+      selectedSubCategory.value = 0;
+      break;
+    }
+  }
+};
+
+const handleSubCategoryCheck = (id) => {
+  selectedSubCategory.value = id;
+};
+
+const handleTimePeriodCheck = (value) => {
+  selectedTimePeriod.value = value;
+};
+
 onMounted(() => {
   getIndustriesTree();
 });
@@ -149,52 +163,21 @@ const getIndustriesTree = async () => {
   const res = await fetchIndustriesTree();
   industriesTree.value = res;
   selectedIndustry.value = res[0].id;
-  getIndustryTopics();
+  selectedSubCategory.value = 0;
+  subCategories.value = [...industriesTree.value[0].children];
+  subCategories.value.unshift({ id: 0, name: '全部' });
 };
-
-// 行业热门话题
-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 emit = defineEmits<{
+  (e: 'search'): void;
+}>();
 // 搜索
 const handleSearch = () => {
-  getIndustryTopics();
+  emit('search');
 };
-
-// 弹窗的取消
-const handleCancel = () => {
-  visible.value = false;
-};
-
-// 弹窗的确定
-const handleBeforeOk = () => {
-  visible.value = false;
+const handleReset = () => {
+  selectedIndustry.value = industriesTree.value[0].id;
+  selectedSubCategory.value = 0;
+  selectedTimePeriod.value = '7';
 };
 </script>