提交 9b312ae7 authored 作者: 张烨's avatar 张烨

master最新代码合并到zy-dev分支

<svg viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="52.000000" height="52.000000" fill="none" customFrame="#000000">
<defs>
<g id="pixso_custom_effect_0">
<effect x="0.000000" y="0.000000" visibility="visible" fill="rgb(0,0,0)" fill-opacity="0.100000001" effectType="dropShadow" stdDeviation="8" radius="0" />
</g>
<filter id="filter_0" width="52.000000" height="52.000000" x="0.000000" y="0.000000" filterUnits="userSpaceOnUse" customEffect="url(#pixso_custom_effect_0)" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feOffset dx="0.000000" dy="0.000000" in="SourceAlpha" />
<feGaussianBlur stdDeviation="2.66666675" />
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0 " />
<feBlend result="effect_dropShadow_1" in2="BackgroundImageFix" mode="normal" />
<feBlend result="shape" in="SourceGraphic" in2="effect_dropShadow_1" mode="normal" />
</filter>
<clipPath id="clipPath_0">
<rect width="16.000000" height="16.000000" x="18.000000" y="18.000000" fill="rgb(255,255,255)" />
</clipPath>
</defs>
<rect id="普通企业节点" width="36.000000" height="36.000000" x="8.000000" y="8.000000" />
<g filter="url(#filter_0)">
<circle id="椭圆 25" cx="26" cy="26" r="18" fill="rgb(246,250,255)" />
<circle id="椭圆 25" cx="26" cy="26" r="17.5" stroke="rgb(231,243,255)" stroke-width="1.000000" />
</g>
<g id="企业 " clip-path="url(#clipPath_0)" customFrame="url(#clipPath_0)">
<rect id="企业 " width="16.000000" height="16.000000" x="18.000000" y="18.000000" />
<path id="矢量 370" d="M33.4667 31.9231L32.9333 31.9231L32.9333 24.3846C32.9333 23.2 31.9733 22.2308 30.8 22.2308L27.6 22.2308L27.6 21.1538C27.6 19.9692 26.64 19 25.4667 19L21.2 19C20.0267 19 19.0667 19.9692 19.0667 21.1538L19.0667 31.9231L18.5333 31.9231C18.2347 31.9231 18 32.16 18 32.4615C18 32.7631 18.2347 33 18.5333 33L33.4667 33C33.7653 33 34 32.7631 34 32.4615C34 32.16 33.7653 31.9231 33.4667 31.9231ZM26.5333 22.2308L26.5333 23.3077L26.5333 31.9231L20.1333 31.9231L20.1333 21.1538C20.1333 20.5615 20.6133 20.0769 21.2 20.0769L25.4667 20.0769C26.0533 20.0769 26.5333 20.5615 26.5333 21.1538L26.5333 22.2308ZM31.8667 31.9231L27.6 31.9231L27.6 23.3077L30.8 23.3077C31.3867 23.3077 31.8667 23.7923 31.8667 24.3846L31.8667 31.9231ZM24.9333 22.2308L21.7333 22.2308C21.4347 22.2308 21.2 22.4677 21.2 22.7692C21.2 23.0708 21.4347 23.3077 21.7333 23.3077L24.9333 23.3077C25.232 23.3077 25.4667 23.0708 25.4667 22.7692C25.4667 22.4677 25.232 22.2308 24.9333 22.2308ZM24.9333 25.4615L21.7333 25.4615C21.4347 25.4615 21.2 25.6985 21.2 26C21.2 26.3015 21.4347 26.5385 21.7333 26.5385L24.9333 26.5385C25.232 26.5385 25.4667 26.3015 25.4667 26C25.4667 25.6985 25.232 25.4615 24.9333 25.4615ZM24.9333 28.6923L21.7333 28.6923C21.4347 28.6923 21.2 28.9292 21.2 29.2308C21.2 29.5323 21.4347 29.7692 21.7333 29.7692L24.9333 29.7692C25.232 29.7692 25.4667 29.5323 25.4667 29.2308C25.4667 28.9292 25.232 28.6923 24.9333 28.6923ZM30.2667 25.4615L29.2 25.4615C28.9013 25.4615 28.6667 25.6985 28.6667 26C28.6667 26.3015 28.9013 26.5385 29.2 26.5385L30.2667 26.5385C30.5653 26.5385 30.8 26.3015 30.8 26C30.8 25.6985 30.5653 25.4615 30.2667 25.4615ZM30.2667 28.6923L29.2 28.6923C28.9013 28.6923 28.6667 28.9292 28.6667 29.2308C28.6667 29.5323 28.9013 29.7692 29.2 29.7692L30.2667 29.7692C30.5653 29.7692 30.8 29.5323 30.8 29.2308C30.8 28.9292 30.5653 28.6923 30.2667 28.6923Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
</g>
</svg>
<svg viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="52.000000" height="52.000000" fill="none" customFrame="#000000">
<defs>
<g id="pixso_custom_effect_1">
<effect x="0.000000" y="0.000000" visibility="visible" fill="rgb(0,0,0)" fill-opacity="0.100000001" effectType="dropShadow" stdDeviation="8" radius="0" />
</g>
<filter id="filter_1" width="52.000000" height="52.000000" x="0.000000" y="0.000000" filterUnits="userSpaceOnUse" customEffect="url(#pixso_custom_effect_1)" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feOffset dx="0.000000" dy="0.000000" in="SourceAlpha" />
<feGaussianBlur stdDeviation="2.66666675" />
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0 " />
<feBlend result="effect_dropShadow_1" in2="BackgroundImageFix" mode="normal" />
<feBlend result="shape" in="SourceGraphic" in2="effect_dropShadow_1" mode="normal" />
</filter>
<clipPath id="clipPath_1">
<rect width="16.000000" height="16.000000" x="18.000000" y="18.000000" fill="rgb(255,255,255)" />
</clipPath>
</defs>
<rect id="普通企业节点" width="36.000000" height="36.000000" x="8.000000" y="8.000000" />
<g filter="url(#filter_1)">
<circle id="椭圆 25" cx="26" cy="26" r="18" fill="rgb(255,255,255)" />
<circle id="椭圆 25" cx="26" cy="26" r="17.5" stroke="rgb(230,231,232)" stroke-width="1.000000" />
</g>
<g id="企业 " clip-path="url(#clipPath_1)" customFrame="url(#clipPath_1)">
<rect id="企业 " width="16.000000" height="16.000000" x="18.000000" y="18.000000" />
<path id="矢量 370" d="M33.4667 31.9231L32.9333 31.9231L32.9333 24.3846C32.9333 23.2 31.9733 22.2308 30.8 22.2308L27.6 22.2308L27.6 21.1538C27.6 19.9692 26.64 19 25.4667 19L21.2 19C20.0267 19 19.0667 19.9692 19.0667 21.1538L19.0667 31.9231L18.5333 31.9231C18.2347 31.9231 18 32.16 18 32.4615C18 32.7631 18.2347 33 18.5333 33L33.4667 33C33.7653 33 34 32.7631 34 32.4615C34 32.16 33.7653 31.9231 33.4667 31.9231ZM26.5333 22.2308L26.5333 23.3077L26.5333 31.9231L20.1333 31.9231L20.1333 21.1538C20.1333 20.5615 20.6133 20.0769 21.2 20.0769L25.4667 20.0769C26.0533 20.0769 26.5333 20.5615 26.5333 21.1538L26.5333 22.2308ZM31.8667 31.9231L27.6 31.9231L27.6 23.3077L30.8 23.3077C31.3867 23.3077 31.8667 23.7923 31.8667 24.3846L31.8667 31.9231ZM24.9333 22.2308L21.7333 22.2308C21.4347 22.2308 21.2 22.4677 21.2 22.7692C21.2 23.0708 21.4347 23.3077 21.7333 23.3077L24.9333 23.3077C25.232 23.3077 25.4667 23.0708 25.4667 22.7692C25.4667 22.4677 25.232 22.2308 24.9333 22.2308ZM24.9333 25.4615L21.7333 25.4615C21.4347 25.4615 21.2 25.6985 21.2 26C21.2 26.3015 21.4347 26.5385 21.7333 26.5385L24.9333 26.5385C25.232 26.5385 25.4667 26.3015 25.4667 26C25.4667 25.6985 25.232 25.4615 24.9333 25.4615ZM24.9333 28.6923L21.7333 28.6923C21.4347 28.6923 21.2 28.9292 21.2 29.2308C21.2 29.5323 21.4347 29.7692 21.7333 29.7692L24.9333 29.7692C25.232 29.7692 25.4667 29.5323 25.4667 29.2308C25.4667 28.9292 25.232 28.6923 24.9333 28.6923ZM30.2667 25.4615L29.2 25.4615C28.9013 25.4615 28.6667 25.6985 28.6667 26C28.6667 26.3015 28.9013 26.5385 29.2 26.5385L30.2667 26.5385C30.5653 26.5385 30.8 26.3015 30.8 26C30.8 25.6985 30.5653 25.4615 30.2667 25.4615ZM30.2667 28.6923L29.2 28.6923C28.9013 28.6923 28.6667 28.9292 28.6667 29.2308C28.6667 29.5323 28.9013 29.7692 29.2 29.7692L30.2667 29.7692C30.5653 29.7692 30.8 29.5323 30.8 29.2308C30.8 28.9292 30.5653 28.6923 30.2667 28.6923Z" fill="rgb(59,65,75)" fill-rule="nonzero" />
</g>
</svg>
...@@ -164,4 +164,11 @@ export function getRelevantMeasures(params) { ...@@ -164,4 +164,11 @@ export function getRelevantMeasures(params) {
// url: `/api/organization/relate/news`, // url: `/api/organization/relate/news`,
// data, // data,
// }) // })
// } // }
\ No newline at end of file
export function getRuleOrg(params) {
return request({
method: 'POST',
url: `/api/organization/relate/ruleOrg`, data: params
})
}
\ No newline at end of file
<template>
<div class="news-box">
<div class="box3-header">
<div class="box3-header-left">
<div class="box3-header-icon">
<img src="@/assets/images/box3-header-icon.png" alt="" />
</div>
<div class="box3-header-title">{{ "新闻资讯" }}</div>
<div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div>
</div>
</div>
<div class="box3-main">
<div class="box3-item" v-for="(news, index) in normalizedList" :key="index"
@click="handleClickToNewsDetail(news)">
<div class="left">
<img :src="getProxyUrl(news.newsImage) || defaultImg" alt="" referrerpolicy="no-referrer"
@error="e => (e.target.src = errImg || News1)" />
</div>
<div class="right">
<div class="right-top">
<div class="title">{{ news.newsTitle || news.title }}</div>
<div class="time">
{{ news.newsDate ? news.newsDate.slice(5) : "" }} {{ news.newsOrg ? "-" + news.newsOrg : "" }}
</div>
</div>
<div class="right-footer">{{ news.newsContent || news.description }}</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { computed } from "vue";
import router from "@/router/index";
import News1 from "@/assets/images/news1.png"; // 错误图片
import defaultNew from "@/assets/images/default-icon-news.png"; // 默认图片
let { list, newsList, errImg, defaultImg } = defineProps({
list: {
type: Array,
default: () => []
},
// 兼容历史用法:部分页面使用 newsList 作为入参
newsList: {
type: Array,
default: undefined
},
defaultImg: {
type: String,
default: defaultNew
},
errImg: {
type: String,
default: ''
}
});
// 统一对外渲染数据源:优先使用 list,其次兼容 newsList
const normalizedList = computed(() => {
return (Array.isArray(list) && list.length ? list : newsList) || [];
});
// 处理图片代理
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 handleClickToNewsDetail = news => {
const route = router.resolve({
path: "/newsAnalysis",
query: {
newsId: news.newsId ?? news.id
}
});
window.open(route.href, "_blank");
};
// 查看更多新闻资讯
const handleToMoreNews = () => {
const route = router.resolve("/newsBrief");
window.open(route.href, "_blank");
};
</script>
<style lang="scss" scoped>
.news-box {
width: 792px;
height: 450px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
background: rgba(255, 255, 255, 1);
.box3-header {
height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
margin: 0 auto;
display: flex;
justify-content: space-between;
position: relative;
.box3-header-left {
display: flex;
.box3-header-icon {
margin-left: 21px;
margin-top: 16px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.box3-header-title {
margin-top: 11px;
margin-left: 20px;
height: 26px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
}
.more {
width: 49px;
height: 24px;
position: absolute;
top: 14px;
right: 27px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
cursor: pointer;
}
}
.box3-main {
height: 402px;
overflow-y: auto;
overflow-x: hidden;
padding: 6px 0;
.box3-item {
display: flex;
height: 77px;
width: 749px;
margin-left: 21px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
.left {
width: 72px;
height: 48px;
margin-top: 15px;
img {
width: 100%;
height: 100%;
border-radius: 4px;
}
}
.right {
width: 657px;
margin-left: 20px;
.right-top {
width: 657px;
display: flex;
justify-content: space-between;
&:hover {
text-decoration: underline;
color: var(--color-main-active);
.title {
color: var(--color-main-active);
}
}
.title {
margin-top: 13px;
width: 500px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.time {
width: 157px;
text-align: right;
height: 22px;
margin-top: 19px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.right-footer {
width: 657px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
}
</style>
<template>
<div class="search-wrapper">
<div class="search-main" :class="{ 'search-main-with-tabs': enableBillTypeSwitch }">
<input v-model="inputValue" :placeholder="placeholder" @keyup.enter="handleSearch" class="search-input" />
<div class="search-btn" @click="handleSearch">
<img src="@/assets/icons/search-icon.png" alt />
搜索
</div>
</div>
</div>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
searchText: {
type: String,
default: ''
},
placeholder: {
type: String,
default: ''
},
})
const emit = defineEmits(['search', 'update:searchText'])
const inputValue = computed({
get: () => props.searchText,
set: (value) => emit('update:searchText', value)
})
const handleSearch = () => {
emit('search')
}
</script>
<style lang="scss" scoped>
.search-wrapper {
width: 960px;
height: 48px;
.search-main {
display: flex;
padding-right: 3px;
align-items: center;
justify-content: space-between;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
width: 960px;
height: 48px;
background-color: rgba(255, 255, 255, 0.65);
border-radius: 10px;
border: 1px solid #fff;
&:hover {
border: 1px solid var(--color-main-active);
}
.search-input {
border: none;
outline: none;
width: 838px;
height: 48px;
background-color: transparent;
font-size: 14px;
padding: 12px 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 22px;
color: rgba(59, 65, 75, 1);
&::placeholder {
color: #a8abb2;
}
}
.search-btn {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 120px;
height: 46px;
margin-right: -3px;
border-radius: 8px;
background-color: rgb(5, 95, 194);
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 22px;
color: #fff;
img {
width: 18px;
height: 18px;
margin-right: 8px;
}
}
}
}
</style>
\ No newline at end of file
<svg viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8.000000" height="8.000000" fill="none" customFrame="#000000">
<path id="多边形 2" d="M7.4641 6L0.535898 6L4 0L7.4641 6Z" fill="rgb(255,255,255)" fill-rule="evenodd" transform="matrix(0,1,-1,0,8,0)" />
</svg>
<template>
<div class="sider-tabs-wrapper">
<div class="sider-item"
:class="{'sider-item-active': sider.active}"
v-for="sider, index in siderList" :key="index"
@click="handleClickSiderItem(sider)"
>
<div
class="sider-item-text text-primary-65-clor text-tip-1"
:class="{'sider-item-text-active': sider.active}">{{ sider.name }}</div>
<div class="sider-item-icon" v-show="sider.active">
<img src="./active-icon.svg" alt="">
</div>
</div>
</div>
</template>
<script setup>
const props = defineProps({
siderList: {
type: Array,
default: [
{
name: '分析内容1',
active: true
},
{
name: '分析内容2',
active: false
},
{
name: '分析内容3',
active: false
},
]
},
})
const emits = defineEmits(['clickSiderItem'])
const handleClickSiderItem = (sider) => {
emits('clickSiderItem', sider)
}
</script>
<style lang="scss" scoped>
.sider-tabs-wrapper {
display: flex;
flex-direction: column;
gap: 16px;
.sider-item {
padding: 4px 28px;
border-radius: 16px;
position: relative;
cursor: pointer;
display: flex;
justify-content: center;
.sider-item-icon{
position: absolute;
top: 6px;
right: 16px;
width: 8px;
height: 8px;
img{
width: 100%;
height: 100%;
}
}
}
}
.sider-item-active{
background: var(--color-main-active);
}
.sider-item-text-active {
color: rgb(255,255,255)
}
</style>
\ No newline at end of file
<template>
<div class="tip-wrapper">
<div class="icon">
<img src="./tip-icon.svg" alt="">
</div>
<div class="text text-tip-2 text-primary-50-clor">{{ `数据来源:${dataSource},数据时间:${dataTime}` }}</div>
</div>
</template>
<script setup>
const props = defineProps({
dataSource: {
type: String,
default: '美国国会官网'
},
dataTime: {
type: String,
default: '2023.1至2025.12'
},
})
</script>
<style lang="scss" scoped>
.tip-wrapper{
width: 100%;
display: flex;
gap: 8px;
justify-content: center;
align-items: center;
height: 22px;
.icon{
width: 16px;
height: 16px;
img{
width: 100%;
height: 100%;
}
}
}
</style>
\ No newline at end of file
<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" customFrame="#000000">
<rect id="容器 704" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
<circle id="椭圆 96" cx="8" cy="8" r="7" fill="rgb(230,231,232)" />
<circle id="椭圆 97" cx="8" cy="4" r="1" fill="rgb(132,136,142)" />
<path id="矩形 241" d="M6.49996 6L8.00028 6.0004C8.55256 6.0004 9.00028 6.44811 9.00028 7.00039L9.00028 10.4992C9.00028 10.7754 9.22408 10.9989 9.50033 10.9992L9.50033 10.9997C9.77657 10.9998 10.0005 11.2236 10.0005 11.4998L10.0003 11.5001C10.0002 11.7765 9.77622 12.0006 9.49978 12.0006L8.00028 12.0004L6.50033 12.0004C6.22423 12.0004 6.00064 11.7767 6.00049 11.5006L6.00021 11.5005C6.00021 11.2243 6.22418 11.0003 6.50037 11.0003L6.50037 11.0006C6.77649 11.0007 7.00042 10.7766 7.00042 10.5005L7.00017 7.50005C7.00017 7.22376 6.77644 7.00047 6.50015 7.00002L6.49946 6.99922C6.22357 6.999 6 6.77565 6 6.49976C6.00011 6.22373 6.22393 6 6.49996 6Z" fill="rgb(132,136,142)" fill-rule="evenodd" />
</svg>
<template>
<div class="color-svg" v-if="svgContent">
<div v-html="processedSvgContent" class="svg-container"></div>
</div>
<div class="color-svg-loading" v-else>
<div class="loading-spinner"></div>
</div>
</template>
<script setup lang="ts">
import { size } from 'lodash';
import { ref, computed, watch, onMounted } from 'vue';
// 组件属性
const props = defineProps({
// SVG地址
svgUrl: {
type: String,
required: true
},
// SVG颜色
color: {
type: String,
default: '#000'
}
, size: {
type: Number,
default: null
}
});
// 组件事件
const emit = defineEmits(['svg-loaded', 'svg-error']);
// 状态管理
const svgContent = ref<string>('');
const isLoading = ref<boolean>(false);
const error = ref<string>('');
// 处理后的SVG内容
const processedSvgContent = computed(() => {
if (!svgContent.value) return '';
// 替换SVG中的颜色
let processed = svgContent.value;
// 替换fill属性
processed = processed.replace(/fill="([^"]*)"/g, (match, p1) => {
// 保留透明和none值
if (p1 === 'none' || p1 === 'transparent') {
return match;
}
return `fill="${props.color}"`;
});
// 替换stroke属性
processed = processed.replace(/stroke="([^"]*)"/g, (match, p1) => {
// 保留透明和none值
if (p1 === 'none' || p1 === 'transparent') {
return match;
}
return `stroke="${props.color}"`;
});
// 替换width属性
processed = processed.replace(/width="([^"]*)"/g, (match, p1) => {
if (props.size !== null) {
return `width="${props.size}"`;
}
return match;
});
// 替换height属性
processed = processed.replace(/height="([^"]*)"/g, (match, p1) => {
if (props.size !== null) {
return `height="${props.size}"`;
}
return match;
});
console.log(processed)
return processed;
});
// 加载SVG内容
const loadSvgContent = async () => {
if (!props.svgUrl) return;
isLoading.value = true;
error.value = '';
try {
const response = await fetch(props.svgUrl);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const content = await response.text();
svgContent.value = content;
emit('svg-loaded', content);
} catch (err) {
error.value = err instanceof Error ? err.message : 'Failed to load SVG';
emit('svg-error', error.value);
console.error('Error loading SVG:', err);
} finally {
isLoading.value = false;
}
};
// 监听属性变化
watch(
() => props.svgUrl,
() => {
loadSvgContent();
}
);
watch(
() => props.color,
() => {
// 颜色变化时重新处理SVG,不需要重新加载
}
);
// 组件挂载时加载SVG
onMounted(() => {
loadSvgContent();
});
</script>
<style scoped>
.color-svg {
display: inline-block;
}
.svg-container {
display: inline-block;
width: 100%;
height: 100%;
}
.color-svg-loading {
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
}
.loading-spinner {
width: 20px;
height: 20px;
border: 2px solid #f3f3f3;
border-top: 2px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
\ No newline at end of file
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
</div> </div>
</div> </div>
<div class="news-main"> <div class="news-main">
<div class="news-item" v-for="(news, index) in newsList" :key="index" @click="handleToNewsAnalysis(news)"> <div class="news-item" v-for="(news, index) in showNewsList" :key="index" @click="handleToNewsAnalysis(news)">
<div class="left"> <div class="left">
<img :src="news[props.img] ? news[props.img] : DefaultIconNews" alt="" /> <img :src="news[props.img] ? news[props.img] : DefaultIconNews" alt="" />
</div> </div>
...@@ -29,6 +29,7 @@ ...@@ -29,6 +29,7 @@
</template> </template>
<script setup> <script setup>
import { computed } from "vue";
import DefaultIconNews from "@/assets/icons/default-icon-news.png"; import DefaultIconNews from "@/assets/icons/default-icon-news.png";
const props = defineProps({ const props = defineProps({
// 新闻列表数据 // 新闻列表数据
...@@ -54,6 +55,12 @@ const props = defineProps({ ...@@ -54,6 +55,12 @@ const props = defineProps({
default: "content" default: "content"
} }
}); });
const showNewsList = computed(() => {
return props.newsList.slice(0,5)
})
const emit = defineEmits(["item-click", "more-click"]); const emit = defineEmits(["item-click", "more-click"]);
const handleToMoreNews = () => { const handleToMoreNews = () => {
emit("more-click"); emit("more-click");
......
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
border-radius: 4px; border-radius: 4px;
border: 1px solid var(--color-primary-10); border: 1px solid var(--color-primary-10);
color: var(--color-primary-100); color: var(--color-primary-100);
margin: 10px;
} }
.img { .img {
......
<template> <template>
<el-space @click="onClick(person)"> <el-space @click="onClick(person)">
<ElAvatar :size="48" :src="person[img]" alignment="center" /> <el-avatar :size="48" :src="person[img]" alignment="center" />
<el-space :size="0" direction="vertical" alignment="flex-start"> <el-space :size="0" direction="vertical" alignment="flex-start">
<div class="text-header">{{ person[name] }}</div> <div class="text-header">{{ person[name] }}</div>
<div class="person-position">{{ person[position] }}</div> <div class="person-position">{{ person[position] }}</div>
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<script setup> <script setup>
import '@/styles/common.scss' import '@/styles/common.scss'
import { ElSpace } from 'element-plus'; import { ElSpace, ElAvatar } from 'element-plus';
const props = defineProps({ const props = defineProps({
// 新闻列表数据 // 新闻列表数据
......
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
</div> </div>
<div class="box2-main"> <div class="box2-main">
<div class="box2-main-item" v-for="(item, index) in list" :key="index" @click="handleItemClick(item, index)"> <div class="box2-main-item" v-for="(item, index) in showRiskSignalList" :key="index" @click="handleItemClick(item, index)">
<div :class="{ <div :class="{
itemLeftStatus1: item[props.riskLevel] === '特别重大', itemLeftStatus1: item[props.riskLevel] === '特别重大',
itemLeftStatus2: item[props.riskLevel] === '重大风险', itemLeftStatus2: item[props.riskLevel] === '重大风险',
...@@ -38,6 +38,7 @@ ...@@ -38,6 +38,7 @@
<script setup> <script setup>
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { computed } from "vue";
// 接收父组件传递的参数 // 接收父组件传递的参数
const props = defineProps({ const props = defineProps({
// 标题(默认“风险信号”) // 标题(默认“风险信号”)
...@@ -75,6 +76,10 @@ const props = defineProps({ ...@@ -75,6 +76,10 @@ const props = defineProps({
}); });
const showRiskSignalList = computed(() => {
return props.list.slice(0,6)
})
// 定义自定义事件,把点击事件传递给父组件 // 定义自定义事件,把点击事件传递给父组件
const emit = defineEmits(['item-click', 'more-click']); const emit = defineEmits(['item-click', 'more-click']);
...@@ -85,7 +90,6 @@ const handleItemClick = (item, index) => { ...@@ -85,7 +90,6 @@ const handleItemClick = (item, index) => {
// 点击“查看更多” // 点击“查看更多”
const handleMoreClick = () => { const handleMoreClick = () => {
emit('more-click') emit('more-click')
}; };
...@@ -202,11 +206,10 @@ const handleMoreClick = () => { ...@@ -202,11 +206,10 @@ const handleMoreClick = () => {
box-sizing: border-box; box-sizing: border-box;
padding-left: 23px; padding-left: 23px;
padding-right: 30px; padding-right: 30px;
overflow-y: auto;
width: 520px; width: 520px;
height: calc(100% - 160px); height: 313px;
border-radius: 4px; border-radius: 4px;
padding: 15px 30px 10px 23px;
.box2-main-item { .box2-main-item {
width: 463px; width: 463px;
height: 48px; height: 48px;
......
<template>
<el-space :size="16" class="text-tip-1-bold box">
<div class="color-prefix"></div>
<slot></slot>
</el-space>
</template>
<script setup lang="ts">
import '@/styles/common.scss';
import { ElSpace } from 'element-plus';
const props = defineProps({
color: {
type: String,
default: 'var(--color-primary-100)'
}
})
</script>
<style lang="scss" scoped>
.color-prefix {
width: 8px;
height: 16px;
background-color: v-bind(color);
}
.box {
color: v-bind(color);
}
</style>
\ No newline at end of file
...@@ -9,7 +9,7 @@ const companyPagesRoutes = [ ...@@ -9,7 +9,7 @@ const companyPagesRoutes = [
{ {
path: "/companyPages/:id", path: "/companyPages/:id",
name: "companyPages", name: "companyPages",
component: companyPages, component: companyPages2,
meta: { meta: {
title: "企业主页", title: "企业主页",
dynamicTitle: true dynamicTitle: true
...@@ -19,7 +19,7 @@ const companyPagesRoutes = [ ...@@ -19,7 +19,7 @@ const companyPagesRoutes = [
{ {
path: "/companyPages2/:id", path: "/companyPages2/:id",
name: "companyPages2", name: "companyPages2",
component: companyPages2, component: companyPages,
meta: { meta: {
title: "企业主页", title: "企业主页",
dynamicTitle: true dynamicTitle: true
......
...@@ -4,17 +4,39 @@ ...@@ -4,17 +4,39 @@
border-radius: 10px; border-radius: 10px;
border: 1px solid var(--bg-white-100); border: 1px solid var(--bg-white-100);
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.15);
} }
.flex-display { .flex-display {
display: flex; display: flex;
} }
.flex-display-center{
@extend .flex-display;
justify-content: center;
align-items: center;
}
.flex-display-end{
@extend .flex-display;
justify-content: flex-end;
align-items: center;
}
.flex-display-start{
@extend .flex-display;
justify-content: flex-start;
align-items: center;
}
.flex-fill { .flex-fill {
flex: 1; flex: 1;
} }
.full-width {
width: 100%;
}
// 文本超出指定行数省略号显示 // 文本超出指定行数省略号显示
@mixin text-ellipsis($line-clamp) { @mixin text-ellipsis($line-clamp) {
overflow: hidden; overflow: hidden;
...@@ -39,13 +61,13 @@ ...@@ -39,13 +61,13 @@
/***文本样式***/ /***文本样式***/
.text-base { .text-base {
color: var(--color-primary-80); color: var(--text-primary-80);
} }
//0级标题 //0级标题
.text-title-0 { .text-title-0 {
@extend .text-base; @extend .text-base;
color: var(--color-primary-90); color: var(--text-primary-90);
font-size: 32px; font-size: 32px;
} }
...@@ -63,7 +85,7 @@ ...@@ -63,7 +85,7 @@
//1级标题 //1级标题
.text-title-1 { .text-title-1 {
@extend .text-base; @extend .text-base;
color: var(--color-primary-90); color: var(--text-primary-90);
font-size: 24px; font-size: 24px;
} }
...@@ -81,7 +103,7 @@ ...@@ -81,7 +103,7 @@
//2级标题 //2级标题
.text-title-2 { .text-title-2 {
@extend .text-base; @extend .text-base;
color: var(--color-primary-90); color: var(--text-primary-90);
font-size: 20px; font-size: 20px;
line-height: 26px; line-height: 26px;
} }
...@@ -101,7 +123,7 @@ ...@@ -101,7 +123,7 @@
//3级标题 //3级标题
.text-title-3 { .text-title-3 {
@extend .text-base; @extend .text-base;
color: var(--color-primary-90); color: var(--text-primary-90);
font-size: 18px; font-size: 18px;
line-height: 24px; line-height: 24px;
} }
...@@ -148,7 +170,7 @@ ...@@ -148,7 +170,7 @@
//1级提示文字 //1级提示文字
.text-tip-1 { .text-tip-1 {
@extend .text-base; @extend .text-base;
color: var(--color-primary-90); color: var(--text-primary-90);
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
} }
...@@ -161,7 +183,7 @@ ...@@ -161,7 +183,7 @@
//2级提示文字 //2级提示文字
.text-tip-2 { .text-tip-2 {
@extend .text-base; @extend .text-base;
color: var(--color-primary-90); color: var(--text-primary-90);
font-size: 14px; font-size: 14px;
line-height: 22px; line-height: 22px;
} }
...@@ -174,7 +196,7 @@ ...@@ -174,7 +196,7 @@
//3级提示文字 //3级提示文字
.text-tip-3 { .text-tip-3 {
@extend .text-base; @extend .text-base;
color: var(--color-primary-90); color: var(--text-primary-90);
font-size: 12px; font-size: 12px;
} }
...@@ -232,34 +254,42 @@ ...@@ -232,34 +254,42 @@
background: #FFFFFF; background: #FFFFFF;
} }
// 红色
.color-red-100 { .color-red-100 {
color: rgb(206, 79, 81); color: rgb(206, 79, 81);
} }
// 红色10%背景
.bg-red-10 { .bg-red-10 {
background: rgba(206, 79, 81, 0.1); background: rgba(206, 79, 81, 0.1);
} }
// 橙色
.color-orange-100 { .color-orange-100 {
color: rgb(255, 149, 77) color: rgb(255, 149, 77)
} }
// 橙色10%背景
.bg-orange-10 { .bg-orange-10 {
background: rgba(255, 149, 77, 0.1) background: rgba(255, 149, 77, 0.1)
} }
// 黄色
.color-yellow-100 { .color-yellow-100 {
color: rgb(232, 189, 11); color: rgb(232, 189, 11);
} }
// 黄色10%背景
.bg-yellow-10 { .bg-yellow-10 {
background: rgba(232, 189, 11, 0.1); background: rgba(232, 189, 11, 0.1);
} }
// 绿色
.color-green-100 { .color-green-100 {
color: rgb(33, 129, 57); color: rgb(33, 129, 57);
} }
// 绿色10%背景
.bg-green-10 { .bg-green-10 {
background: rgba(33, 129, 57, 0.1); background: rgba(33, 129, 57, 0.1);
} }
\ No newline at end of file
...@@ -5,7 +5,7 @@ const span = 12 ...@@ -5,7 +5,7 @@ const span = 12
</script> </script>
<template> <template>
<el-row class="wrapper"> <el-row class="wrapper layout-grid-line">
<el-col :span="span"> <el-col :span="span">
<pre> <pre>
{{ `import '@/styles/common.scss'; {{ `import '@/styles/common.scss';
...@@ -25,7 +25,7 @@ const span = 12 ...@@ -25,7 +25,7 @@ const span = 12
<style lang="scss" scoped> <style lang="scss" scoped>
.wrapper { .wrapper {
background-color: rgba(0, 0, 0, 0.068); // background-color: rgba(0, 0, 0, 0.068);
padding: 10px; padding: 10px;
} }
</style> </style>
\ No newline at end of file
<script setup lang="ts">
import { ElRow, ElCol } from 'element-plus';
import '@/styles/common.scss'
import ColorSvg from '@/components/base/images/ColorSvg.vue';
const span = 12
</script>
<template>
<el-row class="wrapper layout-grid-line">
<el-col :span="span">
<pre>
{{ `import ColorSvg from '@/components/base/images/ColorSvg.vue';
<template>
<color-svg :size="64" :svg-url="'/icon/arrow-up.svg'" :color="'var(--color-orange-100)'" />
<color-svg :size="16" :svg-url="'/icon/arrow-up.svg'" :color="'var(--color-green-100)'" />
</template>
`}}
</pre>
<color-svg :size="64" :svg-url="'/icon/arrow-up.svg'" :color="'var(--color-orange-100)'" />
<color-svg :size="16" :svg-url="'/icon/arrow-up.svg'" :color="'var(--color-green-100)'" />
</el-col>
</el-row>
</template>
<style lang="scss" scoped></style>
\ No newline at end of file
<script setup lang="ts">
import { ElRow, ElCol } from 'element-plus';
import '@/styles/common.scss'
import PersonAvatar from '@/components/base/people/PersonAvatar.vue';
const span = 12
</script>
<template>
<el-row class="wrapper layout-grid-line">
<el-col :span="span">
<pre>
{{ `import PersonAvatar from '@/components/base/people/PersonAvatar.vue';
<template>
<person-avatar class="person-avatar" :person="{
name: '张三',
position: 'CEO,CTO',
avatarUrl: '/icon/美国.png'
}">
</person-avatar>
</template>
`}}
</pre>
<person-avatar class="person-avatar" :person="{
name: '张三',
position: 'CEO,CTO',
avatarUrl: '/icon/美国.png'
}">
</person-avatar>
</el-col>
</el-row>
</template>
<style lang="scss" scoped>
.person-avatar {
width: 200px;
}
</style>
\ No newline at end of file
...@@ -8,7 +8,7 @@ const span = 12 ...@@ -8,7 +8,7 @@ const span = 12
</script> </script>
<template> <template>
<el-row> <el-row class="layout-grid-line">
<el-col :span="span"> <el-col :span="span">
<pre> <pre>
{{ `import '@/styles/radio.scss'; {{ `import '@/styles/radio.scss';
......
<script setup lang="ts"> <script setup lang="ts">
import { ElTabs, ElTabPane, ElSpace, ElRow, ElCol } from 'element-plus'; import { ElTabs, ElTabPane, ElSpace, ElRow, ElCol } from 'element-plus';
import { ref } from 'vue';
import '@/styles/tabs.scss' import '@/styles/tabs.scss'
const span = 12 const span = 12
</script> </script>
<template> <template>
<el-row> <el-row :gutter="16" class="layout-grid-line">
<el-col :span="span"> <el-col :span="span">
<pre> <pre>
{{ `import '@/styles/tabs.scss'; {{ `import '@/styles/tabs.scss';
...@@ -22,6 +21,21 @@ const span = 12 ...@@ -22,6 +21,21 @@ const span = 12
<el-tab-pane label="tab3">tab3</el-tab-pane> <el-tab-pane label="tab3">tab3</el-tab-pane>
</el-tabs> </el-tabs>
</el-col> </el-col>
<el-col :span="span">
<pre>{{ `import '@/styles/tabs.scss';\n<template>
//确保父级position: relative;
<el-tabs tabPosition="left" class="tabs-nav-no-wrap left-float-nav-tabs">
</template>
`}}
</pre>
<div style="margin-left: 160px;position: relative; height: 200px;">
<el-tabs tabPosition="left" class="tabs-nav-no-wrap left-float-nav-tabs">
<el-tab-pane label="tab1">tab1</el-tab-pane>
<el-tab-pane label="tab2">tab2</el-tab-pane>
<el-tab-pane label="tab3">tab3</el-tab-pane>
</el-tabs>
</div>
</el-col>
</el-row> </el-row>
</template> </template>
......
<script setup lang="ts">
import { ElSpace, ElRow, ElCol } from 'element-plus';
import '@/styles/tabs.scss'
import ColorPrefixTitle from '@/components/base/texts/ColorPrefixTitle.vue';
import AiTipPane from '@/components/base/panes/AiTipPane.vue';
const span = 12
</script>
<template>
<el-row class="layout-grid-line">
<el-col :span="span">
<pre>
{{ `import ColorPrefixTitle from '@/components/base/texts/ColorPrefixTitle.vue';
<template>
<color-prefix-title>科技领域</color-prefix-title>
<color-prefix-title color="var(--color-yellow-100)">科技领域</color-prefix-title>
<color-prefix-title color="red">科技领域</color-prefix-title>
</template>
`}}
</pre>
<el-space direction="vertical">
<color-prefix-title>科技领域</color-prefix-title>
<color-prefix-title color="var(--color-yellow-100)">科技领域</color-prefix-title>
<color-prefix-title color="red">科技领域</color-prefix-title>
</el-space>
</el-col>
<el-col :span="span">
<pre>{{ `import AiTipPane from '@/components/base/panes/AiTipPane.vue';\n<template>
<ai-tip-pane>huidadadadadasda</ai-tip-pane>
</template>
`}}
</pre>
<ai-tip-pane>huidadadadadasda</ai-tip-pane>
</el-col>
</el-row>
</template>
<style lang="scss" scoped></style>
\ No newline at end of file
.layout-grid-line {
.el-col {
border: 1px double var(--bg-black-5);
}
}
\ No newline at end of file
<template> <template>
<el-scrollbar> <el-scrollbar>
<div class="common-page"> <div class="common-page box">
<el-space direction="vertical" :size="20" alignment="flex-start" fill> <el-space direction="vertical" :size="20" alignment="flex-start" fill>
<div class="text-title-0-show">开发样式</div> <div class="text-title-0-show">开发样式</div>
<div class="text-title-1-show">样式变量</div> <div class="text-title-1-show">样式变量</div>
...@@ -8,17 +8,28 @@ ...@@ -8,17 +8,28 @@
<div class="text-title-1-show">文字样式</div> <div class="text-title-1-show">文字样式</div>
<TextStyle /> <TextStyle />
<div class="text-title-1-show">通用样式/组件</div> <div class="text-title-1-show">通用样式/组件</div>
<el-tabs tabPosition="left"> <div style="position: relative; min-height: 300px;">
<el-tab-pane label="通用" lazy> <el-tabs tabPosition="left" class="tabs-nav-no-wrap left-float-nav-tabs">
<common-page /> <el-tab-pane label="通用" lazy>
</el-tab-pane> <common-page />
<el-tab-pane label="单选框" lazy> </el-tab-pane>
<radio-page /> <el-tab-pane label="文本" lazy>
</el-tab-pane> <text-page />
<el-tab-pane label="选项卡" lazy> </el-tab-pane>
<tabs-page /> <el-tab-pane label="图片" lazy>
</el-tab-pane> <images-page />
</el-tabs> </el-tab-pane>
<el-tab-pane label="单选框" lazy>
<radio-page />
</el-tab-pane>
<el-tab-pane label="选项卡" lazy>
<tabs-page />
</el-tab-pane>
<el-tab-pane label="人物" lazy>
<people-page />
</el-tab-pane>
</el-tabs>
</div>
</el-space> </el-space>
</div> </div>
</el-scrollbar> </el-scrollbar>
...@@ -26,12 +37,20 @@ ...@@ -26,12 +37,20 @@
<script setup> <script setup>
import "@/styles/container.scss" import "@/styles/container.scss"
import "./devStyle.scss"
import TextStyle from './textStyle.vue'; import TextStyle from './textStyle.vue';
import ConstStyle from './constStyle.vue'; import ConstStyle from './constStyle.vue';
import { ElTabs, ElTabPane, ElSpace } from "element-plus"; import { ElTabs, ElTabPane, ElSpace } from "element-plus";
import RadioPage from './RadioPage/index.vue'; import RadioPage from './RadioPage/index.vue';
import TabsPage from './TabsPage/index.vue'; import TabsPage from './TabsPage/index.vue';
import CommonPage from './CommonPage/index.vue'; import CommonPage from './CommonPage/index.vue';
import TextPage from './TextPage/index.vue';
import ImagesPage from './Images/index.vue';
import PeoplePage from './People/index.vue';
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped>
\ No newline at end of file .box {
padding-bottom: 20px;
}
</style>
\ No newline at end of file
...@@ -99,16 +99,16 @@ const tableData = ref([ ...@@ -99,16 +99,16 @@ const tableData = ref([
{name: '高亮背景色', className: 'color-bg-active'}, {name: '高亮背景色', className: 'color-bg-active'},
{name: '红色', className: 'color-red-100'}, {name: '红色', className: 'color-red-100'},
{name: '红色10%', className: 'bg-red-10'}, {name: '红色10%-背景', className: 'bg-red-10'},
{name: '橙色', className: 'color-orange-100'}, {name: '橙色', className: 'color-orange-100'},
{name: '橙色10%', className: 'bg-orange-10'}, {name: '橙色10%-背景', className: 'bg-orange-10'},
{name: '黄色', className: 'color-yellow-100'}, {name: '黄色', className: 'color-yellow-100'},
{name: '黄色10%', className: 'bg-yellow-10'}, {name: '黄色10%-背景', className: 'bg-yellow-10'},
{name: '绿色', className: 'color-green-100'}, {name: '绿色', className: 'color-green-100'},
{name: '绿色10%', className: 'bg-green-10'}, {name: '绿色10%-背景', className: 'bg-green-10'},
]) ])
</script> </script>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
/***通用页面***/ /***通用页面***/
.common-page { .common-page {
margin: 16px auto; padding: 16px 160px;
width: 1600px; // width: 1600px;
align-items: center; align-items: center;
} }
\ No newline at end of file
...@@ -25,20 +25,13 @@ ...@@ -25,20 +25,13 @@
/*定义字体*/ /*定义字体*/
.el-tabs__item:not(.disinheritance .el-tabs__item) { .el-tabs__item:not(.disinheritance .el-tabs__item) {
font-size: 20px; @extend .text-title-2;
font-family: "Source Han Sans CN-Regular"; color: var(--text-primary-80-color);
font-weight: Regular;
line-height: 26px;
height: 50px;
} }
/*激活时按钮样式*/ /*激活时按钮样式*/
.el-tabs__item.is-active:not(.disinheritance .el-tabs__item) { .el-tabs__item.is-active:not(.disinheritance .el-tabs__item) {
@extend .text-title-1-bold;
font-size: 24px;
font-family: "Source Han Sans CN-Bold";
font-weight: Bold;
color: var(--color-primary-100); color: var(--color-primary-100);
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
...@@ -48,27 +41,54 @@ ...@@ -48,27 +41,54 @@
} }
} }
/***允许tab-pane内部元素溢出***/
.tab-pane-overflow-visible {
.el-tab-pane {
overflow: visible !important;
}
// 同时确保父容器也允许溢出
.el-tabs__content {
overflow: visible !important;
}
}
/***tabs-bar左边悬浮***/ /***tabs-bar左边悬浮***/
.left-float-nav-tabs { .left-float-nav-tabs {
.el-tabs__header.is-left {
position: absolute;
left: -140px;
top: 0px;
// .el-tabs__header { .el-tabs__nav {
gap: 16px;
position: relative; }
overflow: visible;
transform: translateZ(0);
/* 双重保障 */
/* 创建新的渲染层 */ .el-tabs__active-bar {
/* 创建新的层叠上下文 */ background-color: transparent;
.el-tabs__header { right: 12px;
top: 11px;
height: 8px !important;
border-top: 6px solid transparent;
/* 顶部边框透明 */
border-bottom: 6px solid transparent;
/* 底部边框透明 */
border-left: 8px solid var(--bg-white-100);
/* 左侧边框有颜色 */
}
}
// position: absolute; .el-tabs__item.is-left {
left: 0; @extend .text-tip-1;
top: 0; color: var(--text-primary-65-color);
z-index: 999; height: 32px;
background-color: red; padding: 4px 26px 4px 28px;
// margin-left: -20px; border-radius: 16px 16px 16px 16px;
justify-content: center;
} }
// } .el-tabs__item.is-left.is-active {
color: var(--bg-white-100);
background-color: var(--color-primary-100);
}
} }
\ No newline at end of file
...@@ -174,7 +174,7 @@ ...@@ -174,7 +174,7 @@
</template> </template>
<script setup> <script setup>
import RiskSignal from "@/components/RiskSignal/RiskSignal.vue"; import RiskSignal from "@/components/base/RiskSignal/index.vue";
import { onMounted, ref, onUnmounted, nextTick, watch } from "vue"; import { onMounted, ref, onUnmounted, nextTick, watch } from "vue";
import router from "@/router/index"; import router from "@/router/index";
import setChart from "@/utils/setChart"; import setChart from "@/utils/setChart";
......
<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="矢量 1620" d="M11.6932 12.3121L9.37157 12.3121C9.37514 12.1495 9.33467 11.9889 9.25445 11.8474L5.77115 5.86676C5.44431 6.35635 4.98227 6.74044 4.44121 6.97234C3.90015 7.20425 3.30337 7.27397 2.72342 7.17305L5.71648 12.3118L3.62339 12.3118C3.4668 12.312 3.31301 12.3533 3.17743 12.4317C3.04185 12.51 2.92925 12.6226 2.85091 12.7582C2.77257 12.8938 2.73124 13.0475 2.73107 13.2041L2.73107 14.1023C2.73124 14.2589 2.77257 14.4127 2.85091 14.5483C2.92925 14.6839 3.04185 14.7965 3.17743 14.8748C3.31301 14.9531 3.4668 14.9945 3.62339 14.9946L11.6932 14.9946C11.8498 14.9944 12.0035 14.9531 12.1391 14.8748C12.2747 14.7964 12.3873 14.6838 12.4656 14.5483C12.544 14.4127 12.5853 14.2589 12.5855 14.1023L12.5855 13.2044C12.5855 13.0478 12.5443 12.8939 12.466 12.7582C12.3877 12.6225 12.2751 12.5099 12.1394 12.4316C12.0037 12.3532 11.8498 12.312 11.6932 12.3121L11.6932 12.3121ZM3.22705 1.96949C2.79606 1.96946 2.37474 2.09724 2.01638 2.33667C1.65801 2.5761 1.37869 2.91642 1.21375 3.3146C1.0488 3.71277 1.00564 4.15092 1.08972 4.57363C1.17379 4.99634 1.38133 5.38462 1.68608 5.68938C1.99084 5.99413 2.37912 6.20167 2.80183 6.28574C3.22454 6.36982 3.66269 6.32665 4.06086 6.16171C4.45904 5.99677 4.79936 5.71745 5.03879 5.35908C5.27822 5.00072 5.406 4.5794 5.40597 4.14841C5.4058 3.76598 5.30503 3.39032 5.11376 3.05915C4.9225 2.72798 4.64748 2.45296 4.31631 2.2617C3.98514 2.07043 3.60948 1.96966 3.22705 1.96949ZM3.22705 4.92756C3.07297 4.92756 2.92236 4.88188 2.79425 4.79628C2.66614 4.71068 2.56629 4.58901 2.50733 4.44666C2.44837 4.30432 2.43294 4.14768 2.463 3.99657C2.49306 3.84546 2.56725 3.70665 2.6762 3.5977C2.78515 3.48875 2.92395 3.41456 3.07507 3.3845C3.22618 3.35444 3.38282 3.36987 3.52516 3.42883C3.66751 3.48779 3.78918 3.58764 3.87478 3.71575C3.96038 3.84386 4.00606 3.99447 4.00606 4.14855C4.00587 4.28523 3.96977 4.41946 3.90136 4.5378C3.83296 4.65613 3.73466 4.75441 3.61631 4.8228C3.49797 4.89118 3.36373 4.92726 3.22705 4.92743L3.22705 4.92756ZM14.3101 4.88274L11.8948 6.26679L10.8052 4.89435L10.8052 3.39673L11.8948 2.02416L14.3101 3.40848C14.3917 3.45427 14.4856 3.47325 14.5785 3.46275C14.6715 3.45226 14.7588 3.4128 14.8281 3.34998C14.8974 3.28715 14.9452 3.20413 14.9647 3.11266C14.9843 3.02118 14.9745 2.92588 14.937 2.84022C14.8994 2.75457 14.8358 2.6829 14.7553 2.63534L12.0081 1.05968C11.9467 1.02425 11.8778 1.00397 11.807 1.00053C11.7362 0.997082 11.6656 1.01057 11.6011 1.03988C11.5366 1.06918 11.4799 1.11345 11.436 1.16902L10.362 2.52013L9.18871 2.52013C9.00972 2.52002 8.83488 2.57403 8.68714 2.67508C8.53941 2.77613 8.42568 2.9195 8.3609 3.08635L6.109 3.08635C6.23779 3.43142 6.30261 3.79707 6.30028 4.16539C6.29794 4.5337 6.22849 4.8985 6.09533 5.2419L8.36145 5.2419C8.42665 5.40889 8.54076 5.5523 8.68883 5.65336C8.8369 5.75441 9.01204 5.8084 9.19131 5.80826L10.3914 5.80826L11.436 7.1222C11.4778 7.17467 11.531 7.21702 11.5915 7.2461C11.652 7.27518 11.7183 7.29024 11.7854 7.29017C11.8634 7.28993 11.94 7.2698 12.0081 7.23168L14.7551 5.65588C14.8239 5.61728 14.8812 5.56114 14.9212 5.49319C14.9612 5.42524 14.9825 5.34789 14.9829 5.26904C14.9832 5.19018 14.9627 5.11263 14.9234 5.0443C14.884 4.97596 14.8273 4.91927 14.7589 4.88001C14.6905 4.84075 14.6129 4.82032 14.5341 4.82079C14.4552 4.82127 14.3779 4.84265 14.31 4.88274L14.3101 4.88274Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
</svg>
<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-资金管理 1" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
<path id="矢量 1620" d="M11.7086 10.5216C11.9447 10.5216 12.1365 10.7062 12.1365 10.9337C12.1365 11.1612 11.9447 11.3457 11.7086 11.3457L10.6554 11.3457L10.6554 12.0432C10.6551 12.2707 10.4632 12.4552 10.2275 12.4552C9.99168 12.4552 9.7995 12.2707 9.7995 12.0432L9.7995 11.3457L8.74632 11.3457C8.50991 11.3457 8.31836 11.1612 8.31836 10.9337C8.31836 10.7062 8.50991 10.5216 8.746 10.5216L9.7995 10.5216L9.7995 9.76022L8.74632 9.76022C8.50991 9.76022 8.31836 9.57568 8.31836 9.34818C8.31836 9.12067 8.50991 8.93613 8.746 8.93613L9.28818 8.93613L8.48477 8.04681C8.43563 7.99294 8.40209 7.9267 8.38774 7.85521C8.3734 7.78372 8.37879 7.70968 8.40334 7.64102C8.42789 7.57236 8.47067 7.51168 8.52709 7.46549C8.58441 7.41784 8.65292 7.38556 8.72617 7.3717C8.79941 7.35785 8.87498 7.36287 8.94575 7.38629C9.01652 7.40971 9.08016 7.45077 9.13068 7.50558L10.2275 8.7204L11.3239 7.5059C11.3744 7.45108 11.4381 7.41003 11.5088 7.38661C11.5796 7.36319 11.6552 7.35817 11.7284 7.37202C11.8017 7.38588 11.8702 7.41816 11.9275 7.46581C11.984 7.51193 12.0269 7.57259 12.0515 7.64127C12.0761 7.70995 12.0815 7.78404 12.0671 7.85556C12.0527 7.92708 12.0191 7.99331 11.9698 8.04713L11.1667 8.93645L11.7086 8.93645C11.9447 8.93645 12.1365 9.12099 12.1365 9.34849C12.1365 9.57599 11.9447 9.76054 11.7086 9.76054L10.6554 9.76054L10.6554 10.5216L11.7086 10.5216L11.7086 10.5216ZM10.2275 5.45522C7.76695 5.45522 5.77291 7.44958 5.77291 9.90977C5.77291 12.3703 7.76695 14.3643 10.2275 14.3643C12.6876 14.3643 14.682 12.3703 14.682 9.90977C14.682 7.44958 12.6876 5.45522 10.2275 5.45522ZM6.01886 12.7734L2.2729 12.7734L2.2729 10.8643L4.50018 10.8643C4.60094 10.8643 4.69911 10.8323 4.78061 10.7731C4.86212 10.7138 4.92278 10.6303 4.95391 10.5345C4.98504 10.4387 4.98504 10.3354 4.95391 10.2396C4.92278 10.1438 4.86211 10.0602 4.78061 10.001C4.69911 9.94174 4.60094 9.90981 4.50018 9.90977L2.2729 9.90977L2.2729 8.15977L5.13654 8.15977C5.2373 8.15972 5.33547 8.12779 5.41698 8.06854C5.49848 8.0093 5.55914 7.92578 5.59027 7.82994C5.6214 7.73411 5.6214 7.63088 5.59027 7.53504C5.55914 7.43921 5.49848 7.35569 5.41698 7.29644C5.33547 7.23719 5.2373 7.20526 5.13654 7.20522L2.2729 7.20522L2.2729 5.7734L7.26709 5.7734C7.95348 5.28046 8.7525 4.96748 9.59109 4.86308L9.59109 2.27308C9.59109 2.16138 9.56168 2.05164 9.50583 1.9549C9.44998 1.85816 9.36965 1.77783 9.27291 1.72198C9.17617 1.66612 9.06643 1.63672 8.95472 1.63672L1.95472 1.63672C1.84302 1.63672 1.73328 1.66612 1.63654 1.72198C1.5398 1.77783 1.45947 1.85816 1.40362 1.9549C1.34776 2.05164 1.31836 2.16138 1.31836 2.27308L1.31836 13.0913C1.31836 13.203 1.34776 13.3127 1.40362 13.4094C1.45947 13.5062 1.5398 13.5865 1.63654 13.6424C1.73328 13.6982 1.84302 13.7276 1.95472 13.7276L6.86777 13.7276C6.54602 13.4462 6.26082 13.1255 6.01886 12.7731L6.01886 12.7734Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
</svg>
...@@ -101,7 +101,7 @@ watch(() => props.enterpriseInfo, (newVal, oldVal) => { ...@@ -101,7 +101,7 @@ watch(() => props.enterpriseInfo, (newVal, oldVal) => {
.item-value-img { .item-value-img {
width: 8px; width: 8px;
height: 6px; height: 6px;
background-image: url(../images/Regular_polygon_11097_225086.png); background-image: url(../assets/images/Regular_polygon_11097_225086.png);
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
position: relative; position: relative;
......
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
<script setup> <script setup>
// 导入组件 // 导入组件
import AnalysisBox from '@/components/base/boxBackground/analysisBox.vue'; import AnalysisBox from '@/components/base/BoxBackground/AnalysisBox.vue';
import { ref, watch } from 'vue'; import { ref, watch } from 'vue';
import { getEnterpriseBranch, getEnterpriseKeyPerson } from '@/api/companyPages'; import { getEnterpriseBranch, getEnterpriseKeyPerson } from '@/api/companyPages';
import PersonAvatar from '@/components/base/people/PersonAvatar.vue'; import PersonAvatar from '@/components/base/people/PersonAvatar.vue';
......
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
// 导入API // 导入API
import { getEnterpriseNewDynamicPage } from '@/api/companyPages'; import { getEnterpriseNewDynamicPage } from '@/api/companyPages';
// 导入组件 // 导入组件
import AnalysisBox from '@/components/base/boxBackground/analysisBox.vue'; import AnalysisBox from '@/components/base/BoxBackground/AnalysisBox.vue';
import NewsItem from '@/components/base/newsList/NewsItem.vue'; import NewsItem from '@/components/base/newsList/NewsItem.vue';
import { ElDivider, ElSpace, ElPagination } from 'element-plus'; import { ElDivider, ElSpace, ElPagination } from 'element-plus';
// 导入Vue组合式API // 导入Vue组合式API
......
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue'; import { ref, onMounted, onUnmounted, watch } from 'vue';
import { ElRadioGroup, ElRadioButton } from 'element-plus'; import { ElRadioGroup, ElRadioButton, ElSpace } from 'element-plus';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { getSanctionList } from '@/api/companyPages'; import { getSanctionList } from '@/api/companyPages';
import AnalysisBox from '@/components/base/boxBackground/analysisBox.vue'; import AnalysisBox from '@/components/base/BoxBackground/AnalysisBox.vue';
import AiTipPane from '@/components/base/panes/AiTipPane.vue' import AiTipPane from '@/components/base/panes/AiTipPane.vue'
export interface LineDataItem { export interface LineDataItem {
...@@ -263,7 +263,9 @@ function handleStudyTypesChange() { ...@@ -263,7 +263,9 @@ function handleStudyTypesChange() {
<analysis-box title="被制裁时间轴"> <analysis-box title="被制裁时间轴">
<template v-if="lineTypes.length > 1" v-slot:header-btn> <template v-if="lineTypes.length > 1" v-slot:header-btn>
<el-radio-group class="radio-group-as-gap-btn" v-model="lineType" @change="handleStudyTypesChange"> <el-radio-group class="radio-group-as-gap-btn" v-model="lineType" @change="handleStudyTypesChange">
<el-radio-button v-for="item in lineTypes" :key="item" :label="item">{{ item }}</el-radio-button> <el-space>
<el-radio-button v-for="item in lineTypes" :key="item" :label="item">{{ item }}</el-radio-button>
</el-space>
</el-radio-group> </el-radio-group>
</template> </template>
<div class="flex-display content-box"> <div class="flex-display content-box">
......
<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue';
import * as echarts from 'echarts';
export interface GraphNode {
id: string
name: string
type: string
x: number
y: number
}
export interface GraphLink {
source: string
target: string
type: string
}
// 定义组件属性
const props = defineProps({
nodes: {
type: Array<GraphNode>,
default: () => []
}
, links: {
type: Array<GraphLink>,
default: () => []
}
});
const chartDom = ref()
let myChart = null
onMounted(async () => {
})
watch(() => props.nodes, () => {
nodeTopBottomLayout(props.nodes)
updateCharts()
})
watch(() => props.links, updateCharts)
onUnmounted(() => myChart?.dispose())
function nodeTopBottomLayout(nodes: Array<any>) {
if (nodes.length < 1) return
// 中心节点放在中间
const centerNode = nodes[0]
centerNode.x = 0
centerNode.y = 0
// 其余节点分成上下两列
const otherNodes = nodes.slice(1)
const tops = []
const bottoms = []
otherNodes.forEach((item) => {
if (item.type === 'to') {
tops.push(item)
} else {
bottoms.push(item)
}
})
// 计算每列的节点数
const topCount = tops.length
const bottomCount = bottoms.length
// 列间距
const columnSpacing = 60
// 上下列距离中心的距离
const verticalDistance = 100
let ci = (topCount - 1) / 2
// 处理上列节点
for (let i = 0; i < topCount; i++) {
const node = tops[i]
// 计算x坐标,居中排列
const offsetX = (i - ci) * columnSpacing
node.x = offsetX
node.y = -verticalDistance
}
ci = (bottomCount - 1) / 2
// 处理下列节点
for (let i = 0; i < bottomCount; i++) {
const node = bottoms[i]
// 计算x坐标,居中排列
const offsetX = (i - ci) * columnSpacing
node.x = offsetX
node.y = verticalDistance
}
}
// 辅助函数:更新图表数据
function updateCharts() {
// 销毁现有图表实例
if (myChart) {
myChart.dispose()
}
myChart = echarts.init(chartDom.value)
const ys = props.nodes.map((item) => item.y)
const minY = Math.min(...ys)
const maxY = Math.max(...ys)
myChart.setOption({
grid: {
top: 0,
bottom: 0,
left: 0,
right: 0,
},
// 关闭不必要的交互以提高性能
tooltip: {
show: false
},
// 优化渲染性能
// progressive: 500,
// progressiveThreshold: 300,
animation: false,
animationDuration: 1000,
animationEasing: 'cubicOut',
series: [{
type: 'graph',
// zoom: Math.max(1, props.nodes.length / 10.0), // 放大显示
itemStyle: {
color: '#73C0DE'
},
height: '80%',
layout: 'none',
data: props.nodes,
links: props.links,
center: [0, (minY + maxY) / 2 + 10],
nodeScaleRatio: 0,
// categories: categories,
roam: true,
label: {
show: true,
position: 'bottom',
offset: [0, -10],
formatter: '{b}',
fontSize: 14,
textBorderColor: 'rgb(255 255 255)',
// fontWeight: 'bold',
color: 'rgb(5, 95, 194)',
padding: [4, 6],
borderRadius: 4,
// 限制宽度并自动换行
width: 120, // 限制标签宽度
overflow: 'break', // 超出宽度自动换行
lineHeight: 16 // 设置行高,确保多行显示正常
},
lineStyle: {
// color: 'source',
curveness: 0,
width: 1,
color: '#AED6FF'
},
edgeSymbol: ['arrow', 'none'],
}]
})
}
</script>
<template>
<div class="flex-display content-box">
<div ref="chartDom" class="chart-container"></div>
</div>
</template>
<style lang="scss" scoped>
.content-box {
padding: 10px;
gap: 10px;
flex-direction: column;
}
.chart-container {
height: 500px;
width: 100%;
}
</style>
\ No newline at end of file
<script setup lang="ts">
import '@/styles/common.scss';
import { getSupplyAreaList, getSupplyCountryList, getSupplyList } from "@/api/companyPages/index.js";
import { onMounted, ref } from 'vue';
import { ElCheckbox, ElCheckboxGroup, ElRow, ElCol, ElMessage, ElRadioGroup, ElRadioButton } from 'element-plus';
import ColorPrefixTitle from '@/components/base/texts/ColorPrefixTitle.vue';
import GraphChart from './GraphChart.vue'
import { forEach } from 'lodash';
import AiTipPane from '@/components/base/panes/AiTipPane.vue';
import ColorSvg from '@/components/base/images/ColorSvg.vue'
import MachineImg from '../../assets/images/机械设备.svg'
import FundImg from '../../assets/images/资金管理.svg'
const CompanyImg = "/icon/company/普通企业节点.svg"
const CompanyImg2 = "/icon/company/普通企业节点2.svg"
import { getSingleSanctionEntityEquity } from '@/api/exportControlV2.0';
// 定义组件属性
const props = defineProps({
enterpriseInfo: {
type: Object,
default: {}
}
});
const supplyAreaList = ref([]);
const supplyCountryList = ref([]);
const supplyTypeList = [{
name: '上游', id: 'supply'
}, {
name: '下游', id: 'customer'
}];
const dataTypeList = ref([{
name: '供应链', id: 'supply',
icon: MachineImg
}, {
name: '股权', id: 'equity',
icon: FundImg
}])
const selectedSupplyAreas = ref([]);
const selectedSupplyCountries = ref([]);
const selectedSupplyTypes = ref([]);
const selectedDataType = ref('supply')
const nodes = ref([])
const links = ref([])
onMounted(async () => {
await initData()
await updateData()
})
async function initData() {
const { data } = await getSupplyAreaList(props.enterpriseInfo.id);
supplyAreaList.value = data ?? [];
const { data: countryData } = await getSupplyCountryList(props.enterpriseInfo.id);
supplyCountryList.value = countryData ?? [];
}
async function updateData() {
if (selectedDataType.value === 'supply') {
await updateDataSupply()
} else if (selectedDataType.value === 'equity') {
await updateDataEquity()
}
}
async function updateDataSupply() {
const params = {
arealist: selectedSupplyAreas.value ? selectedSupplyAreas.value.join(",") : null,
countrylist: selectedSupplyCountries.value ? selectedSupplyCountries.value.join(",") : null,
type: selectedSupplyTypes.value.length === 2 ? 'all' : selectedSupplyTypes.value ? selectedSupplyTypes.value : null,
id: props.enterpriseInfo.id
}
const { data } = await getSupplyList(params)
if (!data) {
ElMessage.error('获取供应链数据失败')
return
}
// 提取所有公司名称
const companyMap: Map<string, any> = new Map();
data.forEach(item => {
companyMap.set(item.orgId, { name: item.orgName, type: item.type })
companyMap.set(item.otherOrgId, { name: item.otherOrgName, type: item.type })
})
// 创建nodes数组
nodes.value = Array.from(companyMap).map(([orgId, item]) => (createNode(orgId, item.name, item.type, false)));
const linksData = []
forEach(data, item => {
const link = createLink(item.orgId, item.otherOrgId, '供应商', false)
if (item.type === 'from') {
link.source = item.otherOrgId
link.target = item.orgId
link.label.formatter = '客户'
}
linksData.push(link)
})
// 创建links数组
links.value = linksData
}
function createNode(orgId: string, orgName: string, type: string, isSanctioned: boolean) {
return {
id: orgId,
name: orgName,
type: type,
symbolSize: 50,
symbol: `image://${isSanctioned ? CompanyImg2 : CompanyImg}`,
isSanctioned
}
}
function createLink(source: string, target: string, formatter: string, isSanctioned: boolean) {
return {
source: source,
target: target,
label: {
show: true,
formatter: formatter,
color: isSanctioned ? 'rgba(255, 102, 102, 1)' : 'rgba(137, 193, 255, 1)',
backgroundColor: isSanctioned ? 'rgba(255, 102, 102, 0.2)' : 'rgba(137, 193, 255, 0.2)',
padding: [4, 4],
borderRadius: 10
},
}
}
async function updateDataEquity() {
const { data } = await getSingleSanctionEntityEquity({ orgId: props.enterpriseInfo.id, rule: true })
if (!data) {
ElMessage.error('获取股权数据失败')
return
}
const cnode = createNode(data.orgId, data.orgName, "to", false)
const linksData = []
const nodesData = [cnode]
const { parentOrgList, childrenOrgList } = data
childrenOrgList.forEach((item, i) => {
if (!item.id) item.id = i
nodesData.push(createNode(item.id, item.name, "to", item.isSanctioned))
linksData.push(createLink(cnode.id, item.id, item.description, item.isSanctioned))
})
parentOrgList.forEach((item, i) => {
if (!item.id) item.id = i
nodesData.push(createNode(item.id, item.name, "from", item.isSanctioned))
linksData.push(createLink(item.id, cnode.id, item.description, item.isSanctioned))
})
nodes.value = nodesData
links.value = linksData
console.log(nodesData, linksData)
}
async function handleOptionsChnage() {
await updateData()
}
async function handleDataTypeChange() {
await updateData()
}
</script>
<template>
<div class="flex-display box-div">
<div class="background-as-card options-pane">
<color-prefix-title>科技领域</color-prefix-title>
<el-checkbox-group class="checkbox-group" v-model="selectedSupplyAreas" @change="handleOptionsChnage">
<el-row>
<el-col v-for="item in supplyAreaList" :span="12">
<el-checkbox :label="item.name + '(' + item.num + ')'" :value="item.id" />
</el-col>
</el-row>
</el-checkbox-group>
<color-prefix-title>国家/地区</color-prefix-title>
<el-checkbox-group class="checkbox-group" v-model="selectedSupplyCountries" @change="handleOptionsChnage">
<el-row>
<el-col v-for="item in supplyCountryList" :span="12">
<el-checkbox :label="item.name + '(' + item.num + ')'" :value="item.id" />
</el-col>
</el-row>
</el-checkbox-group>
<color-prefix-title>上下游</color-prefix-title>
<el-checkbox-group class="checkbox-group" v-model="selectedSupplyTypes" @change="handleOptionsChnage">
<el-row>
<el-col v-for="item in supplyTypeList" :span="12">
<el-checkbox :label="item.name" :value="item.id" />
</el-col>
</el-row>
</el-checkbox-group>
</div>
<div class="background-as-card flex-fill">
<el-radio-group v-model="selectedDataType" class="data-type-group" @change="handleDataTypeChange">
<el-radio-button v-for="item in dataTypeList" :label="item.id" :value="item.id">
<color-svg :size="16" :svg-url="item.icon"
:color="item.id === selectedDataType ? 'var(--bg-white-100)' : 'var(--color-primary-100)'">
</color-svg>
<span class="text-title-3">
{{ item.name }}
</span>
</el-radio-button>
</el-radio-group>
<graph-chart :nodes="nodes" :links="links" />
<ai-tip-pane v-if="enterpriseInfo.id === '914403001922038216'">
华为构建了覆盖全球的复杂供应链网络,以自身为核心,辐射芯片、显示、摄像头等关键领域。其供应链深度扎根中国,同时整合美国高通、韩国三星、日本索尼等国际顶尖供应商,形成多元化供应格局。面对外部技术封锁,华为通过扶持海思等子公司强化垂直整合,并积极拓展本土替代资源,在保持技术领先的同时增强供应链韧性,展现出卓越的全球资源调配与风险管控能力。
</ai-tip-pane>
</div>
</div>
</template>
<style lang="css" scoped>
.options-pane {
width: 360px;
padding-top: 16px;
margin-right: 16px;
}
.chart-box {
padding: 10px 0px;
background-color: var(--bg-white-100);
}
.checkbox-group {
padding: 0px 25px;
margin-bottom: 20px;
}
.data-type-group {
padding: 10px 16px;
top: 16px;
}
</style>
\ No newline at end of file
...@@ -4,9 +4,9 @@ ...@@ -4,9 +4,9 @@
</div> </div>
<el-scrollbar> <el-scrollbar>
<div class="common-page"> <div class="common-page">
<el-space wrap :size="16" fill> <el-space wrap :size="16" fill class="full-width">
<title-pane :enterprise-info="enterpriseInfo"></title-pane> <title-pane :enterprise-info="enterpriseInfo"></title-pane>
<el-tabs stretch class="tabs-header-as-card tabs-nav-no-wrap tabs-bar-as-btn"> <el-tabs stretch class="tabs-header-as-card tabs-nav-no-wrap tabs-bar-as-btn tab-pane-overflow-visible">
<el-tab-pane label="企业详情"> <el-tab-pane label="企业详情">
<div class="flex-display"> <div class="flex-display">
<news-pane :enterprise-info="enterpriseInfo" /> <news-pane :enterprise-info="enterpriseInfo" />
...@@ -17,8 +17,7 @@ ...@@ -17,8 +17,7 @@
<operating-pages :enterprise-info="enterpriseInfo" /> <operating-pages :enterprise-info="enterpriseInfo" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane lazy label="供应链 / 股权"> <el-tab-pane lazy label="供应链 / 股权">
<div class="flex-display"> <supply-chain :enterprise-info="enterpriseInfo" />
</div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</el-space> </el-space>
...@@ -33,6 +32,7 @@ import TitlePane from './component/TitlePane.vue'; ...@@ -33,6 +32,7 @@ import TitlePane from './component/TitlePane.vue';
import NewsPane from './component/DetailsPages/NewsPane.vue'; import NewsPane from './component/DetailsPages/NewsPane.vue';
import BaseInfo from './component/DetailsPages/BaseInfo.vue'; import BaseInfo from './component/DetailsPages/BaseInfo.vue';
import OperatingPages from './component/OperatingPages/index.vue'; import OperatingPages from './component/OperatingPages/index.vue';
import SupplyChain from './component/SupplyChain/index.vue';
import '@/styles/tabs.scss' import '@/styles/tabs.scss'
import '@/styles/container.scss' import '@/styles/container.scss'
import { ElScrollbar, ElSpace, ElTabs, ElTabPane } from 'element-plus'; import { ElScrollbar, ElSpace, ElTabs, ElTabPane } from 'element-plus';
......
...@@ -114,7 +114,7 @@ ...@@ -114,7 +114,7 @@
</template> </template>
<script setup> <script setup>
import RiskSignal from "@/components/RiskSignal/RiskSignal.vue"; import RiskSignal from "@/components/base/RiskSignal/index.vue";
import { ref, onMounted, computed } from "vue"; import { ref, onMounted, computed } from "vue";
import router from "@/router"; import router from "@/router";
import { getCoopRestrictionTrends, getCoopRestrictionSignals } from "@/api/coopRestriction/coopRestriction.js"; import { getCoopRestrictionTrends, getCoopRestrictionSignals } from "@/api/coopRestriction/coopRestriction.js";
......
...@@ -64,7 +64,8 @@ ...@@ -64,7 +64,8 @@
</div> </div>
</div> --> </div> -->
<div class="home-main-header-item-box"> <div class="home-main-header-item-box">
<div class="item" v-for="(item, index) in govInsList" :key="index" @click="handleToInstitution(item)"> <div class="item" v-for="(item, index) in govInsList" :key="index"
@click="handleToInstitution(item)">
<div class="item-left"> <div class="item-left">
<img :src="item.img ? item.img : DefaultIcon2" alt="" /> <img :src="item.img ? item.img : DefaultIcon2" alt="" />
</div> </div>
...@@ -122,7 +123,8 @@ ...@@ -122,7 +123,8 @@
}" v-for="(tag, index) in item.industryList" :key="index"> }" v-for="(tag, index) in item.industryList" :key="index">
{{ tag.industryName }} {{ tag.industryName }}
</div> --> </div> -->
<AreaTag v-for="(tag, index) in item.industryList" :key="index" :tagName="tag.industryName"> <AreaTag v-for="(tag, index) in item.industryList" :key="index"
:tagName="tag.industryName">
</AreaTag> </AreaTag>
</div> </div>
<div class="box1-main-right-center"> <div class="box1-main-right-center">
...@@ -185,16 +187,17 @@ ...@@ -185,16 +187,17 @@
<div class="text">{{ "查看更多" }}</div> <div class="text">{{ "查看更多" }}</div>
</div> </div>
</div> --> </div> -->
<RiskSignal :list="warningList" @item-click="handleClickToDetail" @more-click="handleToMoreRiskSignal" <RiskSignal :list="warningList" @item-click="handleClickToDetail"
riskLevel="signalLevel" postDate="signalTime" name="signalTitle"> @more-click="handleToMoreRiskSignal" riskLevel="signalLevel" postDate="signalTime"
name="signalTitle">
</RiskSignal> </RiskSignal>
</div> </div>
<DivideHeader id="position2" class="divide2" :titleText="'资讯要闻'"></DivideHeader> <DivideHeader id="position2" class="divide2" :titleText="'资讯要闻'"></DivideHeader>
<div class="center-center"> <div class="center-center">
<NewsList :newsList="newsList" @item-click="handleToNewsAnalysis" @more-click="handleToMoreNews" /> <NewsList :newsList="newsList" @item-click="handleToNewsAnalysis" @more-click="handleToMoreNews" />
<!-- <NewsList :newsList="newsList" /> --> <!-- <NewsList :newsList="newsList" /> -->
<MessageBubble :messageList="messageList" @person-click="handleClickPerson" @info-click="handleGetMessage" <MessageBubble :messageList="messageList" @person-click="handleClickPerson"
imageUrl="img" @more-click="handleToSocialDetail" /> @info-click="handleGetMessage" imageUrl="img" @more-click="handleToSocialDetail" />
</div> </div>
<DivideHeader id="position3" class="divide3" :titleText="'数据总览'"></DivideHeader> <DivideHeader id="position3" class="divide3" :titleText="'数据总览'"></DivideHeader>
<div class="center-footer"> <div class="center-footer">
...@@ -209,7 +212,8 @@ ...@@ -209,7 +212,8 @@
<div class="box5-selectbox"> <div class="box5-selectbox">
<el-select @change="handleBox5YearChange" v-model="box5SelectedYear" placeholder="选择时间" <el-select @change="handleBox5YearChange" v-model="box5SelectedYear" placeholder="选择时间"
style="width: 120px"> style="width: 120px">
<el-option v-for="item in box5YearList" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in box5YearList" :key="item.value" :label="item.label"
:value="item.value" />
</el-select> </el-select>
</div> </div>
</div> </div>
...@@ -227,7 +231,8 @@ ...@@ -227,7 +231,8 @@
<div class="box6-selectbox"> <div class="box6-selectbox">
<el-select @change="handleBox6YearChange" v-model="box6SelectedYear" placeholder="选择时间" <el-select @change="handleBox6YearChange" v-model="box6SelectedYear" placeholder="选择时间"
style="width: 120px"> style="width: 120px">
<el-option v-for="item in box6YearList" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in box6YearList" :key="item.value" :label="item.label"
:value="item.value" />
</el-select> </el-select>
</div> </div>
</div> </div>
...@@ -243,7 +248,8 @@ ...@@ -243,7 +248,8 @@
<div class="header-title">{{ "关键行政令" }}</div> <div class="header-title">{{ "关键行政令" }}</div>
</div> </div>
<div class="box7-main"> <div class="box7-main">
<div class="box7-item" v-for="(item, index) in keyDecreeList" :key="index" @click="handleKeyDecree(item)"> <div class="box7-item" v-for="(item, index) in keyDecreeList" :key="index"
@click="handleKeyDecree(item)">
<div class="icon"> <div class="icon">
<img src="./assets/images/warning.png" alt="" /> <img src="./assets/images/warning.png" alt="" />
</div> </div>
...@@ -306,9 +312,9 @@ ...@@ -306,9 +312,9 @@
</div> </div>
<div class="select-main"> <div class="select-main">
<div class="checkbox-group"> <div class="checkbox-group">
<el-checkbox v-for="type in decreeTypeList" :key="type.id" v-model="checkedDecreeType" <el-checkbox v-for="type in decreeTypeList" :key="type.id"
:label="type.typeId" style="width: 180px" class="filter-checkbox" v-model="checkedDecreeType" :label="type.typeId" style="width: 180px"
@change="handleChangeCheckedDecreeType"> class="filter-checkbox" @change="handleChangeCheckedDecreeType">
{{ type.typeName }} {{ type.typeName }}
</el-checkbox> </el-checkbox>
</div> </div>
...@@ -321,8 +327,9 @@ ...@@ -321,8 +327,9 @@
</div> </div>
<div class="select-main"> <div class="select-main">
<div class="checkbox-group"> <div class="checkbox-group">
<el-checkbox v-for="cate in govInsList" :key="cate.id" v-model="checkedGovIns" :label="cate.id" <el-checkbox v-for="cate in govInsList" :key="cate.id" v-model="checkedGovIns"
style="width: 180px" class="filter-checkbox" @change="handleChangeCheckedGovIns"> :label="cate.id" style="width: 180px" class="filter-checkbox"
@change="handleChangeCheckedGovIns">
{{ cate.name }} {{ cate.name }}
</el-checkbox> </el-checkbox>
</div> </div>
...@@ -349,14 +356,29 @@ ...@@ -349,14 +356,29 @@
</div> </div>
<div class="select-main"> <div class="select-main">
<div class="checkbox-group"> <div class="checkbox-group">
<el-checkbox v-for="time in pubTime" :key="time.id" v-model="activePubTime" :label="time.id" <el-checkbox v-for="time in pubTime" :key="time.id" v-model="activePubTime"
style="width: 100px" class="filter-checkbox" :label="time.id" style="width: 100px" class="filter-checkbox"
@change="checked => handlePubTimeChange(time.id, checked)"> @change="checked => handlePubTimeChange(time.id, checked)">
{{ time.name }} {{ time.name }}
</el-checkbox> </el-checkbox>
</div> </div>
</div> </div>
</div> </div>
<div class="select-box">
<div class="select-box-header">
<div class="icon"></div>
<div class="title">{{ "涉及领域" }}</div>
</div>
<div class="select-main select-main1">
<div class="checkbox-group">
<el-checkbox v-for="area in areaList" :key="area.id" v-model="activeAreaList"
:label="area.id" style="width: 100px"
@change="checked => handleAreaChange(area.id, checked)">
{{ area.name }}
</el-checkbox>
</div>
</div>
</div>
</div> </div>
<div class="right"> <div class="right">
<div class="content-header"> <div class="content-header">
...@@ -366,7 +388,8 @@ ...@@ -366,7 +388,8 @@
<div class="title">{{ "政令库" }}</div> <div class="title">{{ "政令库" }}</div>
</div> </div>
<div class="content-box" v-show="decreeList"> <div class="content-box" v-show="decreeList">
<div class="main-item" v-for="(item, index) in decreeList" :key="index" @click="handleClickDecree(item)"> <div class="main-item" v-for="(item, index) in decreeList" :key="index"
@click="handleClickDecree(item)">
<div class="main-item-left"> <div class="main-item-left">
<div class="left-left"> <div class="left-left">
{{ item.time?.split("-")[0] }}<br />{{ item.time?.split("-")[1] }}月{{ {{ item.time?.split("-")[0] }}<br />{{ item.time?.split("-")[1] }}月{{
...@@ -399,8 +422,9 @@ ...@@ -399,8 +422,9 @@
{{ `共 ${totalDecreesNum} 项` }} {{ `共 ${totalDecreesNum} 项` }}
</div> </div>
<div class="footer-right"> <div class="footer-right">
<el-pagination @current-change="handleCurrentChange" :pageSize="10" :current-page="currentPage" <el-pagination @current-change="handleCurrentChange" :pageSize="10"
background layout="prev, pager, next" :total="totalDecreesNum" /> :current-page="currentPage" background layout="prev, pager, next"
:total="totalDecreesNum" />
</div> </div>
</div> </div>
</div> </div>
...@@ -411,7 +435,7 @@ ...@@ -411,7 +435,7 @@
</template> </template>
<script setup> <script setup>
import NewsList from "@/components/base/NewsList/index.vue"; import NewsList from "@/components/base/newsList/index.vue";
import { onMounted, ref, computed, watch, nextTick } from "vue"; import { onMounted, ref, computed, watch, nextTick } from "vue";
import router from "@/router"; import router from "@/router";
import { import {
...@@ -426,7 +450,7 @@ import { ...@@ -426,7 +450,7 @@ import {
getDecreehylyList, getDecreehylyList,
getDecreeTypeList getDecreeTypeList
} from "@/api/decree/home"; } from "@/api/decree/home";
import RiskSignal from "@/components/RiskSignal/RiskSignal.vue"; import RiskSignal from "@/components/base/RiskSignal/index.vue";
// import RiskSignal from "@/components/base/RiskSignal/index.vue"; // import RiskSignal from "@/components/base/RiskSignal/index.vue";
import { getPersonSummaryInfo } from "@/api/common/index"; import { getPersonSummaryInfo } from "@/api/common/index";
import { getNews, getSocialMedia, getRiskSignal } from "@/api/general/index"; import { getNews, getSocialMedia, getRiskSignal } from "@/api/general/index";
......
...@@ -23,8 +23,8 @@ ...@@ -23,8 +23,8 @@
{{ summaryInfo.order + " | " }} {{ summaryInfo.order + " | " }}
</div> </div>
<div class="info-box2-item item2" v-if="summaryInfo.type"> <div class="info-box2-item item2" v-if="summaryInfo.orgName">
{{ summaryInfo.type + " | " }} {{ summaryInfo.orgName + " | " }}
</div> </div>
<div class="info-box2-item item3" v-if="summaryInfo.ename">{{ summaryInfo.ename }}</div> <div class="info-box2-item item3" v-if="summaryInfo.ename">{{ summaryInfo.ename }}</div>
</div> </div>
......
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<div class="info-box2"> <div class="info-box2">
<div class="info-box2-item">{{ summaryInfo.order }}</div> <div class="info-box2-item">{{ summaryInfo.order }}</div>
| |
<div class="info-box2-item">{{ summaryInfo.type }}</div> <div class="info-box2-item">{{ summaryInfo.orgName }}</div>
| |
<div class="info-box2-item one-line-ellipsis">{{ summaryInfo.ename }}</div> <div class="info-box2-item one-line-ellipsis">{{ summaryInfo.ename }}</div>
</div> </div>
......
...@@ -702,7 +702,7 @@ ...@@ -702,7 +702,7 @@
<script setup> <script setup>
import NewsList from "@/components/NewsList.vue"; import NewsList from "@/components/NewsList.vue";
import RiskSignal from "@/components/RiskSignal/RiskSignal.vue"; import RiskSignal from "@/components/base/RiskSignal/index.vue";
import { onMounted, ref, computed, reactive, shallowRef, watch, nextTick } from "vue"; import { onMounted, ref, computed, reactive, shallowRef, watch, nextTick } from "vue";
import { useContainerScroll } from "@/hooks/useScrollShow"; import { useContainerScroll } from "@/hooks/useScrollShow";
const homeMainRef = ref(null); const homeMainRef = ref(null);
......
...@@ -133,7 +133,7 @@ import { ...@@ -133,7 +133,7 @@ import {
getSingleSanctionEntityEquity getSingleSanctionEntityEquity
} from "@/api/exportControlV2.0"; } from "@/api/exportControlV2.0";
import RelationGraph from "./components/RelationGraph.vue"; import RelationGraph from "./components/RelationGraph.vue";
import AnalysisBox from "@/components/base/boxBackground/analysisBox.vue"; import AnalysisBox from "@/components/base/BoxBackground/AnalysisBox.vue";
const sanRecordId = ref(""); const sanRecordId = ref("");
const activeTab = ref(["实体穿透分析"]); const activeTab = ref(["实体穿透分析"]);
......
...@@ -538,7 +538,7 @@ ...@@ -538,7 +538,7 @@
</template> </template>
<script setup> <script setup>
import RiskSignal from "@/components/RiskSignal/RiskSignal.vue"; import RiskSignal from "@/components/base/RiskSignal/index.vue";
import { onMounted, ref, computed } from "vue"; import { onMounted, ref, computed } from "vue";
import scrollToTop from "@/utils/scrollToTop"; import scrollToTop from "@/utils/scrollToTop";
import setChart from "@/utils/setChart"; import setChart from "@/utils/setChart";
......
...@@ -374,7 +374,7 @@ ...@@ -374,7 +374,7 @@
<script setup> <script setup>
import RiskSignal from "@/components/RiskSignal/RiskSignal.vue"; import RiskSignal from "@/components/base/RiskSignal/index.vue";
import NewsList from "@/components/NewsList.vue"; import NewsList from "@/components/NewsList.vue";
import { onMounted, ref, computed } from "vue"; import { onMounted, ref, computed } from "vue";
import router from "@/router"; import router from "@/router";
......
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.000000" height="24.000000" fill="none"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.000000" height="24.000000" fill="none" customFrame="#000000">
<rect id="大学,学府,法院" width="24.000000" height="24.000000" x="0.000000" y="0.000000" /> <rect id="容器 1929" width="24.000000" height="24.000000" x="0.000000" y="0.000000" />
<path id="矢量 573" d="M21.9922 6.66992L21.9922 8.00391L21.5996 8.00391C21.1699 8.00391 20.7598 8.17383 20.4473 8.4707L20.4434 8.47461C20.3008 8.60742 20.1328 8.67188 19.9375 8.67188L4.05078 8.67188C3.85352 8.67188 3.6875 8.60742 3.54688 8.47461C3.54492 8.47266 3.54297 8.47266 3.54102 8.4707C3.22852 8.17578 2.81836 8.00586 2.38867 8.00586L2 8.00586L2 6.66992L11.9961 2.67188L21.9922 6.66992ZM21.2715 19.3301L2.71875 19.3301C2.52344 19.3301 2.35547 19.3945 2.21484 19.5273C2.07031 19.6602 2 19.8164 2 19.998L2 21.332L21.9922 21.332L21.9922 19.998C21.9922 19.8164 21.9199 19.6602 21.7773 19.5273C21.6348 19.3945 21.4688 19.3301 21.2715 19.3301L21.2715 19.3301ZM20.6621 17.998L20.6621 18.6621L3.33398 18.6621L3.33398 17.998C3.33398 17.8184 3.4043 17.6602 3.54883 17.5273C3.69141 17.3945 3.85938 17.3301 4.05273 17.3301L4.66797 17.3301L4.66602 9.33399L7.33203 9.33399L7.33203 17.3301L8.66602 17.3301L8.66602 9.33398L11.3301 9.33398L11.3301 17.3301L12.6699 17.3301L12.6699 9.33398L15.334 9.33398L15.334 17.3301L16.6641 17.3301L16.6641 9.33398L19.3281 9.33398L19.3281 17.3301L19.9434 17.3301C20.1406 17.3301 20.3047 17.3945 20.4473 17.5273C20.5898 17.6602 20.6621 17.8184 20.6621 17.998L20.6621 17.998Z" fill="rgb(5,95,194)" fill-rule="nonzero" /> <path id="合并" d="M4 7C3.44772 7 3 7.44772 3 8C3 8.55228 3.44772 9 4 9C4.55228 9 5 8.55228 5 8C5 7.44772 4.55228 7 4 7ZM3 9.73244C2.4022 9.38663 2 8.74028 2 8C2 7.25972 2.4022 6.61337 3 6.26756L3 5C3 4.44772 3.44772 4 4 4C4.55228 4 5 4.44772 5 5L5 6.26756C5.5978 6.61337 6 7.25972 6 8C6 8.74028 5.5978 9.38663 5 9.73244L5 14.2676C5.5978 14.6134 6 15.2597 6 16C6 16.7403 5.5978 17.3866 5 17.7324L5 19C5 19.5523 4.55228 20 4 20C3.44772 20 3 19.5523 3 19L3 17.7324C2.4022 17.3866 2 16.7403 2 16C2 15.2597 2.4022 14.6134 3 14.2676L3 9.73244ZM4 17C4.55228 17 5 16.5523 5 16C5 15.4477 4.55228 15 4 15C3.44772 15 3 15.4477 3 16C3 16.5523 3.44772 17 4 17ZM22 6C22 5.44772 21.5523 5 21 5L9 5C8.44772 5 8 5.44772 8 6L8 10C8 10.5523 8.44772 11 9 11L21 11C21.5523 11 22 10.5523 22 10L22 6ZM22 14C22 13.4477 21.5523 13 21 13L9 13C8.44772 13 8 13.4477 8 14L8 18C8 18.5523 8.44772 19 9 19L21 19C21.5523 19 22 18.5523 22 18L22 14Z" fill="rgb(5,95,194)" fill-rule="evenodd" />
</svg> </svg>
...@@ -6,9 +6,9 @@ const getBarChart = (nameList, valueList) => { ...@@ -6,9 +6,9 @@ const getBarChart = (nameList, valueList) => {
tooltip: {}, tooltip: {},
grid: { grid: {
top: '8%', top: '8%',
right: '6%', right: 24,
bottom: '6%', bottom: 24,
left: '6%', left: 24,
containLabel: true containLabel: true
}, },
yAxis: { yAxis: {
...@@ -65,7 +65,7 @@ const getBarChart = (nameList, valueList) => { ...@@ -65,7 +65,7 @@ const getBarChart = (nameList, valueList) => {
yAxis: valueList[index], yAxis: valueList[index],
symbol: `image://${item.img}`, symbol: `image://${item.img}`,
symbolSize: [20, 20], symbolSize: [20, 20],
symbolOffset: [0, 10], symbolOffset: [0, 20],
symbolCircle: 10 symbolCircle: 10
}); });
}); });
......
import * as echarts from 'echarts' import * as echarts from 'echarts'
const getMultiLineChart = (data) => { const getMultiLineChart = (data) => {
console.log('dataaaa',data); console.log('dataaaa', data);
return { return {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
...@@ -14,18 +14,18 @@ const getMultiLineChart = (data) => { ...@@ -14,18 +14,18 @@ const getMultiLineChart = (data) => {
} }
}, },
grid: { grid: {
top: '15%', top: 48,
right: '3%', right: 24,
bottom: '5%', bottom: 24,
left: '3%', left: 24,
containLabel: true containLabel: true
}, },
legend: { legend: {
show: true, show: true,
top: 10, top: 10,
left:'5%' left: '10%'
}, },
color: ['#0A57A6', '#FA8C16','#722ED1'], color: ['#0A57A6', '#FA8C16', '#722ED1'],
xAxis: [ xAxis: [
{ {
type: 'category', type: 'category',
...@@ -35,7 +35,16 @@ const getMultiLineChart = (data) => { ...@@ -35,7 +35,16 @@ const getMultiLineChart = (data) => {
], ],
yAxis: [ yAxis: [
{ {
type: 'value' type: 'value',
name: '数量',
splitLine: {
show: true,
lineStyle: {
type: 'dashed', // 虚线类型
color: 'rgb(231, 243, 255)', // 灰色线条
width: 1 // 线宽为1
}
}
} }
], ],
series: [ series: [
......
const getPieChart = (data) => { const getPieChart = (data) => {
const colorList = ['#69B1FF','#FF7875','#B37FEB','#FFC069','#1677FF','#87E8DE','#ADC6FF','#FFBB96','#BAE0FF','#FFD591',]
let option = { let option = {
// color: colorList, color: colorList,
series: [ series: [
{ {
type: 'pie', type: 'pie',
radius: [90, 115], radius: [75, 100],
height: '100%', height: '100%',
left: 'center', left: 'center',
width: '100%', width: '100%',
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论