Skip to content

R
risk-monitor
提交 65953eed authored 作者: coderBryanFu's avatar coderBryanFu
浏览文件
操作

智库样式优化

上级 af7079a0
显示空白字符变更
内嵌 并排
正在显示 包含 151 行增加 和 202 行删除
src/api/thinkTank/overview.js
浏览文件 @ 65953eed
......@@ -141,6 +141,7 @@ export function getThinkPolicy(params) {
return request({
method: 'GET',
url: `/api/thinkTankInfo/policy/${params.id}/${params.startDate}`,
params
})
}
......
src/views/thinkTank/ReportDetail/policyTracking/index.vue
浏览文件 @ 65953eed
......@@ -431,7 +431,8 @@ onMounted(async () => {
width: 1056px;
height: 1280px;
margin: 0 auto;
overflow: auto;
overflow: hidden;
overflow-y: auto;
.box1-item {
height: 128px;
......@@ -456,6 +457,7 @@ onMounted(async () => {
}
.center {
width: 850px;
margin-left: 18px;
.title {
......
src/views/thinkTank/ReportDetail/reportAnalysis/index.vue
浏览文件 @ 65953eed
......@@ -39,8 +39,13 @@
</div>
<div class="box2-main">
<div class="box2-main-tag-box">
<div class="tag" :class="{ tagActive: activeArea === item }" v-for="(item, index) in areaList" :key="index"
@click="handleClickArea(item.status)">
<div
class="tag"
:class="{ tagActive: activeArea === item }"
v-for="(item, index) in areaList"
:key="index"
@click="handleClickArea(item.status)"
>
{{ item.industryName }}
</div>
</div>
......@@ -94,13 +99,16 @@
</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" />
<el-pagination
:page-size="12"
background
layout="prev, pager, next"
:total="total"
@current-change="handleCurrentChange"
:current-page="currentPage"
/>
</div>
</div>
</div>
......@@ -131,7 +139,6 @@ import {
getThinkTankReportContent,
getThinkTankReportIndustry,
getThinkTankReportIndustryCloud
} from "@/api/thinkTank/overview";
import { useRouter } from "vue-router";
const router = useRouter();
......@@ -141,27 +148,25 @@ const box1Data =
ref(`包括经济竞争在内的美中竞争自2017年以来一直在定义美国外交政策。这两个经济体是世界上第一和第二大国家经济体,并且深深交织在一起。改变关系,无论多么必要,可能是昂贵的。因此,美国面临着一项挑战,确保其经济在耦合的战略竞争条件下满足国家的需求。
为了应对这一挑战,兰德大学的研究人员对美中竞争进行了经济和制度分析,进行了参与式的远见练习,以了解确保美国经济健康的长期路径,并创建了两个经济竞争游戏,探索多个国家在相互交流的同时确保经济健康的动态...`);
//获取内容摘要
const handleGetThinkTankReportAbstract = async () => {
try {
const res = await getThinkTankReportAbstract(router.currentRoute._value.params.id);
console.log("内容摘要", res);
if (res.code === 200 && res.data) {
box1Data.value = res.data
box1Data.value = res.data;
}
} catch (error) {
console.error("获取内容摘要error", error);
}
};
// 涉及科技领域
const areaList = ref([]);
const activeArea = ref(6);
const handleClickArea = area => {
activeArea.value = area;
handleGetThinkTankReportIndustryCloud()
handleGetThinkTankReportIndustryCloud();
};
const box2Data = ref([
// {
......@@ -204,21 +209,20 @@ const handleGetThinkTankReportIndustryCloud = async () => {
const params = {
id: router.currentRoute._value.params.id,
industryId: activeArea.value
}
};
const res = await getThinkTankReportIndustryCloud(params);
console.log("科技领域词云", res);
if (res.code === 200 && res.data) {
const data = []
const data = [];
res.data.map(item => {
data.push(
{
data.push({
name: item.clause,
value: item.count
})
box2Data.value = data
});
box2Data.value = data;
const box2Chart = getWordCloudChart(box2Data.value);
setChart(box2Chart, "box2Chart");
})
});
}
} catch (error) {
console.error("获取科技领域词云error", error);
......@@ -230,7 +234,7 @@ const handleGetThinkTankReportIndustry = async () => {
const res = await getThinkTankReportIndustry(router.currentRoute._value.params.id);
console.log("涉及科技领域", res);
if (res.code === 200 && res.data) {
areaList.value = res.data
areaList.value = res.data;
}
} catch (error) {
console.error("获取涉及科技领域error", error);
......@@ -378,10 +382,10 @@ const majorOpinions = ref([
}
]);
// 处理页码改变事件
const currentPage = ref(1)
const currentPage = ref(1);
const handleCurrentChange = page => {
currentPage.value = page;
handleGetThinkDynamicsReport()
handleGetThinkDynamicsReport();
};
//获取报告主要观点
const handleGetThinkTankReportContent = async () => {
......@@ -389,19 +393,18 @@ const handleGetThinkTankReportContent = async () => {
const res = await getThinkTankReportContent(router.currentRoute._value.params.id);
console.log("主要观点", res);
if (res.code === 200 && res.data) {
majorOpinions.value = res.data.content
majorOpinions.value = res.data.content;
}
} catch (error) {
console.error("获取主要观点error", error);
}
};
onMounted(() => {
handleGetThinkTankReportAbstract()
handleGetThinkTankReportContent()
handleGetThinkTankReportIndustry()
handleGetThinkTankReportIndustryCloud()
handleGetThinkTankReportAbstract();
handleGetThinkTankReportContent();
handleGetThinkTankReportIndustry();
handleGetThinkTankReportIndustryCloud();
});
</script>
......@@ -506,14 +509,15 @@ onMounted(() => {
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
display: -webkit-box;
/* 使用Webkit的弹性盒模型 */
-webkit-box-orient: vertical;
/* 垂直排列 */
-webkit-line-clamp: 9;
/* 限制显示9行 */
overflow: hidden;
/* 隐藏超出部分 */
overflow-y: auto;
// display: -webkit-box;
// /* 使用Webkit的弹性盒模型 */
// -webkit-box-orient: vertical;
// /* 垂直排列 */
// -webkit-line-clamp: 9;
// /* 限制显示9行 */
// overflow: hidden;
// /* 隐藏超出部分 */
}
.box1-footer {
......@@ -667,6 +671,9 @@ onMounted(() => {
line-height: 26px;
letter-spacing: 0px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.desc {
......@@ -678,6 +685,9 @@ onMounted(() => {
line-height: 22px;
letter-spacing: 0px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
......
src/views/thinkTank/ThinkTankDetail/PolicyTracking/index.vue
浏览文件 @ 65953eed
......@@ -12,8 +12,13 @@
<div class="box-main">
<div class="select-box">
<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"
@click="handleGetThinkPolicyIndustry()" />
<el-option
v-for="(item, index) in box1YearList"
:key="index"
:label="item.label"
:value="item.value"
@click="handleGetThinkPolicyIndustry()"
/>
</el-select>
</div>
<div id="box1Chart"></div>
......@@ -30,22 +35,32 @@
<div class="box-main">
<div class="select-box">
<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"
@click="handleGetThinkPolicyIndustryTotal()" />
<el-option
v-for="item in box2YearList"
:key="item.value"
:label="item.label"
:value="item.value"
@click="handleGetThinkPolicyIndustryTotal()"
/>
</el-select>
</div>
<div id="box2Chart">
<div class="box2-item" v-for="(item, index) in box2Data" :key="index">
<div class="icon" :style="{ background: item.color }"></div>
<div class="name">{{ item.industry }}</div>
<el-progress :show-text="false" :color="box2ColorList[index]" style="width: 220px" stroke-width="8"
:percentage="item.percent" />
<el-progress
: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="per">{{ item.percent + "%" }}</div>
</div>
<div class="box2-item">
<!-- <div class="box2-item">
<el-progress :percentage="50" />
</div>
</div> -->
</div>
</div>
</div>
......@@ -60,8 +75,13 @@
<div class="box-main">
<div class="select-box">
<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"
@click="handleGetThinkPolicyIndustryChange()" />
<el-option
v-for="item in box3YearList"
:key="item.value"
:label="item.label"
:value="item.value"
@click="handleGetThinkPolicyIndustryChange()"
/>
</el-select>
</div>
<div id="box3Chart"></div>
......@@ -80,7 +100,7 @@
<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">
<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>
......@@ -99,8 +119,14 @@
class="filter-checkbox">
{{ item }}
</el-checkbox> -->
<el-checkbox v-for="research in areaList" :key="research.id" v-model="selectedAreaList"
:label="research.id" @change="handleGetThinkPolicy()" class="filter-checkbox">
<el-checkbox
style="width: 180px"
v-for="research in areaList"
:key="research.id"
v-model="selectedAreaList"
:label="research.id"
class="filter-checkbox"
>
{{ research.name }}
</el-checkbox>
</div>
......@@ -141,13 +167,16 @@
</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" />
<el-pagination
:page-size="12"
background
layout="prev, pager, next"
:total="total"
@current-change="handleCurrentChange"
:current-page="currentPage"
/>
</div>
</div>
</div>
......@@ -157,7 +186,7 @@
</template>
<script setup>
import { ref, onMounted } from "vue";
import { ref, watch, onMounted } from "vue";
import setChart from "@/utils/setChart";
import getPieChart from "./utils/piechart";
import getMultiLineChart from "./utils/multiLineChart";
......@@ -237,19 +266,19 @@ const handleGetThinkPolicyIndustry = async () => {
const parmas = {
id: router.currentRoute._value.params.id,
year: box1SelectYear.value
}
};
const res = await getThinkPolicyIndustry(parmas);
console.log("提出建议领域分布", res);
if (res.code === 200 && res.data) {
let data = []
let data = [];
res.data.map(item => {
data.push({
name: item.industry,
value: item.amount,
percent: item.percent
})
})
box1Data.value = data
});
});
box1Data.value = data;
const box1Chart = getPieChart(box1Data.value);
setChart(box1Chart, "box1Chart");
}
......@@ -303,7 +332,7 @@ const box2Data = ref([
// 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 box2YearList = ref([
{
......@@ -325,11 +354,11 @@ const handleGetThinkPolicyIndustryTotal = async () => {
const parmas = {
id: router.currentRoute._value.params.id,
year: box2SelectYear.value
}
};
const res = await getThinkPolicyIndustryTotal(parmas);
console.log("相关政策领域分布", res);
if (res.code === 200 && res.data) {
box2Data.value = res.data
box2Data.value = res.data;
}
} catch (error) {
console.error("获取相关政策领域分布error", error);
......@@ -372,7 +401,7 @@ const handleGetThinkPolicyIndustryChange = async () => {
const parmas = {
id: router.currentRoute._value.params.id,
year: box3SelectYear.value
}
};
const res = await getThinkPolicyIndustryChange(parmas);
console.log("热门研究方向变化趋势", res);
if (res.code === 200 && res.data) {
......@@ -404,7 +433,7 @@ const handleGetThinkPolicyIndustryChange = async () => {
};
frontendData.data.push(industryData);
});
box3Data.value = frontendData
box3Data.value = frontendData;
let box3Chart = getMultiLineChart(
box3Data.value.title,
box3Data.value.data[0].value,
......@@ -439,8 +468,7 @@ const selectedYear = ref(1);
// 科技领域
const areaList = ref([]);
const selectedAreaList = ref(null);
const selectedAreaList = ref([]);
//获取科技领域
const handleGetHylyList = async () => {
......@@ -448,7 +476,7 @@ const handleGetHylyList = async () => {
const res = await getHylyList();
console.log("智库研究类型信息", res);
if (res.code === 200 && res.data) {
areaList.value = res.data
areaList.value = res.data;
}
} catch (error) {
console.error("获取研究类型error", error);
......@@ -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年前的日期
function getDateYearsAgo(years) {
......@@ -629,12 +550,13 @@ function getDateYearsAgo(years) {
return `${year}-${month}-${day}`;
}
const sort = ref(true)
const currentPage = ref(1)
const total = ref(0);
const sort = ref(true);
const currentPage = ref(1);
// 处理页码改变事件
const handleCurrentChange = page => {
currentPage.value = page;
handleGetThinkDynamicsReport()
handleGetThinkPolicy();
};
const handleGetThinkPolicy = async () => {
......@@ -642,31 +564,35 @@ const handleGetThinkPolicy = async () => {
const parmas = {
id: router.currentRoute._value.params.id,
startDate: getDateYearsAgo(selectedYear.value),
parmas: {
sortFun: sort.value,
currentPage: currentPage.value,
pageSize: 12,
researchTypeIds: selectedAreaList.value ? selectedAreaList.value : null,
}
}
pageSize: 10,
researchTypeIds: selectedAreaList.value.join(',')
};
const res = await getThinkPolicy(parmas);
console.log("智库政策", res);
if (res.code === 200 && res.data) {
policyList.value = res.data.content
total.value = res.data.totalElements
policyList.value = res.data.content;
total.value = res.data.totalElements;
}
} catch (error) {
console.error("获取智库政策error", error);
}
};
onMounted(() => {
handleGetThinkPolicyIndustry()
handleGetThinkPolicyIndustryTotal()
handleGetThinkPolicyIndustryChange()
handleGetHylyList()
handleGetThinkPolicy()
watch(
() => selectedAreaList.value,
val => {
handleGetThinkPolicy();
}
);
onMounted(() => {
handleGetThinkPolicyIndustry();
handleGetThinkPolicyIndustryTotal();
handleGetThinkPolicyIndustryChange();
handleGetHylyList();
handleGetThinkPolicy();
});
</script>
......@@ -752,6 +678,8 @@ onMounted(() => {
margin: 0 auto;
margin-top: 50px;
height: 300px;
overflow: hidden;
overflow-y: auto;
.box2-item {
height: 30px;
......@@ -766,7 +694,7 @@ onMounted(() => {
}
.name {
width: 80px;
width: 120px;
margin-left: 7px;
margin-right: 23px;
height: 24px;
......@@ -780,7 +708,7 @@ onMounted(() => {
}
.num {
width: 80px;
width: 100px;
margin-left: 10px;
height: 22px;
color: rgba(95, 101, 108, 1);
......@@ -860,7 +788,7 @@ onMounted(() => {
.left {
width: 300px;
height: 483px;
height: 800px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
......@@ -869,7 +797,6 @@ onMounted(() => {
.select-box {
margin-top: 21px;
.select-box-header {
display: flex;
gap: 17px;
......
src/views/thinkTank/ThinkTankDetail/index.vue
浏览文件 @ 65953eed
......@@ -14,7 +14,7 @@
{{ thinkTank.describe }}
</div>
<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>
......@@ -114,7 +114,10 @@ onMounted(async () => {
.header-top-left {
width: 88px;
height: 88px;
background: purple;
img{
width: 100%;
height: 100%;
}
}
.header-top-center {
......
src/views/thinkTank/ThinkTankDetail/thinkDynamics/index.vue
浏览文件 @ 65953eed
......@@ -14,7 +14,7 @@
<el-option @click="handleGetThinkDynamicsReport()" 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">
<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="false" label="倒序" :value="false" />
</el-select>
......@@ -490,6 +490,9 @@ onMounted(async () => {
font-size: 18px;
font-weight: 700;
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.footer-card-footer {
......
src/views/thinkTank/index.vue
浏览文件 @ 65953eed
......@@ -1475,6 +1475,9 @@ onMounted(async () => {
font-weight: 400;
line-height: 32px;
letter-spacing: 0px;
overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
}
.rank1 {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论