提交 65953eed authored 作者: coderBryanFu's avatar coderBryanFu

智库样式优化

上级 af7079a0
...@@ -141,6 +141,7 @@ export function getThinkPolicy(params) { ...@@ -141,6 +141,7 @@ export function getThinkPolicy(params) {
return request({ return request({
method: 'GET', method: 'GET',
url: `/api/thinkTankInfo/policy/${params.id}/${params.startDate}`, url: `/api/thinkTankInfo/policy/${params.id}/${params.startDate}`,
params
}) })
} }
......
...@@ -431,7 +431,8 @@ onMounted(async () => { ...@@ -431,7 +431,8 @@ onMounted(async () => {
width: 1056px; width: 1056px;
height: 1280px; height: 1280px;
margin: 0 auto; margin: 0 auto;
overflow: auto; overflow: hidden;
overflow-y: auto;
.box1-item { .box1-item {
height: 128px; height: 128px;
...@@ -456,6 +457,7 @@ onMounted(async () => { ...@@ -456,6 +457,7 @@ onMounted(async () => {
} }
.center { .center {
width: 850px;
margin-left: 18px; margin-left: 18px;
.title { .title {
......
...@@ -39,8 +39,13 @@ ...@@ -39,8 +39,13 @@
</div> </div>
<div class="box2-main"> <div class="box2-main">
<div class="box2-main-tag-box"> <div class="box2-main-tag-box">
<div class="tag" :class="{ tagActive: activeArea === item }" v-for="(item, index) in areaList" :key="index" <div
@click="handleClickArea(item.status)"> class="tag"
:class="{ tagActive: activeArea === item }"
v-for="(item, index) in areaList"
:key="index"
@click="handleClickArea(item.status)"
>
{{ item.industryName }} {{ item.industryName }}
</div> </div>
</div> </div>
...@@ -94,13 +99,16 @@ ...@@ -94,13 +99,16 @@
</div> </div>
</div> </div>
<div class="box3-main-footer"> <div class="box3-main-footer">
<div class="info"> <div class="info">{{ total }}项调查</div>
{{ total }}项调查
</div>
<div class="page-box"> <div class="page-box">
<el-pagination :page-size="12" background layout="prev, pager, next" :total="total" <el-pagination
@current-change="handleCurrentChange" :current-page="currentPage" /> :page-size="12"
background
layout="prev, pager, next"
:total="total"
@current-change="handleCurrentChange"
:current-page="currentPage"
/>
</div> </div>
</div> </div>
</div> </div>
...@@ -131,7 +139,6 @@ import { ...@@ -131,7 +139,6 @@ import {
getThinkTankReportContent, getThinkTankReportContent,
getThinkTankReportIndustry, getThinkTankReportIndustry,
getThinkTankReportIndustryCloud getThinkTankReportIndustryCloud
} from "@/api/thinkTank/overview"; } from "@/api/thinkTank/overview";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
const router = useRouter(); const router = useRouter();
...@@ -141,27 +148,25 @@ const box1Data = ...@@ -141,27 +148,25 @@ const box1Data =
ref(`包括经济竞争在内的美中竞争自2017年以来一直在定义美国外交政策。这两个经济体是世界上第一和第二大国家经济体,并且深深交织在一起。改变关系,无论多么必要,可能是昂贵的。因此,美国面临着一项挑战,确保其经济在耦合的战略竞争条件下满足国家的需求。 ref(`包括经济竞争在内的美中竞争自2017年以来一直在定义美国外交政策。这两个经济体是世界上第一和第二大国家经济体,并且深深交织在一起。改变关系,无论多么必要,可能是昂贵的。因此,美国面临着一项挑战,确保其经济在耦合的战略竞争条件下满足国家的需求。
为了应对这一挑战,兰德大学的研究人员对美中竞争进行了经济和制度分析,进行了参与式的远见练习,以了解确保美国经济健康的长期路径,并创建了两个经济竞争游戏,探索多个国家在相互交流的同时确保经济健康的动态...`); 为了应对这一挑战,兰德大学的研究人员对美中竞争进行了经济和制度分析,进行了参与式的远见练习,以了解确保美国经济健康的长期路径,并创建了两个经济竞争游戏,探索多个国家在相互交流的同时确保经济健康的动态...`);
//获取内容摘要 //获取内容摘要
const handleGetThinkTankReportAbstract = async () => { const handleGetThinkTankReportAbstract = async () => {
try { try {
const res = await getThinkTankReportAbstract(router.currentRoute._value.params.id); const res = await getThinkTankReportAbstract(router.currentRoute._value.params.id);
console.log("内容摘要", res); console.log("内容摘要", res);
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
box1Data.value = res.data box1Data.value = res.data;
} }
} catch (error) { } catch (error) {
console.error("获取内容摘要error", error); console.error("获取内容摘要error", error);
} }
}; };
// 涉及科技领域 // 涉及科技领域
const areaList = ref([]); const areaList = ref([]);
const activeArea = ref(6); const activeArea = ref(6);
const handleClickArea = area => { const handleClickArea = area => {
activeArea.value = area; activeArea.value = area;
handleGetThinkTankReportIndustryCloud() handleGetThinkTankReportIndustryCloud();
}; };
const box2Data = ref([ const box2Data = ref([
// { // {
...@@ -204,21 +209,20 @@ const handleGetThinkTankReportIndustryCloud = async () => { ...@@ -204,21 +209,20 @@ const handleGetThinkTankReportIndustryCloud = async () => {
const params = { const params = {
id: router.currentRoute._value.params.id, id: router.currentRoute._value.params.id,
industryId: activeArea.value industryId: activeArea.value
} };
const res = await getThinkTankReportIndustryCloud(params); const res = await getThinkTankReportIndustryCloud(params);
console.log("科技领域词云", res); console.log("科技领域词云", res);
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
const data = [] const data = [];
res.data.map(item => { res.data.map(item => {
data.push( data.push({
{
name: item.clause, name: item.clause,
value: item.count value: item.count
}) });
box2Data.value = data box2Data.value = data;
const box2Chart = getWordCloudChart(box2Data.value); const box2Chart = getWordCloudChart(box2Data.value);
setChart(box2Chart, "box2Chart"); setChart(box2Chart, "box2Chart");
}) });
} }
} catch (error) { } catch (error) {
console.error("获取科技领域词云error", error); console.error("获取科技领域词云error", error);
...@@ -230,7 +234,7 @@ const handleGetThinkTankReportIndustry = async () => { ...@@ -230,7 +234,7 @@ const handleGetThinkTankReportIndustry = async () => {
const res = await getThinkTankReportIndustry(router.currentRoute._value.params.id); const res = await getThinkTankReportIndustry(router.currentRoute._value.params.id);
console.log("涉及科技领域", res); console.log("涉及科技领域", res);
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
areaList.value = res.data areaList.value = res.data;
} }
} catch (error) { } catch (error) {
console.error("获取涉及科技领域error", error); console.error("获取涉及科技领域error", error);
...@@ -378,10 +382,10 @@ const majorOpinions = ref([ ...@@ -378,10 +382,10 @@ const majorOpinions = ref([
} }
]); ]);
// 处理页码改变事件 // 处理页码改变事件
const currentPage = ref(1) const currentPage = ref(1);
const handleCurrentChange = page => { const handleCurrentChange = page => {
currentPage.value = page; currentPage.value = page;
handleGetThinkDynamicsReport() handleGetThinkDynamicsReport();
}; };
//获取报告主要观点 //获取报告主要观点
const handleGetThinkTankReportContent = async () => { const handleGetThinkTankReportContent = async () => {
...@@ -389,19 +393,18 @@ const handleGetThinkTankReportContent = async () => { ...@@ -389,19 +393,18 @@ const handleGetThinkTankReportContent = async () => {
const res = await getThinkTankReportContent(router.currentRoute._value.params.id); const res = await getThinkTankReportContent(router.currentRoute._value.params.id);
console.log("主要观点", res); console.log("主要观点", res);
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
majorOpinions.value = res.data.content majorOpinions.value = res.data.content;
} }
} catch (error) { } catch (error) {
console.error("获取主要观点error", error); console.error("获取主要观点error", error);
} }
}; };
onMounted(() => { onMounted(() => {
handleGetThinkTankReportAbstract() handleGetThinkTankReportAbstract();
handleGetThinkTankReportContent() handleGetThinkTankReportContent();
handleGetThinkTankReportIndustry() handleGetThinkTankReportIndustry();
handleGetThinkTankReportIndustryCloud()
handleGetThinkTankReportIndustryCloud();
}); });
</script> </script>
...@@ -506,14 +509,15 @@ onMounted(() => { ...@@ -506,14 +509,15 @@ onMounted(() => {
line-height: 30px; line-height: 30px;
letter-spacing: 0px; letter-spacing: 0px;
text-align: justify; text-align: justify;
display: -webkit-box; overflow-y: auto;
/* 使用Webkit的弹性盒模型 */ // display: -webkit-box;
-webkit-box-orient: vertical; // /* 使用Webkit的弹性盒模型 */
/* 垂直排列 */ // -webkit-box-orient: vertical;
-webkit-line-clamp: 9; // /* 垂直排列 */
/* 限制显示9行 */ // -webkit-line-clamp: 9;
overflow: hidden; // /* 限制显示9行 */
/* 隐藏超出部分 */ // overflow: hidden;
// /* 隐藏超出部分 */
} }
.box1-footer { .box1-footer {
...@@ -667,6 +671,9 @@ onMounted(() => { ...@@ -667,6 +671,9 @@ onMounted(() => {
line-height: 26px; line-height: 26px;
letter-spacing: 0px; letter-spacing: 0px;
text-align: left; text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.desc { .desc {
...@@ -678,6 +685,9 @@ onMounted(() => { ...@@ -678,6 +685,9 @@ onMounted(() => {
line-height: 22px; line-height: 22px;
letter-spacing: 0px; letter-spacing: 0px;
text-align: left; text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
} }
......
...@@ -12,8 +12,13 @@ ...@@ -12,8 +12,13 @@
<div class="box-main"> <div class="box-main">
<div class="select-box"> <div class="select-box">
<el-select v-model="box1SelectYear" placeholder="选择时间" style="width: 100px"> <el-select v-model="box1SelectYear" placeholder="选择时间" style="width: 100px">
<el-option v-for="(item, index) in box1YearList" :key="index" :label="item.label" :value="item.value" <el-option
@click="handleGetThinkPolicyIndustry()" /> v-for="(item, index) in box1YearList"
:key="index"
:label="item.label"
:value="item.value"
@click="handleGetThinkPolicyIndustry()"
/>
</el-select> </el-select>
</div> </div>
<div id="box1Chart"></div> <div id="box1Chart"></div>
...@@ -30,22 +35,32 @@ ...@@ -30,22 +35,32 @@
<div class="box-main"> <div class="box-main">
<div class="select-box"> <div class="select-box">
<el-select v-model="box2SelectYear" placeholder="选择时间" style="width: 100px"> <el-select v-model="box2SelectYear" placeholder="选择时间" style="width: 100px">
<el-option v-for="item in box2YearList" :key="item.value" :label="item.label" :value="item.value" <el-option
@click="handleGetThinkPolicyIndustryTotal()" /> v-for="item in box2YearList"
:key="item.value"
:label="item.label"
:value="item.value"
@click="handleGetThinkPolicyIndustryTotal()"
/>
</el-select> </el-select>
</div> </div>
<div id="box2Chart"> <div id="box2Chart">
<div class="box2-item" v-for="(item, index) in box2Data" :key="index"> <div class="box2-item" v-for="(item, index) in box2Data" :key="index">
<div class="icon" :style="{ background: item.color }"></div> <div class="icon" :style="{ background: item.color }"></div>
<div class="name">{{ item.industry }}</div> <div class="name">{{ item.industry }}</div>
<el-progress :show-text="false" :color="box2ColorList[index]" style="width: 220px" stroke-width="8" <el-progress
:percentage="item.percent" /> :show-text="false"
:color="box2ColorList[index]"
style="width: 170px"
stroke-width="8"
:percentage="item.percent"
/>
<div class="num">{{ item.amount + "项" }} / {{ item.totalAmount + "项" }}</div> <div class="num">{{ item.amount + "项" }} / {{ item.totalAmount + "项" }}</div>
<div class="per">{{ item.percent + "%" }}</div> <div class="per">{{ item.percent + "%" }}</div>
</div> </div>
<div class="box2-item"> <!-- <div class="box2-item">
<el-progress :percentage="50" /> <el-progress :percentage="50" />
</div> </div> -->
</div> </div>
</div> </div>
</div> </div>
...@@ -60,8 +75,13 @@ ...@@ -60,8 +75,13 @@
<div class="box-main"> <div class="box-main">
<div class="select-box"> <div class="select-box">
<el-select v-model="box3SelectYear" placeholder="选择时间" style="width: 100px"> <el-select v-model="box3SelectYear" placeholder="选择时间" style="width: 100px">
<el-option v-for="item in box3YearList" :key="item.value" :label="item.label" :value="item.value" <el-option
@click="handleGetThinkPolicyIndustryChange()" /> v-for="item in box3YearList"
:key="item.value"
:label="item.label"
:value="item.value"
@click="handleGetThinkPolicyIndustryChange()"
/>
</el-select> </el-select>
</div> </div>
<div id="box3Chart"></div> <div id="box3Chart"></div>
...@@ -80,7 +100,7 @@ ...@@ -80,7 +100,7 @@
<el-select v-model="selectedYear" placeholder="选择时间" style="width: 120px" @click="handleGetThinkPolicy()"> <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-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
<el-select v-model="sort" placeholder="发布时间" style="width: 120px"> <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="true" label="正序" :value="true" />
<el-option @click="handleGetThinkPolicy()" :key="false" label="倒序" :value="false" /> <el-option @click="handleGetThinkPolicy()" :key="false" label="倒序" :value="false" />
</el-select> </el-select>
...@@ -99,8 +119,14 @@ ...@@ -99,8 +119,14 @@
class="filter-checkbox"> class="filter-checkbox">
{{ item }} {{ item }}
</el-checkbox> --> </el-checkbox> -->
<el-checkbox v-for="research in areaList" :key="research.id" v-model="selectedAreaList" <el-checkbox
:label="research.id" @change="handleGetThinkPolicy()" class="filter-checkbox"> style="width: 180px"
v-for="research in areaList"
:key="research.id"
v-model="selectedAreaList"
:label="research.id"
class="filter-checkbox"
>
{{ research.name }} {{ research.name }}
</el-checkbox> </el-checkbox>
</div> </div>
...@@ -141,13 +167,16 @@ ...@@ -141,13 +167,16 @@
</div> </div>
</div> </div>
<div class="right-footer"> <div class="right-footer">
<div class="info"> <div class="info">{{ total }}项调查</div>
{{ total }}项调查
</div>
<div class="page-box"> <div class="page-box">
<el-pagination :page-size="12" background layout="prev, pager, next" :total="total" <el-pagination
@current-change="handleCurrentChange" :current-page="currentPage" /> :page-size="12"
background
layout="prev, pager, next"
:total="total"
@current-change="handleCurrentChange"
:current-page="currentPage"
/>
</div> </div>
</div> </div>
</div> </div>
...@@ -157,7 +186,7 @@ ...@@ -157,7 +186,7 @@
</template> </template>
<script setup> <script setup>
import { ref, onMounted } from "vue"; import { ref, watch, onMounted } from "vue";
import setChart from "@/utils/setChart"; import setChart from "@/utils/setChart";
import getPieChart from "./utils/piechart"; import getPieChart from "./utils/piechart";
import getMultiLineChart from "./utils/multiLineChart"; import getMultiLineChart from "./utils/multiLineChart";
...@@ -237,19 +266,19 @@ const handleGetThinkPolicyIndustry = async () => { ...@@ -237,19 +266,19 @@ const handleGetThinkPolicyIndustry = async () => {
const parmas = { const parmas = {
id: router.currentRoute._value.params.id, id: router.currentRoute._value.params.id,
year: box1SelectYear.value year: box1SelectYear.value
} };
const res = await getThinkPolicyIndustry(parmas); const res = await getThinkPolicyIndustry(parmas);
console.log("提出建议领域分布", res); console.log("提出建议领域分布", res);
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
let data = [] let data = [];
res.data.map(item => { res.data.map(item => {
data.push({ data.push({
name: item.industry, name: item.industry,
value: item.amount, value: item.amount,
percent: item.percent percent: item.percent
}) });
}) });
box1Data.value = data box1Data.value = data;
const box1Chart = getPieChart(box1Data.value); const box1Chart = getPieChart(box1Data.value);
setChart(box1Chart, "box1Chart"); setChart(box1Chart, "box1Chart");
} }
...@@ -303,7 +332,7 @@ const box2Data = ref([ ...@@ -303,7 +332,7 @@ const box2Data = ref([
// color: "#69B1FF" // color: "#69B1FF"
// } // }
]); ]);
const box2ColorList = ref(["#CE4F51", "#055FC2", "#13A8A8", "#722ED1", "#FA8C16", "#69B1FF"]) const box2ColorList = ref(["#CE4F51", "#055FC2", "#13A8A8", "#722ED1", "#FA8C16", "#69B1FF"]);
const box2SelectYear = ref("2025"); const box2SelectYear = ref("2025");
const box2YearList = ref([ const box2YearList = ref([
{ {
...@@ -325,11 +354,11 @@ const handleGetThinkPolicyIndustryTotal = async () => { ...@@ -325,11 +354,11 @@ const handleGetThinkPolicyIndustryTotal = async () => {
const parmas = { const parmas = {
id: router.currentRoute._value.params.id, id: router.currentRoute._value.params.id,
year: box2SelectYear.value year: box2SelectYear.value
} };
const res = await getThinkPolicyIndustryTotal(parmas); const res = await getThinkPolicyIndustryTotal(parmas);
console.log("相关政策领域分布", res); console.log("相关政策领域分布", res);
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
box2Data.value = res.data box2Data.value = res.data;
} }
} catch (error) { } catch (error) {
console.error("获取相关政策领域分布error", error); console.error("获取相关政策领域分布error", error);
...@@ -372,7 +401,7 @@ const handleGetThinkPolicyIndustryChange = async () => { ...@@ -372,7 +401,7 @@ const handleGetThinkPolicyIndustryChange = async () => {
const parmas = { const parmas = {
id: router.currentRoute._value.params.id, id: router.currentRoute._value.params.id,
year: box3SelectYear.value year: box3SelectYear.value
} };
const res = await getThinkPolicyIndustryChange(parmas); const res = await getThinkPolicyIndustryChange(parmas);
console.log("热门研究方向变化趋势", res); console.log("热门研究方向变化趋势", res);
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
...@@ -404,7 +433,7 @@ const handleGetThinkPolicyIndustryChange = async () => { ...@@ -404,7 +433,7 @@ const handleGetThinkPolicyIndustryChange = async () => {
}; };
frontendData.data.push(industryData); frontendData.data.push(industryData);
}); });
box3Data.value = frontendData box3Data.value = frontendData;
let box3Chart = getMultiLineChart( let box3Chart = getMultiLineChart(
box3Data.value.title, box3Data.value.title,
box3Data.value.data[0].value, box3Data.value.data[0].value,
...@@ -439,8 +468,7 @@ const selectedYear = ref(1); ...@@ -439,8 +468,7 @@ const selectedYear = ref(1);
// 科技领域 // 科技领域
const areaList = ref([]); const areaList = ref([]);
const selectedAreaList = ref(null); const selectedAreaList = ref([]);
//获取科技领域 //获取科技领域
const handleGetHylyList = async () => { const handleGetHylyList = async () => {
...@@ -448,7 +476,7 @@ const handleGetHylyList = async () => { ...@@ -448,7 +476,7 @@ const handleGetHylyList = async () => {
const res = await getHylyList(); const res = await getHylyList();
console.log("智库研究类型信息", res); console.log("智库研究类型信息", res);
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
areaList.value = res.data areaList.value = res.data;
} }
} catch (error) { } catch (error) {
console.error("获取研究类型error", error); console.error("获取研究类型error", error);
...@@ -506,115 +534,8 @@ const policyList = ref([ ...@@ -506,115 +534,8 @@ const policyList = ref([
// } // }
// ] // ]
// }, // },
// {
// img: Img2,
// title: "考虑采取更全面的方法来打击全球供应链中强迫劳动使用的选项。",
// time: "2025年3月15日",
// desc: " 美国贸易执法是否发挥了作用,能否做得更多?",
// tagList: ["人工智能", "集成电路"],
// fileList: [
// {
// type: "法案",
// title: "2024《维吾尔强迫劳动预防法》"
// }
// ]
// },
// {
// img: Img2,
// title: "与利益相关者共同收集证据,为关于贸易执法的公共讨论提供信息。",
// time: "2025年3月15日",
// desc: "美国贸易执法是否发挥了作用,能否做得更多?",
// tagList: ["人工智能", "集成电路"],
// fileList: [
// {
// type: "法案",
// title: "2024《维吾尔强迫劳动预防法》"
// }
// ]
// },
// {
// img: Img2,
// title: "推动清洁能源生产供内用,化石燃料重新配置出口。",
// time: "2025年6月26日",
// desc: "美国贸易执法是否发挥了作用,能否做得更多?",
// tagList: ["人工智能", "集成电路"],
// fileList: [
// {
// type: "法案",
// title: "2024《重塑美国人口结构法案》"
// },
// {
// type: "法案",
// title: "2024《重塑美国人口结构法案》"
// }
// ]
// },
// {
// img: Img2,
// title: "允许OPT的国际学生出国旅行并持多次入境签证重新进入美国。",
// time: "2025年6月26日",
// desc: "中美经济竞争:复杂经济和地缘政治关系中的收益与风险",
// tagList: ["人工智能", "集成电路"],
// fileList: [
// {
// type: "法案",
// title: "2024《重塑美国人口结构法案》"
// },
// {
// type: "法案",
// title: "2025《开放人才法案》"
// }
// ]
// },
// {
// img: Img3,
// title: "增加中国公民可获得的 H-1B 签证数量。",
// time: "2025年6月26日",
// desc: "中美经济竞争:复杂经济和地缘政治关系中的收益与风险",
// tagList: ["人工智能", "集成电路"],
// fileList: [
// {
// type: "法案",
// title: "2024《重塑美国人口结构法案》"
// },
// {
// type: "法案",
// title: "2025《GENIUS法案》"
// }
// ]
// },
// {
// img: Img3,
// title: "通过就业偏好类别增加绿卡的数量。",
// time: "2025年6月26日",
// desc: "中美经济竞争:复杂经济和地缘政治关系中的收益与风险",
// tagList: ["人工智能", "集成电路"],
// fileList: [
// {
// type: "法案",
// title: "2024《重塑美国人口结构法案》"
// },
// {
// type: "法案",
// title: "2025《开放人才法案》"
// }
// ]
// },
// {
// img: Img4,
// title: "推动清洁能源生产供内用,化石燃料重新配置出口。",
// time: "2025年6月26日",
// desc: "美国传统能源产业的未来:是走向终结还是持续发展?",
// tagList: ["人工智能", "集成电路"],
// fileList: [
// {
// type: "法案",
// title: "2024《能源法案》"
// }
// ]
// }
]);
]);
//获取当前时间x年前的日期 //获取当前时间x年前的日期
function getDateYearsAgo(years) { function getDateYearsAgo(years) {
...@@ -629,12 +550,13 @@ function getDateYearsAgo(years) { ...@@ -629,12 +550,13 @@ function getDateYearsAgo(years) {
return `${year}-${month}-${day}`; return `${year}-${month}-${day}`;
} }
const sort = ref(true) const total = ref(0);
const currentPage = ref(1) const sort = ref(true);
const currentPage = ref(1);
// 处理页码改变事件 // 处理页码改变事件
const handleCurrentChange = page => { const handleCurrentChange = page => {
currentPage.value = page; currentPage.value = page;
handleGetThinkDynamicsReport() handleGetThinkPolicy();
}; };
const handleGetThinkPolicy = async () => { const handleGetThinkPolicy = async () => {
...@@ -642,31 +564,35 @@ const handleGetThinkPolicy = async () => { ...@@ -642,31 +564,35 @@ const handleGetThinkPolicy = async () => {
const parmas = { const parmas = {
id: router.currentRoute._value.params.id, id: router.currentRoute._value.params.id,
startDate: getDateYearsAgo(selectedYear.value), startDate: getDateYearsAgo(selectedYear.value),
parmas: {
sortFun: sort.value, sortFun: sort.value,
currentPage: currentPage.value, currentPage: currentPage.value,
pageSize: 12, pageSize: 10,
researchTypeIds: selectedAreaList.value ? selectedAreaList.value : null, researchTypeIds: selectedAreaList.value.join(',')
} };
}
const res = await getThinkPolicy(parmas); const res = await getThinkPolicy(parmas);
console.log("智库政策", res); console.log("智库政策", res);
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
policyList.value = res.data.content policyList.value = res.data.content;
total.value = res.data.totalElements total.value = res.data.totalElements;
} }
} catch (error) { } catch (error) {
console.error("获取智库政策error", error); console.error("获取智库政策error", error);
} }
}; };
onMounted(() => { watch(
handleGetThinkPolicyIndustry() () => selectedAreaList.value,
handleGetThinkPolicyIndustryTotal() val => {
handleGetThinkPolicyIndustryChange() handleGetThinkPolicy();
handleGetHylyList() }
handleGetThinkPolicy() );
onMounted(() => {
handleGetThinkPolicyIndustry();
handleGetThinkPolicyIndustryTotal();
handleGetThinkPolicyIndustryChange();
handleGetHylyList();
handleGetThinkPolicy();
}); });
</script> </script>
...@@ -752,6 +678,8 @@ onMounted(() => { ...@@ -752,6 +678,8 @@ onMounted(() => {
margin: 0 auto; margin: 0 auto;
margin-top: 50px; margin-top: 50px;
height: 300px; height: 300px;
overflow: hidden;
overflow-y: auto;
.box2-item { .box2-item {
height: 30px; height: 30px;
...@@ -766,7 +694,7 @@ onMounted(() => { ...@@ -766,7 +694,7 @@ onMounted(() => {
} }
.name { .name {
width: 80px; width: 120px;
margin-left: 7px; margin-left: 7px;
margin-right: 23px; margin-right: 23px;
height: 24px; height: 24px;
...@@ -780,7 +708,7 @@ onMounted(() => { ...@@ -780,7 +708,7 @@ onMounted(() => {
} }
.num { .num {
width: 80px; width: 100px;
margin-left: 10px; margin-left: 10px;
height: 22px; height: 22px;
color: rgba(95, 101, 108, 1); color: rgba(95, 101, 108, 1);
...@@ -860,7 +788,7 @@ onMounted(() => { ...@@ -860,7 +788,7 @@ onMounted(() => {
.left { .left {
width: 300px; width: 300px;
height: 483px; height: 800px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1); border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px; border-radius: 10px;
...@@ -869,7 +797,6 @@ onMounted(() => { ...@@ -869,7 +797,6 @@ onMounted(() => {
.select-box { .select-box {
margin-top: 21px; margin-top: 21px;
.select-box-header { .select-box-header {
display: flex; display: flex;
gap: 17px; gap: 17px;
......
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
{{ thinkTank.describe }} {{ thinkTank.describe }}
</div> </div>
<div class="center-footer"> <div class="center-footer">
<div class="tag" v-for="tag in thinkTank.tags">{{ tag.industryName }}</div> <div class="tag" v-for="tag,index in thinkTank.tags" :key="index">{{ tag.industryName }}</div>
</div> </div>
</div> </div>
...@@ -114,7 +114,10 @@ onMounted(async () => { ...@@ -114,7 +114,10 @@ onMounted(async () => {
.header-top-left { .header-top-left {
width: 88px; width: 88px;
height: 88px; height: 88px;
background: purple; img{
width: 100%;
height: 100%;
}
} }
.header-top-center { .header-top-center {
......
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<el-option @click="handleGetThinkDynamicsReport()" v-for="item in yearList" :key="item.value" <el-option @click="handleGetThinkDynamicsReport()" v-for="item in yearList" :key="item.value"
:label="item.label" :value="item.value" /> :label="item.label" :value="item.value" />
</el-select> </el-select>
<el-select v-model="sort" placeholder="发布时间" style="width: 120px"> <el-select v-model="sort" placeholder="发布时间" style="width: 120px; margin-left: 8px;">
<el-option @click="handleGetThinkDynamicsReport()" :key="true" label="正序" :value="true" /> <el-option @click="handleGetThinkDynamicsReport()" :key="true" label="正序" :value="true" />
<el-option @click="handleGetThinkDynamicsReport()" :key="false" label="倒序" :value="false" /> <el-option @click="handleGetThinkDynamicsReport()" :key="false" label="倒序" :value="false" />
</el-select> </el-select>
...@@ -490,6 +490,9 @@ onMounted(async () => { ...@@ -490,6 +490,9 @@ onMounted(async () => {
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
line-height: 24px; line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.footer-card-footer { .footer-card-footer {
......
...@@ -1475,6 +1475,9 @@ onMounted(async () => { ...@@ -1475,6 +1475,9 @@ onMounted(async () => {
font-weight: 400; font-weight: 400;
line-height: 32px; line-height: 32px;
letter-spacing: 0px; letter-spacing: 0px;
overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
} }
.rank1 { .rank1 {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论