Skip to content

R
risk-monitor
提交 ffa4a4fd authored 作者: hsx's avatar hsx
浏览文件
操作

v2版本企业 基本信息

上级 f09bfd39
隐藏空白字符变更
内嵌 并排
正在显示 包含 545 行增加 和 43 行删除
src/api/companyPages/index.js
浏览文件 @ ffa4a4fd
......@@ -32,7 +32,13 @@ export function getEnterpriseNewDynamic(params) {
url: `/api/enterprisePage/newDynamic/${params}`,
})
}
//企业基本信息:最新动态(分页)
export function getEnterpriseNewDynamicPage(params) {
return request({
method: 'GET',
url: `/api/enterprisePage/newDynamicPage/${params}`,
})
}
//企业研发投入:年度研发投入对比
export function getEnterpriseStudy(params) {
......
src/components/base/newsList/newsItem.vue → src/components/base/newsList/NewsItem.vue
浏览文件 @ ffa4a4fd
......@@ -48,6 +48,8 @@ const handleToNewsAnalysis = (item, index) => {
};
</script>
<style lang="scss" scoped>
@use '@/styles/common.scss';
.box3-item {
display: flex;
align-items: center;
......@@ -90,12 +92,8 @@ const handleToNewsAnalysis = (item, index) => {
.title {
// width: 500px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: 'Source Han Sans CN';
font-size: 16px;
font-weight: 700;
line-height: 24px;
@extend .text-title-3-bold;
color: var(--text-primary-80-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
......@@ -108,39 +106,15 @@ const handleToNewsAnalysis = (item, index) => {
.time {
text-align: right;
height: 22px;
color: rgba(95, 101, 108, 1);
font-family: 'Source Han Sans CN';
font-size: 14px;
font-weight: 400;
line-height: 22px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@extend .text-tip-2;
color: var(--text-primary-65-color);
}
}
.right-footer {
height: 48px;
/* 调整为2行的高度：24px × 2 = 48px */
color: rgba(59, 65, 75, 1);
font-family: 'Source Han Sans CN';
font-size: 16px;
font-weight: 400;
line-height: 24px;
overflow: hidden;
display: -webkit-box;
/* 关键 */
-webkit-line-clamp: 2;
/* 显示2行 */
-webkit-box-orient: vertical;
/* 垂直方向排列 */
text-overflow: ellipsis;
/* 第二行省略号 */
white-space: normal;
/* 改为 normal */
word-break: break-word;
/* 允许单词换行 */
@extend .text-compact;
color: var(--text-primary-65-color);
@include common.text-ellipsis(2);
}
}
</style>
\ No newline at end of file
src/components/devStyle/components/index.vue
浏览文件 @ ffa4a4fd
......@@ -9,7 +9,7 @@ import { ElScrollbar, ElSpace } from "element-plus";
<template>
<el-scrollbar>
<div class="common-page">
<el-space direction="vertical" alignment="flex-start">
<el-space direction="vertical" :size="20" alignment="flex-start">
<div class="text-title-0-show">开发样式</div>
<div class="text-title-1-show">样式变量</div>
<const-style></const-style>
......
src/router/modules/company.js
浏览文件 @ ffa4a4fd
//企业主页
const companyPages = () => import('@/views/companyPages/index.vue')
const companyPages2 = () => import('@/views/companyPages2/index.vue')
const companyPagesRoutes = [
......@@ -14,6 +15,16 @@ const companyPagesRoutes = [
dynamicTitle: true
}
},
// todo: 开发过程测试，开发完成后删除，by hsx ，20260306
{
path: "/companyPages2/:id",
name: "companyPages2",
component: companyPages2,
meta: {
title: "企业主页",
dynamicTitle: true
}
},
]
......
src/styles/common.scss
浏览文件 @ ffa4a4fd
/***背景作为卡片***/
.background-as-card {
background-color: var(--color-primary-65);
background-color: var(--bg-white-80);
border-radius: 10px;
border: 1px solid rgba(234, 236, 238, 1);
border: 1px solid var(--bg-white-100);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
}
......@@ -10,10 +10,29 @@
.flex-display{
display: flex;
}
// 文本超出指定行数省略号显示
@mixin text-ellipsis($line-clamp) {
overflow: hidden;
display: -webkit-box;
/* 关键 */
-webkit-line-clamp: $line-clamp;
/* 显示2行 */
-webkit-box-orient: vertical;
/* 垂直方向排列 */
text-overflow: ellipsis;
/* 第二行省略号 */
white-space: normal;
/* 改为 normal */
word-break: break-word;
/* 允许单词换行 */
}
//禁止换行
.text-nowrap{
white-space: nowrap;
}
/***文本样式***/
.text-base{
color: var(--color-primary-90);
color: var(--color-primary-80);
}
//0级标题
......
src/styles/descriptions.scss
浏览文件 @ ffa4a4fd
......@@ -3,6 +3,7 @@
/***没有nav下划线***/
.common-descriptions .el-descriptions__label{
@extend .text-tip-1-bold;
color: var(--text-primary-80-color);
}
.common-descriptions .el-descriptions__content{
@extend .text-tip-1;
......
src/styles/main.css
浏览文件 @ ffa4a4fd
......@@ -4,8 +4,6 @@
--font-family-base: "Source Han Sans CN";
--font-size-base: 16px;
--color-bg-hover: #f6faff;
/* 普通按钮颜色 */
......@@ -29,6 +27,7 @@
--bg-black-5: #EAECEE;
--bg-black-2: #F7F8F9;
--bg-white-100: #FFFFFF;
--bg-white-80: rgba(255, 255, 255, 0.8);
--bg-white-65: rgba(255, 255, 255, 0.65);
--bg-white-50: rgba(255, 255, 255, 0.5);
--bg-white-35: rgba(255, 255, 255, 0.35);
......
src/views/companyPages2/component/capitalScale.vue 0 → 100644
浏览文件 @ ffa4a4fd
<template>
<!-- 资本规模组件 -->
<el-space :size="24">
<!-- 遍历资本规模数据 -->
<div v-for="(t, i) in scales" :key="i" class="item-box">
<!-- 标题 -->
<div class="item-title">{{ t.title }}</div>
<!-- 数值区域 -->
<el-space :size="6">
<!-- 数值图标 -->
<div class="item-value-img" />
<!-- 数值 -->
<div class="item-value">
{{ t.value }}
</div>
</el-space>
</div>
</el-space>
</template>
<script setup>
// 导入Vue组合式API
import { ref, watch } from 'vue'
// 导入Element Plus组件
import { ElSpace } from 'element-plus'
// 响应式数据
const scales = ref([]) // 资本规模数据列表
// 定义组件属性
const props = defineProps({
enterpriseInfo: {
type: Object,
default: {}
}
});
// 监听企业信息变化，更新资本规模数据
watch(() => props.enterpriseInfo, (newVal, oldVal) => {
// 如果没有年份信息，直接返回
if (!newVal?.year)
return
const scales1 = []
// 添加营业额数据
if (newVal.turnover) {
scales1.push({
title: newVal.year + '年营业额',
// 文字转数字，保留整数，添加单位
value: Number(newVal.turnover).toFixed(0) + '亿'
})
}
// 添加总资产数据
if (newVal.totalAssets) {
scales1.push({
title: newVal.year + '年总资产',
// 文字转数字，保留整数，添加单位
value: Number(newVal.totalAssets).toFixed(0) + '亿'
})
}
// 添加净资产数据
if (newVal.netAssets) {
scales1.push({
title: newVal.year + '年净资产',
// 文字转数字，保留整数，添加单位
value: Number(newVal.netAssets).toFixed(0) + '亿'
})
}
// 更新资本规模数据
scales.value = scales1
}, { immediate: true }) // immediate: true 表示组件挂载时立即执行
</script>
<style lang="scss" scoped>
// 导入通用样式
@use '@/styles/common.scss';
/* 项目盒子样式 */
.item-box {
white-space: nowrap; // 禁止换行
text-align: right; // 右对齐
}
/* 项目标题样式 */
.item-title {
@extend .text-tip-1;
color: var(--text-primary-80-color);
}
/* 项目数值样式 */
.item-value {
@extend .text-title-0-bold;
color: var(--color-primary-100);
}
/* 项目数值图标样式 */
.item-value-img {
width: 8px;
height: 6px;
background-image: url(../images/Regular_polygon_11097_225086.png);
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
flex-shrink: 0; // 防止收缩
}
</style>
\ No newline at end of file
src/views/companyPages2/component/detailsPages/baseInfo.vue 0 → 100644
浏览文件 @ ffa4a4fd
<template>
<!-- 企业基本信息组件 -->
<analysis-box title="基本信息" :showAllBtn="false">
<div class="box-wrap">
<!-- 企业图片 -->
<el-image :src="enterpriseInfo.picture" class="company-picture" />
<!-- 企业基本信息描述 -->
<el-descriptions title='' :column="1" class="common-descriptions">
<el-descriptions-item label="成立时间：">{{ enterpriseInfo.establishmentDate }}</el-descriptions-item>
<el-descriptions-item label="总部地址：">{{ enterpriseInfo.address }}</el-descriptions-item>
<el-descriptions-item label="联系方式：">{{ enterpriseInfo.telephone }}</el-descriptions-item>
<el-descriptions-item label="企业类型：">{{ enterpriseInfo.companyType }}</el-descriptions-item>
<el-descriptions-item label="业务范围：">{{ enterpriseInfo.businessScope }}</el-descriptions-item>
<el-descriptions-item label="分支机构：">
<div style="margin-left: 86px;">
<li v-for="(t, i) in branchs" :key="i">{{ t.orgName }}</li>
</div>
</el-descriptions-item>
</el-descriptions>
<!-- 分隔线 -->
<el-divider></el-divider>
<!-- 关键人物标题 -->
<div class="text-tip-1-bold" style="margin-bottom: 19px;">关键人物：</div>
<!-- 关键人物列表 -->
<el-space wrap>
<person-avatar style="width: 200px;" v-for="(t, i) in persons" :key="i" :person="t"></person-avatar>
</el-space>
</div>
</analysis-box>
</template>
<script setup>
// 导入组件
import AnalysisBox from '@/components/base/boxBackground/analysisBox.vue';
import { ref, watch } from 'vue';
import { getEnterpriseBranch, getEnterpriseKeyPerson } from '@/api/companyPages';
import PersonAvatar from '@/components/base/people/personAvatar.vue';
import { ElDescriptions, ElDescriptionsItem, ElDivider, ElImage, ElSpace } from 'element-plus';
import '@/styles/descriptions.scss'
// 定义组件属性
const props = defineProps({
enterpriseInfo: {
type: Object,
default: {}
}
});
// 响应式数据
const branchs = ref([]) // 分支机构列表
const persons = ref([]) // 关键人物列表
/**
* 获取企业相关数据
* @param {string} id - 企业ID
*/
const featchData = async (id) => {
// 获取分支机构数据
var res = await getEnterpriseBranch(id);
if (res?.code === 200) {
branchs.value = res.data;
}
// 获取关键人物数据
res = await getEnterpriseKeyPerson(id);
if (res?.code === 200) {
persons.value = res.data;
}
}
// 监听企业信息变化，当企业信息更新时重新获取数据
watch(() => props.enterpriseInfo, async (newVal, oldVal) => {
if (newVal) {
await featchData(newVal.id)
}
}, { immediate: true }) // immediate: true 表示组件挂载时立即执行
</script>
<style lang="css" scoped>
/* 容器样式 */
.box-wrap {
margin: 25px;
}
/* 企业图片样式 */
.company-picture {
border-radius: 4px;
margin-bottom: 16px;
}
</style>
\ No newline at end of file
src/views/companyPages2/component/detailsPages/newsPane.vue 0 → 100644
浏览文件 @ ffa4a4fd
<template>
<!-- 企业最新动态组件 -->
<analysis-box title="最新动态" :showAllBtn="false">
<!-- 顶部分隔线 -->
<el-divider></el-divider>
<!-- 新闻列表 -->
<el-space :size="0" direction="vertical">
<news-item class="list-item" v-for="(t, i) in newsPage.content" :key="i" :news="t"></news-item>
</el-space>
<!-- 底部分隔线 -->
<el-divider></el-divider>
<!-- 分页组件 -->
<el-pagination style="margin: 25px;" background layout="total, ->, prev, pager, next"
:total="newsPage.totalElements" v-on:current-change="onCurrentChange">
</el-pagination>
</analysis-box>
</template>
<script setup>
// 导入API
import { getEnterpriseNewDynamicPage } from '@/api/companyPages';
// 导入组件
import AnalysisBox from '@/components/base/boxBackground/analysisBox.vue';
import NewsItem from '@/components/base/newsList/NewsItem.vue';
import { ElDivider, ElSpace, ElPagination } from 'element-plus';
// 导入Vue组合式API
import { ref, watch } from 'vue';
// 响应式数据
const newsPage = ref({}) // 新闻分页数据
// 定义组件属性
const props = defineProps({
enterpriseInfo: {
type: Object,
default: {}
}
});
/**
* 更新新闻列表
* @param {string} id - 企业ID
* @param {number} page - 页码（从0开始）
*/
const updateNews = async (id, page) => {
// 获取企业最新动态分页数据
const res = await getEnterpriseNewDynamicPage(`${id}?pageNumber=${page}`);
if (res?.code === 200) {
// 处理新闻数据，添加来源信息
res.data?.content?.forEach(t => {
t.from = `${t.time} · ${t.orgName}`
});
// 更新新闻分页数据
newsPage.value = res.data;
}
}
// 监听企业信息变化，当企业信息更新时重新获取新闻
watch(() => props.enterpriseInfo, async (newVal, oldVal) => {
if (newVal) {
await updateNews(newVal.id, 0) // 默认从第0页开始
}
}, { immediate: true }) // immediate: true 表示组件挂载时立即执行
/**
* 分页变化处理函数
* @param {number} e - 当前页码（从1开始）
*/
const onCurrentChange = e => {
console.log(e) // 打印当前页码
updateNews(props.enterpriseInfo.id, e - 1) // 转换为从0开始的页码
}
</script>
<style lang="css" scoped>
/* 新闻列表项样式 */
.list-item {
margin-bottom: 20px;
/* 底部外边距 */
border-bottom: 1px solid rgba(240, 242, 244, 1);
/* 底部边框 */
}
</style>
\ No newline at end of file
src/views/companyPages2/component/operatingPages/index.vue 0 → 100644
浏览文件 @ ffa4a4fd
<script setup lang="ts">
import '@/styles/tabs.scss'
import { ElTabPane, ElTabs } from 'element-plus';
</script>
<template>
<el-tabs tabPosition="left" class="disinheritance tabs-nav-no-wrap left-float-nav-tabs">
<el-tab-pane label="企业规模"></el-tab-pane>
<el-tab-pane label="市值变化"></el-tab-pane>
<el-tab-pane label="研发投入"></el-tab-pane>
<el-tab-pane label="市场占比"></el-tab-pane>
</el-tabs>
</template>
\ No newline at end of file
src/views/companyPages2/component/titlePane.vue 0 → 100644
浏览文件 @ ffa4a4fd
<template>
<!-- 企业标题面板组件 -->
<div class="box background-as-card">
<!-- 企业Logo -->
<img v-if="enterpriseInfo.logoUrl" :src="enterpriseInfo.logoUrl" alt="logo" class="company-logo" />
<!-- 企业信息区域 -->
<el-space fill :size="4">
<!-- 企业名称 -->
<div class="company-name">{{ enterpriseInfo.orgName }}</div>
<!-- 企业英文名称 -->
<div class="company-name2">{{ enterpriseInfo.orgNameEn }}</div>
<!-- 企业简介 -->
<div class="company-name2">{{ enterpriseInfo.orgIntroduction }}</div>
<!-- 供应区域标签 -->
<el-space>
<area-tag v-for="(t, i) in areas" :key="i" :tagName="t.name"></area-tag>
</el-space>
</el-space>
<capital-scale :enterpriseInfo="enterpriseInfo"></capital-scale>
</div>
</template>
<script setup>
// 导入组件
import AreaTag from '@/components/base/AreaTag/index.vue';
// 导入API
import { getSupplyAreaList } from '@/api/companyPages';
// 导入Vue组合式API
import { ref, watch } from 'vue';
import { ElSpace } from 'element-plus';
// 导入自定义组件
import CapitalScale from './capitalScale.vue'
// 响应式数据
const areas = ref([]) // 供应区域列表
// 定义组件属性
const props = defineProps({
enterpriseInfo: {
type: Object,
default: {}
}
});
// 监听企业信息变化，当企业信息更新时重新获取供应区域
watch(() => props.enterpriseInfo, async (newVal, oldVal) => {
if (newVal) {
await initAreas(newVal.id)
}
})
/**
* 初始化供应区域列表
* @param {string} id - 企业ID
*/
const initAreas = async (id) => {
// 获取供应区域数据
const res = await getSupplyAreaList(id);
if (res?.code === 200) {
// 更新供应区域列表
areas.value = res.data;
}
}
</script>
<style lang="scss" scoped>
// 导入通用样式
@use '@/styles/common.scss';
/* 容器样式 */
.box {
width: 100%;
height: 160px;
top: 80px;
left: 160px;
padding: 16px 19px;
border-radius: 10px;
display: flex;
align-items: center;
}
/* 企业Logo样式 */
.company-logo {
width: 128px;
height: 128px;
margin-right: 21px;
object-fit: contain;
}
/* 企业名称样式 */
.company-name {
@extend .text-title-1-bold;
color: var(--text-primary-80-color);
}
/* 企业英文名称和简介样式 */
.company-name2 {
@extend .text-tip-1;
color: var(--text-primary-80-color);
@include common.text-ellipsis(2); // 最多显示2行，超出部分省略
}
</style>
\ No newline at end of file
src/views/companyPages2/index.vue 0 → 100644
浏览文件 @ ffa4a4fd
<template>
<div class="background-container"
:style="{ backgroundImage: `linear-gradient(to bottom, var(--bg-white-80), var(--bg-white-100)), url(${enterpriseInfo.picture})` }">
</div>
<el-scrollbar>
<div class="common-page">
<el-space wrap :size="16">
<title-pane :enterprise-info="enterpriseInfo"></title-pane>
<el-tabs stretch class="tabs-header-as-card tabs-nav-no-wrap tabs-bar-as-btn">
<el-tab-pane label="企业详情">
<div class="flex-display">
<news-pane :enterprise-info="enterpriseInfo" />
<base-info class="base-info" :enterprise-info="enterpriseInfo" />
</div>
</el-tab-pane>
<el-tab-pane lazy label="经营情况">
<operating-pages />
</el-tab-pane>
<el-tab-pane lazy label="供应链 / 股权">
<div class="flex-display">
</div>
</el-tab-pane>
</el-tabs>
</el-space>
</div>
</el-scrollbar>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { getEnterprisePageInfo } from '@/api/companyPages';
import TitlePane from './component/titlePane.vue';
import NewsPane from './component/detailsPages/newsPane.vue';
import BaseInfo from './component/detailsPages/baseInfo.vue';
import OperatingPages from './component/operatingPages/index.vue';
import '@/styles/tabs.scss'
import '@/styles/container.scss'
import { ElScrollbar, ElSpace, ElTabs, ElTabPane } from 'element-plus';
const route = useRoute();
const companyId = route.params.id;
const enterpriseInfo = ref({})
console.log(companyId)
onMounted(() => {
init();
});
const init = async () => {
const res = await getEnterprisePageInfo(companyId);
if (res?.code === 200) {
enterpriseInfo.value = res.data
}
}
</script>
<style lang="scss" scoped>
.background-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 383px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: -1;
}
.base-info {
max-width: 520px;
width: 520px;
margin-left: 16px;
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论