合并分支 'dev_hhq' 到 'master'

src/api/companyPages/index.js

@@ -91,4 +91,35 @@ export function getSanctionList(params) {
   })
 }
 
+//被制裁情况:数据对比
+export function getStudyList(params) {
+  return request({
+    method: 'GET',
+    url: `/api/enterprisePage/getStudyList/${params}`,
+  })
+}
+
+//供应链:领域
+export function getSupplyAreaList(params) {
+  return request({
+    method: 'GET',
+    url: `/api/enterprisePage/getSupplyAreaList/${params}`,
+  })
+}
 
+//供应链:国家地区
+export function getSupplyCountryList(params) {
+  return request({
+    method: 'GET',
+    url: `/api/enterprisePage/getSupplyCountryList/${params}`,
+  })
+}
+
+//供应链:关系
+export function getSupplyList(params) {
+  return request({
+    method: 'GET',
+    url: `/api/enterprisePage/getSupplyList/${params.id}`,
+    params,
+  })
+}

src/api/innovationSubject/overview.js

+// 智库概览信息
+import request from "@/api/request.js";
+
+//创新主体主页:统计不同创新主体类型对应的主体数量
+export function getCountSubjectType() {
+  return request({
+    method: 'GET',
+    url: `/api/innovateSubject/countSubjectType`,
+  })
+}
+// 创新主体主页:统计不同地理对应的主体数量
+export function getCountGeography() {
+  return request({
+    method: 'GET',
+    url: `/api/innovateSubject/countGeography`,
+  })
+}
+
+//创新主体主页:类型列表
+export function getSubjectTypeList() {
+  return request({
+    method: 'GET',
+    url: `/api/innovateSubject/subjectTypeList`,
+  })
+}
+
+//创新主体主页:通过类型分页查询创新主体列表
+export function findListBySubjectTypeId(params) {
+  return request({
+    method: 'GET',
+    url: `/api/innovateSubject/findListBySubjectTypeId`,
+    params
+  })
+}
+
+//创新主体主页:综合排名
+export function getOverallRanking(params) {
+  return request({
+    method: 'GET',
+    url: `/api/innovateSubject/overallRanking`,
+    params
+  })
+}
\ No newline at end of file

src/views/companyPages/component/SupplyChain.vue

@@ -12,10 +12,10 @@
 
         <!-- 右侧操作图标 -->
         <div class="action-icons">
-          <label class="checkbox-item" style="display: flex;align-items: center;">
+          <!-- <label class="checkbox-item" style="display: flex;align-items: center;">
             <input type="checkbox" v-model="rule" />
             <div style="width: 145px;"> 50%穿透规则影响</div>
-          </label>
+          </label> -->
           <!-- 搜索框容器 -->
           <el-input v-model="searchKeyword" style="height: 28px;width: 200px;" placeholder="搜索内容">
             <template #suffix>
@@ -55,10 +55,14 @@
         <div class="filter-section">
           <h4 class="filter-title">领域</h4>
           <div class="checkbox-group">
-            <label v-for="(item, index) in domainFilters" :key="'domain-' + index" class="checkbox-item">
+            <el-checkbox-group v-model="selectedDomain" @change="handleAreaChange">
+              <el-checkbox :label="item.name + '(' + item.num + ')'" v-for="(item, index) in domainFilters"
+                :value="item.id" />
+            </el-checkbox-group>
+            <!-- <label v-for="(item, index) in domainFilters" :key="'domain-' + index" class="checkbox-item">
               <input type="checkbox" v-model="item.checked" />
               <span>{{ item.label }}</span>
-            </label>
+            </label> -->
           </div>
         </div>
 
@@ -66,10 +70,14 @@
         <div class="filter-section country-filter">
           <h4 class="filter-title">国家/地区</h4>
           <div class="checkbox-group two-columns">
-            <label v-for="(item, index) in countryFilters" :key="'country-' + index" class="checkbox-item">
+            <el-checkbox-group v-model="selectedcountry" @change="handleCountryChange">
+              <el-checkbox :label="item.name + '(' + item.num + ')'" v-for="(item, index) in countryFilters"
+                :value="item.id" />
+            </el-checkbox-group>
+            <!-- <label v-for="(item, index) in countryFilters" :key="'country-' + index" class="checkbox-item">
               <input type="checkbox" v-model="item.checked" />
               <span>{{ item.label }}</span>
-            </label>
+            </label> -->
           </div>
         </div>
 
@@ -77,10 +85,10 @@
         <div class="filter-section">
           <h4 class="filter-title">上下游</h4>
           <div class="checkbox-group">
-            <label v-for="(item, index) in upstreamFilters" :key="'upstream-' + index" class="checkbox-item">
-              <input type="checkbox" v-model="item.checked" />
-              <span>{{ item.label }}</span>
-            </label>
+            <el-checkbox-group v-model="selectType" @change="handleTypeChange">
+              <el-checkbox label="上游" value="supply" />
+              <el-checkbox label="下游" value="customer" /> </el-checkbox-group>
+
           </div>
         </div>
       </div>
@@ -93,28 +101,62 @@
 import { ref, onMounted } from 'vue'
 import * as echarts from 'echarts'
 import getGraphChart from '../js/graphChart.js'
+import { getSupplyAreaList, getSupplyCountryList, getSupplyList } from "@/api/companyPages/index.js";
+import { useRouter } from "vue-router";
+const router = useRouter();
 
 const rule = ref('true')//
 const searchKeyword = ref('')
 const domainFilters = ref([
-  { label: '工业软件领域 (36)', checked: true },
-  { label: '供应链与物流服务领域 (36)', checked: false },
-  { label: '人工智能领域 (56)', checked: false },
-  { label: '半导体与集成电路领域 (19)', checked: false },
-  { label: '航天遥感与量子技术领域 (51)', checked: false }
+  // { label: '工业软件领域 (36)', checked: true },
+  // { label: '供应链与物流服务领域 (36)', checked: false },
+  // { label: '人工智能领域 (56)', checked: false },
+  // { label: '半导体与集成电路领域 (19)', checked: false },
+  // { label: '航天遥感与量子技术领域 (51)', checked: false }
 ])
+const selectedDomain = ref([])
+
+const handleGetSupplyAreaList = async () => {
+  try {
+    const res = await getSupplyAreaList(router.currentRoute._value.params.id);
+    console.log("领域", res);
+    if (res.code === 200 && res.data) {
+      domainFilters.value = res.data
+    }
+  } catch (error) {
+    console.error("获取领域error", error);
+  }
+};
+
+const handleAreaChange = val => {
+  handleGetSupplyList()
+};
 
 const countryFilters = ref([
-  { label: '中国 (36)', checked: false },
-  { label: '美国 (36)', checked: false },
-  { label: '韩国 (56)', checked: false },
-  { label: '日本 (19)', checked: false },
-  { label: '中国台湾 (51)', checked: false },
-  { label: '德国 (51)', checked: false },
-  { label: '荷兰 (12)', checked: false },
-  { label: '澳大利亚 (4)', checked: false }
+  // { label: '中国 (36)', checked: false },
+  // { label: '美国 (36)', checked: false },
+  // { label: '韩国 (56)', checked: false },
+  // { label: '日本 (19)', checked: false },
+  // { label: '中国台湾 (51)', checked: false },
+  // { label: '德国 (51)', checked: false },
+  // { label: '荷兰 (12)', checked: false },
+  // { label: '澳大利亚 (4)', checked: false }
 ])
-
+const selectedcountry = ref([])
+const handleGetSupplyCountryList = async () => {
+  try {
+    const res = await getSupplyCountryList(router.currentRoute._value.params.id);
+    console.log("领域", res);
+    if (res.code === 200 && res.data) {
+      countryFilters.value = res.data
+    }
+  } catch (error) {
+    console.error("获取领域error", error);
+  }
+};
+const handleCountryChange = val => {
+  handleGetSupplyList()
+};
 const upstreamFilters = ref([
   { label: '核心企业 (36)', checked: false },
   { label: '控股子公司 (36)', checked: false },
@@ -279,11 +321,61 @@ const setChart = (option, chartId) => {
   chart.setOption(option)
   return chart
 }
-
-onMounted(() => {
-  // 假设你有 getGraphChart 函数
+const selectType = ref([])
+
+const handleTypeChange = val => {
+  handleGetSupplyList()
+};
+const handleGetSupplyList = async () => {
+  try {
+    let params = {
+      arealist: selectedDomain.value ? selectedDomain.value.join(",") : null,
+      countrylist: selectedcountry.value ? selectedcountry.value.join(",") : null,
+      type: selectType.value.length === 2 ? 'all' : selectType.value ? selectType.value : null,
+      id: router.currentRoute._value.params.id
+    }
+    const res = await getSupplyList(params);
+    console.log("关系", res);
+    if (res.code === 200 && res.data) {
+
+      // 提取所有公司名称
+      const allCompanies = new Set(res.data.flatMap(item => [item.orgName, item.otherOrgName]));
+      const companyMap = {};
+      let id = 0;
+
+      // 创建公司名称到ID的映射
+      allCompanies.forEach(company => {
+        companyMap[company] = id++;
+      });
+
+      // 创建nodes数组
+      const nodes = Array.from(allCompanies, (company, index) => ({
+        id: index,
+        name: company,
+        symbolSize: 30,
+        value: 8,
+        symbol: `image://${CompanyImg}` // 假设CompanyImg是一个图片路径变量
+      }));
+
+      // 创建links数组
+      const links = res.data.map(item => ({
+        source: companyMap[item.orgName],
+        target: companyMap[item.otherOrgName]
+      }));
+      nodes.value = nodes
+      links.value = links
       const graphOption = getGraphChart(nodes.value, links.value)
       setChart(graphOption, "graphChart")
+    }
+  } catch (error) {
+    console.error("获取关系error", error);
+  }
+};
+onMounted(() => {
+  handleGetSupplyAreaList()
+  handleGetSupplyCountryList()
+  handleGetSupplyList()
+
 
   // 临时占位：防止报错
   // const placeholderOption = {

src/views/companyPages/component/process.vue

 <template>
   <div class="chart-container">
-    <div v-for="(item, index) in chartData" :key="index" class="chart-card">
+    <div v-for="(item, index) in rawData" :key="index" class="chart-card">
       <!-- 研发投入 -->
       <div class="metric-section">
         <div class="metric-header">
           <span class="title">研发投入</span>
-          <span class="growth-badge">+13.2%</span>
+          <span class="growth-badge">{{ item.investmentGrowthRate + ' % ' }}</span>
         </div>
         <!-- 制裁后 -->
         <div class="bar-row">
           <div class="year-label">{{ item.year }}</div>
           <div style="width: calc(100% - 66px);">
             <div class="bar after" :style="{ width: getInvestmentWidth(item.investmentAfter) + '%' }">
-              <div class="value-label">{{ formatInvestment(item.investmentAfter) }}</div>
+              <div class="value-label">{{ item.investmentAfter + item.investmentUnit }}</div>
             </div>
           </div>
 
         </div>
         <!-- 制裁前 -->
         <div class="bar-row">
-          <div class="year-label">{{ item.year }}</div>
+          <div class="year-label">{{ item.previousYear }}</div>
           <div style="width: calc(100% - 66px);">
             <div class="bar before" :style="{ width: getInvestmentWidth(item.investmentBefore) + '%' }">
-              <div class="value-label">{{ formatInvestment(item.investmentBefore) }}</div>
+              <div class="value-label">{{ item.investmentBefore + item.investmentUnit }}</div>
             </div>
           </div>
 
@@ -33,23 +33,23 @@
       <div class="metric-section">
         <div class="metric-header">
           <span class="title">研发人员</span>
-          <span class="growth-badge">+13.2%</span>
+          <span class="growth-badge">{{ item.staffGrowthRate + '% ' }}</span>
         </div>
         <!-- 制裁后 -->
         <div class="bar-row">
           <div class="year-label">{{ item.year }}</div>
           <div style="width: calc(100% - 66px);">
             <div class="bar after" :style="{ width: getStaffWidth(item.staffAfter) + '%' }">
-              <div class="value-label">{{ formatStaff(item.staffAfter) }}</div>
+              <div class="value-label">{{ item.staffAfter + item.staffmentUnit }}</div>
             </div>
           </div>
         </div>
         <!-- 制裁前 -->
         <div class="bar-row">
-          <div class="year-label">{{ item.year }}</div>
+          <div class="year-label">{{ item.previousYear }}</div>
           <div style="width: calc(100% - 66px);">
             <div class="bar before" :style="{ width: getStaffWidth(item.staffBefore) + '%' }">
-              <div class="value-label">{{ formatStaff(item.staffBefore) }}</div>
+              <div class="value-label">{{ item.staffBefore + item.staffmentUnit }}</div>
             </div>
           </div>
         </div>
@@ -71,22 +71,71 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
+import { useRouter } from "vue-router";
+import { getStudyList } from "@/api/companyPages/index.js";
+const router = useRouter();
 
 // 模拟从 JSON 导入（实际可替换为 import data from './rdData.json'）
-const rawData = [
-  { year: "2019", investmentBefore: 1.01, investmentAfter: 1.37, staffBefore: 80000, staffAfter: 96000 },
-  { year: "2020", investmentBefore: 1.15, investmentAfter: 1.52, staffBefore: 85000, staffAfter: 102000 },
-  { year: "2021", investmentBefore: 1.20, investmentAfter: 1.68, staffBefore: 90000, staffAfter: 110000 },
-  { year: "2022", investmentBefore: 1.25, investmentAfter: 1.75, staffBefore: 92000, staffAfter: 115000 },
-  { year: "2023", investmentBefore: 1.30, investmentAfter: 1.85, staffBefore: 95000, staffAfter: 120000 }
-];
+const rawData = ref([
+  // { year: "2019", investmentBefore: 1.01, investmentAfter: 1.37, staffBefore: 80000, staffAfter: 96000 },
+  // { year: "2020", investmentBefore: 1.15, investmentAfter: 1.52, staffBefore: 85000, staffAfter: 102000 },
+  // { year: "2021", investmentBefore: 1.20, investmentAfter: 1.68, staffBefore: 90000, staffAfter: 110000 },
+  // { year: "2022", investmentBefore: 1.25, investmentAfter: 1.75, staffBefore: 92000, staffAfter: 115000 },
+  // { year: "2023", investmentBefore: 1.30, investmentAfter: 1.85, staffBefore: 95000, staffAfter: 120000 }
+])
+const handleGetStudyList = async () => {
+  try {
+    const res = await getStudyList(router.currentRoute._value.params.id);
+    console.log("被制裁情况:数据对比", res);
+    if (res.code === 200 && res.data) {
+      // 创建一个映射对象，用于存储分组后的数据
+      const groupedData = {};
+
+      res.data.forEach(item => {
+        const key = `${item.year}-${item.previousYear}`;
+
+        if (!groupedData[key]) {
+          groupedData[key] = {
+            year: item.year,
+            previousYear: item.previousYear,
+            investmentAfter: 0,
+            investmentBefore: 0,
+            investmentGrowthRate: 0,
+            staffAfter: 0,
+            staffBefore: 0,
+            staffGrowthRate: 0
+          };
+        }
+
+        if (item.type === "研发投入") {
+          groupedData[key].investmentAfter = item.currentValue;
+          groupedData[key].investmentBefore = item.previousValue;
+          groupedData[key].investmentGrowthRate = item.growthRate;
+          groupedData[key].investmentUnit = item.unit;
+        } else if (item.type === "研发人员") {
+          groupedData[key].staffAfter = item.currentValue;
+          groupedData[key].staffBefore = item.previousValue;
+          groupedData[key].staffGrowthRate = item.growthRate;
+          groupedData[key].staffmentUnit = item.unit;
+        }
+      });
+
+      // 将结果转换为数组
+      const result = Object.values(groupedData);
+      rawData.value = result
+      // rawData.value = result
+      console.log(rawData.value, 'rawData.valuerawData.value')
+    }
+  } catch (error) {
+    console.error("获取被制裁情况:数据对比error", error);
+  }
+};
 
-const chartData = ref(rawData);
 
 // === 投入相关计算 ===
 const maxInvestment = computed(() => {
-  return Math.max(...chartData.value.flatMap(d => [d.investmentBefore, d.investmentAfter]));
+  return Math.max(...rawData.value.flatMap(d => [d.investmentBefore, d.investmentAfter]));
 });
 
 function getInvestmentWidth(value) {
@@ -99,7 +148,7 @@ function formatInvestment(value) {
 
 // === 人员相关计算 ===
 const maxStaff = computed(() => {
-  return Math.max(...chartData.value.flatMap(d => [d.staffBefore, d.staffAfter]));
+  return Math.max(...rawData.value.flatMap(d => [d.staffBefore, d.staffAfter]));
 });
 
 function getStaffWidth(value) {
@@ -109,12 +158,17 @@ function getStaffWidth(value) {
 function formatStaff(value) {
   return Math.round(value / 1000) + 'k+';
 }
+
+onMounted(() => {
+  handleGetStudyList()
+});
 </script>
 
 <style scoped>
 .chart-container {
   display: flex;
-  flex-wrap: wrap;
+  /* flex-wrap: wrap; */
+  overflow: auto;
   gap: 24px;
   padding: 24px;
 }

src/views/innovationSubject/index.vue

+<!--创新主体主页-->
 <template>
 	<div class="home-wrapper">
 		<div class="search-header" v-show="isShow">
@@ -122,29 +123,20 @@
 						<div class="box1-main">
 							<div class="box1-main-left">
 								<div class="box1-main-left-top">
-									<div
-										class="box1-main-left-top-item"
-										v-for="item in distributionList"
-										:key="item.name"
-										:style="{ backgroundColor: item.color, color: item.textcolor }"
-									>
+									<div class="box1-main-left-top-item" v-for="item in distributionList" :key="item.name"
+										:style="{ backgroundColor: item.color, color: item.textcolor }">
 										<div class="box1-main-left-top-item-text1">{{ item.name }}</div>
 										<div class="box1-main-left-top-item-text2">{{ item.num }}</div>
 									</div>
 								</div>
 								<div class="box1-main-left-down">
-									<div
-										class="box1-main-left-down-item"
-										v-for="item in zhouList"
-										:key="item.index"
-										:style="{
+									<div class="box1-main-left-down-item" v-for="(item, index) in zhouList" :key="index" :style="{
 										backgroundColor:
-												item.index % 2 !== 0 ? 'rgba(248, 249, 250, 1)' : 'rgba(255, 255, 255, 1)'
-										}"
-									>
-										<div class="box1-main-left-down-item-index">{{ item.index }}</div>
-										<div class="box1-main-left-down-item-text">{{ item.name }}</div>
-										<div class="box1-main-left-down-item-num">{{ item.num }}</div>
+											index % 2 !== 0 ? 'rgba(248, 249, 250, 1)' : 'rgba(255, 255, 255, 1)'
+									}">
+										<div class="box1-main-left-down-item-index">{{ index + 1 }}</div>
+										<div class="box1-main-left-down-item-text">{{ item.countName }}</div>
+										<div class="box1-main-left-down-item-num">{{ item.countNum }}</div>
 									</div>
 								</div>
 							</div>
@@ -164,18 +156,11 @@
 							</div>
 						</div>
 						<div class="box2-main">
-							<div
-								class="box2-main-item"
-								v-for="(item, index) in warningList"
-								:key="index"
-							>
-								<div
-									class="item-left"
-									:class="{
+							<div class="box2-main-item" v-for="(item, index) in warningList" :key="index">
+								<div class="item-left" :class="{
 									itemLeftStatus1: item.status === '一般风险',
 									itemLeftStatus2: item.status === '重大风险'
-									}"
-								>
+								}">
 									{{ item.status }}
 								</div>
 								<div class="item-right">
@@ -249,24 +234,16 @@
 					<div class="center-footer">
 						<div class="home-main-footer-header">
 							<div class="btn-box">
-								<div
-									class="btn"
-									:class="{ btnActive: activeCate === cate }"
-									v-for="(cate, index) in categoryList"
-									:key="index"
-									@click="handleClickCate(cate)"
-								>
+								<div class="btn" :class="{ btnActive: activeCate === cate }" v-for="(cate, index) in categoryList"
+									:key="index" @click="handleClickCate(cate)">
 									{{ cate }}
 								</div>
 							</div>
 							<div class="select-box">
-								<el-select v-model="releaseTime" placeholder="2022" style="width: 120px">
-									<el-option
-										v-for="item in releaseTimeList"
-										:key="item.value"
-										:label="item.label"
-										:value="item.value"
-									/>
+								<el-select v-model="releaseTime" placeholder="2022" style="width: 120px"
+									@change="handleGetOverallRanking">
+									<el-option v-for="item in releaseTimeList" :key="item.value" :label="item.label"
+										:value="item.value" />
 								</el-select>
 							</div>
 						</div>
@@ -279,44 +256,37 @@
 							</div>
 							<div class="title">{{ "创新主体综合排名" }}</div>
 						</div>
-						<el-table
-							:data="innoItemList"
-							class="sanction-table"
-							stripe
-							empty-text="暂无数据"
-							header-row-class-name="table-header"
-							row-class-name="table-row"
-						>
-							<el-table-column prop="rank" label="排名" width="80"> </el-table-column>
-							<el-table-column prop="name" label="机构名称" width="200"> </el-table-column>
+						<el-table :data="innoItemList.datalist" class="sanction-table" stripe empty-text="暂无数据"
+							header-row-class-name="table-header" row-class-name="table-row">
+							<el-table-column :prop="item.columnName" :label="item.columnLabel"
+								v-for="item in innoItemList.headerlist"><template #default="scope">
+									{{ scope.row.columnValues[item.columnName] }}
+								</template> </el-table-column>
+							<!-- <el-table-column prop="name" label="机构名称" width="200"> </el-table-column>
 							<el-table-column label="类型" width="200">
 								<template #default="scope">
 									<div style="display: flex; align-items: center; gap: 5px">
-										<div
-											v-for="tag in scope.row.type"
-											:key="tag"
-											:class="{
+										<div v-for="tag in scopetype" :key="tag" :class="{
 											tag1: tag === '研究型大学',
 											tag2: tag === '国家实验室',
 											tag3: tag === '科技企业',
 											tag4: tag === '国防承包商'
-											}"
-										>
+										}">
 											{{ tag }}
 										</div>
 									</div>
 								</template>
-							</el-table-column>
-							<el-table-column prop="research" label="研发投入指数" width="200"> </el-table-column>
-							<el-table-column prop="people" label="人员投入指数" width="200"> </el-table-column>
-							<el-table-column prop="patent" label="专利产出指数" width="200"> </el-table-column>
-							<el-table-column prop="paper" label="论文产出指数" width="200"> </el-table-column>
-							<el-table-column prop="score" label="综合得分" width="150"> </el-table-column>
-							<el-table-column prop="trend" label="趋势" width="100">
+</el-table-column>
+<el-table-column prop="research" label="研发投入指数" width="200"> </el-table-column>
+<el-table-column prop="people" label="人员投入指数" width="200"> </el-table-column>
+<el-table-column prop="patent" label="专利产出指数" width="200"> </el-table-column>
+<el-table-column prop="paper" label="论文产出指数" width="200"> </el-table-column>
+<el-table-column prop="score" label="综合得分" width="150"> </el-table-column>
+<el-table-column prop="trend" label="趋势" width="100">
 	<template #default="scope">
 									<div :class="{ up: scope.row.trend === 'up', down: scope.row.trend === 'down' }"></div>
 								</template>
-							</el-table-column>
+</el-table-column> -->
 						</el-table>
 						<div class="center-footer-elx-footer">
 							<img src="./assets/images/ai.png" alt="" />
@@ -332,24 +302,15 @@
 					<div class="center-footer">
 						<div class="home-main-footer-header">
 							<div class="btn-box">
-								<div
-									class="btn"
-									:class="{ btnActive: activeCate === cate }"
-									v-for="(cate, index) in categoryList"
-									:key="index"
-									@click="handleClickCate(cate)"
-								>
+								<div class="btn" :class="{ btnActive: activeCate === cate }" v-for="(cate, index) in categoryList"
+									:key="index" @click="handleClickCate(cate)">
 									{{ cate }}
 								</div>
 							</div>
 							<div class="select-box">
 								<el-select v-model="releaseTime" placeholder="2022" style="width: 120px">
-									<el-option
-										v-for="item in releaseTimeList"
-										:key="item.value"
-										:label="item.label"
-										:value="item.value"
-									/>
+									<el-option v-for="item in releaseTimeList" :key="item.value" :label="item.label"
+										:value="item.value" />
 								</el-select>
 							</div>
 						</div>
@@ -363,19 +324,23 @@
 						</div>
 						<div class="center-footer-layout-content">
 							<div class="center-footer-layout-content-item">
-								<EChart :option="pieOption" autoresize :style="{ height: '370px',width:'750px' }" />
+								<EChart :option="pieOption" autoresize :style="{ height: '370px', width: '750px' }" />
 								<div class="center-footer-elx-footer">
 									<img src="./assets/images/ai.png" alt="" />
-									<div class="center-footer-elx-footer-text">人工智能与信息技术占据最大份额，反映了数字经济的核心地位;生物医学与健康是第二大研发领域，特别是在疫情后投入显著增加;能源与环境技术和先进制造与材料作为基础支撑领域保持稳定投入;国家安全与国防和航空航天作为战略领域保持专项投入。</div>
+									<div class="center-footer-elx-footer-text">
+										人工智能与信息技术占据最大份额，反映了数字经济的核心地位;生物医学与健康是第二大研发领域，特别是在疫情后投入显著增加;能源与环境技术和先进制造与材料作为基础支撑领域保持稳定投入;国家安全与国防和航空航天作为战略领域保持专项投入。
+									</div>
 									<img src="./assets/images/icon-right.png" alt="" />
 								</div>
 							</div>
 							<div style="width: 1px;height: 432px;background: rgba(234, 236, 238, 1);"></div>
 							<div class="center-footer-layout-content-item">
-								<EChart :option="raderOption" autoresize :style="{ height: '370px',width:'750px' }" />
+								<EChart :option="raderOption" autoresize :style="{ height: '370px', width: '750px' }" />
 								<div class="center-footer-elx-footer">
 									<img src="./assets/images/ai.png" alt="" />
-									<div class="center-footer-elx-footer-text">研究型大学在基础科学领域(生物医学、材料科学)占据主导地位；科技企业高度集中于人工智能和信息技术领域；国家实验室在能源技术和国家安全相关领域有显著优势；国防承包商的研究高度集中于航空航天和国家安全领域。</div>
+									<div class="center-footer-elx-footer-text">
+										研究型大学在基础科学领域(生物医学、材料科学)占据主导地位；科技企业高度集中于人工智能和信息技术领域；国家实验室在能源技术和国家安全相关领域有显著优势；国防承包商的研究高度集中于航空航天和国家安全领域。
+									</div>
 									<img src="./assets/images/icon-right.png" alt="" />
 								</div>
 							</div>
@@ -387,14 +352,9 @@
 				<DivideHeader id="position4" class="divide4" :titleText="'资源库'"></DivideHeader>
 				<div class="home-main-footer-header">
 					<div class="btn-box">
-						<div
-							class="btn"
-							:class="{ btnActive: activeCate1 === cate }"
-							v-for="(cate, index) in categoryList1"
-							:key="index"
-							@click="handleClickCate1(cate)"
-						>
-							{{ cate }}
+						<div class="btn" :class="{ btnActive: activeCate1 === cate.id }" v-for="(cate, index) in categoryList1"
+							:key="index" @click="handleClickCate1(cate.id)">
+							{{ cate.typeName }}
 						</div>
 					</div>
 					<div class="select-box">
@@ -404,40 +364,30 @@
 					</div>
 				</div>
 				<div class="home-main-footer-main">
-
+					<div style="    width: 1600px;">
 						<div class="footer-main-item" v-for="item in universityList" :key="item.name" @click="handleClickToDetail">
-						<img :src="item.pic" style="height: 32px; width: 32px;" />
-						<div class="item-text">{{ item.name }}</div>
-						<div class="item-text2">{{ item.adder }}</div>
-						<div class="item-text2">{{ item.area }}</div>
+							<img :src="item.logoUrl" style="height: 32px; width: 32px;" />
+							<div class="item-text">{{ item.orgName }}</div>
+							<div class="item-text2">{{ item.address }}</div>
+							<div class="item-text2">{{ item.businessScope }}</div>
 							<div class="taglist">
-							<div
-								class="tag1"
-								style="width: 82px"
-								v-for="(val, idx) in item.tag"
-								:key="idx"
-								:class="{
-									tag2: val === '新能源',
-									tag3: val === '集成电路',
+								<div class="tag1" v-for="(val, idx) in item.taglist" :key="idx" :class="{
+									tag2: val === '人工智能',
+									tag3: val === '新一代通信技术',
 									tag4: val === '生物科技',
 									tag5: val === '量子科技'
-								}"
-							>
+								}">
 									{{ val }}
 								</div>
 							</div>
 						</div>
 
+					</div>
+
 					<div class="footer-box">
 						<div class="footer-right">
-							<el-pagination
-								@current-change="handleCurrentChange"
-								:pageSize="12"
-								:current-page="currentPage"
-								background
-								layout="prev, pager, next"
-								:total="100"
-							/>
+							<el-pagination @current-change="handleCurrentChange" :pageSize="12" :current-page="currentPage" background
+								layout="prev, pager, next" :total="total" />
 						</div>
 					</div>
 				</div>
@@ -457,8 +407,14 @@ import getBarChart from "./utils/barChart";
 import getPieChart from "./utils/piechart";
 import getCalendarHeatChart from "./utils/cleandarHeat";
 import EChart from "@/components/Chart/index.vue";
-import {pieOption, raderOption} from "./utils/charts";
-
+import { pieOption, raderOption } from "./utils/charts";
+import {
+	getCountGeography,
+	getCountSubjectType,
+	getSubjectTypeList,
+	findListBySubjectTypeId,
+	getOverallRanking
+} from "@/api/innovationSubject/overview.js";
 import setChart from "@/utils/setChart";
 
 import News1 from "./assets/images/news1.png";
@@ -481,12 +437,15 @@ const handleBackHome = () => {
 const containerRef = ref(null);
 const { isShow } = useContainerScroll(containerRef);
 const currentPage = ref(1);
-const pageSize = ref(10);
+const total = ref(0)
+const pageSize = ref(16);
 // 处理页码改变事件
 const handleCurrentChange = page => {
 	currentPage.value = page;
+	handleFindListBySubjectTypeId()
 };
 
+
 // 地理分布
 const distributionList = ref([
 	{
@@ -514,35 +473,87 @@ const distributionList = ref([
 		textcolor: "rgba(114, 46, 209, 1)"
 	}
 ]);
-
-const zhouList = ref([
-	{
-		index: 1,
-		name: "马萨诸塞州",
-		num: "85"
-	},
+const distributionColorList = ref([
 	{
-		index: 2,
-		name: "加利福尼亚州",
-		num: "67"
+
+		color: "rgba(231, 243, 255, 1)",
+		textcolor: "rgba(22, 119, 255, 1)"
 	},
 	{
-		index: 3,
-		name: "佐治亚州",
-		num: "49"
+		color: "rgba(255, 247, 230, 1)",
+		textcolor: "rgba(255, 169, 64, 1)"
 	},
 	{
-		index: 4,
-		name: "华盛顿州",
-		num: "31"
+		color: "rgba(230, 255, 251, 1)",
+		textcolor: "rgba(19, 168, 168, 1)"
 	},
 	{
-		index: 5,
-		name: "伊利诺伊州",
-		num: "29"
+		color: "rgba(249, 240, 255, 1)",
+		textcolor: "rgba(114, 46, 209, 1)"
 	}
+])
+//统计不同创新主体类型对应的主体数量
+const handleGetCountSubjectType = async () => {
+	try {
+		const res = await getCountSubjectType();
+		console.log("统计不同创新主体类型对应的主体数量", res);
+		if (res.code === 200 && res.data) {
+			distributionList.value = res.data
+			let data = []
+			res.data.map((item, index) => {
+				data.push({
+					name: item.countName,
+					num: item.countNum,
+					color: distributionColorList.value[index].color,
+					textcolor: distributionColorList.value[index].textcolor,
+				})
+			})
+			distributionList.value = data
+		}
+	} catch (error) {
+		console.error("获取统计不同创新主体类型对应的主体数量error", error);
+	}
+};
+const zhouList = ref([
+	// {
+	// 	index: 1,
+	// 	name: "马萨诸塞州",
+	// 	num: "85"
+	// },
+	// {
+	// 	index: 2,
+	// 	name: "加利福尼亚州",
+	// 	num: "67"
+	// },
+	// {
+	// 	index: 3,
+	// 	name: "佐治亚州",
+	// 	num: "49"
+	// },
+	// {
+	// 	index: 4,
+	// 	name: "华盛顿州",
+	// 	num: "31"
+	// },
+	// {
+	// 	index: 5,
+	// 	name: "伊利诺伊州",
+	// 	num: "29"
+	// }
 ]);
 
+//统计不同地理对应的主体数量
+const handleGetCountGeography = async () => {
+	try {
+		const res = await getCountGeography();
+		console.log("统计不同地理对应的主体数量", res);
+		if (res.code === 200 && res.data) {
+			zhouList.value = res.data
+		}
+	} catch (error) {
+		console.error("获取统计不同地理对应的主体数量error", error);
+	}
+};
 // 点击查看详情
 const handleClickToDetail = () => {
 	const route = router.resolve("/InnovativeInstitutions");
@@ -686,151 +697,171 @@ const chart1Data = ref([
 ]);
 const colorList = ["#69B1FF", "#FFC069", "#87E8DE", "#85A5FF", "#FF7875", "#B37FEB"];
 
-const innoItemList = [
-	{
-		rank: "1",
-		name: "麻省理工学院（MIT）",
-		type: ["研究型大学"],
-		research: "64",
-		people: "72",
-		patent: "87",
-		paper: "22",
-		score: "92",
-		trend: "up"
-	},
-	{
-		rank: "2",
-		name: "麻省理工学院",
-		type: ["国家实验室"],
-		research: "66",
-		people: "60",
-		patent: "68",
-		paper: "69",
-		score: "85",
-		trend: "up"
-	},
-	{
-		rank: "3",
-		name: "斯坦福大学",
-		type: ["科技企业"],
-		research: "76",
-		people: "11",
-		patent: "93",
-		paper: "51",
-		score: "81",
-		trend: "up"
-	},
-	{
-		rank: "4",
-		name: "谷歌（Alphabet）",
-		type: ["科技企业"],
-		research: "07",
-		people: "02",
-		patent: "21",
-		paper: "04",
-		score: "76",
-		trend: "down"
-	},
-	{
-		rank: "5",
-		name: "耶鲁大学",
-		type: ["国防承包商"],
-		research: "12",
-		people: "04",
-		patent: "63",
-		paper: "38",
-		score: "71",
-		trend: "down"
-	}
-];
+const innoItemList = ref({})
+// [
+// 	{
+// 		rank: "1",
+// 		name: "麻省理工学院（MIT）",
+// 		type: ["研究型大学"],
+// 		research: "64",
+// 		people: "72",
+// 		patent: "87",
+// 		paper: "22",
+// 		score: "92",
+// 		trend: "up"
+// 	},
+// 	{
+// 		rank: "2",
+// 		name: "麻省理工学院",
+// 		type: ["国家实验室"],
+// 		research: "66",
+// 		people: "60",
+// 		patent: "68",
+// 		paper: "69",
+// 		score: "85",
+// 		trend: "up"
+// 	},
+// 	{
+// 		rank: "3",
+// 		name: "斯坦福大学",
+// 		type: ["科技企业"],
+// 		research: "76",
+// 		people: "11",
+// 		patent: "93",
+// 		paper: "51",
+// 		score: "81",
+// 		trend: "up"
+// 	},
+// 	{
+// 		rank: "4",
+// 		name: "谷歌（Alphabet）",
+// 		type: ["科技企业"],
+// 		research: "07",
+// 		people: "02",
+// 		patent: "21",
+// 		paper: "04",
+// 		score: "76",
+// 		trend: "down"
+// 	},
+// 	{
+// 		rank: "5",
+// 		name: "耶鲁大学",
+// 		type: ["国防承包商"],
+// 		research: "12",
+// 		people: "04",
+// 		patent: "63",
+// 		paper: "38",
+// 		score: "71",
+// 		trend: "down"
+// 	}
+// ];
+//综合排名
+const handleGetOverallRanking = async () => {
+	try {
+		let params = {
+			subjectTypeId: activeCate1.value,
+			// arealist:
+			year: releaseTime.value,
 
-// 资源库
-const universityList = ref([
-	{
-		pic: "src/views/innovationSubject/assets/images/u1.png",
-		name: "哈佛大学",
-		adder: "美国 · 马萨诸塞州",
-		area: "医学、法学、经济学、生物化学、公共卫生、自然科学等多个学科",
-		tag: ["人工智能"]
-	},
-	{
-		pic: "src/views/innovationSubject/assets/images/u10.png",
-		name: "斯坦福大学",
-		adder: "美国 · 加利福尼亚州",
-		area: "计算机科学、电子工程、生物医学工程、经济学、环境科学等学科",
-		tag: ["人工智能", "生物科技"]
-	},
-	{
-		pic: "src/views/innovationSubject/assets/images/u3.png",
-		name: "麻省理工学院",
-		adder: "美国 · 加利福尼亚州",
-		area: "工程、计算机、物理、数学、航空航天",
-		tag: ["人工智能"]
-	},
-	{
-		pic: "src/views/innovationSubject/assets/images/u4.png",
-		name: "普林斯顿大学",
-		adder: "美国 · 加利福尼亚州",
-		area: "数学、物理、政治学、经济学、哲学",
-		tag: ["人工智能"]
-	},
-	{
-		pic: "src/views/innovationSubject/assets/images/u5.png",
-		name: "加州理工学院",
-		adder: "美国 · 加利福尼亚州",
-		area: "物理、化学、天文、地球科学、工程",
-		tag: ["量子科技"]
-	},
-	{
-		pic: "src/views/innovationSubject/assets/images/u6.png",
-		name: "哥伦比亚大学 ",
-		adder: "美国 · 科罗拉多州",
-		area: "法学、商学、新闻、经济学、国际关系",
-		tag: ["新能源"]
-	},
-	{
-		pic: "src/views/innovationSubject/assets/images/u7.png",
-		name: "芝加哥大学",
-		adder: "美国 · 加利福尼亚州",
-		area: "经济学、社会学、物理、哲学、统计学",
-		tag: ["人工智能", "集成电路"]
-	},
-	{
-		pic: "src/views/innovationSubject/assets/images/u8.png",
-		name: "耶鲁大学",
-		adder: "美国 · 宾夕法尼亚州",
-		area: "法学、 医学、 戏剧、 政治学、 历史 ",
-		tag: ["新能源"]
-	},
-	{
-		pic: "src/views/innovationSubject/assets/images/u9.png",
-		name: "康奈尔大学",
-		adder: "美国 · 新墨西哥州",
-		area: "农业与生命科学、工程、酒店管理、兽医学",
-		tag: ["生物科技", "量子科技"]
-	},
-	{
-		pic: "src/views/innovationSubject/assets/images/u10.png",
-		name: "加州大学伯克利分校",
-		adder: "美国 · 加利福尼亚州",
-		area: "计算机科学、化学、物理学、经济学、环境科学、工程学等学科",
-		tag: ["人工智能", "集成电路"]
-	},
-	{
-		pic: "src/views/innovationSubject/assets/images/u11.png",
-		name: "宾夕法尼亚大学",
-		adder: "美国 · 马萨诸塞州",
-		area: "商学、法学、 医学、 工程、 传播学 ",
-		tag: ["人工智能", "生物科技"]
-	},
-	{
-		pic: "src/views/innovationSubject/assets/images/u12.png",
-		name: "华盛顿大学",
-		adder: "美国 · 新墨西哥州",
-		area: "医学、生命科学、计算机、公共卫生、工程",
-		tag: ["生物科技", "量子科技"]
 		}
-]);
+		const res = await getOverallRanking(params);
+		console.log("综合排名", res);
+		if (res.code === 200 && res.data) {
+			innoItemList.value = res.data
+		}
+	} catch (error) {
+		console.error("获取综合排名error", error);
+	}
+};
+// 资源库
+const universityList = ref({})
+// 	[
+// 	{
+// 		pic: "src/views/innovationSubject/assets/images/u1.png",
+// 		name: "哈佛大学",
+// 		adder: "美国 · 马萨诸塞州",
+// 		area: "医学、法学、经济学、生物化学、公共卫生、自然科学等多个学科",
+// 		tag: ["人工智能"]
+// 	},
+// 	{
+// 		pic: "src/views/innovationSubject/assets/images/u10.png",
+// 		name: "斯坦福大学",
+// 		adder: "美国 · 加利福尼亚州",
+// 		area: "计算机科学、电子工程、生物医学工程、经济学、环境科学等学科",
+// 		tag: ["人工智能", "生物科技"]
+// 	},
+// 	{
+// 		pic: "src/views/innovationSubject/assets/images/u3.png",
+// 		name: "麻省理工学院",
+// 		adder: "美国 · 加利福尼亚州",
+// 		area: "工程、计算机、物理、数学、航空航天",
+// 		tag: ["人工智能"]
+// 	},
+// 	{
+// 		pic: "src/views/innovationSubject/assets/images/u4.png",
+// 		name: "普林斯顿大学",
+// 		adder: "美国 · 加利福尼亚州",
+// 		area: "数学、物理、政治学、经济学、哲学",
+// 		tag: ["人工智能"]
+// 	},
+// 	{
+// 		pic: "src/views/innovationSubject/assets/images/u5.png",
+// 		name: "加州理工学院",
+// 		adder: "美国 · 加利福尼亚州",
+// 		area: "物理、化学、天文、地球科学、工程",
+// 		tag: ["量子科技"]
+// 	},
+// 	{
+// 		pic: "src/views/innovationSubject/assets/images/u6.png",
+// 		name: "哥伦比亚大学 ",
+// 		adder: "美国 · 科罗拉多州",
+// 		area: "法学、商学、新闻、经济学、国际关系",
+// 		tag: ["新能源"]
+// 	},
+// 	{
+// 		pic: "src/views/innovationSubject/assets/images/u7.png",
+// 		name: "芝加哥大学",
+// 		adder: "美国 · 加利福尼亚州",
+// 		area: "经济学、社会学、物理、哲学、统计学",
+// 		tag: ["人工智能", "集成电路"]
+// 	},
+// 	{
+// 		pic: "src/views/innovationSubject/assets/images/u8.png",
+// 		name: "耶鲁大学",
+// 		adder: "美国 · 宾夕法尼亚州",
+// 		area: "法学、 医学、 戏剧、 政治学、 历史 ",
+// 		tag: ["新能源"]
+// 	},
+// 	{
+// 		pic: "src/views/innovationSubject/assets/images/u9.png",
+// 		name: "康奈尔大学",
+// 		adder: "美国 · 新墨西哥州",
+// 		area: "农业与生命科学、工程、酒店管理、兽医学",
+// 		tag: ["生物科技", "量子科技"]
+// 	},
+// 	{
+// 		pic: "src/views/innovationSubject/assets/images/u10.png",
+// 		name: "加州大学伯克利分校",
+// 		adder: "美国 · 加利福尼亚州",
+// 		area: "计算机科学、化学、物理学、经济学、环境科学、工程学等学科",
+// 		tag: ["人工智能", "集成电路"]
+// 	},
+// 	{
+// 		pic: "src/views/innovationSubject/assets/images/u11.png",
+// 		name: "宾夕法尼亚大学",
+// 		adder: "美国 · 马萨诸塞州",
+// 		area: "商学、法学、 医学、 工程、 传播学 ",
+// 		tag: ["人工智能", "生物科技"]
+// 	},
+// 	{
+// 		pic: "src/views/innovationSubject/assets/images/u12.png",
+// 		name: "华盛顿大学",
+// 		adder: "美国 · 新墨西哥州",
+// 		area: "医学、生命科学、计算机、公共卫生、工程",
+// 		tag: ["生物科技", "量子科技"]
+// 	}
+// ]
+
 
 const releaseTime = ref("2022");
 const releaseTimeList = ref([
@@ -862,14 +893,51 @@ const areaList = ref([
 ]);
 
 const categoryList1 = ref(["研究型大学", "国家实验室", "科技企业", "国防承包商"]);
-const activeCate1 = ref("研究型大学");
+const activeCate1 = ref('');
 
+//类型列表
+const handleGetSubjectTypeList = async () => {
+	try {
+		const res = await getSubjectTypeList();
+		console.log("类型列表", res);
+		if (res.code === 200 && res.data) {
+			categoryList1.value = res.data
+
+			activeCate1.value = res.data[0].id
+		}
+	} catch (error) {
+		console.error("获取类型列表error", error);
+	}
+};
 const handleClickCate = cate => {
 	activeCate.value = cate;
+	handleGetOverallRanking()
 };
 
 const handleClickCate1 = cate => {
 	activeCate1.value = cate;
+	handleFindListBySubjectTypeId()
+};
+
+//资源库
+const handleFindListBySubjectTypeId = async () => {
+	try {
+		let params = {
+			subjectTypeId: activeCate1.value,
+			// arealist:
+			currentPage: currentPage.value,
+			pageSize: 16,
+
+		}
+		const res = await findListBySubjectTypeId(params);
+		console.log("资源库", res);
+		if (res.code === 200 && res.data) {
+			universityList.value = res.data.content
+			total.value = res.data.totalElements
+		}
+	} catch (error) {
+		console.error("获取资源库error", error);
+	}
 };
 
 const handleToPosi = id => {
@@ -891,7 +959,12 @@ const handleToPosi = id => {
 };
 
 onMounted(async () => {
+	await handleGetSubjectTypeList()
+	handleGetCountGeography()
+	handleGetCountSubjectType()
+	handleGetOverallRanking()
 
+	handleFindListBySubjectTypeId()
 	let chart1 = getPieChart(chart1Data.value, colorList);
 	setChart(chart1, "chart1");
 });
@@ -901,16 +974,19 @@ onMounted(async () => {
 :deep(.el-input__wrapper) {
 	box-shadow: none;
 }
+
 .home-wrapper {
 	width: 100%;
 	height: calc(100vh - 96px);
 	position: relative;
 	overflow-y: hidden;
+
 	.search-header {
 		width: 100%;
 		height: 144px;
 		background: #fff;
 		overflow: hidden;
+
 		.home-main-header-center {
 			margin-top: 20px;
 			margin-left: 200px;
@@ -923,9 +999,11 @@ onMounted(async () => {
 			padding: 1px;
 			position: relative;
 			border: 1px solid transparent;
+
 			&:hover {
 				border: 1px solid var(--color-main-active);
 			}
+
 			.search {
 				position: absolute;
 				right: -1px;
@@ -938,14 +1016,17 @@ onMounted(async () => {
 				justify-content: center;
 				align-items: center;
 				cursor: pointer;
+
 				.search-icon {
 					width: 18px;
 					height: 18px;
+
 					img {
 						width: 100%;
 						height: 100%;
 					}
 				}
+
 				.search-text {
 					margin-left: 8px;
 					height: 22px;
@@ -957,11 +1038,13 @@ onMounted(async () => {
 				}
 			}
 		}
+
 		.home-main-header-btn-box {
 			margin-top: 20px;
 			margin-left: 200px;
 			display: flex;
 			gap: 16px;
+
 			.btn {
 				display: flex;
 				align-items: center;
@@ -974,9 +1057,11 @@ onMounted(async () => {
 				background: #e7f3ff;
 				cursor: pointer;
 				position: relative;
+
 				&:hover {
 					background: #cae3fc;
 				}
+
 				.btn-text {
 					width: 80px;
 					color: var(--color-main-active);
@@ -987,12 +1072,14 @@ onMounted(async () => {
 					margin-left: 36px;
 					text-align: center;
 				}
+
 				.btn-icon {
 					position: absolute;
 					top: 16px;
 					right: 19px;
 					width: 6px;
 					height: 12px;
+
 					img {
 						width: 100%;
 						height: 100%;
@@ -1001,21 +1088,25 @@ onMounted(async () => {
 			}
 		}
 	}
+
 	.scrollHomeMain {
 		width: 100%;
 		height: calc(100% - 144px);
 		overflow-y: auto;
 	}
+
 	.home-main {
 		width: 100%;
 		height: 100%;
 		overflow-y: auto;
 		background: url("./assets/images/background.png");
 		background-size: 100% 100%;
+
 		.home-main-header {
 			display: flex;
 			flex-direction: column;
 			align-items: center;
+
 			.home-main-header-top {
 				width: 100%;
 				height: 64px;
@@ -1032,16 +1123,20 @@ onMounted(async () => {
 				box-sizing: border-box;
 				padding-left: 160px;
 				display: flex;
+
 				.header-item {
 					margin: 0 3px;
 				}
+
 				.back-item {
 					cursor: pointer;
+
 					&:hover {
 						color: #ccc;
 					}
 				}
 			}
+
 			.home-main-header-center {
 				margin-top: 48px;
 				width: 960px;
@@ -1053,9 +1148,11 @@ onMounted(async () => {
 				padding: 1px;
 				position: relative;
 				border: 1px solid transparent;
+
 				&:hover {
 					border: 1px solid var(--color-main-active);
 				}
+
 				.search {
 					position: absolute;
 					right: -1px;
@@ -1068,14 +1165,17 @@ onMounted(async () => {
 					justify-content: center;
 					align-items: center;
 					cursor: pointer;
+
 					.search-icon {
 						width: 18px;
 						height: 18px;
+
 						img {
 							width: 100%;
 							height: 100%;
 						}
 					}
+
 					.search-text {
 						margin-left: 8px;
 						height: 22px;
@@ -1087,6 +1187,7 @@ onMounted(async () => {
 					}
 				}
 			}
+
 			.home-main-header-footer {
 				margin-top: 38px;
 				width: 960px;
@@ -1095,9 +1196,11 @@ onMounted(async () => {
 				padding: 0 108px;
 				display: flex;
 				justify-content: space-between;
+
 				.home-main-header-footer-item {
 					padding: 0 10px;
 					text-align: center;
+
 					.item-top {
 						height: 22px;
 						color: rgba(20, 89, 187, 1);
@@ -1106,6 +1209,7 @@ onMounted(async () => {
 						font-weight: 700;
 						line-height: 22px;
 					}
+
 					.item-footer {
 						margin-top: 10px;
 						height: 30px;
@@ -1117,12 +1221,14 @@ onMounted(async () => {
 					}
 				}
 			}
+
 			.home-main-header-btn-box {
 				width: 688px;
 				margin: 0 auto;
 				margin-top: 39px;
 				display: flex;
 				justify-content: space-between;
+
 				.btn {
 					display: flex;
 					align-items: center;
@@ -1135,9 +1241,11 @@ onMounted(async () => {
 					background: #e7f3ff;
 					cursor: pointer;
 					position: relative;
+
 					&:hover {
 						background: #cae3fc;
 					}
+
 					.btn-text {
 						width: 80px;
 						color: var(--color-main-active);
@@ -1148,12 +1256,14 @@ onMounted(async () => {
 						margin-left: 36px;
 						text-align: center;
 					}
+
 					.btn-icon {
 						position: absolute;
 						top: 16px;
 						right: 19px;
 						width: 6px;
 						height: 12px;
+
 						img {
 							width: 100%;
 							height: 100%;
@@ -1161,12 +1271,14 @@ onMounted(async () => {
 					}
 				}
 			}
+
 			.home-main-header-item-box {
 				margin-top: 48px;
 				margin-bottom: 64px;
 				width: 1600px;
 				display: flex;
 				flex-wrap: wrap;
+
 				.item {
 					width: 254px;
 					height: 72px;
@@ -1180,20 +1292,24 @@ onMounted(async () => {
 					margin: 0 6px 16px 6px;
 					cursor: pointer;
 					transition: transform 0.3s ease, box-shadow 0.3s ease;
+
 					&:hover {
 						transform: translateY(-3px);
 						box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
 					}
+
 					.item-left {
 						width: 48px;
 						height: 48px;
 						margin-left: 24px;
 						margin-top: 12px;
+
 						img {
 							width: 100%;
 							height: 100%;
 						}
 					}
+
 					.item-right {
 						margin-left: 17px;
 						width: 140px;
@@ -1206,13 +1322,16 @@ onMounted(async () => {
 				}
 			}
 		}
+
 		.home-main-center {
 			margin-top: 34px;
+
 			.center-top {
 				height: 450px;
 				display: flex;
 				justify-content: center;
 				gap: 20px;
+
 				.box1 {
 					width: 1064px;
 					height: 460px;
@@ -1220,23 +1339,28 @@ onMounted(async () => {
 					background: #fff;
 					box-sizing: border-box;
 					position: relative;
+
 					.box1-header {
 						height: 48px;
 						border-bottom: 1px solid rgba(240, 242, 244, 1);
 						display: flex;
 						justify-content: space-between;
+
 						.box1-header-left {
 							display: flex;
 							margin-left: 18px;
+
 							.icon {
 								width: 20px;
 								height: 20px;
 								margin-top: 15px;
+
 								img {
 									width: 100%;
 									height: 100%;
 								}
 							}
+
 							.title {
 								width: 112px;
 								height: 48px;
@@ -1250,6 +1374,7 @@ onMounted(async () => {
 								text-align: center;
 							}
 						}
+
 						.box1-header-right {
 							margin-top: 16px;
 							height: 16px;
@@ -1262,6 +1387,7 @@ onMounted(async () => {
 							margin-right: 39px;
 						}
 					}
+
 					.box1-main {
 						display: flex;
 						margin-top: 33px;
@@ -1275,6 +1401,7 @@ onMounted(async () => {
 							height: 353px;
 							flex-direction: column;
 							gap: 20px;
+
 							.box1-main-left-top {
 								/* 容器 546 */
 								width: 456px;
@@ -1285,6 +1412,7 @@ onMounted(async () => {
 								justify-content: flex-start;
 								align-items: flex-start;
 								gap: 8px;
+
 								.box1-main-left-top-item {
 									display: flex;
 									align-items: center;
@@ -1295,6 +1423,7 @@ onMounted(async () => {
 									border-radius: 4px;
 									background: rgba(231, 243, 255, 1);
 									color: rgba(22, 119, 255, 1);
+
 									.box1-main-left-top-item-text1 {
 										font-family: Microsoft YaHei;
 										font-size: 16px;
@@ -1303,6 +1432,7 @@ onMounted(async () => {
 										letter-spacing: 0px;
 										text-align: center;
 									}
+
 									.box1-main-left-top-item-text2 {
 										font-family: Microsoft YaHei;
 										font-size: 24px;
@@ -1313,15 +1443,18 @@ onMounted(async () => {
 									}
 								}
 							}
+
 							.box1-main-left-down {
 								display: flex;
 								flex-direction: column;
 								width: 456px;
+
 								.box1-main-left-down-item {
 									height: 48px;
 									display: flex;
 									align-items: center;
 									justify-content: space-between;
+
 									.box1-main-left-down-item-index {
 										margin-left: 42px;
 										width: 24px;
@@ -1336,6 +1469,7 @@ onMounted(async () => {
 										letter-spacing: 0px;
 										text-align: center;
 									}
+
 									.box1-main-left-down-item-text {
 										color: rgba(59, 65, 75, 1);
 										font-family: Microsoft YaHei;
@@ -1345,6 +1479,7 @@ onMounted(async () => {
 										letter-spacing: 0px;
 										text-align: justify;
 									}
+
 									.box1-main-left-down-item-num {
 										margin-right: 42px;
 										color: rgba(5, 95, 194, 1);
@@ -1358,37 +1493,44 @@ onMounted(async () => {
 								}
 							}
 						}
+
 						.box1-main-right {
 							margin-left: 10px;
 							flex: 1;
 						}
 					}
 				}
+
 				.box2 {
 					width: 520px;
 					height: 460px;
 					box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
 					background: rgba(255, 255, 255, 1);
 					position: relative;
+
 					.box2-header {
 						height: 54px;
 						display: flex;
 						border-bottom: 1px solid rgba(240, 242, 244, 1);
+
 						.icon {
 							width: 24px;
 							height: 22px;
 							margin-left: 33px;
 							margin-top: 18px;
+
 							img {
 								width: 100%;
 								height: 100%;
 							}
 						}
+
 						.title {
 							display: flex;
 							width: 148px;
 							background: rgba(206, 79, 81, 1);
 							margin-left: 25px;
+
 							.text {
 								margin-left: 15px;
 								margin-top: 16px;
@@ -1399,6 +1541,7 @@ onMounted(async () => {
 								font-weight: 700;
 								line-height: 22px;
 							}
+
 							.num {
 								width: 24px;
 								height: 20px;
@@ -1413,6 +1556,7 @@ onMounted(async () => {
 								background: rgba(255, 255, 255, 0.3);
 							}
 						}
+
 						.more {
 							margin-top: 19px;
 							margin-left: 200px;
@@ -1424,28 +1568,34 @@ onMounted(async () => {
 							cursor: pointer;
 						}
 					}
+
 					.box2-main {
 						box-sizing: border-box;
 						padding-right: 20px;
 						height: 330px;
 						overflow-y: auto;
+
 						.box2-main-item {
 							margin-left: 23px;
 							height: 47px;
 							width: 464px;
 							display: flex;
 							cursor: pointer;
+
 							&:hover {
 								background: var(--color-bg-hover);
 							}
+
 							.itemLeftStatus1 {
 								color: rgba(82, 196, 26, 1) !important;
 								background: rgba(246, 255, 237, 1) !important;
 							}
+
 							.itemLeftStatus2 {
 								color: rgba(250, 140, 22, 1) !important;
 								background: rgba(255, 247, 230, 1) !important;
 							}
+
 							.item-left {
 								margin-top: 4px;
 								margin-left: 2px;
@@ -1462,12 +1612,14 @@ onMounted(async () => {
 								padding: 6px 4px;
 								text-align: center;
 							}
+
 							.item-right {
 								margin-left: 13px;
 								width: 408px;
 								height: 47px;
 								border-bottom: 1px solid rgba(240, 242, 244, 1);
 								display: flex;
+
 								.text {
 									width: 348px;
 									color: rgba(59, 65, 75, 1);
@@ -1476,6 +1628,7 @@ onMounted(async () => {
 									font-weight: 400;
 									line-height: 47px;
 								}
+
 								.time {
 									margin-left: 10px;
 									line-height: 47px;
@@ -1487,6 +1640,7 @@ onMounted(async () => {
 							}
 						}
 					}
+
 					.box2-footer {
 						position: absolute;
 						left: 45px;
@@ -1500,14 +1654,17 @@ onMounted(async () => {
 						border-radius: 6px;
 						background: var(--color-main-active);
 						cursor: pointer;
+
 						.icon {
 							width: 16px;
 							height: 16px;
+
 							img {
 								width: 100%;
 								height: 100%;
 							}
 						}
+
 						.text {
 							margin-left: 8px;
 							color: rgba(255, 255, 255, 1);
@@ -1519,23 +1676,27 @@ onMounted(async () => {
 					}
 				}
 			}
+
 			.divide2 {
 				width: 1600px;
 				margin: 0 auto;
 				margin-top: 68px;
 				margin-bottom: 36px;
 			}
+
 			.center-center {
 				width: 1600px;
 				margin: 0 auto;
 				margin-top: 21px;
 				height: 450px;
 				display: flex;
+
 				.box3 {
 					width: 792px;
 					height: 450px;
 					box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
 					background: rgba(255, 255, 255, 1);
+
 					.box3-header {
 						height: 48px;
 						border-bottom: 1px solid rgba(240, 242, 244, 1);
@@ -1544,17 +1705,21 @@ onMounted(async () => {
 						justify-content: space-between;
 						padding: 0 20px;
 						position: relative;
+
 						.box3-header-left {
 							display: flex;
+
 							.box3-header-icon {
 								margin-top: 16px;
 								width: 19px;
 								height: 19px;
+
 								img {
 									width: 100%;
 									height: 100%;
 								}
 							}
+
 							.box3-header-title {
 								margin-top: 13px;
 								margin-left: 19px;
@@ -1566,6 +1731,7 @@ onMounted(async () => {
 								line-height: 22px;
 							}
 						}
+
 						.more {
 							width: 49px;
 							height: 24px;
@@ -1580,33 +1746,40 @@ onMounted(async () => {
 							cursor: pointer;
 						}
 					}
+
 					.box3-main {
 						height: 402px;
 						overflow-y: auto;
 						overflow-x: hidden;
 						padding-top: 6px;
+
 						.box3-item {
 							display: flex;
 							height: 77px;
 							width: 749px;
 							margin-left: 21px;
 							border-bottom: 1px solid rgba(240, 242, 244, 1);
+
 							.left {
 								width: 72px;
 								height: 48px;
 								margin-top: 15px;
+
 								img {
 									width: 100%;
 									height: 100%;
 								}
 							}
+
 							.right {
 								width: 657px;
 								margin-left: 20px;
+
 								.right-top {
 									width: 657px;
 									display: flex;
 									justify-content: space-between;
+
 									.title {
 										margin-top: 13px;
 										width: 520px;
@@ -1620,6 +1793,7 @@ onMounted(async () => {
 										text-overflow: ellipsis;
 										white-space: nowrap;
 									}
+
 									.time {
 										flex: 1;
 										text-align: right;
@@ -1632,6 +1806,7 @@ onMounted(async () => {
 										line-height: 22px;
 									}
 								}
+
 								.right-footer {
 									width: 657px;
 									height: 24px;
@@ -1648,12 +1823,14 @@ onMounted(async () => {
 						}
 					}
 				}
+
 				.box4 {
 					margin-left: 20px;
 					width: 792px;
 					height: 450px;
 					box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
 					background: rgba(255, 255, 255, 1);
+
 					.box4-header {
 						width: 792px;
 						height: 48px;
@@ -1662,15 +1839,18 @@ onMounted(async () => {
 						box-sizing: border-box;
 						padding-left: 22px;
 						position: relative;
+
 						.header-icon {
 							margin-top: 15px;
 							width: 20px;
 							height: 20px;
+
 							img {
 								width: 100%;
 								height: 100%;
 							}
 						}
+
 						.header-title {
 							margin-top: 12px;
 							margin-left: 18px;
@@ -1681,6 +1861,7 @@ onMounted(async () => {
 							font-weight: 700;
 							line-height: 22px;
 						}
+
 						.more {
 							width: 49px;
 							height: 24px;
@@ -1695,24 +1876,29 @@ onMounted(async () => {
 							cursor: pointer;
 						}
 					}
+
 					.box4-main {
 						height: 402px;
 						overflow-y: auto;
 						box-sizing: border-box;
 						padding-top: 8px;
+
 						.box4-main-item {
 							margin-top: 16px;
 							display: flex;
 							margin-left: 21px;
+
 							.left {
 								margin-top: 5px;
 								width: 36px;
 								height: 36px;
+
 								img {
 									width: 100%;
 									height: 100%;
 								}
 							}
+
 							.right {
 								margin-left: 10px;
 								width: 690px;
@@ -1720,9 +1906,11 @@ onMounted(async () => {
 								border: 1px solid rgba(231, 243, 255, 1);
 								background: rgba(246, 250, 255, 1);
 								padding: 10px 15px;
+
 								.right-top {
 									display: flex;
 									justify-content: space-between;
+
 									.name {
 										height: 24px;
 										color: rgba(59, 65, 75, 1);
@@ -1731,6 +1919,7 @@ onMounted(async () => {
 										font-weight: 700;
 										line-height: 24px;
 									}
+
 									.time {
 										height: 30px;
 										color: rgba(95, 101, 108, 1);
@@ -1740,6 +1929,7 @@ onMounted(async () => {
 										line-height: 30px;
 									}
 								}
+
 								.content {
 									color: rgba(59, 65, 75, 1);
 									font-family: Microsoft YaHei;
@@ -1759,17 +1949,21 @@ onMounted(async () => {
 				margin-top: 68px;
 				margin-bottom: 36px;
 			}
+
 			.center-footer {
 				display: flex;
 				justify-content: center;
+
 				.home-main-footer-header {
 					width: 1600px;
 					height: 42px;
 					display: flex;
 					justify-content: space-between;
+
 					.btn-box {
 						width: 1000px;
 						display: flex;
+
 						.btn {
 							height: 42px;
 							color: rgba(95, 101, 108, 1);
@@ -1782,21 +1976,25 @@ onMounted(async () => {
 							background: rgba(20, 89, 187, 0);
 							margin-right: 20px;
 							cursor: pointer;
+
 							&:hover {
 								background: rgba(20, 89, 187, 0.1);
 							}
 						}
+
 						.btnActive {
 							padding: 0 24px;
 							border-radius: 21px;
 							background: rgba(20, 89, 187, 1);
 							color: #fff;
+
 							&:hover {
 								color: #fff;
 								background: rgba(20, 89, 187, 1);
 							}
 						}
 					}
+
 					.select-box {
 						margin-top: 10px;
 						height: 42px;
@@ -1805,6 +2003,7 @@ onMounted(async () => {
 					}
 				}
 			}
+
 			.center-footer-elx {
 				width: 1600px;
 				height: 528px;
@@ -1813,20 +2012,24 @@ onMounted(async () => {
 				margin: 30px auto;
 				box-sizing: border-box;
 				border-radius: 10px;
+
 				.content-header {
 					height: 48px;
 					display: flex;
 					border-bottom: 1px solid rgba(234, 236, 238, 1);
+
 					.icon {
 						width: 20px;
 						height: 20px;
 						margin-top: 14px;
 						margin-left: 19px;
+
 						img {
 							width: 100%;
 							height: 100%;
 						}
 					}
+
 					.title {
 						height: 48px;
 						margin-left: 21px;
@@ -1837,22 +2040,26 @@ onMounted(async () => {
 						line-height: 48px;
 					}
 				}
+
 				.sanction-table {
 					margin-top: 16px;
 					margin-left: 20px;
 					margin-right: 20px;
 					width: 1552px;
+
 					.up {
 						width: 32px;
 						height: 32px;
 						background-image: url("src/views/innovationSubject/assets/images/icon-up.png");
 					}
+
 					.down {
 						width: 32px;
 						height: 32px;
 						background-image: url("src/views/innovationSubject/assets/images/icon-down.png");
 					}
 				}
+
 				.center-footer-elx-footer {
 					margin: 16px;
 					width: 1568px;
@@ -1868,6 +2075,7 @@ onMounted(async () => {
 					border: 1px solid rgba(231, 243, 255, 1);
 					border-radius: 4px;
 					background: rgba(246, 250, 255, 1);
+
 					.center-footer-elx-footer-text {
 						color: rgba(5, 95, 194, 1);
 						font-family: Microsoft YaHei;
@@ -1881,6 +2089,7 @@ onMounted(async () => {
 					}
 				}
 			}
+
 			.center-footer-layout {
 				width: 1600px;
 				height: 528px;
@@ -1889,20 +2098,24 @@ onMounted(async () => {
 				margin: 30px auto;
 				box-sizing: border-box;
 				border-radius: 10px;
+
 				.content-header {
 					height: 48px;
 					display: flex;
 					border-bottom: 1px solid rgba(234, 236, 238, 1);
+
 					.icon {
 						width: 20px;
 						height: 20px;
 						margin-top: 14px;
 						margin-left: 19px;
+
 						img {
 							width: 100%;
 							height: 100%;
 						}
 					}
+
 					.title {
 						height: 48px;
 						margin-left: 21px;
@@ -1913,16 +2126,19 @@ onMounted(async () => {
 						line-height: 48px;
 					}
 				}
+
 				.center-footer-layout-content {
 					display: flex;
 					flex-direction: row;
-					.center-footer-layout-content-item{
+
+					.center-footer-layout-content-item {
 						height: 480px;
 						width: 800px;
 						display: flex;
 						flex-direction: column;
 						margin-left: 24px;
-						.center-footer-elx-footer{
+
+						.center-footer-elx-footer {
 
 							width: 750px;
 							height: 88px;
@@ -1937,7 +2153,8 @@ onMounted(async () => {
 							border: 1px solid rgba(231, 243, 255, 1);
 							border-radius: 4px;
 							background: rgba(246, 250, 255, 1);
-							.center-footer-elx-footer-text{
+
+							.center-footer-elx-footer-text {
 								color: rgba(5, 95, 194, 1);
 								font-family: Microsoft YaHei;
 								font-size: 16px;
@@ -1953,16 +2170,19 @@ onMounted(async () => {
 				}
 			}
 		}
+
 		.home-main-footer {
 			margin-top: 34px;
 			height: 910px;
 			background: rgba(248, 249, 250, 1);
 			overflow: hidden;
+
 			.divide4 {
 				margin: 0 auto;
 				margin-top: 52px;
 				margin-bottom: 36px;
 			}
+
 			.home-main-footer-header {
 				width: 1600px;
 				height: 42px;
@@ -1970,10 +2190,12 @@ onMounted(async () => {
 				// background: orange;
 				display: flex;
 				justify-content: space-between;
+
 				.btn-box {
 					margin-top: 10px;
 					width: 1000px;
 					display: flex;
+
 					.btn {
 						height: 42px;
 						color: rgba(95, 101, 108, 1);
@@ -1986,21 +2208,25 @@ onMounted(async () => {
 						background: rgba(20, 89, 187, 0);
 						margin-right: 20px;
 						cursor: pointer;
+
 						&:hover {
 							background: rgba(20, 89, 187, 0.1);
 						}
 					}
+
 					.btnActive {
 						padding: 0 24px;
 						border-radius: 21px;
 						background: rgba(20, 89, 187, 1);
 						color: #fff;
+
 						&:hover {
 							color: #fff;
 							background: rgba(20, 89, 187, 1);
 						}
 					}
 				}
+
 				.select-box {
 					margin-top: 10px;
 					height: 42px;
@@ -2008,12 +2234,14 @@ onMounted(async () => {
 					padding: 5px 0;
 				}
 			}
+
 			.home-main-footer-main {
 				width: 1600px;
 				display: flex;
 				flex-wrap: wrap;
 				margin: 0 auto;
 				gap: 16px;
+
 				.footer-main-item {
 					width: 253px;
 					height: 216px;
@@ -2028,7 +2256,8 @@ onMounted(async () => {
 					display: flex;
 					flex-direction: column;
 					cursor: pointer;
-					.item-text{
+
+					.item-text {
 						color: rgba(59, 65, 75, 1);
 						font-family: Microsoft YaHei;
 						font-size: 18px;
@@ -2037,6 +2266,7 @@ onMounted(async () => {
 						letter-spacing: 0px;
 						text-align: left;
 					}
+
 					.item-text2 {
 						color: rgba(95, 101, 108, 1);
 						font-family: Microsoft YaHei;
@@ -2046,18 +2276,21 @@ onMounted(async () => {
 						letter-spacing: 0px;
 						text-align: justify;
 					}
+
 					.taglist {
 						display: flex;
 						flex-direction: row;
 						gap: 8px;
 					}
 				}
+
 				.footer-box {
 					margin: 0 auto;
 					height: 32px;
 					margin-top: 30px;
 					display: flex;
 					justify-content: center;
+
 					.footer-left {
 						color: rgba(59, 65, 75, 1);
 						font-family: Microsoft YaHei;
@@ -2189,6 +2422,7 @@ onMounted(async () => {
 	box-shadow: none;
 	border-radius: 10px;
 }
+
 :deep(.el-input__wrapper:hover) {
 	box-shadow: none !important;
 }
@@ -2203,6 +2437,7 @@ onMounted(async () => {
 
 	color: rgba(59, 65, 75, 1);
 }
+
 :deep(.table-row) {
 	height: 64px;
 }

src/views/thinkTank/ReportDetail/index.vue

@@ -3,7 +3,7 @@
 		<div class="header">
 			<div class="header-top">
 				<div class="header-top-left">
-					<img :src="thinkInfo.contentUrl" alt="" />
+					<img :src="thinkInfo.imageUrl" alt="" />
 					<div>
 						<div class="title">{{ thinkInfo.name }}</div>
 						<div class="en-title">

src/views/thinkTank/ReportDetail/reportAnalysis/index.vue

@@ -88,13 +88,13 @@
 									{{ val }}
 								</div>
 							</div>
-							<div class="more">
+							<!-- <div class="more">
 								<img src="@/assets/icons/open.png" alt="" />
-							</div>
+							</div> -->
 						</div>
 					</div>
 					<div class="box3-main-footer">
-						<div class="info">共{{ total }}条建议</div>
+						<div class="info">共{{ total }}项</div>
 						<div class="page-box">
 							<el-pagination :page-size="12" background layout="prev, pager, next" :total="total"
 								@current-change="handleCurrentChange" :current-page="currentPage" />

src/views/thinkTank/ThinkTankDetail/PolicyTracking/index.vue

@@ -73,14 +73,26 @@
 						<img src="./images/search-icon.png" alt="" />
 					</div>
 				</div>
+
 				<div class="select-box">
 					<el-select v-model="selectedYear" placeholder="选择时间" style="width: 120px" @click="handleGetThinkPolicy()">
 						<el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value" />
 					</el-select>
-					<el-select v-model="sort" placeholder="发布时间" style="width: 120px; margin-left: 8px">
+					<div class="paixu-btn" @click="handleSwithSort()">
+						<div class="icon1">
+							<img v-if="sort" src="@/assets/icons/shengxu1.png" alt="" />
+							<img v-else src="@/assets/icons/jiangxu1.png" alt="" />
+						</div>
+						<div class="text">{{ "发布时间" }}</div>
+						<div class="icon2">
+							<img v-if="sort" src="@/assets/icons/shengxu2.png" alt="" />
+							<img v-else src="@/assets/icons/jiangxu2.png" alt="" />
+						</div>
+					</div>
+					<!-- <el-select v-model="sort" placeholder="发布时间" style="width: 120px; margin-left: 8px">
 						<el-option @click="handleGetThinkPolicy()" :key="true" label="正序" :value="true" />
 						<el-option @click="handleGetThinkPolicy()" :key="false" label="倒序" :value="false" />
-					</el-select>
+					</el-select> -->
 				</div>
 			</div>
 			<div class="bottom-main">
@@ -145,7 +157,7 @@
 						</div>
 					</div>
 					<div class="right-footer">
-						<div class="info">共{{ total }}篇政策建议</div>
+						<div class="info">共{{ total }}项</div>
 						<div class="page-box">
 							<el-pagination :page-size="12" background layout="prev, pager, next" :total="total"
 								@current-change="handleCurrentChange" :current-page="currentPage" />
@@ -547,7 +559,12 @@ const toDetaile = (id) => {
 }
 
 const total = ref(0);
-const sort = ref(true);
+const sort = ref(false);
+const handleSwithSort = () => {
+	sort.value = !sort.value;
+	handleGetThinkPolicy()()
+};
+
 const currentPage = ref(1);
 // 处理页码改变事件
 const handleCurrentChange = page => {
@@ -738,6 +755,59 @@ onMounted(() => {
 					right: 33px;
 					width: 100px;
 					height: 28px;
+
+					.paixu-btn {
+						display: flex;
+						width: 120px;
+						height: 32px;
+						box-sizing: border-box;
+						border: 1px solid rgba(230, 231, 232, 1);
+						border-radius: 4px;
+						background: rgba(255, 255, 255, 1);
+
+						&:hover {
+							background: var(--color-bg-hover);
+						}
+
+						cursor: pointer;
+
+						.icon1 {
+							width: 11px;
+							height: 14px;
+							margin-top: 10px;
+							margin-left: 9px;
+
+							img {
+								width: 100%;
+								height: 100%;
+							}
+						}
+
+						.text {
+							height: 19px;
+							color: rgba(95, 101, 108, 1);
+							font-family: Microsoft YaHei;
+							font-size: 14px;
+							font-weight: 400;
+							line-height: 18px;
+							letter-spacing: 0px;
+							text-align: left;
+							margin-top: 7px;
+							margin-left: 9px;
+						}
+
+						.icon2 {
+							width: 10px;
+							height: 5px;
+							margin-top: 5px;
+							margin-left: 13px;
+
+							img {
+								width: 100%;
+								height: 100%;
+							}
+						}
+					}
 				}
 			}
 		}
@@ -775,6 +845,60 @@ onMounted(() => {
 
 			.select-box {
 				margin-right: 5px;
+				display: flex;
+
+				.paixu-btn {
+					display: flex;
+					width: 120px;
+					height: 32px;
+					box-sizing: border-box;
+					border: 1px solid rgba(230, 231, 232, 1);
+					border-radius: 4px;
+					background: rgba(255, 255, 255, 1);
+
+					&:hover {
+						background: var(--color-bg-hover);
+					}
+
+					cursor: pointer;
+
+					.icon1 {
+						width: 11px;
+						height: 14px;
+						margin-top: 10px;
+						margin-left: 9px;
+
+						img {
+							width: 100%;
+							height: 100%;
+						}
+					}
+
+					.text {
+						height: 19px;
+						color: rgba(95, 101, 108, 1);
+						font-family: Microsoft YaHei;
+						font-size: 14px;
+						font-weight: 400;
+						line-height: 18px;
+						letter-spacing: 0px;
+						text-align: left;
+						margin-top: 7px;
+						margin-left: 9px;
+					}
+
+					.icon2 {
+						width: 10px;
+						height: 5px;
+						margin-top: 5px;
+						margin-left: 13px;
+
+						img {
+							width: 100%;
+							height: 100%;
+						}
+					}
+				}
 			}
 		}
 
@@ -794,37 +918,57 @@ onMounted(() => {
 				.select-box {
 					margin-top: 21px;
 
-					.select-box-header {
+					.paixu-btn {
 						display: flex;
-						gap: 17px;
+						width: 120px;
+						height: 32px;
+						box-sizing: border-box;
+						border: 1px solid rgba(230, 231, 232, 1);
+						border-radius: 4px;
+						background: rgba(255, 255, 255, 1);
 
-						.icon {
-							margin-top: 4px;
-							width: 8px;
-							height: 16px;
-							background: var(--color-main-active);
-							border-radius: 0 4px 4px 0;
+						&:hover {
+							background: var(--color-bg-hover);
 						}
 
-						.title {
-							height: 26px;
-							color: var(--color-main-active);
-							font-family: Microsoft YaHei;
-							font-size: 20px;
-							font-weight: 700;
-							line-height: 26px;
-							letter-spacing: 1px;
-							text-align: left;
+						cursor: pointer;
+
+						.icon1 {
+							width: 11px;
+							height: 14px;
+							margin-top: 10px;
+							margin-left: 9px;
+
+							img {
+								width: 100%;
+								height: 100%;
 							}
 						}
 
-					.select-main {
-						margin-left: 25px;
-						width: 160px;
+						.text {
+							height: 19px;
+							color: rgba(95, 101, 108, 1);
+							font-family: Microsoft YaHei;
+							font-size: 14px;
+							font-weight: 400;
+							line-height: 18px;
+							letter-spacing: 0px;
+							text-align: left;
+							margin-top: 7px;
+							margin-left: 9px;
 						}
 
-					.select-main1 {
-						width: 100px;
+						.icon2 {
+							width: 10px;
+							height: 5px;
+							margin-top: 5px;
+							margin-left: 13px;
+
+							img {
+								width: 100%;
+								height: 100%;
+							}
+						}
 					}
 				}
 			}

src/views/thinkTank/index.vue

@@ -10,7 +10,7 @@
 					<div class="header-item">科技智库</div>
 				</div>
 				<div class="home-main-header-center">
-					<el-input v-model="searchThinktankText" style="width: 838px; height: 100%" placeholder="搜索科技人物及观点" />
+					<el-input v-model="searchThinktankText" style="width: 838px; height: 100%" placeholder="搜索智库报告" />
 					<div class="search">
 						<div class="search-icon">
 							<img src="./assets/images/search-icon.png" alt="" />
@@ -78,12 +78,12 @@
 							<div class="title-right">{{ item.country }}</div>
 						</div>
 
-						<el-popover effect="dark" :content="item.desc" placement="top-start">
+						<!-- <el-popover effect="dark" :content="item.desc" placement="top-start">
 							<template #reference>
 								<div class="content">{{ item.desc }}</div>
 							</template>
-						</el-popover>
-
+</el-popover> -->
+						<div class="content">{{ item.desc }}</div>
 						<div class="tag-box">
 							<div class="tag" :class="{
 								tag1: val.status === 1,
@@ -177,14 +177,16 @@
 									{{ item.status || "一般风险" }}
 								</div>
 								<div class="item-right">
-									<el-popover effect="dark" :width="500" :content="item.title" placement="top-start">
+									<!-- <el-popover effect="dark" :width="500" :content="item.title" placement="top-start">
 										<template #reference>
 											<div class="text">
 												{{ item.title }}
 											</div>
 										</template>
-									</el-popover>
-
+									</el-popover> -->
+									<div class="text">
+										{{ item.title }}
+									</div>
 									<div class="time">{{ item.time }}</div>
 								</div>
 							</div>
@@ -220,11 +222,12 @@
 										<div class="time">{{ news.newsOrg }}</div>
 									</div>
 
-									<el-popover effect="dark" :width="700" :content="news.newsContent" placement="top-start">
+									<!-- <el-popover effect="dark" :width="700" :content="news.newsContent" placement="top-start">
 										<template #reference>
 											<div class="right-footer">{{ news.newsContent }}</div>
 										</template>
-									</el-popover>
+									</el-popover> -->
+									<div class="right-footer">{{ news.newsContent }}</div>
 								</div>
 							</div>
 						</div>
@@ -350,6 +353,8 @@
 
 			<div class="home-main-footer">
 				<DivideHeader id="position4" class="divide-header" :titleText="'资源库'"></DivideHeader>
+
+
 				<div class="home-main-footer-header">
 					<div class="btn-box">
 						<div class="btn" :class="{ btnActive: activeCate === cate }" v-for="(cate, index) in categoryList"
@@ -357,10 +362,23 @@
 							{{ cate }}
 						</div>
 					</div>
-					<el-select v-model="sort" placeholder="发布时间" style="width: 120px; margin-left: 8px">
+					<div class="select-box">
+						<div class="paixu-btn" @click="handleSwithSort()">
+							<div class="icon1">
+								<img v-if="sort" src="@/assets/icons/shengxu1.png" alt="" />
+								<img v-else src="@/assets/icons/jiangxu1.png" alt="" />
+							</div>
+							<div class="text">{{ "发布时间" }}</div>
+							<div class="icon2">
+								<img v-if="sort" src="@/assets/icons/shengxu2.png" alt="" />
+								<img v-else src="@/assets/icons/jiangxu2.png" alt="" />
+							</div>
+						</div>
+					</div>
+					<!-- <el-select v-model="sort" placeholder="发布时间" style="width: 120px; margin-left: 8px">
 						<el-option @click="handleGetetThinkTankReport()" :key="true" label="正序" :value="true" />
 						<el-option @click="handleGetetThinkTankReport()" :key="false" label="倒序" :value="false" />
-					</el-select>
+					</el-select> -->
 				</div>
 				<div class="home-main-footer-main">
 					<div class="left">
@@ -411,14 +429,16 @@
 								<div class="footer-card-top">
 									<img :src="item.imageUrl" alt="" />
 								</div>
-								<el-popover effect="dark" :content="item.name" placement="top-start">
+								<!-- <el-popover effect="dark" :content="item.name" placement="top-start">
 									<template #reference>
 										<div class="footer-card-title">
 											{{ item.name }}
 										</div>
 									</template>
-								</el-popover>
-
+								</el-popover> -->
+								<div class="footer-card-title">
+									{{ item.name }}
+								</div>
 								<div class="footer-card-footer">
 									<div class="time">{{ item.times }}</div>
 									<div class="from">{{ item.thinkTankName }}</div>
@@ -1283,6 +1303,11 @@ const selectedPubTimeList = ref([""]);
 const checkAllTime = ref(false);
 const isIndeterminateTime = ref(true);
 const sort = ref(false);
+const handleSwithSort = () => {
+	sort.value = !sort.value;
+	handleGetetThinkTankReport()()
+};
+
 const handleCheckAllChangeTime = val => {
 	// console.log(val, "handleCheckAllChange");
 	if (val) {
@@ -2808,6 +2833,7 @@ onMounted(async () => {
 					}
 
 					.box6-main {
+						margin: 15px;
 						height: 360px;
 					}
 				}
@@ -3034,6 +3060,8 @@ onMounted(async () => {
 			overflow: hidden;
 			background: rgba(247, 248, 249, 1);
 
+
+
 			.home-main-footer-header {
 				width: 1600px;
 				height: 42px;
@@ -3081,6 +3109,59 @@ onMounted(async () => {
 					height: 42px;
 					box-sizing: border-box;
 					padding: 5px 0;
+
+					.paixu-btn {
+						display: flex;
+						width: 120px;
+						height: 32px;
+						box-sizing: border-box;
+						border: 1px solid rgba(230, 231, 232, 1);
+						border-radius: 4px;
+						background: rgba(255, 255, 255, 1);
+
+						&:hover {
+							background: var(--color-bg-hover);
+						}
+
+						cursor: pointer;
+
+						.icon1 {
+							width: 11px;
+							height: 14px;
+							margin-top: 10px;
+							margin-left: 9px;
+
+							img {
+								width: 100%;
+								height: 100%;
+							}
+						}
+
+						.text {
+							height: 19px;
+							color: rgba(95, 101, 108, 1);
+							font-family: Microsoft YaHei;
+							font-size: 14px;
+							font-weight: 400;
+							line-height: 18px;
+							letter-spacing: 0px;
+							text-align: left;
+							margin-top: 7px;
+							margin-left: 9px;
+						}
+
+						.icon2 {
+							width: 10px;
+							height: 5px;
+							margin-top: 5px;
+							margin-left: 13px;
+
+							img {
+								width: 100%;
+								height: 100%;
+							}
+						}
+					}
 				}
 			}
 

src/views/thinkTank/utils/piechart.js

@@ -3,6 +3,13 @@ const getPieChart = (data) => {
     series: [
       {
         type: 'pie',
+        // grid: {
+        //   top: '15%',
+        //   right: '15%',
+        //   bottom: '5%',
+        //   left: '15%',
+        //   containLabel: true
+        // },
         radius: [70, 100],
         height: '100%',
         left: 'center',