Skip to content

R
risk-monitor
提交 94e2659d authored 作者: huhuiqing's avatar huhuiqing
浏览文件
操作

企业主页接口对接

上级 9d9bb0dc
隐藏空白字符变更
内嵌 并排
正在显示 包含 362 行增加 和 76 行删除
src/api/companyPages/index.js
浏览文件 @ 94e2659d
......@@ -6,7 +6,6 @@ export function getEnterprisePageInfo(params) {
return request({
method: 'GET',
url: `/api/enterprisePage/info/${params}`,
})
}
......@@ -15,7 +14,72 @@ 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/views/companyPages/component/Capability.vue
浏览文件 @ 94e2659d
......@@ -95,11 +95,14 @@
</template>
<script setup>
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('研发投入')
......@@ -137,34 +140,188 @@ const totalData = ref([[
{ label: '家族专利', value: 4500, unit: '+' }
]])
//年度研发投入对比
const chart1Data = ref({
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],
})
// 学历分布数据（对应图片）
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],
})
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) {
......@@ -175,14 +332,14 @@ function changeTab(tab, index) {
// 保证 DOM 更新完再画
nextTick(() => {
if (tab === '研发投入') {
chart1()
chart2()
handleGetEnterpriseStudy()
handleGetEnterpriseGrowth()
} else if (tab === '研究人员') {
chart3()
char4()
handleGetEnterpriseResearcherNum()
handleGetEnterpriseResearcherDegree()
} if (tab === '专利情况') {
char5()
chart6()
handleGetEnterprisePatentRegion()
handleGetEnterprisPatentField()
}
// 其它 tab 同理 …
})
......@@ -197,25 +354,7 @@ const setChart = (option, chartId) => {
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);
......@@ -230,9 +369,8 @@ function chart6() {
onMounted(() => {
chart1()
chart2()
handleGetEnterpriseStudy()
handleGetEnterpriseGrowth()
});
</script>
......
src/views/companyPages/component/Timeline.vue
浏览文件 @ 94e2659d
......@@ -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
浏览文件 @ 94e2659d
......@@ -148,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>
......@@ -173,15 +173,17 @@
<script setup>
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 } from "@/api/companyPages/index.js";
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";
......@@ -232,7 +234,7 @@ const handleGetEnterprisePageInfo = async () => {
}
};
//获取主要人员
const handleGetEnterpriseKeyPerson = async () => {
try {
const res = await getEnterpriseKeyPerson(router.currentRoute._value.params.id);
......@@ -245,9 +247,38 @@ const handleGetEnterpriseKeyPerson = async () => {
}
};
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>
......
src/views/companyPages/js/radarChart.js
浏览文件 @ 94e2659d
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
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论