Skip to content

R
risk-monitor
提交 2d832f9c authored 作者: 刘宇琪's avatar 刘宇琪
浏览文件
操作

刘宇琪 修改科技具体 人物概览页

上级 4e216d87
显示空白字符变更
内嵌 并排
正在显示 包含 818 行增加 和 831 行删除
src/api/characterPage/characterPage.js
浏览文件 @ 2d832f9c
......@@ -99,7 +99,7 @@ export function getCharacterResume(params) {
export function getCharacterView(params) {
return request({
method: 'GET',
url: `/api/personHomepage/option/${params.personId}/${params.year}`,
url: `/api/personHomepage/option/`,
params,
})
}
......@@ -142,3 +142,61 @@ export function getCharacterRelatedEntity(params) {
params,
})
}
// 获取人物教育履历
/**
* @param {personId}
* @header token
*/
export function getCharacterReducationResume(params) {
return request({
method: 'GET',
url: `/api/personHomepage/educationResume/${params.personId}`,
params,
})
}
export async function getFindingsReport(personId, params = {}) {
const queryParts = []
Object.entries(params).forEach(([key, value]) => {
if (value === undefined || value === null || value === '') return
if (Array.isArray(value)) {
value.forEach(v => {
queryParts.push(`${encodeURIComponent(key)}=${encodeURIComponent(v)}`)
})
} else {
queryParts.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
}
})
const queryString = queryParts.join('&')
const url = queryString
? `/api/personHomepage/findingsReport/${personId}?${queryString}`
: `/api/personHomepage/findingsReport/${personId}`
return request(url, { method: 'GET' })
}
/**
* 获取创新主体列表（大学/实验室/企业）
* @param {Object} params - 请求参数
* @param {string} params.arealist - 科技领域ID
* @param {number} params.currentPage - 当前页码（从0开始）
* @param {string} params.keywords - 搜索关键词
* @param {number} params.pageSize - 每页条数
* @param {string} params.subjectTypeId - 主体类型ID
* @returns {Promise} 返回列表数据
*/
export async function getSubjectList(params) {
return request('/api/innovateSubject/findListBySubjectTypeId', {
method: 'GET',
params
})
}
export function getareaType(params) {
return request({
method: 'GET',
url: `/api/commonDict/areaType`,
params
})
}
\ No newline at end of file
src/views/characterPage/components/techLeader/components/characterRelationships/assets/icon-circle.svg 0 → 100644
浏览文件 @ 2d832f9c
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
<rect id="icon-圆形布局 1" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
<path id="矢量 423" d="M13.81 6.6C13.67 5.97 13.39 5.41 13.04 4.85C13.18 4.64 13.25 4.36 13.25 4.15C13.25 3.38 12.62 2.75 11.85 2.75C11.57 2.75 11.36 2.82 11.15 2.96C10.59 2.61 10.03 2.4 9.4 2.19C9.33 1.49 8.7 1 8 1C7.3 1 6.74 1.56 6.6 2.19C5.97 2.4 5.41 2.61 4.85 2.96C4.64 2.82 4.36 2.75 4.15 2.75C3.38 2.75 2.75 3.38 2.75 4.15C2.75 4.43 2.82 4.64 2.96 4.85C2.61 5.41 2.4 5.97 2.19 6.6C1.56 6.74 1 7.3 1 8C1 8.7 1.56 9.26 2.19 9.4C2.33 10.03 2.61 10.59 2.96 11.15C2.82 11.36 2.75 11.64 2.75 11.85C2.75 12.62 3.38 13.25 4.15 13.25C4.43 13.25 4.64 13.18 4.85 13.04C5.41 13.39 5.97 13.6 6.6 13.81C6.67 14.51 7.3 15 8 15C8.7 15 9.26 14.44 9.4 13.81C10.03 13.67 10.59 13.39 11.15 13.04C11.36 13.18 11.64 13.25 11.85 13.25C12.62 13.25 13.25 12.62 13.25 11.85C13.25 11.57 13.18 11.36 13.04 11.15C13.39 10.59 13.6 10.03 13.81 9.4C14.51 9.33 15 8.7 15 8C15 7.3 14.44 6.74 13.81 6.6L13.81 6.6ZM12.55 10.66C12.34 10.52 12.13 10.45 11.85 10.45C11.08 10.45 10.45 11.08 10.45 11.85C10.45 12.13 10.52 12.34 10.66 12.55C10.24 12.76 9.82 12.97 9.33 13.11C9.12 12.62 8.63 12.2 8 12.2C7.44 12.2 6.88 12.55 6.67 13.11C6.18 12.97 5.76 12.83 5.34 12.55C5.48 12.34 5.55 12.13 5.55 11.85C5.55 11.08 4.92 10.45 4.15 10.45C3.87 10.45 3.66 10.52 3.45 10.66C3.24 10.24 3.03 9.82 2.89 9.33C3.45 9.12 3.8 8.56 3.8 8C3.8 7.44 3.45 6.88 2.96 6.74C3.1 6.25 3.24 5.83 3.52 5.41C3.73 5.55 3.94 5.62 4.22 5.62C4.99 5.62 5.62 4.99 5.62 4.22C5.62 3.94 5.55 3.73 5.41 3.52C5.83 3.31 6.25 3.1 6.74 2.96C6.88 3.45 7.44 3.8 8 3.8C8.56 3.8 9.12 3.45 9.33 2.89C9.82 3.03 10.24 3.17 10.66 3.45C10.52 3.66 10.45 3.87 10.45 4.15C10.45 4.92 11.08 5.55 11.85 5.55C12.13 5.55 12.34 5.48 12.55 5.34C12.76 5.76 12.97 6.18 13.11 6.67C12.55 6.88 12.2 7.44 12.2 8C12.2 8.56 12.55 9.12 13.04 9.26C12.97 9.75 12.76 10.24 12.55 10.66L12.55 10.66Z" fill="rgb(59,65,75)" fill-rule="nonzero" />
</svg>
src/views/characterPage/components/techLeader/components/characterRelationships/assets/icon-download.svg 0 → 100644
浏览文件 @ 2d832f9c
<svg viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28.000000" height="28.000000" fill="none">
<defs>
<clipPath id="clipPath_1">
<rect width="18.000000" height="15.000000" x="5.000000" y="5.000000" fill="rgb(255,255,255)" />
</clipPath>
</defs>
<rect id="导出数据" width="28.000000" height="28.000000" x="0.000000" y="0.000000" />
<g id="容器 742" customFrame="url(#clipPath_1)">
<rect id="容器 742" width="18.000000" height="15.000000" x="5.000000" y="5.000000" />
<rect id="矩形 347" width="2.000000" height="6.000000" x="13.000000" y="5.000000" fill="rgb(132,136,142)" />
<path id="矢量 600" d="M18 11L10 11L14 16L18 11Z" fill="rgb(132,136,142)" fill-rule="evenodd" />
<path id="矢量 601" d="M22 19.9996L22.9999 15.0012L19.9999 12.0011L18.9999 12L21.0003 15.001L17.9999 15.0015L16.9998 17.9987L14 17.9996L11.0001 17.9997L9.99998 15.002L7.00017 15.0028L8.99996 12.0008L8 12.0004L5 15.0023L6.00016 20L22 19.9996Z" fill="rgb(132,136,142)" fill-rule="evenodd" />
</g>
</svg>
src/views/characterPage/components/techLeader/components/characterRelationships/assets/icon-expand.svg 0 → 100644
浏览文件 @ 2d832f9c
<svg viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28.000000" height="28.000000" fill="none">
<defs>
<clipPath id="clipPath_0">
<rect width="20.000000" height="20.000000" x="4.000000" y="4.000000" fill="rgb(255,255,255)" />
</clipPath>
</defs>
<rect id="数据源" width="28.000000" height="28.000000" x="0.000000" y="0.000000" />
<g id="数据库 1" clip-path="url(#clipPath_0)" customFrame="url(#clipPath_0)">
<rect id="数据库 1" width="20.000000" height="20.000000" x="4.000000" y="4.000000" />
<path id="合并" d="M10.6426 6.48828C11.6719 6.28906 12.791 6.1875 14 6.1875C15.209 6.1875 16.3281 6.28906 17.3574 6.48828C18.3867 6.6875 19.2012 6.96094 19.7988 7.30469C20.3965 7.64844 20.6973 8.01953 20.6973 8.42188L20.6973 9.53906C20.6973 9.94141 20.3984 10.3125 19.7988 10.6563C19.1992 11 18.3867 11.2715 17.3574 11.4727C16.3281 11.6699 15.209 11.7695 14 11.7695C12.791 11.7695 11.6719 11.668 10.6426 11.4688C9.61328 11.2695 8.79883 10.9961 8.20117 10.6523C7.60156 10.3086 7.30273 9.9375 7.30273 9.53516L7.30273 8.41797C7.30273 8.01563 7.60156 7.64453 8.20117 7.30078C8.80078 6.96094 9.61328 6.68945 10.6426 6.48828ZM10.1387 12.5078C11.3359 12.7578 12.623 12.8828 14 12.8828C15.377 12.8828 16.6641 12.7578 17.8613 12.5078C19.0586 12.2578 20.0039 11.8887 20.6953 11.4004L20.6953 12.8828C20.6953 13.2852 20.3965 13.6563 19.7969 14C19.1973 14.3438 18.3848 14.6152 17.3555 14.8164C16.3281 15.0156 15.209 15.1152 14 15.1152C12.791 15.1152 11.6719 15.0137 10.6426 14.8145C9.61328 14.6152 8.79883 14.3418 8.20117 13.998C7.60156 13.6543 7.30273 13.2832 7.30273 12.8809L7.30273 11.3984C7.99609 11.8906 8.94141 12.2598 10.1387 12.5078ZM10.1387 15.8574C11.3359 16.1074 12.623 16.2324 14 16.2324C14.6624 16.2324 15.3041 16.2035 15.9249 16.1456C14.2088 16.4715 12.8443 17.3161 12.2805 18.3935C11.7114 18.3432 11.1654 18.2672 10.6426 18.166C9.61328 17.9668 8.80078 17.6934 8.20117 17.3496C7.60156 17.0059 7.30273 16.6348 7.30273 16.2324L7.30273 14.75C7.9961 15.2383 8.94141 15.6074 10.1387 15.8574ZM17.5 16C17.3281 16 17.1581 16.005 16.9902 16.0148C17.2857 15.9695 17.5761 15.917 17.8613 15.8574C19.0586 15.6074 20.0039 15.2383 20.6953 14.75L20.6953 16.2324C20.6953 16.3614 20.6646 16.4872 20.6031 16.6099C19.7199 16.2251 18.6512 16 17.5 16ZM13 19.5C13 18.1193 15.0147 17 17.5 17C19.9853 17 22 18.1193 22 19.5C22 20.8807 19.9853 22 17.5 22C15.0147 22 13 20.8807 13 19.5ZM17.5 18C18.3284 18 19 18.6716 19 19.5C19 20.3284 18.3284 21 17.5 21C16.6716 21 16 20.3284 16 19.5C16 18.6716 16.6716 18 17.5 18ZM12 19.5L12 19.4861C11.3572 19.4236 10.7367 19.33 10.1387 19.2051C8.94141 18.9551 7.99609 18.5859 7.30273 18.0957L7.30273 19.5781C7.30273 19.9805 7.60156 20.3516 8.20117 20.6953C8.79883 21.0391 9.61328 21.3125 10.6426 21.5117C11.4872 21.6752 12.3923 21.7729 13.3579 21.8027C12.5123 21.1873 12 20.3817 12 19.5Z" fill="rgb(132,136,142)" fill-rule="evenodd" />
</g>
</svg>
src/views/characterPage/components/techLeader/components/characterRelationships/assets/icon-force.svg 0 → 100644
浏览文件 @ 2d832f9c
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
<rect id="拓扑 1" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
<path id="矢量 422" d="M12.7727 11.142C12.4273 11.142 12.107 11.2495 11.8433 11.4327L9.42154 9.6837C9.65586 9.26852 9.78974 8.7891 9.78974 8.27836C9.78974 8.18728 9.7853 8.09723 9.77697 8.00833L12.257 6.54325C12.6396 6.77576 13.1451 6.72689 13.4758 6.39622C13.8641 6.00791 13.8641 5.37835 13.4758 4.99004C13.0875 4.60173 12.4579 4.60173 12.0696 4.99004C11.7835 5.27612 11.7085 5.69309 11.844 6.04812L9.63655 7.35217C9.40869 6.68522 8.9416 6.12922 8.33762 5.78637L8.77881 3.58047C8.81046 3.5835 8.84253 3.58519 8.87497 3.58519C9.42413 3.58519 9.8693 3.14002 9.8693 2.59087C9.8693 2.04173 9.42413 1.59656 8.87497 1.59656C8.32582 1.59656 7.88065 2.04173 7.88065 2.59087C7.88065 2.87182 7.99736 3.12535 8.18469 3.30617L7.73951 5.53213C7.48164 5.45587 7.2087 5.41473 6.9261 5.41473C6.388 5.41473 5.88464 5.56327 5.45458 5.8214L4.08134 4.61294C4.32918 4.12086 4.24801 3.50548 3.83714 3.09461C3.32457 2.58205 2.49355 2.58205 1.98098 3.09461C1.46841 3.60717 1.46842 4.4382 1.98098 4.95078C2.43973 5.40952 3.15341 5.45735 3.66574 5.09492L4.93964 6.21596C4.39895 6.73684 4.06247 7.46826 4.06247 8.27836C4.06247 9.15881 4.45994 9.94631 5.0851 10.4716L3.95324 11.6792C3.74531 11.5408 3.49572 11.4602 3.22724 11.4602C2.50236 11.4602 1.91474 12.0478 1.91474 12.7727C1.91474 13.4975 2.50236 14.0852 3.22724 14.0852C3.95212 14.0852 4.53974 13.4975 4.53974 12.7727C4.53974 12.5477 4.48308 12.3359 4.38332 12.1508L5.62251 10.8288C6.01351 11.029 6.45662 11.142 6.9261 11.142C7.76819 11.142 8.52534 10.7785 9.04931 10.1999L11.3976 11.8958C11.2358 12.149 11.142 12.4499 11.142 12.7727C11.142 13.6733 11.8721 14.4034 12.7727 14.4034C13.6733 14.4034 14.4034 13.6733 14.4034 12.7727C14.4034 11.8721 13.6733 11.142 12.7727 11.142L12.7727 11.142Z" fill="rgb(59,65,75)" fill-rule="nonzero" />
</svg>
src/views/characterPage/components/techLeader/components/characterRelationships/assets/icon-star.svg 0 → 100644
浏览文件 @ 2d832f9c
<svg viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28.000000" height="28.000000" fill="none">
<rect id="收藏" width="28.000000" height="28.000000" x="0.000000" y="0.000000" />
<path id="星形 2" d="M15.9534 11.0113C15.9936 11.1349 16.1088 11.2186 16.2388 11.2186L21.6363 11.2188C21.9269 11.2188 22.0478 11.5907 21.8127 11.7615L17.446 14.9343C17.3409 15.0107 17.2969 15.1461 17.3371 15.2697L19.0048 20.4031C19.0946 20.6795 18.7783 20.9094 18.5432 20.7385L14.1763 17.5661C14.0712 17.4897 13.9288 17.4897 13.8237 17.5661L9.45683 20.7385C9.22171 20.9094 8.90539 20.6795 8.99518 20.4031L10.6629 15.2697C10.7031 15.1461 10.6591 15.0107 10.554 14.9343L6.18734 11.7615C5.95224 11.5907 6.07307 11.2188 6.36368 11.2188L11.7612 11.2186C11.8912 11.2186 12.0064 11.1349 12.0466 11.0113L13.7147 5.87799C13.8045 5.60161 14.1955 5.60161 14.2853 5.87799L15.9534 11.0113Z" fill="rgb(132,136,142)" fill-rule="evenodd" />
</svg>
src/views/characterPage/components/techLeader/components/characterRelationships/assets/icon-tree.svg 0 → 100644
浏览文件 @ 2d832f9c
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
<rect id="绿洲_拓扑图 1" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
<path id="矢量 422" d="M15.0147 9.88449L14.1867 9.88449L14.1867 8.65516C14.1867 7.53912 13.312 6.63116 12.2368 6.63116L8.37334 6.63116L8.37334 5.08449L9.2317 5.08449C9.42605 5.08449 9.58222 4.94394 9.58222 4.74957L9.58222 2.34115C9.58222 2.11642 9.40148 1.92004 9.17669 1.92004L6.76829 1.92004C6.57396 1.92004 6.41778 2.09179 6.41778 2.28616L6.41778 4.69459C6.41778 4.91931 6.59853 5.08449 6.82329 5.08449L7.62667 5.08449L7.62667 6.63116L3.59268 6.63116C2.62816 6.63116 1.81334 7.45731 1.81334 8.43519L1.81334 9.88449L0.930314 9.88449C0.735986 9.88449 0.58667 10.0572 0.58667 10.2515L0.58667 12.66C0.58667 12.8847 0.760554 13.0489 0.985319 13.0489L3.39371 13.0489C3.58806 13.0489 3.75111 12.9093 3.75111 12.7149L3.75111 10.3066C3.75111 10.0818 3.56351 9.88451 3.33874 9.88451L2.52445 9.88451L2.52445 8.43521C2.52445 7.84276 3.01364 7.34227 3.59268 7.34227L7.62667 7.34227L7.62667 9.88449L6.76829 9.88449C6.57396 9.88449 6.41778 10.0572 6.41778 10.2515L6.41778 12.66C6.41778 12.8847 6.59853 13.0489 6.82329 13.0489L9.2317 13.0489C9.42605 13.0489 9.58222 12.9093 9.58222 12.7149L9.58222 10.3066C9.58222 10.0818 9.40148 9.88451 9.1767 9.88451L8.37334 9.88451L8.37334 7.34227L12.2368 7.34227C12.9199 7.34227 13.4756 7.93123 13.4756 8.65516L13.4756 9.88449L12.6063 9.88449C12.4119 9.88449 12.2489 10.0572 12.2489 10.2515L12.2489 12.66C12.2489 12.8847 12.4365 13.0489 12.6613 13.0489L15.0697 13.0489C15.264 13.0489 15.4133 12.9093 15.4133 12.7149L15.4133 10.3066C15.4133 10.0818 15.2395 9.88449 15.0147 9.88449Z" fill="rgb(59,65,75)" fill-rule="nonzero" />
</svg>
src/views/characterPage/components/techLeader/components/characterRelationships/index.vue
浏览文件 @ 2d832f9c
......@@ -5,13 +5,17 @@
v-for="(item, index) in list"
:key="index"
class="headerItem"
:class="{ active: item === activeIndex }"
@click="activeIndex = item"
>{{ item }}</span
:class="{ active: item.value === activeIndex }"
@click="handleChangeLayout(item.value)"
>
<img :src="item.icon" :alt="item.label" />
</span>
</div>
<div class="headerBtnBox">
<img src="./assets/icon-expand.svg" alt="" class="btn-icon" />
<img src="./assets/icon-download.svg" alt="" class="btn-icon" />
<img src="./assets/icon-star.svg" alt="" class="btn-icon" />
</div>
<div class="headerBtnBox"><img src="./assets/下载按钮.png" alt="" /><img src="./assets/收藏按钮.png" alt="" /></div>
<!-- 主要内容，人物关系图 -->
<div class="mainBox">
<div class="graph" id="relGraph"></div>
</div>
......@@ -19,422 +23,303 @@
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from "vue";
import * as echarts from "echarts";
import {getCharacterGlobalInfo, getCharacterRelation } from "@/api/characterPage/characterPage.js";
import Center from "./assets/img1.png";
import P1 from "./assets/img2.png";
import P2 from "./assets/img3.png";
import P3 from "./assets/img4.png";
import P4 from "./assets/img5.png";
import P5 from "./assets/img6.png";
import P6 from "./assets/img7.png";
import P7 from "./assets/img8.png";
import P8 from "./assets/img9.png";
import P9 from "./assets/img10.png";
import P10 from "./assets/img11.png";
import P11 from "./assets/img12.png";
import PS from "./assets/img13.png";
import { id } from "@kangc/v-md-editor";
import 'default-passive-events';
import { useRoute } from 'vue-router';
const route = useRoute();
const personId = ref(route.query.personId || "Y000064");
// const nodes = [
// {
// id: "c",
// name: "埃隆·马斯克",
// category: 0,
// symbolSize: 80,
// symbol: `image://${Center}`,
// label: {
// show: true,
// position: "bottom",
// formatter: "{n|{b}}",
// rich: {
// n: {
// color: "rgba(5,95,194,1)",
// fontSize: 24,
// fontWeight: 700,
// fontFamily: "Microsoft YaHei",
// lineHeight: 36
// }
// }
// }
// },
// // 从三点钟方向顺时针排序
// { id: "n11", name: "贾斯汀・马斯克", category: 1, symbolSize: 80, symbol: `image://${P11}` },
// { id: "n7", name: "杰弗里·凯斯勒", category: 1, symbolSize: 80, symbol: `image://${P7}`, r: 80 },
// { id: "n6", name: "斯科特·贝森特", category: 1, symbolSize: 80, symbol: `image://${P6}` },
// { id: "n9", name: "道格·伯格姆", category: 1, symbolSize: 80, symbol: `image://${P9}` },
// { id: "n12", name: "史蒂夫・尤尔韦松", category: 1, symbolSize: 80, symbol: `image://${PS}` },
// { id: "n5", name: "拉里・埃里森", category: 1, symbolSize: 80, symbol: `image://${P5}`, r: 80 },
// { id: "n8", name: "马尔科·卢比奥", category: 1, symbolSize: 80, symbol: `image://${P8}` },
// { id: "n10", name: "艾拉・埃伦普里斯", category: 1, symbolSize: 80, symbol: `image://${P10}`, r: 80 },
// { id: "n2", name: "詹姆斯・默多克", category: 1, symbolSize: 80, symbol: `image://${P2}` },
// { id: "n1", name: "唐纳德・特朗普", category: 1, symbolSize: 80, symbol: `image://${P1}` },
// { id: "n4", name: "金博尔・马斯克", category: 1, symbolSize: 80, symbol: `image://${P4}` },
// { id: "n3", name: "格温・肖特韦尔", category: 1, symbolSize: 80, symbol: `image://${P3}`, r: 80 }
// ];
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
import * as echarts from 'echarts'
import { getCharacterGlobalInfo, getCharacterRelation } from '@/api/characterPage/characterPage.js'
import { useRoute } from 'vue-router'
const route = useRoute()
const personId = ref(route.query.personId || 'Y000064')
// const links = [
// { source: "n11", target: "c", label: { show: true, formatter: "第一任妻子" } },
// { source: "n7", target: "c", label: { show: true, formatter: "风险投资家" } },
// { source: "n6", target: "c", label: { show: true, formatter: "特斯拉董事" } },
// { source: "n9", target: "c", label: { show: true, formatter: "特斯拉董事" } },
// { source: "n12", target: "c", label: { show: true, formatter: "特斯拉董事" } },
// { source: "n5", target: "c", label: { show: true, formatter: "早期重要投资人" } },
// { source: "n8", target: "c", label: { show: true, formatter: "Boring Company 总裁" } },
// { source: "n10", target: "c", label: { show: true, formatter: "特斯拉独立董事" } },
// { source: "n2", target: "c", label: { show: true, formatter: "特斯拉董事" } },
// { source: "n1", target: "c", label: { show: true, formatter: "美国总统" } },
// { source: "n4", target: "c", label: { show: true, formatter: "马斯克弟弟" } },
// { source: "n3", target: "c", label: { show: true, formatter: "SpaceX 总裁" } }
// ];
// 处理图片代理
const getProxyUrl = (url) => {
if (!url) return "";
const urlStr = String(url);
// 排除非 http 开头（相对路径）、已经是代理链接、或者是本地链接
if (!urlStr.startsWith('http') || urlStr.includes('images.weserv.nl') || urlStr.includes('localhost') || urlStr.includes('127.0.0.1')) {
return url;
}
// 移除协议头 http:// 或 https://
const cleanUrl = urlStr.replace(/^https?:\/\//i, '');
return `https://images.weserv.nl/?url=${encodeURIComponent(cleanUrl)}`;
};
const nodes = ref([]);
const links = ref([]);
// 人物全局信息
const characterInfo = ref({});
// 人物关系
const CharacterRelation = ref([]);
const getCharacterGlobalInfoFn = async () => {
const params = {
personId: personId.value
};
try{
const res = await getCharacterGlobalInfo(params);
if (res.code === 200) {
console.log("人物全局信息", res);
if (res.data) {
characterInfo.value = res.data;
if (!url) return ''
const urlStr = String(url)
if (
!urlStr.startsWith('http') ||
urlStr.includes('images.weserv.nl') ||
urlStr.includes('localhost') ||
urlStr.includes('127.0.0.1')
) {
return url
}
const cleanUrl = urlStr.replace(/^https?:\/\//i, '')
return `https://images.weserv.nl/?url=${encodeURIComponent(cleanUrl)}`
}
}
const nodes = ref([])
const links = ref([])
const characterInfo = ref({})
const CharacterRelation = ref([])
const list = ref([
{
value: '圆形布局',
label: '圆形布局',
icon: new URL('./assets/icon-circle.svg', import.meta.url).href,
},
{
value: '力导向布局',
label: '力导向布局',
icon: new URL('./assets/icon-force.svg', import.meta.url).href,
},
{
value: '树形布局',
label: '树形布局',
icon: new URL('./assets/icon-tree.svg', import.meta.url).href,
},
])
const activeIndex = ref('圆形布局')
}catch(error){
let chart = null
const getCharacterGlobalInfoFn = async () => {
const params = { personId: personId.value }
try {
const res = await getCharacterGlobalInfo(params)
if (res.code === 200 && res.data) {
characterInfo.value = res.data
}
};
} catch (error) {}
}
const getCharacterRelationFn = async () => {
const params = {
personId: personId.value
};
try{
const res = await getCharacterRelation(params);
if (res.code === 200) {
console.log("人物关系", res);
if (res.data) {
CharacterRelation.value = res.data;
}
const params = { personId: personId.value }
try {
const res = await getCharacterRelation(params)
if (res.code === 200 && res.data) {
CharacterRelation.value = res.data
}
} catch (error) {}
if(CharacterRelation.value.length > 0){
const centerNode = {
id: "c",
name: characterInfo.value.name,
id: 'c',
name: characterInfo.value.name || '',
category: 0,
symbolSize: 80,
symbol: `image://${characterInfo.value.imageUrl}`,
symbolSize: 84,
symbol: `image://${getProxyUrl(characterInfo.value.imageUrl)}`,
itemStyle: {
borderColor: 'rgba(174,214,255,1)',
borderWidth: 3,
},
label: {
show: true,
position: "bottom",
formatter: "{n|{b}}",
rich: {
n: {
color: "rgba(5,95,194,1)",
position: 'bottom',
distance: 8,
formatter: '{b}',
color: 'rgba(5,95,194,1)',
fontSize: 24,
fontWeight: 700,
fontFamily: "Microsoft YaHei",
lineHeight: 36
}
}
}
fontFamily: 'Microsoft YaHei',
},
}
const newNodes = CharacterRelation.value.map((item,index) => {
return{
if (CharacterRelation.value.length > 0) {
const newNodes = CharacterRelation.value.map((item, index) => ({
id: index,
name: item.name,
category: 1,
symbolSize: 80,
symbol: `image://${getProxyUrl(item.imageUrl)}`
}
});
newNodes.push(centerNode);
const newLinks = CharacterRelation.value.map((item,index) =>({
source:index,
target:"c",
label: {
show: true,
formatter: item.relation }
}));
nodes.value = newNodes;
links.value = newLinks;
}else{
nodes.value = [{
id: "c",
name: characterInfo.value.name,
category: 0,
symbolSize: 80,
symbol: `image://${characterInfo.value.imageUrl}`,
symbolSize: 54,
symbol: `image://${getProxyUrl(item.imageUrl)}`,
itemStyle: {
borderColor: 'rgba(174,214,255,1)',
borderWidth: 2,
},
label: {
show: true,
position: "bottom",
formatter: "{n|{b}}",
rich: {
n: {
color: "rgba(5,95,194,1)",
fontSize: 24,
fontWeight: 700,
fontFamily: "Microsoft YaHei",
lineHeight: 36
}
}
}
}];
links.value = [];
}
const el = document.getElementById("relGraph");
if (!el) return;
chart = echarts.init(el);
const setOption = () => {
const rect = el.getBoundingClientRect();
const cx = rect.width / 2;
const cy = rect.height / 2;
const radius = Math.min(cx, cy) - 140;
const dataNodes = nodes.value.map((n, i) => {
if (n.id === "c") {
return { ...n, x: cx, y: cy, fixed: true };
}
// 均匀环形分布
const idx = i - 1;
const angle = (idx / (nodes.value.length - 1)) * Math.PI * 2;
const rLocal = radius + (n.r || 0);
const x = cx + rLocal * Math.cos(angle);
const y = cy + rLocal * Math.sin(angle);
return { ...n, x, y };
});
chart.setOption({
tooltip: {},
series: [
{
type: "graph",
layout: activeIndex.value === "圆形布局" ? "none" : "force",
circular: { rotateLabel: true },
force: { repulsion: 800, edgeLength: [80, 160] },
roam: true,
data: activeIndex.value === "圆形布局" ? dataNodes : nodes.value,
links: links.value,
edgeSymbol: ["none", "arrow"],
edgeSymbolSize: [4, 10],
lineStyle: { color: "rgba(174,214,255,1)", width: 2, opacity: 0.8 },
edgeLabel: {
show: true,
position: "middle",
distance: -18,
formatter: ({ data }) => data?.label?.formatter || "",
color: "rgb(5, 95, 194)",
fontSize: 12,
position: 'bottom',
distance: 5,
color: 'rgba(59,65,75,1)',
fontSize: 21,
fontWeight: 400,
fontFamily: "Microsoft YaHei",
lineHeight: 24,
backgroundColor: "rgba(231, 243, 255, 1)",
borderRadius: 24,
padding: [0, 12]
fontFamily: 'Microsoft YaHei',
},
label: { show: true, position: "bottom", color: "rgb(59,65,75)", fontSize: 16 },
itemStyle: { color: "rgba(5,95,194,1)" },
emphasis: { focus: "adjacency" }
}
]
});
};
setOption();
}catch(error){
relationName: item.relation || '',
}))
newNodes.push(centerNode)
const newLinks = CharacterRelation.value.map((item, index) => ({
source: index,
target: 'c',
label: { show: true, formatter: item.relation },
lineStyle: {
color: 'rgba(174,214,255,1)',
width: 1,
},
}))
nodes.value = newNodes
links.value = newLinks
} else {
nodes.value = [centerNode]
links.value = []
}
}
};
const list = ref(["圆形布局", "力导向布局", "树形布局"]);
const activeIndex = ref("圆形布局");
let chart;
const handleChangeLayout = (value) => {
activeIndex.value = value
renderChart()
}
const renderChart = () => {
const el = document.getElementById('relGraph')
if (!el) return
onMounted(() => {
getCharacterGlobalInfoFn();
getCharacterRelationFn();
const el = document.getElementById("relGraph");
if (!el) return;
chart = echarts.init(el);
if (!chart) {
chart = echarts.init(el)
}
const setOption = () => {
const rect = el.getBoundingClientRect();
const cx = rect.width / 2;
const cy = rect.height / 2;
const radius = Math.min(cx, cy) - 140;
const rect = el.getBoundingClientRect()
const cx = rect.width / 2
const cy = rect.height / 2
const radius = Math.min(cx, cy) - 140
const dataNodes = nodes.value.map((n, i) => {
if (n.id === "c") {
return { ...n, x: cx, y: cy, fixed: true };
if (n.id === 'c') {
return { ...n, x: cx, y: cy, fixed: true }
}
// 均匀环形分布
const idx = i - 1;
const angle = (idx / (nodes.value.length - 1)) * Math.PI * 2;
const rLocal = radius + (n.r || 0);
const x = cx + rLocal * Math.cos(angle);
const y = cy + rLocal * Math.sin(angle);
return { ...n, x, y };
});
chart.setOption({
const total = nodes.value.length - 1
const idx = nodes.value.slice(0, i).filter((nd) => nd.id !== 'c').length
const angle = (idx / (total || 1)) * Math.PI * 2
const rLocal = radius + (n.r || 0)
const x = cx + rLocal * Math.cos(angle)
const y = cy + rLocal * Math.sin(angle)
return { ...n, x, y }
})
chart.setOption(
{
backgroundColor: 'transparent',
tooltip: {},
series: [
{
type: "graph",
layout: activeIndex.value === "圆形布局" ? "none" : "force",
circular: { rotateLabel: true },
force: { repulsion: 800, edgeLength: [80, 160] },
type: 'graph',
layout: activeIndex.value === '圆形布局' ? 'none' : 'force',
circular: { rotateLabel: false },
force: {
repulsion: activeIndex.value === '树形布局' ? 500 : 300,
edgeLength: activeIndex.value === '树形布局' ? 250 : 200,
gravity: activeIndex.value === '树形布局' ? 0.05 : 0.1,
},
roam: true,
data: activeIndex.value === "圆形布局" ? dataNodes : nodes.value,
draggable: true,
data: activeIndex.value === '圆形布局' ? dataNodes : nodes.value,
links: links.value,
edgeSymbol: ["none", "arrow"],
edgeSymbolSize: [4, 10],
lineStyle: { color: "rgba(174,214,255,1)", width: 2, opacity: 0.8 },
categories: [
{ name: '核心节点' },
{ name: '关联节点' },
],
edgeSymbol: ['none', 'arrow'],
edgeSymbolSize: [0, 8],
lineStyle: {
color: 'rgba(174,214,255,1)',
width: 1,
curveness: 0,
},
edgeLabel: {
show: true,
position: "middle",
position: 'middle',
distance: -18,
formatter: ({ data }) => data?.label?.formatter || "",
color: "rgb(5, 95, 194)",
fontSize: 12,
fontWeight: 400,
fontFamily: "Microsoft YaHei",
lineHeight: 24,
backgroundColor: "rgba(231, 243, 255, 1)",
formatter: ({ data }) => data?.label?.formatter || '',
color: 'rgba(5,95,194,1)',
fontSize: 14,
fontFamily: 'Microsoft YaHei',
backgroundColor: 'rgba(231, 243, 255, 1)',
borderRadius: 24,
padding: [0, 12]
padding: [0, 12],
},
label: { show: true, position: "bottom", color: "rgb(59,65,75)", fontSize: 16 },
itemStyle: { color: "rgba(5,95,194,1)" },
emphasis: { focus: "adjacency" }
}
]
});
};
setOption();
console.log("node1", nodes);
const onResize = () => chart && chart.resize();
window.addEventListener("resize", onResize);
watch(activeIndex, () => setOption());
label: { show: true },
emphasis: {
focus: 'adjacency',
lineStyle: { width: 2 },
},
},
],
},
true
)
}
onMounted(async () => {
await getCharacterGlobalInfoFn()
await getCharacterRelationFn()
renderChart()
const onResize = () => chart && chart.resize()
window.addEventListener('resize', onResize)
watch(activeIndex, () => renderChart())
onBeforeUnmount(() => {
window.removeEventListener("resize", onResize);
chart && chart.dispose();
});
});
window.removeEventListener('resize', onResize)
if (chart) {
chart.dispose()
chart = null
}
})
})
</script>
<style lang="scss" scoped>
* {
padding: 0;
margin: 0;
}
<style scoped lang="scss">
.character-relationships {
width: 1600px;
height: 688px;
height: 738px;
background-color: #fff;
margin: 0 auto;
position: relative;
border-radius: 4px;
border-radius: 10px;
border: 1px solid rgba(234, 236, 238, 1);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
.headerBox {
overflow: hidden;
background-image: url('./assets/bg-grid.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.headerBox {
position: absolute;
top: 14px;
right: 96px;
.headerItem {
padding: 1px 8px;
border-radius: 4px;
font-size: 16px;
font-weight: 400;
line-height: 30px;
left: 12px;
display: flex;
gap: 4px;
z-index: 10;
}
.headerItem {
width: 28px;
height: 28px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
color: rgb(59, 65, 75);
font-family: "Microsoft YaHei";
margin-right: 8px;
border: 1px solid rgb(230, 231, 232);
}
.active {
background-color: rgba(246, 250, 255, 1);
border-color: rgb(5, 95, 194);
color: rgb(5, 95, 194);
}
}
.headerBtnBox {
border-radius: 4px;
border: 1px solid rgba(234, 236, 238, 1);
background: rgba(255, 255, 255, 1);
}
.headerItem img {
width: 18px;
height: 18px;
}
.headerItem.active {
background: rgba(231, 243, 255, 1);
}
.headerBtnBox {
position: absolute;
top: 14px;
right: 12px;
img {
display: flex;
gap: 4px;
z-index: 10;
}
.btn-icon {
width: 28px;
height: 28px;
margin-right: 4px;
cursor: pointer;
}
}
.mainBox {
}
.mainBox {
width: 100%;
height: 100%;
padding-top: 42px;
.graph {
}
.graph {
width: 100%;
height: 100%;
}
}
}
</style>
\ No newline at end of file
src/views/characterPage/components/techLeader/index.vue
浏览文件 @ 2d832f9c
......@@ -15,19 +15,14 @@
<p>{{ characterInfo.description }}</p>
</div>
<div class="domain">
<p
v-for="item in characterInfo.industryList"
:key="item"
class="cl1"
:class="{
<p v-for="item in characterInfo.industryList" :key="item" class="cl1" :class="{
cl1: item.status === '1',
cl2: item.status === '2',
cl3: item.status === '3',
cl4: item.status === '4',
cl5: item.status === '5',
cl6: item.status === '6'
}"
>
}">
{{ item.industryName }}
</p>
</div>
......@@ -35,96 +30,62 @@
</div>
<!-- 科技领袖人物信息区分 -->
<div class="info-divide">
<div v-for="item in info" :key="item" :class="{ active: item === infoActive }" @click="infoActive = item">
<div v-for="item in info" :key="item" :class="{ active: item === infoActive }" style="width: 50%;" @click="infoActive = item">
{{ item }}
</div>
</div>
<!-- 人物详情 -->
<div class="info-content" v-if="infoActive === '人物详情'">
<div class="left">
<div class="left-top">
<div class="title">
<div class="box"></div>
<div class="text">科技观点</div>
<div class="btn">
<img src="./assets/下载按钮.png" alt="" />
<img src="./assets/收藏按钮.png" alt="" />
</div>
</div>
<!-- 主要内容 -->
<!-- 科技观点 -->
<AnalysisBox title="科技观点" width="1064px" height="300px" :show-all-btn="false" class="left-top">
<!-- <template #headerBtn>
<div class="num-list">
<div v-for="item in num" :key="item" :class="{ active: item === numActive }" @click="handleChangeYear(item)">
<div v-for="item in num" :key="item" :class="{ active: item === numActive }"
@click="handleChangeYear(item)">
{{ item }}
</div>
</div>
<!-- echarts 图表 -->
<div class="echarts" id="wordCloudChart">
<!-- <div class="row" v-for="(row, index) in wordCloudData" :key="index">
<span
v-for="(item, idx) in row"
:key="idx"
:style="{
color: item.color,
fontSize: item.fontSize || '16px',
fontWeight: item.fontWeight || 'normal'
}"
>
{{ item.text }}
</span>
</div> -->
</div>
</div>
<div class="left-bottom">
<div class="title">
<div class="box"></div>
<div class="text">最新动态</div>
<div class="input"><input type="checkbox" v-model="isChecked" @change="handleChange"/>只看涉华动态</div>
<div class="btn">
<img src="./assets/下载按钮.png" alt="" />
<img src="./assets/收藏按钮.png" alt="" />
</div>
</template> -->
<template #header-btn>
<el-select v-model="numActive" class="tab-select" :teleported="true" @change="handleChangeYear">
<el-option v-for="item in num" :key="item" :label="item" :value="item" />
</el-select>
</template>
<div class="echarts" id="wordCloudChart"></div>
</AnalysisBox>
<!-- 最新动态 -->
<AnalysisBox title="最新动态" width="1064px" height="1540px" :show-all-btn="false" class="left-bottom">
<template #header-btn>
<div class="check-input">
<input type="checkbox" v-model="isChecked" @change="handleChange" />
<span style="margin-left: 5px;">只看涉华动态</span>
</div>
<!-- 主要内容 -->
</template>
<div class="main">
<div v-for="item in CharacterLatestDynamic" :key="item" class="main-item">
<div class="time">
<div class="year">{{ item.time.split("-")[0] }}</div>
<div class="date">{{ item.time.split("-")[1] + "月" + item.time.split("-")[2] + "日"}}</div>
<div class="date">{{ item.time.split("-")[1] + "月" + item.time.split("-")[2] + "日" }}
</div>
</div>
<div class="image">
<img src="./assets/type1.png" alt="" v-if="item.remarks === true" /><img
src="./assets/type2.png"
alt=""
v-else
/>
<img src="./assets/type1.png" alt="" v-if="item.remarks === true" />
<img src="./assets/type2.png" alt="" v-else />
</div>
<div class="content">
<div :class="{ 'content-type1': item.remarks === true, 'content-type2': item.remarks === false }">
<p v-if="item.remarks === true" class="content-title1">
{{ item.content }}
</p>
<p v-else class="content-title2">
{{ item.title }}
</p>
<div
:class="{ 'content-type1': item.remarks === true, 'content-type2': item.remarks === false }">
<p v-if="item.remarks === true" class="content-title1">{{ item.content }}</p>
<p v-else class="content-title2">{{ item.title }}</p>
<p v-if="item.remarks === true" class="content-title-en">{{ item.econtent }}</p>
</div>
<p v-if="item.remarks === false" class="content-contentcontent">{{ item.content }}</p>
<div class="content-tag">
<div>
<span
v-for="tag in item.industryList"
:key="tag"
class="tag"
:class="{
dl1: tag === '人工智能',
dl2: tag === '量子科技',
dl3: tag === '新能源',
dl4: tag === '集成电路'
}"
@click="handleClickTag(tag)"
>{{ tag }}</span
>
<div style="display: flex; flex-wrap: wrap; gap: 8px;">
<AreaTag v-for="tag in item.industryList" :key="tag"
:tag-name="tag.industryName" @click="handleClickTag(tag.industryName)" />
</div>
<div class="origin">来源：{{ item.orgName }}</div>
</div>
......@@ -133,65 +94,57 @@
<div class="line-test"></div>
</div>
<div class="pagination">
<div class="total">{{`共 ${total} 项`}}</div>
<el-pagination
@current-change="handleCurrentChange"
:page-size="pageSize"
:current-page="currentPage"
background
layout="prev, pager, next"
:total="total"
class="custom-pagination"
/>
</div>
<div class="total">{{ `共 ${total} 项` }}</div>
<el-pagination @current-change="handleCurrentChange" :page-size="pageSize"
:current-page="currentPage" background layout="prev, pager, next" :total="total"
class="custom-pagination" />
</div>
</AnalysisBox>
</div>
<div class="right">
<div class="right-top">
<div class="title">
<div class="box"></div>
<div class="text">基本信息</div>
<div class="btn">
<img src="./assets/下载按钮.png" alt="" />
<img src="./assets/收藏按钮.png" alt="" />
</div>
</div>
<!-- 基本信息 -->
<AnalysisBox title="基本信息" width="520px" :height="boxHeight" :show-all-btn="false" class="right-top" v-if="characterBasicInfo">
<div class="main-content">
<div class="baseInfo">
<div class="baseInfo-item">
<div class="baseInfo-item-title">出生日期：</div>
<div class="baseInfo-item-content">{{characterBasicInfo.birthday}}</div>
<div class="baseInfo-item-content">{{ characterBasicInfo.birthday }}</div>
</div>
<div class="baseInfo-item">
<div class="baseInfo-item-title">国籍：</div>
<div class="baseInfo-item-content">{{characterBasicInfo.country}}</div>
<div class="baseInfo-item-content">{{ characterBasicInfo.country }}</div>
</div>
<div class="baseInfo-item">
<div class="baseInfo-item-title">教育背景：</div>
<div class="baseInfo-item-content" v-for="value in characterBasicInfo.educationList">{{ value.school +"（"+ value.major+"）"}}</div>
<div class="baseInfo-item-content" v-for="value in characterBasicInfo.educationList"
:key="value.school">
{{ value.school + "（" + value.major + "）" }}
</div>
</div>
<div class="baseInfo-item">
<div class="baseInfo-item-title">净资产：</div>
<div class="baseInfo-item-content">{{characterBasicInfo.assets}}</div>
<div class="baseInfo-item-content">{{ characterBasicInfo.assets }}</div>
</div>
<div class="baseInfo-item">
<div class="baseInfo-item-title">职业：</div>
<div class="baseInfo-item-content">{{characterBasicInfo.positionTitle}}</div>
<div class="baseInfo-item-content">{{ characterBasicInfo.positionTitle }}</div>
</div>
<div class="baseInfo-item">
<div class="baseInfo-item-title">婚姻状况：</div>
<div class="baseInfo-item-content">{{characterBasicInfo.marital}}</div>
<div class="baseInfo-item-content">{{ characterBasicInfo.marital }}</div>
</div>
<div class="baseInfo-item">
<div class="baseInfo-item-title">出生地：</div>
<div class="baseInfo-item-content">{{characterBasicInfo.birthPlace}}</div>
<div class="baseInfo-item-content">{{ characterBasicInfo.birthPlace }}</div>
</div>
</div>
<div class="company">
<div class="company-title">知名企业</div>
<div class="company-content">
<div v-for="item in characterBasicInfo.organizationList" :key="item" class="company-item">
<img :src="item.imageUrl?item.imageUrl:DefaultIcon2" alt="" />
<div v-for="item in characterBasicInfo.organizationList" :key="item.name"
class="company-item">
<img :src="item.imageUrl ? item.imageUrl : DefaultIcon2" alt="" />
<div>
<div class="company-cn">{{ item.name }}</div>
<div class="company-name">{{ item.ename }}</div>
......@@ -200,78 +153,109 @@
</div>
</div>
</div>
</AnalysisBox>
<!-- 职业履历 -->
<AnalysisBox title="职业履历" width="520px" height="1336px" :show-all-btn="false" class="right-bottom">
<template #header-btn>
<div class="resume-tabs">
<button class="resume-tab" :class="{ active: resumeType === 'career' }"
@click="switchResumeType('career')">职业履历</button>
<button class="resume-tab" :class="{ active: resumeType === 'education' }"
@click="switchResumeType('education')">教育履历</button>
</div>
<div class="right-bottom">
<div class="title">
<div class="box"></div>
<div class="text">职业履历</div>
<div class="btn">
<img src="./assets/下载按钮.png" alt="" />
<img src="./assets/收藏按钮.png" alt="" />
</div>
</div>
</template>
<div class="content-main">
<div v-for="item in CharacterResume" class="content-item">
<!-- 职业履历 -->
<template v-if="resumeType === 'career'">
<div v-for="item in currentResumeList" :key="item.startTime" class="content-item">
<img src="./assets/icon01.png" alt="" class="image01" />
<div class="content-item-time">{{ item.startTime +'-' + item.endTime}}</div>
<div class="content-item-title">{{ item.orgName +'|' + item.jobName}}</div>
<div class="content-item-time">{{ item.startTime + '-' + getendTime(item) }}</div>
<div class="content-item-title">{{ item.orgName + '|' + item.jobName }}</div>
<div class="content-item-content">{{ item.content }}</div>
<div class="content-item-door" v-if="item.door">
<img src="./assets/icon02.png" alt="" />
<span>{{ item.door }}</span>
</div>
</div>
</template>
<!-- 教育履历 -->
<template v-else>
<div v-for="(item, index) in currentResumeList" :key="index" class="content-item">
<img src="./assets/icon01.png" alt="" class="image01" />
<div class="content-item-time">{{ item.startTime + '-' + item.endTime }}</div>
<div class="content-item-title">{{ item.school+'('+item.country+')' }}</div>
<div class="content-item-content">{{ item.description }}</div>
<!-- <div class="content-item-door" v-if="item.country">
<img src="./assets/icon02.png" alt="" />
<span>{{ item.country }}</span>
</div> -->
</div>
</template>
</div>
</AnalysisBox>
</div>
</div>
<!-- 人物关系 -->
<CharacterRelationships v-if="infoActive === '人物关系'"/>
<CharacterRelationships v-if="infoActive === '人物关系'" />
<!-- 相关情况 -->
<RelevantSituation v-if="infoActive === '相关情况'"/>
<RelevantSituation v-if="infoActive === '相关情况'" />
<!-- 弹框 -->
<el-dialog
v-model="dialogVisible"
width="761px"
class="viewpoint-dialog"
:modal="false"
:draggable="true"
:lock-scroll="false"
>
<el-dialog v-model="dialogVisible" width="761px" class="viewpoint-dialog" :modal="false" :draggable="true"
:lock-scroll="false" :show-close="false">
<template #header>
<div class="viewpoint-header">
<div class="viewpoint-title">领域观点</div>
<div class="viewpoint-title">
<span class="viewpoint-tag">#{{ currentTag }}</span>
<span class="viewpoint-label">相关领域标签</span>
</div>
<div class="viewpoint-close" @click="dialogVisible = false">
<el-icon :size="16">
<Close />
</el-icon>
</div>
</div>
</template>
<div class="viewpoint-body">
<div class="viewpoint-body-title">#人工智能</div>
<div v-for="item in CharacterFieldView" class="viewpoint-item">
<!-- <img :src="item.imageUrl ? getProxyUrl(item.imageUrl) : DefaultIcon1" alt="" /> -->
<el-avatar :size="42" shape="circle" :src="item.imageUrl ? getProxyUrl(item.imageUrl) : DefaultIcon1" class="viewpoint-item-img" />
<div class="viewpoint-item-content">
<div class="viewpoint-item-name">{{ item.name }}</div>
<div class="viewpoint-item-desc">{{ item.remarks }}</div>
<div class="viewpoint-item-job">{{ item.jobName }}</div>
<div v-for="item in CharacterFieldView" :key="item.id" class="viewpoint-item">
<div class="viewpoint-avatar">
<el-avatar :size="48" shape="circle"
:src="item.imageUrl ? getProxyUrl(item.imageUrl) : DefaultIcon1" />
</div>
<div class="viewpoint-content">
<div class="viewpoint-arrow"></div>
<div class="viewpoint-card">
<div class="viewpoint-card-header">
<span class="viewpoint-name">{{ item.name }}</span>
<span class="viewpoint-job">{{ item.jobName }}</span>
</div>
<div class="viewpoint-desc">{{ item.remarks }}</div>
</div>
</div>
</div>
<div v-if="CharacterFieldView.length === 0" class="viewpoint-empty">暂无数据</div>
</div>
</el-dialog>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { ref, onMounted, computed } from "vue";
import setChart from "@/utils/setChart";
import CharacterRelationships from "./components/characterRelationships/index.vue";
import RelevantSituation from "./components/relevantSituation/index.vue";
import getWordCloudChart from "../../utils/worldCloudChart";
import { getCharacterGlobalInfo,
import {
getCharacterGlobalInfo,
getCharacterBasicInfo,
getCharacterView,
getCharacterLatestDynamic,
getCharacterResume,
getCharacterFieldView } from "@/api/characterPage/characterPage.js";
getCharacterFieldView,
getCharacterReducationResume,
getareaType
} from "@/api/characterPage/characterPage.js";
import AnalysisBox from '@/components/base/boxBackground/analysisBox.vue'
import Musk from "./assets/Musk.png";
import spaceX from "./assets/spaceX.png";
import tesla from "./assets/tesla.png";
......@@ -282,14 +266,32 @@ import img2 from "./assets/img2.png";
import img3 from "./assets/img3.png";
import img4 from "./assets/img4.png";
import img5 from "./assets/img5.png";
import AreaTag from '@/components/base/AreaTag/index.vue'
import DefaultIcon1 from '@/assets/icons/default-icon1.png'
import DefaultIcon2 from '@/assets/icons/default-icon2.png'
import { Close } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router';
const route = useRoute();
const areaList = ref([])
const personId = ref(route.query.personId || "Y000064");
const handleGetAreaType = async () => {
try {
const res = await getareaType();
console.log(" 列表", res);
if (res.code === 200 && res.data) {
areaList.value = res.data
}
} catch (error) {
console.error(" 列表error", error);
}
};
const boxHeight = computed(() => {
console.log('dddd',characterBasicInfo.value)
if(characterBasicInfo.value.organizationList==undefined) return '605px'
if(characterBasicInfo.value.organizationList.length==0) return '405px'
if(characterBasicInfo.value.organizationList.length<=2) return '505px'
return '625px'
})
// 处理图片代理
const getProxyUrl = (url) => {
if (!url) return "";
......@@ -354,7 +356,38 @@ const musk = ref({
domain: ["电动汽车", "太空探索", "可再生资源", "人工智能", "脑机接口", "超级高铁"],
imageUrl: Musk
});
const resumeType = ref('career');
const CharacterEducationResume = ref([]);
const currentResumeList = computed(() => {
return resumeType.value === 'career' ? CharacterResume.value : CharacterEducationResume.value;
});
const getendTime=(item)=>{
if(item.endTime==null){
return item.endTimeStatus==0?'至今':'未知'
}else{
return item.endTime
}
}
const getCharacterEducationResumeFn = async () => {
const params = { personId: personId.value };
try {
const res = await getCharacterReducationResume(params);
if (res.code === 200 && res.data) {
CharacterEducationResume.value = res.data;
}
} catch (error) { }
};
const switchResumeType = (type) => {
resumeType.value = type;
if (type === 'education' && CharacterEducationResume.value.length === 0) {
getCharacterEducationResumeFn();
}
};
// 获取人物全局信息
const characterInfo = ref({});
......@@ -362,7 +395,7 @@ const getCharacterGlobalInfoFn = async () => {
const params = {
personId: personId.value
};
try{
try {
const res = await getCharacterGlobalInfo(params);
if (res.code === 200) {
console.log("人物全局信息", res);
......@@ -370,7 +403,7 @@ const getCharacterGlobalInfoFn = async () => {
characterInfo.value = res.data;
}
}
}catch(error){
} catch (error) {
}
......@@ -382,7 +415,7 @@ const getCharacterBasicInfoFn = async () => {
const params = {
personId: personId.value
};
try{
try {
const res = await getCharacterBasicInfo(params);
if (res.code === 200) {
console.log("人物基本信息", res);
......@@ -390,7 +423,7 @@ const getCharacterBasicInfoFn = async () => {
characterBasicInfo.value = res.data;
}
}
}catch (error) {
} catch (error) {
console.error(error);
}
};
......@@ -399,23 +432,26 @@ const getCharacterBasicInfoFn = async () => {
const characterView = ref({});
const getCharacterViewFn = async () => {
const params = {
personId: personId.value,
year: numActive.value
personId: personId.value
};
try{
if (numActive.value !== '全部') {
params.year = numActive.value;
}
try {
const res = await getCharacterView(params);
if (res.code === 200) {
console.log("人物观点", res);
if (res.data) {
characterView.value = res.data.map(item=>{
return{
name:item.option,
value:item.count
characterView.value = res.data.map(item => {
return {
name: item.option,
value: item.count
};
});
}
}
}catch(error){
} catch (error) {
}
......@@ -427,40 +463,34 @@ const handleCharacterView = async () => {
setChart(wordCloudChart, "wordCloudChart");
};
const handleChangeYear = (item) => {
numActive.value = item;
characterView.value = [];
handleCharacterView();
};
const handleChangeYear = () => {
characterView.value = []
handleCharacterView()
}
// 获取领域观点
const CharacterFieldView = ref({});
const getCharacterFieldViewFn = async () => {
const getCharacterFieldViewFn = async (tagname) => {
const areaItem = areaList.value.find(item => item.name === tagname)
const params = {
areaId: window.sessionStorage.getItem("areaId") || "20",
};
try{
const res = await getCharacterFieldView(params);
if (res.code === 200) {
console.log("领域观点", res);
if (res.data) {
CharacterFieldView.value = res.data;
areaId: areaItem?.id || "20",
}
try {
const res = await getCharacterFieldView(params)
if (res.code === 200 && res.data) {
CharacterFieldView.value = res.data
}
}catch(error){
}
};
} catch (error) { }
}
//是否涉华
const isChecked = ref(false);
const related = ref('N');
const handleChange = event => {
if(isChecked.value){
if (isChecked.value) {
related.value = 'Y';
}else{
} else {
related.value = 'N';
}
getCharacterLatestDynamicFn();
......@@ -497,11 +527,11 @@ const getCharacterLatestDynamicFn = async () => {
pageSize: pageSize.value
};
try{
try {
const res = await getCharacterLatestDynamic(params, abortController.value.signal);
console.log("最新动态", res);
if (res.code === 200) {
if (res.data&& res.data.content) {
if (res.data && res.data.content) {
CharacterLatestDynamic.value = res.data.content.map(item => ({
title: item.title,
content: item.content,
......@@ -512,16 +542,16 @@ const getCharacterLatestDynamicFn = async () => {
remarks: item.remarks
}));
total.value = res.data.totalElements;
}else {
} else {
CharacterLatestDynamic.value = [];
total.value = 0;
}
}else {
} else {
CharacterLatestDynamic.value = [];
total.value = 0;
}
loading.value = false;
}catch (error) {
} catch (error) {
if (error.name !== "AbortError") {
console.error(error);
loading.value = false;
......@@ -536,7 +566,7 @@ const getCharacterResumeFn = async () => {
const params = {
personId: personId.value
};
try{
try {
const res = await getCharacterResume(params);
if (res.code === 200) {
console.log("人物职业履历", res);
......@@ -544,7 +574,7 @@ const getCharacterResumeFn = async () => {
CharacterResume.value = res.data;
}
}
}catch(error){
} catch (error) {
}
......@@ -553,15 +583,20 @@ const getCharacterResumeFn = async () => {
const info = ref(["人物详情", "人物关系", "相关情况"]);
const info = ref(["人物详情", "人物关系"]);
// const info = ref(["人物详情", "人物关系", "相关情况"]);
const infoActive = ref("人物详情");
const num = ref(["2025", "2024", "2023", "2022", "2021", "2020"]);
const numActive = ref("2025");
const num = ref(['全部', "2025", "2024", "2023", "2022", "2021", "2020"]);
const numActive = ref("全部");
const dialogVisible = ref(false);
const handleClickTag = tag => {
dialogVisible.value = true;
};
const currentTag = ref(null)
const handleClickTag = async (tag) => {
currentTag.value = tag
dialogVisible.value = true
await getCharacterFieldViewFn(tag)
}
const newList = ref([
{
id: 1,
......@@ -744,8 +779,9 @@ onMounted(() => {
// getCharacterViewFn();
getCharacterLatestDynamicFn();
getCharacterResumeFn();
getCharacterFieldViewFn();
// getCharacterFieldViewFn();
handleCharacterView();
handleGetAreaType()
});
</script>
......@@ -755,10 +791,12 @@ onMounted(() => {
margin: 0;
padding: 0;
}
.tech-leader {
width: 1600px;
margin: 0 auto;
padding-bottom: 50px;
.header {
width: 1600px;
height: 200px;
......@@ -769,19 +807,23 @@ onMounted(() => {
padding: 20px;
display: flex;
align-items: center;
.avatar {
width: 160px;
height: 160px;
margin-right: 24px;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.info {
flex: 1;
.name-cn {
font-size: 32px;
font-weight: 700;
......@@ -790,6 +832,7 @@ onMounted(() => {
color: rgb(59, 65, 75);
margin-bottom: 8px;
}
.name-en {
font-size: 16px;
font-weight: 400;
......@@ -798,6 +841,7 @@ onMounted(() => {
color: rgb(59, 65, 75);
margin-bottom: 6px;
}
.introduction {
font-size: 16px;
font-weight: 400;
......@@ -806,8 +850,10 @@ onMounted(() => {
color: rgb(59, 65, 75);
margin-bottom: 6px;
}
.domain {
font-size: 14px;
p {
display: inline-block;
padding: 1px 8px;
......@@ -815,31 +861,37 @@ onMounted(() => {
margin-right: 8px;
border: 1px solid;
}
.cl1 {
border-color: rgba(186, 224, 255, 1);
background-color: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1);
}
.cl2 {
border-color: rgba(217, 247, 190, 1);
background-color: rgba(246, 255, 237, 1);
color: rgba(82, 196, 26, 1);
}
.cl3 {
border-color: rgba(255, 241, 184, 1);
background-color: rgba(255, 251, 230, 1);
color: rgba(250, 173, 20, 1);
}
.cl4 {
border-color: rgba(255, 204, 199, 1);
background-color: rgba(255, 241, 240, 1);
color: rgba(255, 77, 79, 1);
}
.cl5 {
border-color: rgba(255, 241, 184, 1);
background-color: rgba(255, 251, 230, 1);
color: rgba(250, 173, 20, 1);
}
.cl6 {
border-color: rgba(255, 204, 199, 1);
background-color: rgba(255, 241, 240, 1);
......@@ -848,6 +900,7 @@ onMounted(() => {
}
}
}
.info-divide {
width: 1600px;
height: 64px;
......@@ -859,6 +912,7 @@ onMounted(() => {
display: flex;
justify-content: space-between;
align-items: center;
div {
width: 530px;
height: 54px;
......@@ -870,11 +924,14 @@ onMounted(() => {
color: rgb(59, 65, 75);
border-radius: 10px;
cursor: pointer;
&:hover {
background: rgba(231, 243, 255, 1);
}
}
.active {
width: 50%;
font-size: 24px;
font-weight: 700;
font-family: "Microsoft YaHei";
......@@ -884,62 +941,25 @@ onMounted(() => {
border: 2px solid rgba(174, 214, 255, 1);
}
}
.info-content {
width: 1600px;
height: 1856px;
margin: 16px auto;
display: flex;
.left {
width: 1064px;
height: 100%;
margin-right: 16px;
.left-top {
width: 100%;
height: 300px;
margin-bottom: 16px;
background-color: rgba(255, 255, 255, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
.title {
width: 100%;
height: 56px;
display: flex;
align-items: center;
padding: 14px 12px 16px 0;
.box {
width: 8px;
height: 20px;
background-color: rgb(5, 95, 194);
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
margin-right: 14px;
}
.text {
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 26px;
color: rgb(5, 95, 194);
}
.btn {
width: 60px;
height: 28px;
margin-left: auto;
img {
width: 28px;
height: 28px;
cursor: pointer;
}
img:first-child {
margin-right: 4px;
}
}
}
.num-list {
display: flex;
align-items: center;
padding-left: 24px;
margin-bottom: 16px;
div {
padding: 1px 8px;
line-height: 30px;
......@@ -952,12 +972,14 @@ onMounted(() => {
border-radius: 4px;
margin-right: 8px;
}
.active {
background-color: rgba(231, 243, 255, 1);
color: rgb(5, 95, 194);
border-color: rgb(5, 95, 194);
}
}
.echarts {
width: 1009px;
height: 170px;
......@@ -967,82 +989,22 @@ onMounted(() => {
flex-direction: column;
justify-content: space-between;
padding: 10px 0;
.row {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
span {
font-family: "Microsoft YaHei";
white-space: nowrap;
cursor: pointer;
transition: all 0.3s;
&:hover {
transform: scale(1.1);
text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
}
}
}
}
.left-bottom {
width: 100%;
height: 1540px;
background-color: rgba(255, 255, 255, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
.title {
width: 100%;
height: 85px;
display: flex;
align-items: center;
padding: 14px 12px 45px 0;
position: relative;
.box {
width: 8px;
height: 20px;
background-color: rgb(5, 95, 194);
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
margin-right: 14px;
}
.text {
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 26px;
color: rgb(5, 95, 194);
}
.btn {
width: 60px;
height: 28px;
margin-left: auto;
img {
width: 28px;
height: 28px;
cursor: pointer;
}
img:first-child {
margin-right: 4px;
}
}
.input {
position: absolute;
top: 15px;
right: 114px;
.check-input {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(132, 136, 142);
input {
margin-right: 8px;
}
}
}
.main {
width: 1064px;
height: 1357px;
......@@ -1050,10 +1012,12 @@ onMounted(() => {
padding-right: 50px;
position: relative;
z-index: 110;
.main-item {
width: 1014px;
margin-bottom: 40px;
display: flex;
.time {
width: 77px;
box-sizing: border-box;
......@@ -1061,13 +1025,8 @@ onMounted(() => {
display: flex;
flex-direction: column;
align-items: flex-end;
.year {
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
color: rgb(5, 95, 194);
line-height: 24px;
}
.year,
.date {
font-size: 16px;
font-weight: 700;
......@@ -1076,20 +1035,25 @@ onMounted(() => {
line-height: 24px;
}
}
.image {
margin-right: 20px;
img {
width: 24px;
height: 24px;
}
}
.content {
width: 873px;
.content-type1 {
background-color: rgba(246, 250, 255, 1);
border-radius: 10px;
border: 1px solid rgb(234, 236, 238);
padding: 12px 14px 12px 15px;
.content-title1 {
font-size: 16px;
font-weight: 700;
......@@ -1100,6 +1064,7 @@ onMounted(() => {
border-bottom: 1px solid rgb(234, 236, 238);
cursor: pointer;
}
.content-title-en {
font-size: 16px;
font-weight: 400;
......@@ -1110,6 +1075,7 @@ onMounted(() => {
cursor: pointer;
}
}
.content-type2 {
.content-title2 {
font-size: 20px;
......@@ -1121,6 +1087,7 @@ onMounted(() => {
cursor: pointer;
}
}
.content-contentcontent {
display: -webkit-box;
-webkit-box-orient: vertical;
......@@ -1135,10 +1102,13 @@ onMounted(() => {
margin-bottom: 8px;
cursor: pointer;
}
.content-tag {
width: 873px;
display: flex;
justify-content: space-between;
margin-top: 10px;
.tag {
font-size: 14px;
font-weight: 400;
......@@ -1150,26 +1120,31 @@ onMounted(() => {
border: 1px solid;
cursor: pointer;
}
.dl1 {
background-color: rgba(230, 255, 251, 1);
color: rgba(19, 168, 168, 1);
border-color: rgba(135, 232, 222, 1);
}
.dl2 {
background-color: rgba(255, 241, 240, 1);
color: rgb(206, 79, 81);
border-color: rgba(255, 163, 158, 1);
}
.dl3 {
background-color: rgba(255, 247, 230, 1);
color: rgba(250, 140, 22, 1);
border-color: rgba(255, 213, 145, 1);
}
.dl4 {
background-color: rgba(249, 240, 255, 1);
color: rgba(114, 46, 209, 1);
border-color: rgba(211, 173, 247, 1);
}
.origin {
font-size: 14px;
font-weight: 400;
......@@ -1181,6 +1156,7 @@ onMounted(() => {
}
}
}
.line-test {
position: absolute;
top: 10px;
......@@ -1190,13 +1166,7 @@ onMounted(() => {
z-index: -1;
}
}
.line {
width: 100%;
height: 1px;
background-color: rgb(234, 236, 238);
margin-top: 30px;
border: none;
}
.pagination {
width: 100%;
height: 76px;
......@@ -1206,16 +1176,19 @@ onMounted(() => {
justify-content: space-between;
align-items: center;
border-top: 1px solid rgb(234, 236, 238);
.total {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
color: rgb(59, 65, 75);
}
:deep(.custom-pagination) {
display: flex;
align-items: center;
}
:deep(.custom-pagination.el-pagination.is-background .el-pager li) {
min-width: 32px;
height: 32px;
......@@ -1229,11 +1202,13 @@ onMounted(() => {
font-weight: 400;
font-family: "Microsoft YaHei";
}
:deep(.custom-pagination.el-pagination.is-background .el-pager li.is-active) {
background-color: #fff;
color: rgba(22, 119, 255, 1);
border-color: rgba(22, 119, 255, 1);
}
:deep(.custom-pagination.el-pagination.is-background .el-pager li.is-ellipsis) {
border: none;
background-color: transparent;
......@@ -1241,6 +1216,7 @@ onMounted(() => {
min-width: 16px;
margin: 0 6px;
}
:deep(.custom-pagination.el-pagination.is-background .btn-prev),
:deep(.custom-pagination.el-pagination.is-background .btn-next) {
min-width: 32px;
......@@ -1253,6 +1229,7 @@ onMounted(() => {
font-family: "Microsoft YaHei";
margin: 0 6px;
}
:deep(.custom-pagination.el-pagination.is-background .btn-prev.is-disabled),
:deep(.custom-pagination.el-pagination.is-background .btn-next.is-disabled) {
color: rgba(95, 101, 108, 0.45);
......@@ -1262,63 +1239,29 @@ onMounted(() => {
}
}
}
.right {
width: 520px;
height: 100%;
.right-top {
width: 520px;
height: 577px;
background-color: rgba(255, 255, 255, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
margin-bottom: 16px;
.title {
width: 100%;
height: 60px;
display: flex;
align-items: center;
padding: 14px 12px 20px 0;
.box {
width: 8px;
height: 20px;
background-color: rgb(5, 95, 194);
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
margin-right: 14px;
}
.text {
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 26px;
color: rgb(5, 95, 194);
}
.btn {
width: 60px;
height: 28px;
margin-left: auto;
img {
width: 28px;
height: 28px;
cursor: pointer;
}
img:first-child {
margin-right: 4px;
}
}
}
.main-content {
width: 520px;
height: 517px;
padding: 0 48px 50px 34px;
margin-top: 16px;
.baseInfo {
width: 438px;
height: 290px;
padding-bottom: 50px;
border-bottom: 1px solid rgb(234, 236, 238);
.baseInfo-item {
display: flex;
margin-bottom: 12px;
.baseInfo-item-title {
width: 88px;
font-size: 16px;
......@@ -1327,6 +1270,7 @@ onMounted(() => {
line-height: 24px;
color: rgb(59, 65, 75);
}
.baseInfo-item-content {
font-size: 16px;
font-weight: 400;
......@@ -1336,10 +1280,11 @@ onMounted(() => {
}
}
}
.company {
width: 438px;
height: 176px;
padding-top: 19px;
.company-title {
font-size: 16px;
font-weight: 700;
......@@ -1348,12 +1293,13 @@ onMounted(() => {
color: rgb(59, 65, 75);
margin-bottom: 19px;
}
.company-content {
width: 409px;
height: 114px;
overflow: visible;
display: flex;
flex-wrap: wrap;
overflow-y: scroll;
.company-item {
width: 180px;
height: 49px;
......@@ -1361,11 +1307,13 @@ onMounted(() => {
display: flex;
align-items: center;
cursor: pointer;
img {
width: 48px;
height: 48px;
margin-right: 8px;
}
.company-cn {
width: 130px;
font-size: 16px;
......@@ -1377,6 +1325,7 @@ onMounted(() => {
overflow: hidden;
text-overflow: ellipsis;
}
.company-name {
width: 130px;
font-size: 16px;
......@@ -1389,9 +1338,11 @@ onMounted(() => {
text-overflow: ellipsis;
}
}
.company-item:nth-child(2n-1) {
margin-right: 39px;
}
.company-item:last-child {
.company-name {
width: 150px;
......@@ -1401,56 +1352,19 @@ onMounted(() => {
}
}
}
.right-bottom {
width: 520px;
height: 1263px;
background-color: rgba(255, 255, 255, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
.title {
width: 100%;
height: 80px;
display: flex;
align-items: center;
padding: 14px 12px 40px 0;
.box {
width: 8px;
height: 20px;
background-color: rgb(5, 95, 194);
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
margin-right: 14px;
}
.text {
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 26px;
color: rgb(5, 95, 194);
}
.btn {
width: 60px;
height: 28px;
margin-left: auto;
img {
width: 28px;
height: 28px;
cursor: pointer;
}
img:first-child {
margin-right: 4px;
}
}
}
.content-main {
width: 480px;
height: 1020px;
margin-left: 16px;
.content-item {
width: 454px;
margin-bottom: 60px;
margin-bottom: 16px;
margin-left: 26px;
position: relative;
.image01 {
width: 14px;
height: 12.13px;
......@@ -1458,8 +1372,8 @@ onMounted(() => {
top: 8px;
left: -26px;
}
.content-item-time {
.content-item-time {
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
......@@ -1467,6 +1381,7 @@ onMounted(() => {
color: rgb(5, 95, 194);
margin-bottom: 8px;
}
.content-item-title {
font-size: 16px;
font-weight: 700;
......@@ -1475,6 +1390,7 @@ onMounted(() => {
color: rgb(59, 65, 75);
margin-bottom: 8px;
}
.content-item-content {
font-size: 16px;
font-weight: 400;
......@@ -1483,6 +1399,7 @@ onMounted(() => {
color: rgb(95, 101, 108);
margin-bottom: 8px;
}
.content-item-door {
width: 300px;
height: 32px;
......@@ -1492,11 +1409,13 @@ onMounted(() => {
border-radius: 4px;
background-color: rgba(255, 246, 240, 1);
border: 1px solid rgba(250, 140, 22, 0.4);
img {
width: 20px;
height: 24px;
margin-right: 10px;
}
span {
font-size: 16px;
font-weight: 400;
......@@ -1512,107 +1431,190 @@ onMounted(() => {
}
}
:deep(.viewpoint-dialog) {
.viewpoint-dialog {
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
}
.viewpoint-dialog.el-dialog {
width: 761px !important;
height: 669px;
padding: 0;
border-radius: 4px;
.el-dialog__body {
padding: 0;
}
.el-dialog__header {
height: 669px !important;
max-height: 669px !important;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
overflow: hidden;
display: flex;
flex-direction: column;
}
.viewpoint-dialog .el-dialog__header {
padding: 0;
margin: 0;
position: relative;
height: 48px;
}
.el-dialog__headerbtn {
top: 50%;
transform: translateY(-50%);
right: 12px;
}
.viewpoint-header {
width: 761px;
height: 48px;
background: linear-gradient(180deg, rgba(31, 140, 252, 0.2) 0%, rgba(36, 144, 255, 0) 100%);
height: 52px;
flex-shrink: 0;
}
.viewpoint-dialog .el-dialog__body {
padding: 0;
flex: 1;
overflow: hidden;
}
.viewpoint-header {
display: flex;
justify-content: space-between;
align-items: center;
height: 52px;
padding: 0 24px;
border-bottom: 1px solid rgb(234, 236, 238);
}
.viewpoint-title {
font-size: 16px;
border-bottom: 1px solid rgba(231, 243, 255, 1);
box-sizing: border-box;
}
.viewpoint-title {
display: flex;
align-items: center;
}
.viewpoint-tag {
font-size: 18px;
font-family: 'Source Han Sans CN', 'Microsoft YaHei', sans-serif;
font-weight: 700;
font-family: "Microsoft YaHei";
color: rgba(206, 79, 81, 1);
line-height: 24px;
color: rgb(5, 95, 194);
}
.viewpoint-body {
padding: 24px 24px 35px 24px;
height: calc(669px - 48px);
box-sizing: border-box;
overflow: hidden;
.viewpoint-body-title {
font-size: 28px;
}
.viewpoint-label {
font-size: 18px;
font-family: 'Source Han Sans CN', 'Microsoft YaHei', sans-serif;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 37px;
color: rgb(59, 65, 75);
margin-bottom: 32px;
}
.viewpoint-item {
width: 713px;
min-height: 81px;
display: block;
margin-bottom: 12px;
position: relative;
padding-left: 48px;
.viewpoint-item-img {
position: absolute;
top: 0;
left: -10px;
width: 42px;
height: 42px;
}
.viewpoint-item-content {
width: 665px;
min-height: 81px;
background-image: url("./assets/bg01.png");
background-size: 100% 100%;
position: relative;
top: 0;
left: 0;
padding-left: 23px;
padding-top: 12px;
padding-bottom: 13px;
color: rgba(59, 65, 75, 1);
line-height: 24px;
}
.viewpoint-close {
width: 32px;
height: 32px;
cursor: pointer;
}
.viewpoint-body {
padding: 18px 24px 24px;
height: calc(669px - 52px);
max-height: calc(669px - 52px);
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
box-sizing: border-box;
.viewpoint-item-name {
}
.viewpoint-item {
display: flex;
gap: 8px;
align-items: flex-start;
}
.viewpoint-avatar {
flex-shrink: 0;
padding-top: 12px;
}
.viewpoint-content {
flex: 1;
display: flex;
align-items: flex-start;
}
.viewpoint-arrow {
width: 9px;
height: 72px;
flex-shrink: 0;
background: url('./assets/arrow-icon.png') no-repeat center / 100%;
}
.viewpoint-card {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px 12px;
background-color: rgba(246, 250, 255, 1);
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
}
.viewpoint-card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.viewpoint-name {
font-size: 16px;
font-family: 'Source Han Sans CN', 'Microsoft YaHei', sans-serif;
font-weight: 700;
font-family: "Microsoft YaHei";
color: rgba(59, 65, 75, 1);
line-height: 24px;
color: rgb(59, 65, 75);
margin-bottom: 5px;
}
.viewpoint-item-desc {
}
.viewpoint-job {
font-size: 16px;
font-family: 'Source Han Sans CN', 'Microsoft YaHei', sans-serif;
font-weight: 400;
font-family: "Microsoft YaHei";
color: rgba(95, 101, 108, 1);
line-height: 30px;
}
.viewpoint-desc {
font-size: 16px;
font-family: 'Source Han Sans CN', 'Microsoft YaHei', sans-serif;
font-weight: 400;
color: rgba(59, 65, 75, 1);
line-height: 24px;
color: rgb(59, 65, 75);
}
.viewpoint-item-job {
position: absolute;
top: 8px;
right: 22px;
text-align: justify;
}
.viewpoint-empty {
text-align: center;
padding: 40px 0;
color: rgba(170, 173, 177, 1);
font-size: 14px;
}
.resume-tabs {
display: flex;
flex-direction: row;
gap: 8px;
align-items: flex-start;
}
.resume-tab {
width: 90px;
height: 28px;
display: flex;
justify-content: center;
align-items: center;
padding: 1px 8px;
border-radius: 4px;
border: 1px solid rgba(230, 231, 232, 1);
background: rgba(255, 255, 255, 1);
color: rgba(59, 65, 75, 1);
font-size: 16px;
font-family: 'Microsoft YaHei', sans-serif;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 30px;
color: rgb(132, 136, 142);
}
}
}
}
cursor: pointer;
box-sizing: border-box;
}
.resume-tab.active {
background: rgba(231, 243, 255, 1);
border-color: rgba(5, 95, 194, 1);
color: rgba(5, 95, 194, 1);
}
.tab-select {
width: 120px;
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论