提交 d3e2e25c authored 作者: yanpeng's avatar yanpeng

部分修改

上级 85d96731
<template> <template>
<div class="box4"> <div class="msg-bubble">
<div class="box4-header"> <div class="msg-bubble-header">
<div class="header-icon"> <div class="header-icon">
<!-- <img src="./image1.png" alt="" /> --> <!-- <img src="./image1.png" alt="" /> -->
<img src="./message-icon.svg" alt="" /> <img src="./message-icon.svg" alt="" />
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
</div> </div>
<div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div> <div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div>
</div> </div>
<div class="box4-main"> <div class="msg-bubble-main">
<div class="message-bubble" v-for="(item, index) in messageList" :key="index" @click="handleClickPerson(item)"> <div class="message-bubble" v-for="(item, index) in messageList" :key="index" @click="handleClickPerson(item)">
<div class="avatar-container"> <div class="avatar-container">
<img :src="item[props.imageUrl] || avatarUser" :alt="item[props.name]" class="avatar" /> <img :src="item[props.imageUrl] || avatarUser" :alt="item[props.name]" class="avatar" />
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
<!-- <MessageBubble v-for="(item, index) in messageList" @click="handleClickPsserson(item)" <!-- <MessageBubble v-for="(item, index) in messageList" @click="handleClickPsserson(item)"
@info-click="handleMediaClick(item)" :key="index" :avatar="item.img ? item.img : DefaultIcon1" :name="item.name" @info-click="handleMediaClick(item)" :key="index" :avatar="item.img ? item.img : DefaultIcon1" :name="item.name"
:time="item.time" :source="item.source" :content="item.content" /> --> :time="item.time" :source="item.source" :content="item.content" /> -->
<!-- <div class="box4-main-item" v-for="(item, index) in messageList" :key="index"> <!-- <div class="msg-bubble-main-item" v-for="(item, index) in messageList" :key="index">
<div class="left" @click="handleClickPerson(item)"> <div class="left" @click="handleClickPerson(item)">
<img :src="item.img ? item.img : DefaultIcon1" alt="" /> <img :src="item.img ? item.img : DefaultIcon1" alt="" />
</div> </div>
...@@ -121,7 +121,7 @@ const handleToMoreNews = item => { ...@@ -121,7 +121,7 @@ const handleToMoreNews = item => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.box4 { .msg-bubble {
width: 792px; width: 792px;
height: 450px; height: 450px;
border-radius: 10px; border-radius: 10px;
...@@ -129,7 +129,7 @@ const handleToMoreNews = item => { ...@@ -129,7 +129,7 @@ const handleToMoreNews = item => {
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
border: 1px solid rgb(234, 236, 238); border: 1px solid rgb(234, 236, 238);
.box4-header { .msg-bubble-header {
width: 792px; width: 792px;
height: 48px; height: 48px;
border-bottom: 1px solid rgb(234, 236, 238); border-bottom: 1px solid rgb(234, 236, 238);
...@@ -178,7 +178,7 @@ const handleToMoreNews = item => { ...@@ -178,7 +178,7 @@ const handleToMoreNews = item => {
} }
} }
.box4-main { .msg-bubble-main {
height: 402px; height: 402px;
overflow-y: auto; overflow-y: auto;
box-sizing: border-box; box-sizing: border-box;
......
...@@ -112,7 +112,7 @@ const handleToNewsAnalysis = (item, index) => { ...@@ -112,7 +112,7 @@ const handleToNewsAnalysis = (item, index) => {
} }
.more { .more {
width: 45px; width: 54px;
height: 24px; height: 24px;
position: absolute; position: absolute;
top: 12px; top: 12px;
...@@ -134,7 +134,7 @@ const handleToNewsAnalysis = (item, index) => { ...@@ -134,7 +134,7 @@ const handleToNewsAnalysis = (item, index) => {
.news-item { .news-item {
display: flex; display: flex;
height: 78px; height: 76px;
width: 749px; width: 749px;
margin-left: 21px; margin-left: 21px;
border-bottom: 1px solid rgba(240, 242, 244, 1); border-bottom: 1px solid rgba(240, 242, 244, 1);
......
...@@ -187,7 +187,7 @@ ...@@ -187,7 +187,7 @@
<div class="col-domain" style="color: rgb(59, 65, 75); font-weight: 700">所属领域</div> <div class="col-domain" style="color: rgb(59, 65, 75); font-weight: 700">所属领域</div>
<div class="col-date" style="color: rgb(59, 65, 75); font-weight: 700">制裁时间</div> <div class="col-date" style="color: rgb(59, 65, 75); font-weight: 700">制裁时间</div>
<div class="col-member" v-if="rankType !== 'school'" style="color: rgb(59, 65, 75); font-weight: 700"> <div class="col-member" v-if="rankType !== 'school'" style="color: rgb(59, 65, 75); font-weight: 700">
关键人物 省份
</div> </div>
</div> </div>
<div class="table-list"> <div class="table-list">
...@@ -210,7 +210,8 @@ ...@@ -210,7 +210,8 @@
</div> </div>
</div> </div>
<div class="col-date">{{ item.date }}</div> <div class="col-date">{{ item.date }}</div>
<div class="col-member" v-if="rankType !== 'school'">{{ item.member }}</div> <!-- <div class="col-member" v-if="rankType !== 'school'">{{ item.member }}</div> -->
<div class="col-member" v-if="rankType !== 'school'">{{ item.province }}</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -1108,6 +1109,7 @@ const handleGetDomainContainmentRanking = async () => { ...@@ -1108,6 +1109,7 @@ const handleGetDomainContainmentRanking = async () => {
// 处理返回的数据结构 // 处理返回的数据结构
const processedData = processRankingData(res.data); const processedData = processRankingData(res.data);
rankList.value = processedData; rankList.value = processedData;
console.log("排行数据 =>", rankList.value);
} }
} catch (error) { } catch (error) {
console.error("获取美对华领域打压遏制排行失败:", error); console.error("获取美对华领域打压遏制排行失败:", error);
......
...@@ -89,7 +89,7 @@ ...@@ -89,7 +89,7 @@
<el-empty <el-empty
v-if="box2DataList.length === 0" v-if="box2DataList.length === 0"
style="padding-top: 80px" style="padding-top: 80px"
description="暂无数据1" description="暂无数据"
:image-size="100" :image-size="100"
/> />
<div <div
......
...@@ -195,7 +195,7 @@ ...@@ -195,7 +195,7 @@
<div class="bottom-item"> <div class="bottom-item">
<div class="bottom-item-title"> <div class="bottom-item-title">
<img :src="icon4" alt="" /> <img :src="icon4" alt="" />
<span>美政府部门对华打压遏制历程</span> <span>美政府部门对华工作日程表</span>
</div> </div>
<div class="bottom-item-select"> <div class="bottom-item-select">
<!-- <div class="select-btn" :class="{ active: measureType === 'history' }" @click="measureType = 'history'"> <!-- <div class="select-btn" :class="{ active: measureType === 'history' }" @click="measureType = 'history'">
......
...@@ -49,7 +49,21 @@ ...@@ -49,7 +49,21 @@
</div> </div>
</div> </div>
<div style="width: 100%; height: 620px; padding-top: 24px" id="char"></div> <div v-if="activeButtonId == 2" style="width: 100%; height: 520px; padding-top: 24px" id="char"></div>
<!-- <Echarts v-if="activeButtonId == 2" :option="lineOption" height="520px" /> -->
<div v-else>
<div class="content-line-chart-header">
<el-radio-group v-model="selectedIndicator" @change="handleIndicatorChange" size="default">
<el-radio
v-for="option in indicatorOptions"
:key="option.value"
:label="option.label"
:value="option.value"
/>
</el-radio-group>
</div>
<Echarts :option="lineOption" height="520px" />
</div>
</div> </div>
<div style="width: 778px; height: 620px; overflow: auto"> <div style="width: 778px; height: 620px; overflow: auto">
<el-table <el-table
...@@ -128,7 +142,8 @@ ...@@ -128,7 +142,8 @@
<div class="card-box" style="margin-top: 16px" @mouseenter="stopAutoPlay" @mouseleave="startAutoPlay(true)"> <div class="card-box" style="margin-top: 16px" @mouseenter="stopAutoPlay" @mouseleave="startAutoPlay(true)">
<div class="card-title"> <div class="card-title">
<img class="icon" src="../../assets/icons/title-icon2.png" /> <img class="icon" src="../../assets/icons/title-icon2.png" />
<img class="text" src="../../assets/icons/title-text2.svg" /> <!-- <img class="text" src="../../assets/icons/title-text2.svg" /> -->
<span class="text-new">中美科技博弈历程</span>
</div> </div>
<div class="card-main"> <div class="card-main">
<!-- <Timeline :data="course" text-key="title" id-key="seq" /> --> <!-- <Timeline :data="course" text-key="title" id-key="seq" /> -->
...@@ -218,6 +233,8 @@ import { ArrowRight, CaretBottom } from "@element-plus/icons-vue"; ...@@ -218,6 +233,8 @@ import { ArrowRight, CaretBottom } from "@element-plus/icons-vue";
import Timeline from "./Timeline.vue"; import Timeline from "./Timeline.vue";
import tableShow from "./tableShow.vue"; import tableShow from "./tableShow.vue";
import ButtonList from "@/components/buttonList/buttonList.vue"; import ButtonList from "@/components/buttonList/buttonList.vue";
import Echarts from "@/components/Chart/index.vue";
import mockData from "./mock.json";
import radarChart from "./radarChart3.js"; import radarChart from "./radarChart3.js";
import { getCompare, getChartDict, getTechnologyGameAnalysis } from "@/api/zmOverview/risk/index.js"; import { getCompare, getChartDict, getTechnologyGameAnalysis } from "@/api/zmOverview/risk/index.js";
...@@ -242,8 +259,8 @@ import { ElMessage } from "element-plus"; ...@@ -242,8 +259,8 @@ import { ElMessage } from "element-plus";
const buttonList = ref([ const buttonList = ref([
{ {
id: 1, id: 1,
text: "趋势变化", text: "趋势变化"
disabled: true // disabled: true
}, },
{ {
id: 2, id: 2,
...@@ -253,6 +270,9 @@ const buttonList = ref([ ...@@ -253,6 +270,9 @@ const buttonList = ref([
const activeButtonId = ref(buttonList.value[1]?.id || 1); const activeButtonId = ref(buttonList.value[1]?.id || 1);
const setActiveButtonId = id => { const setActiveButtonId = id => {
activeButtonId.value = id; activeButtonId.value = id;
if (id == 2) {
handleGetCompare();
}
}; };
const course = ref([ const course = ref([
...@@ -390,6 +410,197 @@ onMounted(async () => { ...@@ -390,6 +410,197 @@ onMounted(async () => {
// // setChart(option, "char7"); // // setChart(option, "char7");
startAutoPlay(); startAutoPlay();
processIndicatorOptions();
});
const chartColors = [
"rgba(8, 151, 156, 1)",
"#FF4D4F",
"#FF9900",
"#00CC99",
"#73c0de",
"#3ba272",
"#fc8452",
"#9a60b4",
"#ea7ccc"
];
// const series = {
// name: key,
// type: "line",
// symbolSize: 15,
// // stack: "Total",
// itemStyle: {
// color: chartColors[Math.floor(Math.random() * chartColors.length)]
// },
// data: []
// };
const indicatorOptions = ref([]);
const selectedIndicator = ref("");
// 整理指标选项
const processIndicatorOptions = () => {
const chinaData = mockData["中国"];
if (!chinaData) return;
indicatorOptions.value = Object.keys(chinaData).map(key => ({
label: key,
value: key
}));
if (indicatorOptions.value.length > 0) {
selectedIndicator.value = indicatorOptions.value[0].value;
handleIndicatorChange(selectedIndicator.value);
}
};
// 处理指标变化
const handleIndicatorChange = indicator => {
const chinaData = mockData["中国"]?.[indicator] || [];
const usaData = mockData["美国"]?.[indicator] || [];
const years = chinaData.map(item => item.year.toString());
const chinaValues = chinaData.map(item => item.value);
const usaValues = usaData.map(item => item.value);
lineOption.value.xAxis.data = years;
lineOption.value.series = [
{
name: "中国",
type: "line",
symbolSize: 10,
itemStyle: {
color: "#CE4F51"
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(206, 79, 81, .8)"
},
{
offset: 1,
color: "rgb(206, 79, 81, .3)"
}
])
},
data: chinaValues
},
{
name: "美国",
type: "line",
symbolSize: 10,
itemStyle: {
color: "#055FC2"
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(5, 95, 194,.8)"
},
{
offset: 1,
color: "rgb(5, 95, 194, .3)"
}
])
},
data: usaValues
}
];
};
const lineOption = ref({
title: {
text: ""
},
tooltip: {
trigger: "axis",
confine: true,
backgroundColor: "rgba(50, 50, 50, 0.7)",
borderColor: "#333",
borderWidth: 0,
padding: [5, 10],
textStyle: {
color: "#fff",
fontSize: 16
}
},
legend: {
show: false
},
grid: {
top: "5%",
left: "3%",
right: "4%",
bottom: "2%",
containLabel: true
},
xAxis: {
type: "category",
boundaryGap: false,
axisLine: {
lineStyle: {
color: "#ccc",
width: 1
}
},
axisTick: {
show: true,
lineStyle: {
color: "#ccc"
}
},
axisLabel: {
color: "#ccc",
fontSize: 16,
fontWeight: 400
},
data: ["2021", "2022", "2023", "2024", "2025"]
},
yAxis: {
type: "value",
// name: "指数",
nameLocation: "top",
nameGap: 35,
nameTextStyle: {
color: "#666",
fontSize: 13,
fontWeight: 600,
padding: [0, 0, 10, 0]
},
axisLine: {
show: false,
lineStyle: {
color: "#ccc",
width: 1
}
},
axisTick: {
show: false,
lineStyle: {
color: "#ccc"
}
},
axisLabel: {
color: "#ccc",
fontSize: 14,
fontWeight: 400,
formatter: value => {
return value.toFixed(0);
}
},
splitLine: {
lineStyle: {
width: 1,
type: "dashed",
color: "rgba(12, 78, 125, .3)"
}
},
splitNumber: 8
},
series: []
}); });
const tableData = ref([ const tableData = ref([
...@@ -562,7 +773,7 @@ const handleClickBottomBtn = () => { ...@@ -562,7 +773,7 @@ const handleClickBottomBtn = () => {
<style lang="scss" scoped> <style lang="scss" scoped>
.content-wrapper { .content-wrapper {
width: 1600px; width: 1600px;
height: 1600px; height: 1450px;
margin: 0 auto; margin: 0 auto;
.card-box { .card-box {
...@@ -585,6 +796,7 @@ const handleClickBottomBtn = () => { ...@@ -585,6 +796,7 @@ const handleClickBottomBtn = () => {
// width: 100%; // width: 100%;
height: 48px; height: 48px;
display: flex; display: flex;
align-items: center;
.icon { .icon {
/* 合并 */ /* 合并 */
...@@ -599,6 +811,13 @@ const handleClickBottomBtn = () => { ...@@ -599,6 +811,13 @@ const handleClickBottomBtn = () => {
height: 31px; height: 31px;
margin: 8px 0px; margin: 8px 0px;
} }
.text-new {
font-family: YouSheBiaoTiHei;
font-size: 24px;
font-weight: 400;
line-height: 24px;
color: rgb(5, 95, 194);
}
} }
.content-chart-header { .content-chart-header {
...@@ -608,6 +827,10 @@ const handleClickBottomBtn = () => { ...@@ -608,6 +827,10 @@ const handleClickBottomBtn = () => {
// line-height: 32px; // line-height: 32px;
align-items: center; align-items: center;
} }
.content-line-chart-header {
margin-top: 15px;
margin-left: 48px;
}
.card-main { .card-main {
height: 650px; height: 650px;
...@@ -1022,7 +1245,8 @@ const handleClickBottomBtn = () => { ...@@ -1022,7 +1245,8 @@ const handleClickBottomBtn = () => {
width: 100%; width: 100%;
height: auto; height: auto;
/* 高度自适应内容 */ /* 高度自适应内容 */
display: flex; // display: flex;
display: none;
flex-direction: row; flex-direction: row;
/* 行方向布局 */ /* 行方向布局 */
flex-wrap: wrap; flex-wrap: wrap;
......
{
"中国": {
"企业研发人才占比": [
{
"year": 2021,
"value": 79.8
},
{
"year": 2022,
"value": 80.1
},
{
"year": 2023,
"value": 82.7
},
{
"year": 2024,
"value": 81.3
},
{
"year": 2025,
"value": 82.1
}
],
"公共研发支出占比": [
{
"year": 2021,
"value": 72.6
},
{
"year": 2022,
"value": 72.6
},
{
"year": 2023,
"value": 73.7
},
{
"year": 2024,
"value": 72.7
},
{
"year": 2025,
"value": 73.5
}
],
"创新关联": [
{
"year": 2021,
"value": 78.2
},
{
"year": 2022,
"value": 78.1
},
{
"year": 2023,
"value": 77.0
},
{
"year": 2024,
"value": 78.5
},
{
"year": 2025,
"value": 77.0
}
],
"国内产业分布": [
{
"year": 2021,
"value": 99.4
},
{
"year": 2022,
"value": 99.9
},
{
"year": 2023,
"value": 100.4
},
{
"year": 2024,
"value": 100.9
},
{
"year": 2025,
"value": 101.4
}
],
"知识与技术产出": [
{
"year": 2021,
"value": 63.6
},
{
"year": 2022,
"value": 64.3
},
{
"year": 2023,
"value": 64.5
},
{
"year": 2024,
"value": 63.4
},
{
"year": 2025,
"value": 62.9
}
],
"知识工作者": [
{
"year": 2021,
"value": 79.5
},
{
"year": 2022,
"value": 79.7
},
{
"year": 2023,
"value": 78.1
},
{
"year": 2024,
"value": 78.9
},
{
"year": 2025,
"value": 79.4
}
]
},
"美国": {
"企业研发人才占比": [
{
"year": 2021,
"value": 81.1
},
{
"year": 2022,
"value": 81.8
},
{
"year": 2023,
"value": 82.8
},
{
"year": 2024,
"value": 81.3
},
{
"year": 2025,
"value": 82.5
}
],
"公共研发支出占比": [
{
"year": 2021,
"value": 73.8
},
{
"year": 2022,
"value": 71.6
},
{
"year": 2023,
"value": 72.1
},
{
"year": 2024,
"value": 72.6
},
{
"year": 2025,
"value": 71.9
}
],
"创新关联": [
{
"year": 2021,
"value": 77.4
},
{
"year": 2022,
"value": 77.3
},
{
"year": 2023,
"value": 77.2
},
{
"year": 2024,
"value": 77.1
},
{
"year": 2025,
"value": 77.0
}
],
"国内产业分布": [
{
"year": 2021,
"value": 98.5
},
{
"year": 2022,
"value": 101.1
},
{
"year": 2023,
"value": 98.4
},
{
"year": 2024,
"value": 99.8
},
{
"year": 2025,
"value": 98.2
}
],
"知识与技术产出": [
{
"year": 2021,
"value": 64.5
},
{
"year": 2022,
"value": 63.4
},
{
"year": 2023,
"value": 63.7
},
{
"year": 2024,
"value": 63.4
},
{
"year": 2025,
"value": 62.7
}
],
"知识工作者": [
{
"year": 2021,
"value": 66.8
},
{
"year": 2022,
"value": 71.8
},
{
"year": 2023,
"value": 76.8
},
{
"year": 2024,
"value": 81.8
},
{
"year": 2025,
"value": 86.8
}
]
}
}
\ No newline at end of file
...@@ -142,11 +142,11 @@ ...@@ -142,11 +142,11 @@
</div> </div>
<div class="carousel-footer"> <div class="carousel-footer">
<div class="footer-left"> <div class="footer-left">
<div class="type">{{ News.hotspotType +'——' }}</div> <div class="type">{{ News.hotspotType + "——" }}</div>
<div class="text">{{ News.eventTitle }}</div> <div class="text">{{ News.eventTitle }}</div>
</div> </div>
<div class="footer-right"> <div class="footer-right">
<img src="@/assets/icons/arrow-right.png" alt=""> <img src="@/assets/icons/arrow-right.png" alt="" />
</div> </div>
</div> </div>
</div> </div>
...@@ -290,8 +290,8 @@ const sections = ref([ ...@@ -290,8 +290,8 @@ const sections = ref([
count: 0, count: 0,
change: "无新增", change: "无新增",
unit: "次", unit: "次",
title: "230调查", title: "232调查",
type: "230调查" type: "232调查"
}, },
{ {
percent: 0, // 估算的百分比 percent: 0, // 估算的百分比
...@@ -436,8 +436,8 @@ const handleGetLatestRiskUpdates = async () => { ...@@ -436,8 +436,8 @@ const handleGetLatestRiskUpdates = async () => {
count: res.data["232Survey"].total, count: res.data["232Survey"].total,
change: res.data["232Survey"].dailyIncrement, change: res.data["232Survey"].dailyIncrement,
unit: "次", unit: "次",
title: "230调查", title: "232调查",
type: "230调查" type: "232调查"
}, },
{ {
percent: 3, // 估算的百分比 percent: 3, // 估算的百分比
...@@ -1221,8 +1221,7 @@ onUnmounted(() => { ...@@ -1221,8 +1221,7 @@ onUnmounted(() => {
// .text{ // .text{
// color:var(--color-main-active); // color:var(--color-main-active);
// } // }
// } // }
// } // }
......
...@@ -13,7 +13,6 @@ ...@@ -13,7 +13,6 @@
</template> </template>
<script setup> <script setup>
defineProps({ defineProps({
title: { title: {
type: String, type: String,
...@@ -44,7 +43,8 @@ defineProps({ ...@@ -44,7 +43,8 @@ defineProps({
<style scoped lang="scss"> <style scoped lang="scss">
.info-card { .info-card {
max-width: 388px; flex: 1;
// max-width: 388px;
min-width: 200px; min-width: 200px;
height: 150px; height: 150px;
border-radius: 12px; border-radius: 12px;
...@@ -53,7 +53,9 @@ defineProps({ ...@@ -53,7 +53,9 @@ defineProps({
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease; transition:
transform 0.3s ease,
box-shadow 0.3s ease;
cursor: pointer; cursor: pointer;
} }
......
...@@ -280,8 +280,8 @@ ...@@ -280,8 +280,8 @@
<div class="box3-content"> <div class="box3-content">
<div class="box3-content-title">实体清单发布频度</div> <div class="box3-content-title">实体清单发布频度</div>
<el-table :data="tableData1" stripe style="width: 100%"> <el-table :data="tableData1" stripe style="width: 100%">
<el-table-column prop="year" label="年份" width="150" /> <el-table-column prop="year" label="年份" width="200" />
<el-table-column label="发布次数" width="200"> <el-table-column label="发布次数" width="300">
<template #default="scope"> <template #default="scope">
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<span style="margin-right: 10px; width: 40px">{{ scope.row.num }}</span> <span style="margin-right: 10px; width: 40px">{{ scope.row.num }}</span>
...@@ -293,7 +293,7 @@ ...@@ -293,7 +293,7 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="重点领域" width="280" align="center"> <el-table-column label="重点领域" width="220" align="center">
<template #default="scope"> <template #default="scope">
<div <div
style="display: flex; justify-content: center; align-items: center; gap: 5px" style="display: flex; justify-content: center; align-items: center; gap: 5px"
...@@ -309,8 +309,8 @@ ...@@ -309,8 +309,8 @@
<div class="box3-content"> <div class="box3-content">
<div class="box3-content-title">商业管制清单(CCL)更新频度</div> <div class="box3-content-title">商业管制清单(CCL)更新频度</div>
<el-table :data="tableData2" stripe style="width: 100%"> <el-table :data="tableData2" stripe style="width: 100%">
<el-table-column prop="year" label="年份" width="150" /> <el-table-column prop="year" label="年份" width="200" />
<el-table-column label="发布次数" width="200"> <el-table-column label="发布次数" width="300">
<template #default="scope"> <template #default="scope">
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<span style="margin-right: 10px; width: 40px">{{ scope.row.num }}</span> <span style="margin-right: 10px; width: 40px">{{ scope.row.num }}</span>
...@@ -322,7 +322,7 @@ ...@@ -322,7 +322,7 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="重点领域" width="280" align="center"> <el-table-column label="重点领域" width="220" align="center">
<template #default="scope"> <template #default="scope">
<div <div
style="display: flex; justify-content: center; align-items: center; gap: 5px" style="display: flex; justify-content: center; align-items: center; gap: 5px"
...@@ -2117,12 +2117,20 @@ const handleMediaClick = item => { ...@@ -2117,12 +2117,20 @@ const handleMediaClick = item => {
justify-content: center; justify-content: center;
// align-items: flex-start; // align-items: flex-start;
gap: 100px; gap: 100px;
flex: 1;
.box3-content {
display: flex;
flex-direction: column;
// gap: 20px;
flex: 1;
}
.box3-content-title { .box3-content-title {
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
width: 640px; // width: 640px;
width: 100%;
height: 36px; height: 36px;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -2145,7 +2153,7 @@ const handleMediaClick = item => { ...@@ -2145,7 +2153,7 @@ const handleMediaClick = item => {
overflow: auto; overflow: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; // justify-content: space-between;
padding-top: 16px; padding-top: 16px;
// padding-bottom: 50px; // padding-bottom: 50px;
position: relative; position: relative;
...@@ -2379,7 +2387,8 @@ const handleMediaClick = item => { ...@@ -2379,7 +2387,8 @@ const handleMediaClick = item => {
.home-main-header-footer-link, .home-main-header-footer-link,
.home-main-header-footer-info { .home-main-header-footer-info {
width: 100%; // width: 100%;
max-width: 1600px;
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 16px; gap: 16px;
......
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
<div class="box2-main"> <div class="box2-main">
<div class="box2-content" id="box2Chart"></div> <div class="box2-content" id="box2Chart"></div>
</div> --> </div> -->
<AnalysisBox title="涉及科技领域" :showAllBtn="false"> <AnalysisBox title="关键词云" :showAllBtn="false">
<div class="box2-main"> <div class="box2-main">
<div class="box2-content" id="box2Chart"></div> <div class="box2-content" id="box2Chart"></div>
</div> </div>
...@@ -76,8 +76,14 @@ ...@@ -76,8 +76,14 @@
<div class="box3-main-footer"> <div class="box3-main-footer">
<div class="info">{{ total }}</div> <div class="info">{{ 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>
...@@ -110,9 +116,10 @@ import { ...@@ -110,9 +116,10 @@ import {
getThinkTankReportIndustry, getThinkTankReportIndustry,
getThinkTankReportIndustryCloud getThinkTankReportIndustryCloud
} from "@/api/thinkTank/overview"; } from "@/api/thinkTank/overview";
import { getChartAnalysis } from '@/api/aiAnalysis/index' import { getChartAnalysis } from "@/api/aiAnalysis/index";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
const router = useRouter(); const router = useRouter();
import "echarts-wordcloud";
// 内容摘要 // 内容摘要
const box1Data = const box1Data =
...@@ -178,7 +185,7 @@ const box2Data = ref([ ...@@ -178,7 +185,7 @@ const box2Data = ref([
const handleGetThinkTankReportIndustryCloud = async () => { const handleGetThinkTankReportIndustryCloud = async () => {
try { try {
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);
...@@ -242,7 +249,7 @@ const majorOpinions = ref([ ...@@ -242,7 +249,7 @@ const majorOpinions = ref([
]); ]);
// 处理页码改变事件 // 处理页码改变事件
const currentPage = ref(1); const currentPage = ref(1);
const total = ref(0) const total = ref(0);
const handleCurrentChange = page => { const handleCurrentChange = page => {
currentPage.value = page; currentPage.value = page;
handleGetThinkDynamicsReport(); handleGetThinkDynamicsReport();
...@@ -254,8 +261,8 @@ const handleGetThinkTankReportContent = async () => { ...@@ -254,8 +261,8 @@ const handleGetThinkTankReportContent = async () => {
console.log("主要观点", res.data); console.log("主要观点", res.data);
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
majorOpinions.value = res.data.content; majorOpinions.value = res.data.content;
handleGetBox3AnalysisContent(majorOpinions.value) handleGetBox3AnalysisContent(majorOpinions.value);
total.value = res.data.totalElements total.value = res.data.totalElements;
} }
} catch (error) { } catch (error) {
console.error("获取主要观点error", error); console.error("获取主要观点error", error);
...@@ -263,15 +270,14 @@ const handleGetThinkTankReportContent = async () => { ...@@ -263,15 +270,14 @@ const handleGetThinkTankReportContent = async () => {
}; };
// 获取图表分析内容 // 获取图表分析内容
const box3AnalysisContent = ref('') const box3AnalysisContent = ref("");
const handleGetBox3AnalysisContent = async (textJson) => { const handleGetBox3AnalysisContent = async textJson => {
const params = { const params = {
text: textJson text: textJson
} };
const res = await getChartAnalysis(params) const res = await getChartAnalysis(params);
console.log('图表解析内容', res); console.log("图表解析内容", res);
};
}
onMounted(() => { onMounted(() => {
handleGetThinkTankReportAbstract(); handleGetThinkTankReportAbstract();
...@@ -689,4 +695,4 @@ onMounted(() => { ...@@ -689,4 +695,4 @@ onMounted(() => {
} }
} }
} }
</style> </style>
\ No newline at end of file
...@@ -10,8 +10,13 @@ ...@@ -10,8 +10,13 @@
<!-- <div class="box-header-right">{{ "查看数据源 >" }}</div> --> <!-- <div class="box-header-right">{{ "查看数据源 >" }}</div> -->
<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 + '年'" <el-option
:value="item.value" @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> </div>
...@@ -28,8 +33,13 @@ ...@@ -28,8 +33,13 @@
<!-- <div class="box-header-right">{{ "查看数据源 >" }}</div> --> <!-- <div class="box-header-right">{{ "查看数据源 >" }}</div> -->
<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 + '年'" <el-option
:value="item.value" @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> </div>
...@@ -73,8 +83,13 @@ ...@@ -73,8 +83,13 @@
<!-- <div class="box-header-right">{{ "查看数据源 >" }}</div> --> <!-- <div class="box-header-right">{{ "查看数据源 >" }}</div> -->
<div class="select-box"> <div class="select-box">
<el-select v-model="box3SelectMonths" placeholder="选择时间" style="width: 100px"> <el-select v-model="box3SelectMonths" placeholder="选择时间" style="width: 100px">
<el-option v-for="item in box3MonthsList" :key="item.value" :label="item.label + '年'" :value="item.value" <el-option
@click="handleGetThinkPolicyIndustryChange()" /> v-for="item in box3MonthsList"
:key="item.value"
:label="item.label + '年'"
:value="item.value"
@click="handleGetThinkPolicyIndustryChange()"
/>
</el-select> </el-select>
</div> </div>
</div> </div>
...@@ -96,8 +111,14 @@ ...@@ -96,8 +111,14 @@
<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 class="select-box-sort" v-model="sort" placeholder="倒序" style="width: 120px;" :teleported="true" <el-select
:placement="'bottom-start'" :popper-options="{ class="select-box-sort"
v-model="sort"
placeholder="倒序"
style="width: 120px"
:teleported="true"
:placement="'bottom-start'"
:popper-options="{
modifiers: [ modifiers: [
{ {
name: 'preventOverflow', name: 'preventOverflow',
...@@ -108,7 +129,8 @@ ...@@ -108,7 +129,8 @@
enabled: false enabled: false
} }
] ]
}"> }"
>
<template #prefix> <template #prefix>
<img v-if="!sort" src="../thinkDynamics/images/image down.png" class="select-prefix-img" alt="" /> <img v-if="!sort" src="../thinkDynamics/images/image down.png" class="select-prefix-img" alt="" />
<img v-else src="../thinkDynamics/images/image up.png" class="select-prefix-img" alt="" /> <img v-else src="../thinkDynamics/images/image up.png" class="select-prefix-img" alt="" />
...@@ -132,8 +154,13 @@ ...@@ -132,8 +154,13 @@
{{ item }} {{ item }}
</el-checkbox> --> </el-checkbox> -->
<el-checkbox class="filter-checkbox" label="全部领域"></el-checkbox> <el-checkbox class="filter-checkbox" label="全部领域"></el-checkbox>
<el-checkbox class="filter-checkbox" v-for="research in areaList" :key="research.id" <el-checkbox
v-model="selectedAreaList" :label="research.id"> class="filter-checkbox"
v-for="research in areaList"
:key="research.id"
v-model="selectedAreaList"
:label="research.id"
>
{{ research.name }} {{ research.name }}
</el-checkbox> </el-checkbox>
</div> </div>
...@@ -151,8 +178,13 @@ ...@@ -151,8 +178,13 @@
{{ item }} {{ item }}
</el-checkbox> --> </el-checkbox> -->
<el-checkbox class="filter-checkbox" label="全部领域"></el-checkbox> <el-checkbox class="filter-checkbox" label="全部领域"></el-checkbox>
<el-checkbox class="filter-checkbox" v-for="year in selectableYears" :key="year" <el-checkbox
v-model="selectedAreaList" :label="year"> class="filter-checkbox"
v-for="year in selectableYears"
:key="year"
v-model="selectedAreaList"
:label="year"
>
{{ year }} {{ year }}
</el-checkbox> </el-checkbox>
</div> </div>
...@@ -200,8 +232,14 @@ ...@@ -200,8 +232,14 @@
<div class="right-footer"> <div class="right-footer">
<div class="info">共 {{ total }} 项</div> <div class="info">共 {{ 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>
...@@ -314,50 +352,7 @@ const handleGetThinkPolicyIndustry = async () => { ...@@ -314,50 +352,7 @@ const handleGetThinkPolicyIndustry = async () => {
}; };
// 相关政策领域分布 // 相关政策领域分布
const box2Data = ref([ const box2Data = ref([]);
// {
// name: "集成电路",
// value: 2,
// total: 10,
// per: 20,
// color: "#CE4F51"
// },
// {
// name: "人工智能",
// value: 1,
// total: 6,
// per: 17,
// color: "#055FC2"
// },
// {
// name: "通信网络",
// value: 2,
// total: 7,
// per: 26,
// color: "#13A8A8"
// },
// {
// name: "量子科技",
// value: 1,
// total: 2,
// per: 50,
// color: "#722ED1"
// },
// {
// name: "生物科技",
// value: 3,
// total: 7,
// per: 43,
// color: "#FA8C16"
// },
// {
// name: "能源",
// value: 11,
// total: 20,
// per: 55,
// 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([
...@@ -560,7 +555,6 @@ const policyList = ref([ ...@@ -560,7 +555,6 @@ const policyList = ref([
// } // }
// ] // ]
// }, // },
]); ]);
//获取当前时间x年前的日期 //获取当前时间x年前的日期
...@@ -589,8 +583,8 @@ function getDateMonthsAgo(months) { ...@@ -589,8 +583,8 @@ function getDateMonthsAgo(months) {
return `${year}-${month}-${day}`; return `${year}-${month}-${day}`;
} }
const toDetail = (item) => { const toDetail = item => {
window.sessionStorage.setItem("curTabName", item.content) window.sessionStorage.setItem("curTabName", item.content);
const route = router.resolve({ const route = router.resolve({
name: "ReportDetail", name: "ReportDetail",
params: { params: {
...@@ -598,13 +592,13 @@ const toDetail = (item) => { ...@@ -598,13 +592,13 @@ const toDetail = (item) => {
} }
}); });
window.open(route.href, "_blank"); window.open(route.href, "_blank");
} };
const total = ref(0); const total = ref(0);
const sort = ref(false); const sort = ref(false);
const handleSwithSort = () => { const handleSwithSort = () => {
sort.value = !sort.value; sort.value = !sort.value;
handleGetThinkPolicy()() handleGetThinkPolicy()();
}; };
const currentPage = ref(1); const currentPage = ref(1);
...@@ -622,7 +616,7 @@ const handleGetThinkPolicy = async () => { ...@@ -622,7 +616,7 @@ const handleGetThinkPolicy = async () => {
sortFun: sort.value, sortFun: sort.value,
currentPage: currentPage.value, currentPage: currentPage.value,
pageSize: 10, pageSize: 10,
researchTypeIds: selectedAreaList.value.join(',') researchTypeIds: selectedAreaList.value.join(",")
}; };
const res = await getThinkPolicy(parmas); const res = await getThinkPolicy(parmas);
console.log("智库政策", res); console.log("智库政策", res);
...@@ -656,7 +650,6 @@ onMounted(() => { ...@@ -656,7 +650,6 @@ onMounted(() => {
width: 100%; width: 100%;
height: 100%; height: 100%;
.top { .top {
height: 420px; height: 420px;
width: 1600px; width: 1600px;
...@@ -734,8 +727,6 @@ onMounted(() => { ...@@ -734,8 +727,6 @@ onMounted(() => {
height: 32px; height: 32px;
} }
:deep(.el-select-dropdown) { :deep(.el-select-dropdown) {
left: 0 !important; left: 0 !important;
/* 强制下拉框左对齐选择框 */ /* 强制下拉框左对齐选择框 */
...@@ -816,8 +807,6 @@ onMounted(() => { ...@@ -816,8 +807,6 @@ onMounted(() => {
#box3Chart { #box3Chart {
height: 360px; height: 360px;
} }
} }
} }
} }
...@@ -840,7 +829,6 @@ onMounted(() => { ...@@ -840,7 +829,6 @@ onMounted(() => {
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
position: relative; position: relative;
.icon { .icon {
width: 16px; width: 16px;
height: 16px; height: 16px;
...@@ -1048,7 +1036,6 @@ onMounted(() => { ...@@ -1048,7 +1036,6 @@ onMounted(() => {
margin-top: 24px; margin-top: 24px;
margin-bottom: 24px; margin-bottom: 24px;
.select-box-header { .select-box-header {
display: flex; display: flex;
...@@ -1319,4 +1306,4 @@ onMounted(() => { ...@@ -1319,4 +1306,4 @@ onMounted(() => {
height: 8px !important; height: 8px !important;
margin-right: 4px; margin-right: 4px;
} }
</style> </style>
\ No newline at end of file
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论