Skip to content

R
risk-monitor
提交 29448e2d authored 作者: 胡卉清's avatar 胡卉清
浏览文件
操作

合并分支 'dev_hhq' 到 'master'

Dev hhq 查看合并请求 !60
上级 8f982b4d 4adce9b7
隐藏空白字符变更
内嵌 并排
正在显示 包含 1014 行增加 和 690 行删除
src/api/companyPages/index.js 0 → 100644
浏览文件 @ 29448e2d
// 企业主页接口信息
import request from "@/api/request.js";
// 企业基本信息:基本信息
export function getEnterprisePageInfo(params) {
return request({
method: 'GET',
url: `/api/enterprisePage/info/${params}`,
})
}
// 企业基本信息:主要人员
export function getEnterpriseKeyPerson(params) {
return request({
method: 'GET',
url: `/api/enterprisePage/keyPerson/${params}`,
})
}
//企业基本信息:分支机构
export function getEnterpriseBranch(params) {
return request({
method: 'GET',
url: `/api/enterprisePage/branch/${params}`,
})
}
//企业基本信息:最新动态
export function getEnterpriseNewDynamic(params) {
return request({
method: 'GET',
url: `/api/enterprisePage/newDynamic/${params}`,
})
}
//企业研发投入:年度研发投入对比
export function getEnterpriseStudy(params) {
return request({
method: 'GET',
url: `/api/enterprisePage/study/${params}`,
})
}
//企业研发投入:年度研发增长对比
export function getEnterpriseGrowth(params) {
return request({
method: 'GET',
url: `/api/enterprisePage/growth/${params}`,
})
}
//企业研究人员:人员数量
export function getEnterpriseResearcherNum(params) {
return request({
method: 'GET',
url: `/api/enterprisePage/researcherNum/${params}`,
})
}
//企业研究人员:人员学历
export function getEnterpriseResearcherDegree(params) {
return request({
method: 'GET',
url: `/api/enterprisePage/researcherDegree/${params}`,
})
}
//企业专利:地域分布
export function getEnterprisePatentRegion(params) {
return request({
method: 'GET',
url: `/api/enterprisePage/patentRegion/${params}`,
})
}
//企业专利:领域分布
export function getEnterprisPatentField(params) {
return request({
method: 'GET',
url: `/api/enterprisePage/patentField/${params}`,
})
}
src/router/modules/company.js
浏览文件 @ 29448e2d
......@@ -4,7 +4,7 @@ import companyPages from "@/views/companyPages/index.vue";
const companyPagesRoutes = [
// 智库系统的主要路由
{
path: "/companyPages",
path: "/companyPages/:id",
name: "companyPages",
component: companyPages,
meta: {
......
src/views/companyPages/component/Capability.vue
浏览文件 @ 29448e2d
<template>
<div class="box-content">
<div class="tab-box">
<div
v-for="(tab, index) in tabList"
:key="index"
:class="activeTab === tab ? 'tab-active' : 'tab'"
@click="changeTab(tab, index)"
>
{{ tab }}
<div class="arrow-active" v-show="activeTab === tab"></div>
</div>
</div>
<!--/*头部总览 */-->
<div class="total">
<div v-for="(item, index) in totalData[activeIndex]" :key="index" class="total-box">
<div class="line"></div>
<div class="total-label">
{{ item.label }}
</div>
<div class="total-content">
<div class="total-value">
{{ item.value }}
</div>
<div class="total-unit">
{{ item.unit }}
</div>
</div>
</div>
</div>
<!--/*图表 */-->
<div class="chart">
<div class="chart-content">
<div class="section-header" style="margin-top: 24px">
<div style="display: flex">
<div class="section-icon"></div>
<h3 class="section-title">
{{
activeTab === "研发投入"
? "年度研发投入对比"
: activeTab === "研究人员"
? "研究人员数量增长趋势"
: "专利地域分布"
}}
</h3>
</div>
<div class="action-icons">
<img src="@/assets/icons/download.png" alt="下载" class="action-icon" />
<img src="@/assets/icons/shoucang.png" alt="收藏" class="action-icon" />
</div>
</div>
<div id="chart1" class="chart-box" v-show="activeTab === '研发投入'"></div>
<div id="chart3" class="chart-box" v-show="activeTab === '研究人员'"></div>
<div id="chart5" class="chart-box" v-show="activeTab === '专利情况'"></div>
<div class="chart-text">
<img src="@/assets/icons/model.png" style="width: 19px; height: 20px" />
<div>
近五年来，华为的研发投入在绝对金额和投入强度上均持续攀升。尤其是在收入因外部制裁而经历波动时，研发投入依然保持强劲增长，使其投入强度达到了历史高位。
</div>
<div class="arrow-2">→</div>
</div>
</div>
<div class="chart-content">
<div class="section-header" style="margin-top: 24px">
<div style="display: flex">
<div class="section-icon"></div>
<h3 class="section-title">
{{
activeTab === "研发投入"
? "研发投入增长对比"
: activeTab === "研究人员"
? "研究人员学历分布"
: "专利技术领域分布"
}}
</h3>
</div>
<div class="action-icons">
<img src="@/assets/icons/download.png" alt="下载" class="action-icon" />
<img src="@/assets/icons/shoucang.png" alt="收藏" class="action-icon" />
</div>
</div>
<div id="chart2" class="chart-box" v-show="activeTab === '研发投入'"></div>
<div id="chart4" class="chart-box" v-show="activeTab === '研究人员'"></div>
<div id="chart6" class="chart-box" v-show="activeTab === '专利情况'"></div>
<div class="chart-text">
<img src="@/assets/icons/model.png" style="width: 19px; height: 20px" />
<div>
华为在巨大的外部压力下，研发投入不仅在绝对金额上持续增长，其占收入的比重更是大幅提升，特别是2021年后形成的“剪刀差”，体现了公司最高优先级的战略抉择。
</div>
<div class="arrow-2">→</div>
</div>
</div>
</div>
</div>
<div class="box-content">
<div class="tab-box">
<div v-for="(tab, index) in tabList" :key="index" :class="activeTab === tab ? 'tab-active' : 'tab'"
@click="changeTab(tab, index)">
{{ tab }}
<div class="arrow-active" v-show="activeTab === tab"></div>
</div>
</div>
<!--/*头部总览 */-->
<div class="total">
<div v-for="(item, index) in totalData[activeIndex]" :key="index" class="total-box">
<div class="line"></div>
<div class="total-label">
{{ item.label }}
</div>
<div class="total-content">
<div class="total-value">
{{ item.value }}
</div>
<div class="total-unit">
{{ item.unit }}
</div>
</div>
</div>
</div>
<!--/*图表 */-->
<div class="chart">
<div class="chart-content">
<div class="section-header" style="margin-top: 24px">
<div style="display: flex">
<div class="section-icon"></div>
<h3 class="section-title">
{{
activeTab === "研发投入"
? "年度研发投入对比"
: activeTab === "研究人员"
? "研究人员数量增长趋势"
: "专利地域分布"
}}
</h3>
</div>
<div class="action-icons">
<img src="@/assets/icons/download.png" alt="下载" class="action-icon" />
<img src="@/assets/icons/shoucang.png" alt="收藏" class="action-icon" />
</div>
</div>
<div id="chart1" class="chart-box" v-show="activeTab === '研发投入'"></div>
<div id="chart3" class="chart-box" v-show="activeTab === '研究人员'"></div>
<div id="chart5" class="chart-box" v-show="activeTab === '专利情况'"></div>
<div class="chart-text">
<img src="@/assets/icons/model.png" style="width: 19px; height: 20px" />
<div>
近五年来，华为的研发投入在绝对金额和投入强度上均持续攀升。尤其是在收入因外部制裁而经历波动时，研发投入依然保持强劲增长，使其投入强度达到了历史高位。
</div>
<div class="arrow-2">→</div>
</div>
</div>
<div class="chart-content">
<div class="section-header" style="margin-top: 24px">
<div style="display: flex">
<div class="section-icon"></div>
<h3 class="section-title">
{{
activeTab === "研发投入"
? "研发投入增长对比"
: activeTab === "研究人员"
? "研究人员学历分布"
: "专利技术领域分布"
}}
</h3>
</div>
<div class="action-icons">
<img src="@/assets/icons/download.png" alt="下载" class="action-icon" />
<img src="@/assets/icons/shoucang.png" alt="收藏" class="action-icon" />
</div>
</div>
<div id="chart2" class="chart-box" v-show="activeTab === '研发投入'"></div>
<div id="chart4" class="chart-box" v-show="activeTab === '研究人员'"></div>
<div id="chart6" class="chart-box" v-show="activeTab === '专利情况'"></div>
<div class="chart-text">
<img src="@/assets/icons/model.png" style="width: 19px; height: 20px" />
<div>
华为在巨大的外部压力下，研发投入不仅在绝对金额上持续增长，其占收入的比重更是大幅提升，特别是2021年后形成的“剪刀差”，体现了公司最高优先级的战略抉择。
</div>
<div class="arrow-2">→</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, nextTick } from "vue";
import { ref, onMounted, nextTick } from 'vue'
import { useRouter } from "vue-router";
import getBarChart from "../js/barChart.js";
import getDonutChart from "../js/donutChart.js";
import getLineChart from "../js/lineChart.js";
import getRadarChart from "../js/radarChart.js";
import * as echarts from "echarts";
import { getEnterpriseStudy, getEnterpriseGrowth, getEnterpriseResearcherNum, getEnterpriseResearcherDegree, getEnterprisePatentRegion, getEnterprisPatentField } from "@/api/companyPages/index.js";
const router = useRouter();
const tabList = ref(["研发投入", "研究人员", "专利情况"]);
const activeTab = ref("研发投入");
const activeIndex = ref(0);
const totalData = ref([
[
{
label: "累计研发投入",
value: 9854,
unit: "亿元"
},
{
label: "年度研发投入",
value: 2153.9,
unit: "亿元"
},
{
label: "研发强度",
value: 22.9,
unit: "%"
},
{
label: "研发投入排名",
value: "Top",
unit: ""
}
],
[
{ label: "2025年拟招聘应届生", value: 11.4, unit: "万" },
{ label: "研发人员占比", value: 55.4, unit: "%" },
{ label: "全年计划培养实习生", value: 1, unit: "万+" },
{ label: "研发人员总数", value: 5000, unit: "+" }
],
[
{ label: "全球有效专利", value: 12, unit: "万+" },
{ label: "PCT申请量排名", value: "Top", unit: "5" },
{ label: "5G标准必要专利占比", value: 21.5, unit: "%" },
{ label: "家族专利", value: 4500, unit: "+" }
]
[
{
label: "累计研发投入",
value: 9854,
unit: "亿元"
},
{
label: "年度研发投入",
value: 2153.9,
unit: "亿元"
},
{
label: "研发强度",
value: 22.9,
unit: "%"
},
{
label: "研发投入排名",
value: "Top",
unit: ""
}
],
[
{ label: "2025年拟招聘应届生", value: 11.4, unit: "万" },
{ label: "研发人员占比", value: 55.4, unit: "%" },
{ label: "全年计划培养实习生", value: 1, unit: "万+" },
{ label: "研发人员总数", value: 5000, unit: "+" }
],
[
{ label: "全球有效专利", value: 12, unit: "万+" },
{ label: "PCT申请量排名", value: "Top", unit: "5" },
{ label: "5G标准必要专利占比", value: 21.5, unit: "%" },
{ label: "家族专利", value: 4500, unit: "+" }
]
]);
//年度研发投入对比
const chart1Data = ref({
name: ["2020", "2021", "2022", "2023", "2024", "2025"],
value: [50, 100, 150, 200, 250, 300, 350, 400]
name: ["2020", "2021", "2022", "2023", "2024", "2025"],
value: [50, 100, 150, 200, 250, 300, 350, 400]
});
//研发投入增长对比
const chart2Data = {
dataX: ["2025-01", "2025-02", "2025-03", "2025-04", "2025-05", "2025-06", "2025-07", "2025-08"],
dataY: [1.2, 1.5, 1.4, 1.8, 1.3, 1.5, 1.6, 1.4]
const handleGetEnterpriseStudy = async () => {
try {
const res = await getEnterpriseStudy(router.currentRoute._value.params.id);
console.log("年度研发投入对比", res);
if (res.code === 200 && res.data) {
// 首先按年份倒序排序
res.data.sort((a, b) => a.year - b.year);
// 提取年份并转换为字符串数组
const years = res.data.map(item => item.year.toString());
// 提取对应的值
const values = res.data.map(item => item.value);
// 构造结果对象
const result = {
name: years,
value: values
};
chart1Data.value = result
let char1 = getBarChart(chart1Data.value.name, chart1Data.value.value, true);
setChart(char1, "chart1");
}
} catch (error) {
console.error("获取年度研发投入对比error", error);
}
};
const chart2Data = ref({})
//研发投入增长对比
const handleGetEnterpriseGrowth = async () => {
try {
const res = await getEnterpriseGrowth(router.currentRoute._value.params.id);
console.log("研发投入增长对比", res);
if (res.code === 200 && res.data) {
// 首先按年份倒序排序
res.data.sort((a, b) => b.year - a.year);
// 提取年份并转换为字符串数组
const years = res.data.map(item => item.year.toString());
// 提取对应的值
const values = res.data.map(item => item.value);
// 构造结果对象
const result = {
dataX: years,
dataY: values
};
chart2Data.value = result
let chart2 = getLineChart(chart2Data.value.dataX, chart2Data.value.dataY);
setChart(chart2, "chart2");
}
} catch (error) {
console.error("获取研发投入增长对比error", error);
}
};
const chart3Data = ref({
name: ["2020", "2021", "2022", "2023", "2024", "2025"],
value: [50, 100, 150, 200, 250, 300, 350, 400]
// name: ['2020', '2021', '2022', '2023', '2024', '2025'],
// value: [50, 100, 150, 200, 250, 300, 350, 400]
});
// 学历分布数据（对应图片）
//研究人员数量增长趋势
const handleGetEnterpriseResearcherNum = async () => {
try {
const res = await getEnterpriseResearcherNum(router.currentRoute._value.params.id);
console.log("研究人员数量增长趋势", res.data);
if (res.code === 200 && res.data) {
// 提取年份并转换为字符串数组
const years = res.data.map(item => item.year.toString());
// 提取对应的值
const values = res.data.map(item => item.num);
// 构造结果对象
const result = {
name: years,
value: values
};
chart3Data.value = result
let char3 = getBarChart(chart3Data.value.name, chart3Data.value.value, true);
setChart(char3, "chart3");
}
} catch (error) {
console.error("获取研究人员数量增长趋势error", error);
}
}
// 学历分布数据
const chart4Data = ref({
name: ["博士", "硕士", "学士", "其他"],
value: [28, 36, 22, 8]
name: ["博士", "硕士", "学士", "其他"],
value: [28, 36, 22, 8]
});
// 学历分布数据（对应图片）
const handleGetEnterpriseResearcherDegree = async () => {
try {
const res = await getEnterpriseResearcherDegree(router.currentRoute._value.params.id);
console.log("学历分布数据", res.data);
if (res.code === 200 && res.data) {
// 提取类别名称
const names = res.data.map(item => item.degree);
// 提取对应的值
const values = res.data.map(item => item.num);
// 构造结果对象
const result = {
name: names,
value: values
};
chart4Data.value = result
let char4 = getDonutChart(chart4Data.value.name, chart4Data.value.value, true);
setChart(char4, "chart4");
}
} catch (error) {
console.error("获取学历分布数据error", error);
}
}
// 专利地域分布
const chart5Data = ref({
name: ["博士", "硕士", "学士", "其他"],
value: [28, 36, 22, 8]
});
name: ['博士', '硕士', '学士', '其他'],
value: [28, 36, 22, 8],
})
const handleGetEnterprisePatentRegion = async () => {
try {
const res = await getEnterprisePatentRegion(router.currentRoute._value.params.id);
console.log("专利地域分布", res.data);
if (res.code === 200 && res.data) {
// 提取类别名称
const names = res.data.map(item => item.field);
// 提取对应的值
const values = res.data.map(item => item.num);
// 构造结果对象
const result = {
name: names,
value: values
};
chart5Data.value = result
let char5 = getDonutChart(chart5Data.value.name, chart5Data.value.value, true);
setChart(char5, "chart5");
}
} catch (error) {
console.error("获取专利地域分布error", error);
}
}
const chart6Data = ref({})
//专利技术领域分布
const handleGetEnterprisPatentField = async () => {
try {
const res = await getEnterprisePatentRegion(router.currentRoute._value.params.id);
console.log("专利技术领域分布", res.data);
if (res.code === 200 && res.data) {
// 提取类别名称
const names = res.data.map(item => item.field);
// 提取对应的值
const values = res.data.map(item => item.percent);
// 构造结果对象
const result = {
name: names,
value: values
};
chart6Data.value = result
let char6 = getRadarChart(chart6Data.value);
setChart(char6, "chart6");
}
} catch (error) {
console.error("获取专利技术领域分布error", error);
}
}
function changeTab(tab, index) {
console.log(tab, activeTab.value);
activeTab.value = tab;
activeIndex.value = index;
console.log(tab, activeTab.value, activeIndex.value);
// 保证 DOM 更新完再画
nextTick(() => {
if (tab === "研发投入") {
chart1();
chart2();
} else if (tab === "研究人员") {
chart3();
char4();
}
if (tab === "专利情况") {
char5();
chart6();
}
// 其它 tab 同理 …
});
console.log(tab, activeTab.value)
activeTab.value = tab
activeIndex.value = index
console.log(tab, activeTab.value, activeIndex.value)
// 保证 DOM 更新完再画
nextTick(() => {
if (tab === '研发投入') {
handleGetEnterpriseStudy()
handleGetEnterpriseGrowth()
} else if (tab === '研究人员') {
handleGetEnterpriseResearcherNum()
handleGetEnterpriseResearcherDegree()
} if (tab === '专利情况') {
handleGetEnterprisePatentRegion()
handleGetEnterprisPatentField()
}
// 其它 tab 同理 …
})
}
// 绘制echarts图表
const setChart = (option, chartId) => {
let chartDom = document.getElementById(chartId);
chartDom.removeAttribute("_echarts_instance_");
let chart = echarts.init(chartDom);
chart.setOption(option);
return chart;
let chartDom = document.getElementById(chartId);
chartDom.removeAttribute("_echarts_instance_");
let chart = echarts.init(chartDom);
chart.setOption(option);
return chart;
};
function chart1() {
let char1 = getBarChart(chart1Data.value.name, chart1Data.value.value, true);
setChart(char1, "chart1");
}
function chart2() {
let chart2 = getLineChart(chart2Data.dataX, chart2Data.dataY);
setChart(chart2, "chart2");
}
function chart3() {
let char3 = getBarChart(chart3Data.value.name, chart3Data.value.value, true);
setChart(char3, "chart3");
}
function char4() {
console.log(chart4Data.value);
let char4 = getDonutChart(chart4Data.value.name, chart4Data.value.value, true);
setChart(char4, "chart4");
}
function char5() {
console.log(chart5Data.value);
let char5 = getDonutChart(chart5Data.value.name, chart5Data.value.value, true);
setChart(char5, "chart5");
console.log(chart5Data.value);
let char5 = getDonutChart(chart5Data.value.name, chart5Data.value.value, true);
setChart(char5, "chart5");
}
function chart6() {
let char6 = getRadarChart();
setChart(char6, "chart6");
let char6 = getRadarChart();
setChart(char6, "chart6");
}
onMounted(() => {
chart1();
chart2();
handleGetEnterpriseStudy()
handleGetEnterpriseGrowth()
});
</script>
<style lang="scss" scoped>
.box-content {
width: 100%;
height: calc(100vh - 220px);
overflow: auto;
width: 100%;
height: calc(100vh - 220px);
overflow: auto;
}
.tab-box {
/* 左侧导航 */
width: 112px;
height: 128px;
position: absolute;
left: 24px;
/* 自动布局 */
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: 16;
.tab {
color: rgba(59, 65, 75, 1);
width: 104px;
height: 48px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
box-sizing: border-box;
border-bottom: 0px solid rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
cursor: pointer;
/* 左侧导航 */
width: 112px;
height: 128px;
position: absolute;
left: 24px;
/* 自动布局 */
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: 16;
.tab {
color: rgba(59, 65, 75, 1);
width: 104px;
height: 48px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
box-sizing: border-box;
border-bottom: 0px solid rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
cursor: pointer;
margin-bottom: 16px;
}
.tab-active {
/* 容器 7 */
width: 104px;
height: 32px;
display: flex;
align-items: center;
box-sizing: border-box;
border-radius: 16px;
background: rgba(5, 95, 194, 1);
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
padding: 4px 12px;
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
cursor: pointer;
}
.tab-active {
/* 容器 7 */
width: 104px;
height: 32px;
display: flex;
align-items: center;
box-sizing: border-box;
border-radius: 16px;
background: rgba(5, 95, 194, 1);
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
padding: 4px 12px;
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
cursor: pointer;
margin-bottom: 16px;
}
.arrow-active {
position: absolute;
top: 12px;
right: 8px;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 0 4px 6px;
// margin-left: 5px;
/* 上 右 下 左 */
border-color: transparent transparent transparent #ffffff;
/* 只给左边上色 */
/* background: rgba(255, 255, 255, 1); */
}
}
.arrow-active {
position: absolute;
top: 12px;
right: 8px;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 0 4px 6px;
// margin-left: 5px;
/* 上 右 下 左 */
border-color: transparent transparent transparent #ffffff;
/* 只给左边上色 */
/* background: rgba(255, 255, 255, 1); */
}
}
/*头部总览 */
.total {
height: 80px;
display: flex;
gap: 16px;
height: 80px;
display: flex;
gap: 16px;
}
.total-box {
border-radius: 4px;
background: rgba(255, 255, 255, 1);
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
.line {
/* 矩形 214 */
width: 4px;
height: 49px;
background: rgba(5, 95, 194, 1);
}
.total-label {
color: rgba(59, 65, 75, 1);
margin: 0px 30px;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
}
.total-content {
display: flex;
margin-right: 35px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
letter-spacing: 0px;
text-align: right;
.total-value {
font-size: 24px;
font-weight: 700;
line-height: 24px;
}
.total-unit {
font-size: 16px;
font-weight: 500;
line-height: 16px;
margin-top: 8px;
}
}
border-radius: 4px;
background: rgba(255, 255, 255, 1);
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
.line {
/* 矩形 214 */
width: 4px;
height: 49px;
background: rgba(5, 95, 194, 1);
}
.total-label {
color: rgba(59, 65, 75, 1);
margin: 0px 30px;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
}
.total-content {
display: flex;
margin-right: 35px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
letter-spacing: 0px;
text-align: right;
.total-value {
font-size: 24px;
font-weight: 700;
line-height: 24px;
}
.total-unit {
font-size: 16px;
font-weight: 500;
line-height: 16px;
margin-top: 8px;
}
}
}
.chart {
margin-top: 16px;
height: calc(100vh - 320px);
display: flex;
gap: 16px;
.chart-content {
border-radius: 4px;
background: rgba(255, 255, 255, 1);
flex: 1;
justify-content: space-between;
.section-header {
display: flex;
width: 100%;
justify-content: space-between;
}
.section-icon {
width: 7px;
height: 18px;
border-radius: 0 4px 4px 0;
background: rgba(5, 95, 194, 1);
margin-right: 17px;
}
.section-title {
font-size: 18px;
color: #1d2129;
margin: 0;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
}
}
.action-icons {
display: flex;
margin-left: auto;
}
.action-icon {
/* 收藏按钮 */
width: 28px;
height: 28px;
cursor: pointer;
margin-right: 12px;
}
.chart-box {
width: 100%;
height: calc(100% - 130px);
}
.chart-text {
/* 大模型对话结果 */
height: 52px;
margin: 12px 20px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10;
padding: 0px 12px 0px 12px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 251, 255, 1);
color: rgba(5, 95, 194, 1);
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
gap: 13px;
}
.arrow-2 {
border-radius: 50%;
width: 24px;
height: 24px;
font-size: 24px;
background: rgba(231, 243, 255, 1);
}
margin-top: 16px;
height: calc(100vh - 320px);
display: flex;
gap: 16px;
.chart-content {
border-radius: 4px;
background: rgba(255, 255, 255, 1);
flex: 1;
justify-content: space-between;
.section-header {
display: flex;
width: 100%;
justify-content: space-between;
}
.section-icon {
width: 7px;
height: 18px;
border-radius: 0 4px 4px 0;
background: rgba(5, 95, 194, 1);
margin-right: 17px;
}
.section-title {
font-size: 18px;
color: #1d2129;
margin: 0;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
}
}
.action-icons {
display: flex;
margin-left: auto;
}
.action-icon {
/* 收藏按钮 */
width: 28px;
height: 28px;
cursor: pointer;
margin-right: 12px;
}
.chart-box {
width: 100%;
height: calc(100% - 130px);
}
.chart-text {
/* 大模型对话结果 */
height: 52px;
margin: 12px 20px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10;
padding: 0px 12px 0px 12px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 251, 255, 1);
color: rgba(5, 95, 194, 1);
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
gap: 13px;
}
.arrow-2 {
border-radius: 50%;
width: 24px;
height: 24px;
font-size: 24px;
background: rgba(231, 243, 255, 1);
}
}
</style>
\ No newline at end of file
src/views/companyPages/component/Timeline.vue
浏览文件 @ 29448e2d
......@@ -15,11 +15,11 @@
<div class="node" :style="leftOffset(i)">
<!-- 圆环 -->
<div class="dot" :class="linePos(i, flip)" :style="{
marginTop: linePos(i, flip) === 'down' ? '35px' : '-10px'
marginTop: linePos(i, flip) === 'down' ? '-5px' : '35px'
}"></div>
<div class="time" :style="{
marginTop: linePos(i, flip) === 'down' ? '10px' : '-40px'
marginTop: linePos(i, flip) === 'down' ? '-50px' : '10px'
}" v-if="type === 'normal'">
{{ item.time }}
</div>
......@@ -37,9 +37,12 @@
{{ item.title }}
<!-- <img class="item-header-icon" src="@/assets/images/icon/copy.png" style="cursor: pointer;"></img> -->
</div>
<div class="content">
{{ item.content }}
</div>
<el-tooltip class="box-item" effect="dark" :content="item.content" placement="top">
<div class="content">
{{ item.content }}
</div>
</el-tooltip>
</div>
</div>
</div>
......@@ -86,7 +89,7 @@ export default {
},
methods: {
leftOffset(i) {
return this.type === 'normal' ? { left: `${(i * 100) / 5}%`, top: '50%' } : { left: `${(i * 100) / 5}%`, top: '100%' }
return this.type === 'normal' ? { left: `${(i * 100) / 4}%`, top: '50%' } : { left: `${(i * 100) / 4}%`, top: '100%' }
},
......@@ -105,6 +108,7 @@ export default {
<style scoped>
/* 样式与之前完全一致，不再重复 */
.timeline-wrapper {
font-family: Microsoft YaHei;
display: flex;
align-items: center;
width: 100%;
......@@ -252,13 +256,46 @@ export default {
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
overflow: hidden;
-webkit-box-orient: vertical;
}
.card.up {
bottom: 50px;
bottom: 80px;
margin-bottom: 20px;
margin-left: 160px;
}
.card.down {
top: 20px;
top: -50px;
margin-top: 95px;
margin-left: 160px;
}
.box-item {
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: left;
}
:deep(.el-popper.is-dark) {
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei !important;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: left;
}
</style>
\ No newline at end of file
</style>
src/views/companyPages/index.vue
浏览文件 @ 29448e2d
......@@ -3,19 +3,15 @@
<!-- 公司导航栏 -->
<div class="company-nav">
<div class="company-logo-title">
<img :src="data.company.logo" alt="华为logo" class="logo-img" />
<img :src="infoData.logoUrl" class="logo-img" />
<div class="title-group">
<h1 class="company-name">{{ data.company.name }}</h1>
<p class="company-english">{{ data.company.englishName }}</p>
<h1 class="company-name">{{ infoData.orgName }}</h1>
<p class="company-english">{{ infoData.orgNameEn }}</p>
</div>
</div>
<div class="main-tabs">
<div
v-for="(tab, index) in tabList"
:key="index"
:class="activeTab === tab.title ? 'tab-active' : 'tab'"
@click="activeTab = tab.title"
>
<div v-for="(tab, index) in tabList" :key="index" :class="activeTab === tab.title ? 'tab-active' : 'tab'"
@click="activeTab = tab.title">
<img :src="activeTab === tab.title ? tab.activeIcon : tab.icon" alt="" />
{{ tab.title }}
</div>
......@@ -25,28 +21,28 @@
<div class="main-content" v-if="activeTab === '基础信息'">
<!-- 左侧信息栏 -->
<div class="left-sidebar">
<img :src="data.company.logo" alt="华为logo" class="sidebar-logo" />
<h2 class="sidebar-company-name">{{ data.company.name }}</h2>
<img :src="infoData.logoUrl" class="sidebar-logo" />
<h2 class="sidebar-company-name">{{ infoData.orgName }}</h2>
<div class="contact-list">
<div class="contact-item">
<img src="../../assets/icons/shutter.svg" alt="网址" class="contact-icon" />
<span>{{ data.contactInfo.website }}</span>
<span>{{ infoData.url }}</span>
</div>
<div class="contact-item">
<img src="../../assets/icons/location.svg" alt="地址" class="contact-icon" />
<span>{{ data.contactInfo.address }}</span>
<span>{{ infoData.address }}</span>
</div>
<div class="contact-item">
<img src="../../assets/icons/call.svg" alt="电话" class="contact-icon" />
<span>{{ data.contactInfo.phone }}</span>
<span>{{ infoData.telephone }}</span>
</div>
<div class="contact-item">
<img src="../../assets/icons/mail.svg" alt="邮箱" class="contact-icon" />
<span>{{ data.contactInfo.email }}</span>
<span>{{ infoData.email }}</span>
</div>
</div>
<!--接口未对接-->
<div class="financial-list">
<div class="financial-item" v-for="(item, idx) in data.financialData" :key="idx">
<p class="financial-value">{{ item.value }}</p>
......@@ -59,12 +55,8 @@
<div class="right-content">
<!-- 子标签栏 -->
<div class="sub-tabs">
<span
v-for="(tab, idx) in tabListSmall"
:key="idx"
:class="['sub-tab', activeTabSmall === tab ? 'active' : '']"
@click="activeTabSmall = tab"
>
<span v-for="(tab, idx) in tabListSmall" :key="idx"
:class="['sub-tab', activeTabSmall === tab ? 'active' : '']" @click="activeTabSmall = tab">
{{ tab }}
</span>
<div class="action-icons">
......@@ -80,28 +72,50 @@
<div class="info-card">
<h3 class="section-title">类别分布</h3>
<ul class="info-list">
<li
v-for="(value, key) in data.categoryDist"
:key="key"
style="display: flex; align-items: center"
>
<li style="display: flex; align-items: center">
<div class="li-icon"></div>
<span class="info-key">企业类型</span>
<span class="info-value">{{ infoData.nsIndustryCategory }}</span>
</li>
<li style="display: flex; align-items: center">
<div class="li-icon"></div>
<span class="info-key">机构代码</span>
<span class="info-value">{{ infoData.uscc }}</span>
</li>
<li style="display: flex; align-items: center">
<div class="li-icon"></div>
<span class="info-key">成立时间</span>
<span class="info-value">{{ infoData.createTime }}</span>
</li>
<li style="display: flex; align-items: center">
<div class="li-icon"></div>
<span class="info-key">{{ key }}</span>
<span class="info-value">{{ value }}</span>
<span class="info-key">创办人</span>
<span class="info-value">{{ infoData.legalRepresentative }}</span>
</li>
</ul>
</div>
<div class="info-card">
<h3 class="section-title">经营信息</h3>
<ul class="info-list">
<li
v-for="(value, key) in data.businessInfo"
:key="key"
style="display: flex; align-items: center"
>
<li style="display: flex; align-items: center">
<div class="li-icon"></div>
<span class="info-key">总部地点</span>
<span class="info-value">{{ infoData.address }}</span>
</li>
<li style="display: flex; align-items: center">
<div class="li-icon"></div>
<span class="info-key">标语口号</span>
<span class="info-value">{{ infoData.slogan }}</span>
</li>
<li style="display: flex; align-items: center">
<div class="li-icon"></div>
<span class="info-key">业务范围</span>
<span class="info-value">{{ infoData.businessScope }}</span>
</li>
<li style="display: flex; align-items: center">
<div class="li-icon"></div>
<span class="info-key">{{ key }}</span>
<span class="info-value">{{ value }}</span>
<span class="info-key">所有权者</span>
<span class="info-value">{{ infoData.companyType }}</span>
</li>
</ul>
</div>
......@@ -115,15 +129,15 @@
</div>
<div class="personnel-grid">
<div class="personnel-card" v-for="(person, idx) in data.mainPersonnel" :key="idx">
<div class="personnel-card" v-for="(person, idx) in mainPersonnel" :key="idx">
<div class="personnel-card-header">
<img :src="person.avatar" alt="头像" class="person-avatar" />
<img :src="person.avatarUrl" class="person-avatar" />
<div class="person-info">
<h4 class="person-name">{{ person.name }}</h4>
<p class="person-position">{{ person.position }}</p>
</div>
</div>
<p class="person-desc">{{ person.desc }}</p>
<div class="person-desc">{{ person.introduction }}</div>
</div>
</div>
</div>
......@@ -134,8 +148,8 @@
<h3 class="section-title">分支机构</h3>
</div>
<div class="branches-grid">
<div class="branch-item" v-for="(branch, idx) in data.branches" :key="idx">
<span>{{ branch }}</span>
<div class="branch-item" v-for="(branch) in brancheData" :key="branch.orgId">
<span>{{ branch.orgName }}</span>
<img src="../../assets/icons/open.png" alt="箭头" class="branch-arrow" />
</div>
</div>
......@@ -158,14 +172,18 @@
</template>
<script setup>
import { ref } from "vue";
import { ref, onMounted } from "vue";
import data from "./data/huaweiData.json";
import movementData from "./data/movement.json";
// import movementData from "./data/movement.json";
import Timeline from "./component/Timeline.vue";
import Capability from "./component/Capability.vue";
import SanctionsSituation‌ from "./component/SanctionsSituation‌.vue";
import SupplyChain from "./component/SupplyChain.vue";
import { useRouter } from "vue-router";
import { getEnterprisePageInfo, getEnterpriseKeyPerson, getEnterpriseBranch, getEnterpriseNewDynamic } from "@/api/companyPages/index.js";
import TabIcon1 from "./images/tab-icon1.png";
import TabIcon2 from "./images/tab-icon2.png";
import TabIcon3 from "./images/tab-icon3.png";
......@@ -175,6 +193,7 @@ import TabIcon2Active from "./images/tab-icon2-active.png";
import TabIcon3Active from "./images/tab-icon3-active.png";
import TabIcon4Active from "./images/tab-icon4-active.png";
const router = useRouter();
const tabList = ref([
{
title: "基础信息",
......@@ -200,6 +219,68 @@ const tabList = ref([
const activeTab = ref("基础信息");
const tabListSmall = ref(["企业概况", "企业动态"]);
const activeTabSmall = ref("企业概况");
const infoData = ref({})//基本信息
const mainPersonnel = ref([])//主要人员
// 获取企业基本信息
const handleGetEnterprisePageInfo = async () => {
try {
const res = await getEnterprisePageInfo(router.currentRoute._value.params.id);
console.log("企业基本信息", res);
if (res.code === 200 && res.data) {
infoData.value = res.data
}
} catch (error) {
console.error("获取企业基本信息error", error);
}
};
//获取主要人员
const handleGetEnterpriseKeyPerson = async () => {
try {
const res = await getEnterpriseKeyPerson(router.currentRoute._value.params.id);
console.log("主要人员", res);
if (res.code === 200 && res.data) {
mainPersonnel.value = res.data
}
} catch (error) {
console.error("获取主要人员error", error);
}
};
const brancheData = ref([])
//获取分支机构
const handleGetEnterpriseBranch = async () => {
try {
const res = await getEnterpriseBranch(router.currentRoute._value.params.id);
console.log("分支机构", res);
if (res.code === 200 && res.data) {
brancheData.value = res.data
}
} catch (error) {
console.error("获取分支机构error", error);
}
};
const movementData = ref([])
//获取最新动态
const handleGetEnterpriseNewDynamic = async () => {
try {
const res = await getEnterpriseNewDynamic(router.currentRoute._value.params.id);
console.log("最新动态", res);
if (res.code === 200 && res.data) {
movementData.value = res.data
}
} catch (error) {
console.error("获取最新动态error", error);
}
};
onMounted(async () => {
handleGetEnterprisePageInfo()
handleGetEnterpriseKeyPerson()
handleGetEnterpriseBranch()
handleGetEnterpriseNewDynamic()
});
</script>
<style lang="scss" scoped>
......@@ -258,11 +339,13 @@ const activeTabSmall = ref("企业概况");
align-items: flex-start;
gap: 32;
padding: 0px 16px 0px 0px;
img {
width: 16px;
height: 16px;
margin-right: 4px;
margin-right: 4px;
}
.tab {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
......@@ -517,6 +600,13 @@ const activeTabSmall = ref("企业概况");
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
/* overflow: hidden; */
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
overflow: hidden;
-webkit-box-orient: vertical;
width: 313px;
}
/* 主要人员 */
......@@ -606,14 +696,22 @@ const activeTabSmall = ref("企业概况");
}
.person-desc {
padding: 16px 8px;
margin: 0;
// padding: 16px 8px;
margin: 16px 8px;
color: rgba(95, 101, 108, 1);
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
/* overflow: hidden; */
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
-webkit-box-orient: vertical;
}
/* 分支机构 */
......
src/views/companyPages/js/radarChart.js
浏览文件 @ 29448e2d
import * as echarts from "echarts";
const getBarChart = (nameList, valueList, isPer) => {
const option = {
title: { text: '' },
/**
* 生成雷达图配置项（单系列）
* @param {{name: string[], value: number[]}} data - 包含 name 和 value 的对象
* @param {string} seriesName - 系列名称（如“学历分布”），可选，默认为 ''
* @returns {Object} ECharts 配置项
*/
const getRadarChart = (data, seriesName = '') => {
const nameList = data.name
const valueList = data.value
console.log(nameList, valueList, 'datadatadatadata')
// 自动计算每个维度的 max：取 value 中的最大值 * 1.2 并向上取整到合适刻度
const maxValue = Math.max(...valueList);
// 简单处理：如果 maxValue <= 10，max 设为 10；否则按 1.2 倍并取整到百/十位
let max;
if (maxValue === 0) {
max = 10;
} else if (maxValue <= 10) {
max = 10;
} else if (maxValue <= 100) {
max = Math.ceil(maxValue * 1.2 / 10) * 10;
} else {
max = Math.ceil(maxValue * 1.2 / 100) * 100;
}
// 所有 indicator 使用相同的 max（也可每个维度单独设，但你没提供）
const indicators = nameList.map(name => ({ name, max }));
const option = {
title: { text: '' },
radar: {
radius: '50%', // 关键：缩小整个雷达
center: ['50%', '50%'], // 可选：再往下挪一点，避免图例挤在一起
indicator: [
{ name: '5G通信', max: 6500 },
{ name: '生物科技', max: 16000 },
{ name: '人工智能', max: 30000 },
{ name: '物联网', max: 38000 },
{ name: '量子科技', max: 52000 },
{ name: '智能汽车', max: 25000 }
],
radius: '50%',
center: ['50%', '50%'],
indicator: indicators,
axisName: {
formatter: '{value}',
color: 'rgba(59, 65, 75, 1)',
......@@ -25,26 +43,25 @@ const getBarChart = (nameList, valueList, isPer) => {
},
series: [
{
name: 'Budget vs spending',
name: seriesName,
type: 'radar',
symbol: 'none',
// 添加或修改 lineStyle 属性来控制线条粗细
lineStyle: {
width: 1, // 调整这个值可以改变线条的粗细，数值越大线条越粗
width: 1,
color: '#69B1FF'
},
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: '美国',
value: valueList,
name: seriesName,
areaStyle: { color: 'rgba(105, 177, 255, 0.1)' }
},
}
]
}
]
}
return option
}
};
return option;
};
export default getBarChart
\ No newline at end of file
export default getRadarChart;
\ No newline at end of file
src/views/thinkTank/ReportDetail/policyTracking/index.vue
浏览文件 @ 29448e2d
......@@ -4,7 +4,7 @@
<div class="box1">
<div class="box-header">
<div class="header-left"></div>
<div class="title">政策建议落实情况</div>
<div class="title">政策建议相关情况</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
......@@ -108,7 +108,7 @@ import {
} from "@/api/thinkTank/overview";
import { useRouter } from "vue-router";
const router = useRouter();
// 政策建议落实情况
// 政策建议相关情况
const box1Data = ref([
{
id: 1,
......@@ -265,12 +265,12 @@ const box1Data = ref([
const handleGetThinkTankReportPolicy = async () => {
try {
const res = await getThinkTankReportPolicy(router.currentRoute._value.params.id);
console.log("政策建议落实情况", res);
console.log("政策建议相关情况", res);
if (res.code === 200 && res.data) {
box1Data.value = res.data
}
} catch (error) {
console.error("获取政策建议落实情况rror", error);
console.error("获取政策建议相关情况rror", error);
}
};
......
src/views/thinkTank/ReportDetail/reportAnalysis/index.vue
浏览文件 @ 29448e2d
......@@ -17,12 +17,12 @@
<div class="box1-main">
{{ box1Data }}
</div>
<div class="box1-footer">
<!-- <div class="box1-footer">
<div class="text">{{ "查看更多" }}</div>
<div class="icon">
<img src="@/assets/images/icon-double-down.png" alt="" />
</div>
</div>
</div> -->
</div>
<div class="box2">
<div class="box-header">
......@@ -53,14 +53,14 @@
<div class="box-header">
<div class="header-left"></div>
<div class="title">主要观点</div>
<div class="header-btn-box">
<!-- <div class="header-btn-box">
<div class="btn btnActive">
{{ "核心发现" }}
</div>
<div class="btn">
{{ "政策建议" }}
</div>
</div>
</div> -->
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
......@@ -78,7 +78,7 @@
</div>
<div class="center">
<div class="title">{{ item.content }}</div>
<div class="desc">{{ item.econtent }}</div>
<!-- <div class="desc">{{ item.econtent }}</div> -->
</div>
<div class="right">
<div class="tag" v-for="(val, idx) in item.hylyList" :key="idx">
......@@ -489,7 +489,7 @@ onMounted(() => {
.box1-main {
margin: 5px auto;
width: 428px;
height: 282px;
height: 315px;
/* 9行 * 30px/行 = 270px，这里可以稍微调整 */
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
......
src/views/thinkTank/ThinkTankDetail/PolicyTracking/index.vue
浏览文件 @ 29448e2d
......@@ -7,7 +7,7 @@
<img src="./images/box-header-icon1.png" alt="" />
</div>
<div class="title">{{ "提出建议领域分布" }}</div>
<div class="box-header-right">{{ "查看数据源 >" }}</div>
<!-- <div class="box-header-right">{{ "查看数据源 >" }}</div> -->
</div>
<div class="box-main">
<div class="select-box">
......@@ -19,7 +19,7 @@
<div id="box1Chart"></div>
</div>
</div>
<div class="box2 box">
<!-- <div class="box2 box">
<div class="box-header">
<div class="icon">
<img src="./images/box-header-icon2.png" alt="" />
......@@ -42,20 +42,17 @@
:percentage="item.percent" />
<div class="num">{{ item.amount + "项" }} / {{ item.totalAmount + "项" }}</div>
<div class="per">{{ item.percent + "%" }}</div>
</div>
<!-- <div class="box2-item">
<el-progress :percentage="50" />
</div> -->
</div>
</div>
</div>
</div>
</div> -->
<div class="box3 box">
<div class="box-header">
<div class="icon">
<img src="./images/box-header-icon2.png" alt="" />
</div>
<div class="title">{{ "热门研究方向变化趋势" }}</div>
<div class="box-header-right">{{ "查看数据源 >" }}</div>
<!-- <div class="box-header-right">{{ "查看数据源 >" }}</div> -->
</div>
<div class="box-main">
<div class="select-box">
......@@ -141,7 +138,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" />
......@@ -577,7 +574,7 @@ onMounted(() => {
gap: 16px;
.box {
width: 520px;
width: 790px;
height: 420px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
......@@ -586,7 +583,7 @@ onMounted(() => {
background: rgba(255, 255, 255, 1);
.box-header {
width: 520px;
width: 790px;
height: 48px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
display: flex;
......
src/views/thinkTank/ThinkTankDetail/thinkDynamics/index.vue
浏览文件 @ 29448e2d
......@@ -23,7 +23,7 @@
</div>
<div class="main-content">
<div class="left">
<div class="select-box">
<!-- <div class="select-box">
<div class="select-box-header">
<div class="icon"></div>
<div class="title">{{ "报告类型" }}</div>
......@@ -36,7 +36,7 @@
</el-checkbox>
</div>
</div>
</div>
</div> -->
<div class="select-box">
<div class="select-box-header">
<div class="icon"></div>
......@@ -331,7 +331,7 @@ const handleGetThinkDynamicsReport = async () => {
authorName: author.value ? author.value : null,
currentPage: currentPage.value - 1,
pageSize: 12,
reportTypeIds: arrayToString(selectedReportTypeList.value) === '' ? null : arrayToString(selectedResearchTypeList.value),
// reportTypeIds: arrayToString(selectedReportTypeList.value) === '' ? null : arrayToString(selectedResearchTypeList.value),
researchTypeIds: arrayToString(selectedResearchTypeList.value) === '' ? null : arrayToString(selectedResearchTypeList.value)
}
......
src/views/thinkTank/ThinkTankDetail/thinkInfo/index.vue
浏览文件 @ 29448e2d
......@@ -86,11 +86,11 @@
</div>
<div class="card2">
<div class="card-title">{{ "政府部门" }}</div>
<div class="card-num">{{ box1LeftData.zfJe }}亿美元</div>
<div class="card-num">{{ box1LeftData.zfJe / 100000000 }}亿美元</div>
</div>
<div class="card3">
<div class="card-title">{{ "其他机构" }}</div>
<div class="card-num">{{ box1LeftData.otherJe }}亿美元</div>
<div class="card-num">{{ box1LeftData.otherJ / 100000000 }}亿美元</div>
</div>
</div>
<div class="box1-main-right" id="box1Chart"></div>
......
src/views/thinkTank/ThinkTankDetail/thinkInfo/utils/piechart.js
浏览文件 @ 29448e2d
......@@ -2,51 +2,51 @@ const getPieChart = (data) => {
let option = {
series: [
{
type: 'pie',
radius: [70, 100],
height: '100%',
left: 'center',
width: '100%',
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
label: {
alignTo: 'edge',
formatter: '{name|{b}}\n{time|{c} 条 {d}%}',
minMargin: 15,
edgeDistance: 10,
lineHeight: 15,
rich: {
name: {
fontSize: 16,
color: 'rgba(59, 65, 75, 1)',
fontWeight: 700,
},
time: {
fontSize: 14,
color: 'rgba(59, 65, 75, 1)',
type: 'pie',
radius: [70, 100],
height: '100%',
left: 'center',
width: '100%',
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
label: {
alignTo: 'edge',
formatter: '{name|{b}}\n{time|{c} 个 {d}%}',
minMargin: 15,
edgeDistance: 10,
lineHeight: 15,
rich: {
name: {
fontSize: 16,
color: 'rgba(59, 65, 75, 1)',
fontWeight: 700,
},
time: {
fontSize: 14,
color: 'rgba(59, 65, 75, 1)',
}
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < 556 / 2;
const points = params.labelLinePoints;
// Update the end point.
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
},
data: data
}]
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < 556 / 2;
const points = params.labelLinePoints;
// Update the end point.
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
},
data: data
}]
}
return option
}
......
src/views/thinkTank/index.vue
浏览文件 @ 29448e2d
......@@ -78,17 +78,12 @@
</div>
<div class="content">{{ item.desc }}</div>
<div class="tag-box">
<div
class="tag"
:class="{
tag1: val.status === 1,
tag2: val.status === 2,
tag3: val.status === 3,
tag4: val.status === 4
}"
v-for="(val, idx) in item.tagList"
:key="idx"
>
<div class="tag" :class="{
tag1: val.status === 1,
tag2: val.status === 2,
tag3: val.status === 3,
tag4: val.status === 4
}" v-for="(val, idx) in item.tagList" :key="idx">
{{ val.name }}
</div>
</div>
......@@ -110,15 +105,15 @@
<img src="./assets/images/box1-header-icon.png" alt="" />
</div>
<div class="title">{{ "智库发布" }}</div>
</div>
<div class="box1-header-right">
查看详情 >
</div>
</div>
<div style="display: flex">
<img
src="./assets/images/right-left-icon1.png"
alt=""
style="margin-top: 174px; width: 24px; height: 48px"
@click="changeBox1Data('previous')"
/>
<img src="./assets/images/right-left-icon1.png" alt=""
style="margin-top: 174px; width: 24px; height: 48px" @click="changeBox1Data('previous')" />
<div class="box1-main">
<div class="box1-main-left">
<img :src="box1Data[box1DataIndex]?.imageUrl" alt="" />
......@@ -126,11 +121,7 @@
<div class="box1-main-right">
<div class="title">{{ box1Data[box1DataIndex]?.reportName }}</div>
<div class="tag-box">
<div
class="tag"
v-for="(item, index) in box1Data[box1DataIndex]?.industryVOList"
:key="index"
>
<div class="tag" v-for="(item, index) in box1Data[box1DataIndex]?.industryVOList" :key="index">
{{ item }}
</div>
</div>
......@@ -146,12 +137,8 @@
</div>
</div>
</div>
<img
src="./assets/images/right-left-icon2.png"
alt=""
style="margin-top: 174px; width: 24px; height: 48px"
@click="changeBox1Data('next')"
/>
<img src="./assets/images/right-left-icon2.png" alt=""
style="margin-top: 174px; width: 24px; height: 48px" @click="changeBox1Data('next')" />
</div>
</div>
<div class="box2">
......@@ -166,14 +153,11 @@
</div>
<div class="box2-main">
<div class="box2-main-item" v-for="(item, index) in warningList" :key="index">
<div
class="item-left"
:class="{
itemLeftStatus1: item.status === '一般风险 ' || item.status === '暂无数值',
itemLeftStatus2: item.status === '重大风险',
itemLeftStatus3: item.status === '特别重大'
}"
>
<div class="item-left" :class="{
itemLeftStatus1: item.status === '一般风险 ' || item.status === '暂无数值',
itemLeftStatus2: item.status === '重大风险',
itemLeftStatus3: item.status === '特别重大'
}">
{{ item.status || "一般风险" }}
</div>
<div class="item-right">
......@@ -226,24 +210,18 @@
</div>
<div class="header-title">{{ "智库人物动态" }}</div>
</div>
<div class="box4-tag-box">
<div
class="tag"
:class="{
tagActive: box4ActiveTag === tag.name,
tag1: tag.status === 1,
tag2: tag.status === 2,
tag3: tag.status === 3,
tag4: tag.status === 4,
tag5: tag.status === 5
}"
v-for="(tag, index) in box4TagList"
:key="index"
@click="handleClickBox4Tag(tag.name)"
>
<!-- <div class="box4-tag-box">
<div class="tag" :class="{
tagActive: box4ActiveTag === tag.name,
tag1: tag.status === 1,
tag2: tag.status === 2,
tag3: tag.status === 3,
tag4: tag.status === 4,
tag5: tag.status === 5
}" v-for="(tag, index) in box4TagList" :key="index" @click="handleClickBox4Tag(tag.name)">
{{ tag.name }}
</div>
</div>
</div> -->
<div class="box4-main">
<div class="box4-main-item" v-for="(item, index) in messageList" :key="index">
<div class="left">
......@@ -272,13 +250,8 @@
</div>
<div class="box5-select-box">
<el-select v-model="box5selectetedYear" placeholder="选择时间" style="width: 120px">
<el-option
v-for="item in box5YearList"
:key="item.value"
:label="item.label"
:value="item.value"
@click="changeBox5Data(item.value)"
/>
<el-option v-for="item in box5YearList" :key="item.value" :label="item.label" :value="item.value"
@click="changeBox5Data(item.value)" />
</el-select>
</div>
</div>
......@@ -292,13 +265,8 @@
<div class="header-title">{{ "政策建议领域分布" }}</div>
<div class="box6-select-box">
<el-select v-model="box6selectetedYear" placeholder="选择时间" style="width: 120px">
<el-option
v-for="item in box6YearList"
:key="item.value"
:label="item.label"
:value="item.value"
@click="handleBox6()"
/>
<el-option v-for="item in box6YearList" :key="item.value" :label="item.label" :value="item.value"
@click="handleBox6()" />
</el-select>
</div>
</div>
......@@ -327,28 +295,19 @@
</div>
<div class="box8-select-box">
<el-select v-model="box8selectetedYear" placeholder="选择时间" style="width: 120px">
<el-option
v-for="item in box8YearList"
:key="item.value"
:label="item.label"
:value="item.value"
@click="changeBox8Data(item.value)"
/>
<el-option v-for="item in box8YearList" :key="item.value" :label="item.label" :value="item.value"
@click="changeBox8Data(item.value)" />
</el-select>
</div>
</div>
<div class="box8-main">
<div class="box8-item" v-for="(item, index) in box8Data" :key="index">
<div
class="item-left"
:class="{ itemBold1: index === 0, itemBold2: index === 1, itemBold3: index === 2 }"
>
<div class="item-left"
:class="{ itemBold1: index === 0, itemBold2: index === 1, itemBold3: index === 2 }">
{{ index + 1 }}
</div>
<div
class="item-center"
:class="{ itemBold1: index === 0, itemBold2: index === 1, itemBold3: index === 2 }"
>
<div class="item-center"
:class="{ itemBold1: index === 0, itemBold2: index === 1, itemBold3: index === 2 }">
{{ item.clause }}
</div>
<div class="item-right">{{ `${item.count}份报告 >` }}</div>
......@@ -362,13 +321,8 @@
<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"
: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>
......@@ -382,22 +336,12 @@
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox
v-model="checkAll"
:indeterminate="isIndeterminate"
class="all-checkbox"
@change="handleCheckAllChange"
>
<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" class="all-checkbox"
@change="handleCheckAllChange">
全部领域
</el-checkbox>
<el-checkbox
v-for="research in areaList"
:key="research.id"
v-model="selectedAreaList"
:label="research.id"
@change="handleCheckedAreaChange()"
class="filter-checkbox"
>
<el-checkbox v-for="research in areaList" :key="research.id" v-model="selectedAreaList"
:label="research.id" @change="handleCheckedAreaChange()" class="filter-checkbox">
{{ research.name }}
</el-checkbox>
</div>
......@@ -411,22 +355,13 @@
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox
v-model="checkAllTime"
class="all-checkbox"
:indeterminate="isIndeterminateTime"
@change="handleCheckAllChangeTime"
>
<el-checkbox v-model="checkAllTime" class="all-checkbox" :indeterminate="isIndeterminateTime"
@change="handleCheckAllChangeTime">
全部时间
</el-checkbox>
<el-checkbox-group v-model="selectedPubTimeList">
<el-checkbox
v-for="time in pubTimeList"
:key="time.id"
:label="time.id"
class="filter-checkbox"
@change="handleCheckedAreaChangeTime()"
>
<el-checkbox v-for="time in pubTimeList" :key="time.id" :label="time.id" class="filter-checkbox"
@change="handleCheckedAreaChangeTime()">
{{ time.name }}
</el-checkbox>
</el-checkbox-group>
......@@ -436,12 +371,8 @@
</div>
<div class="right">
<div class="card-box">
<div
class="footer-card"
v-for="(item, index) in curFooterList"
:key="index"
@click="handleToReportDetail(item.id)"
>
<div class="footer-card" v-for="(item, index) in curFooterList" :key="index"
@click="handleToReportDetail(item.id)">
<div class="footer-card-top">
<img :src="item.imageUrl" alt="" />
</div>
......@@ -457,14 +388,8 @@
<div class="right-footer">
<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>
......@@ -838,7 +763,6 @@ const handleGetThinkTankPolicyIndustryChange = async date => {
result.data.push(industryData);
});
box5Data.value = result;
console.log(box5Data.value, "console.log(box5Data.value)console.log(box5Data.value)");
} else {
box5Data.value = [];
}
......@@ -848,7 +772,6 @@ const handleGetThinkTankPolicyIndustryChange = async date => {
};
const handleBox5 = async date => {
await handleGetThinkTankPolicyIndustryChange(date);
console.log(box5Data.value, "console.log(box5Data.value)console.log(box5Data.value)");
let box5Chart = box5Data.value ? getMultiLineChart(box5Data.value) : "";
setChart(box5Chart, "box5Chart");
......@@ -911,21 +834,39 @@ const box6YearList = ref([
value: "2022"
}
]);
function transformToChartFormat(data) {
// 预设颜色池（可按需修改或扩展）
const colorPalette = [
"#4096FF",
"#FFA39E",
"#ADC6FF",
"#FFC069",
"#B5F5EC",
"#B37FEB",
"#D6E4FF",
"#FF8C8C",
"#87E8DE"
];
return data.map((item, index) => ({
name: item.industry,
value: item.amount,
color: colorPalette[index % colorPalette.length]
}));
}
// 政策建议领域分布
const handleGetThinkTankPolicyIndustry = async () => {
const params = {
apply: 1,
year: box6selectetedYear.value
};
try {
const res = await getThinkTankPolicyIndustry(params);
console.log("政策建议领域分布", res);
if (res.code === 200 && res.data) {
box6Data.value = res.data.map((item, index) => ({
name: item.industry,
value: item.amount,
color: colors[index % colors.length] // 循环使用颜色数组
}));
box6Data.value = transformToChartFormat(res.data)
console.log(transformToChartFormat(res.data), 'datadatadata')
} else {
box6Data.value = [];
}
......@@ -1862,6 +1803,18 @@ onMounted(async () => {
text-align: center;
}
}
.box1-header-right {
margin-top: 16px;
height: 16px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 16px;
cursor: pointer;
margin-right: 39px;
}
}
.box1-main {
......@@ -2429,7 +2382,7 @@ onMounted(async () => {
}
.box4-main {
height: 342px;
height: 380px;
overflow-y: auto;
box-sizing: border-box;
padding: 8px 0;
......@@ -2998,6 +2951,7 @@ onMounted(async () => {
.right {
width: 1284px;
max-height: 1377px;
.card-box {
width: 1226px;
max-height: 1248px;
......@@ -3005,6 +2959,7 @@ onMounted(async () => {
display: flex;
flex-wrap: wrap;
gap: 16px 16px;
.footer-card {
width: 398px;
height: 300px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论