Skip to content

R
risk-monitor
提交 97bf602f authored 作者: coderBryanFu's avatar coderBryanFu
浏览文件
操作

feat: 新增组件WarnningPane

上级 003d4bc4
显示空白字符变更
内嵌 并排
正在显示 包含 945 行增加 和 179 行删除
src/api/marketAccessRestrictions/index.js
浏览文件 @ 97bf602f
...@@ -2,10 +2,11 @@ import request from "@/api/request.js"; ...@@ -2,10 +2,11 @@ import request from "@/api/request.js";
// 概览页-------------------------------------------------------------------- // 概览页--------------------------------------------------------------------
// 概览统计 // 概览统计
export function getStatCount() { export function getStatCount(params) {
return request({ return request({
method: 'GET', method: 'GET',
url: `/api/marketsearchHome/statCount` url: `/api/marketsearchHome/statCount`,
params
}) })
} }
......
src/components/base/WarningPane/icons/level1.svg 0 → 100644
浏览文件 @ 97bf602f
<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="url(#clipPath_0)">
<defs>
<clipPath id="clipPath_0">
<rect width="16.000000" height="16.000000" x="0.000000" y="0.000000" rx="8.000000" fill="rgb(255,255,255)" />
</clipPath>
</defs>
<rect id="容器 767" width="16.000000" height="16.000000" x="0.000000" y="0.000000" rx="8.000000" />
<g id="组合 1059">
<path id="矩形 350" d="M2.50019 7.57031L12.4998 7.57048C12.7759 7.57048 12.9992 7.79409 12.9995 8.07012L13 8.07012C13.0001 8.34632 12.776 8.57031 12.4998 8.57031L2.50018 8.57015C2.22419 8.57015 2.00069 8.34649 2.00054 8.07051L2 8.07051C1.9997 7.79434 2.22403 7.57031 2.50019 7.57031Z" fill="rgb(206,79,81)" fill-rule="evenodd" />
<path id="矢量 610" d="M8 3L13 8L8 13" stroke="rgb(206,79,81)" stroke-linecap="round" stroke-width="1.000000" />
</g>
</svg>
src/components/base/WarningPane/icons/level2.svg 0 → 100644
浏览文件 @ 97bf602f
<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="url(#clipPath_0)">
<defs>
<clipPath id="clipPath_0">
<rect width="16.000000" height="16.000000" x="0.000000" y="0.000000" rx="8.000000" fill="rgb(255,255,255)" />
</clipPath>
</defs>
<rect id="容器 767" width="16.000000" height="16.000000" x="0.000000" y="0.000000" rx="8.000000" />
<g id="组合 1059">
<path id="矩形 350" d="M2.50019 7.57031L12.4998 7.57048C12.7759 7.57048 12.9992 7.79409 12.9995 8.07012L13 8.07012C13.0001 8.34632 12.776 8.57031 12.4998 8.57031L2.50018 8.57015C2.22419 8.57015 2.00069 8.34649 2.00054 8.07051L2 8.07051C1.9997 7.79434 2.22403 7.57031 2.50019 7.57031Z" fill="rgb(255, 149, 77)" fill-rule="evenodd" />
<path id="矢量 610" d="M8 3L13 8L8 13" stroke="rgb(255, 149, 77)" stroke-linecap="round" stroke-width="1.000000" />
</g>
</svg>
src/components/base/WarningPane/icons/level3.svg 0 → 100644
浏览文件 @ 97bf602f
<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="url(#clipPath_0)">
<defs>
<clipPath id="clipPath_0">
<rect width="16.000000" height="16.000000" x="0.000000" y="0.000000" rx="8.000000" fill="rgb(255,255,255)" />
</clipPath>
</defs>
<rect id="容器 767" width="16.000000" height="16.000000" x="0.000000" y="0.000000" rx="8.000000" />
<g id="组合 1059">
<path id="矩形 350" d="M2.50019 7.57031L12.4998 7.57048C12.7759 7.57048 12.9992 7.79409 12.9995 8.07012L13 8.07012C13.0001 8.34632 12.776 8.57031 12.4998 8.57031L2.50018 8.57015C2.22419 8.57015 2.00069 8.34649 2.00054 8.07051L2 8.07051C1.9997 7.79434 2.22403 7.57031 2.50019 7.57031Z" fill="rgb(232, 189, 11)" fill-rule="evenodd" />
<path id="矢量 610" d="M8 3L13 8L8 13" stroke="rgb(232, 189, 11)" stroke-linecap="round" stroke-width="1.000000" />
</g>
</svg>
src/components/base/WarningPane/icons/level4.svg 0 → 100644
浏览文件 @ 97bf602f
<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="url(#clipPath_0)">
<defs>
<clipPath id="clipPath_0">
<rect width="16.000000" height="16.000000" x="0.000000" y="0.000000" rx="8.000000" fill="rgb(255,255,255)" />
</clipPath>
</defs>
<rect id="容器 767" width="16.000000" height="16.000000" x="0.000000" y="0.000000" rx="8.000000" />
<g id="组合 1059">
<path id="矩形 350" d="M2.50019 7.57031L12.4998 7.57048C12.7759 7.57048 12.9992 7.79409 12.9995 8.07012L13 8.07012C13.0001 8.34632 12.776 8.57031 12.4998 8.57031L2.50018 8.57015C2.22419 8.57015 2.00069 8.34649 2.00054 8.07051L2 8.07051C1.9997 7.79434 2.22403 7.57031 2.50019 7.57031Z" fill="rgb(33, 129, 57)" fill-rule="evenodd" />
<path id="矢量 610" d="M8 3L13 8L8 13" stroke="rgb(33, 129, 57)" stroke-linecap="round" stroke-width="1.000000" />
</g>
</svg>
src/components/base/WarningPane/icons/level5.svg 0 → 100644
浏览文件 @ 97bf602f
<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="url(#clipPath_0)">
<defs>
<clipPath id="clipPath_0">
<rect width="16.000000" height="16.000000" x="0.000000" y="0.000000" rx="8.000000" fill="rgb(255,255,255)" />
</clipPath>
</defs>
<rect id="容器 767" width="16.000000" height="16.000000" x="0.000000" y="0.000000" rx="8.000000" />
<g id="组合 1059">
<path id="矩形 350" d="M2.50019 7.57031L12.4998 7.57048C12.7759 7.57048 12.9992 7.79409 12.9995 8.07012L13 8.07012C13.0001 8.34632 12.776 8.57031 12.4998 8.57031L2.50018 8.57015C2.22419 8.57015 2.00069 8.34649 2.00054 8.07051L2 8.07051C1.9997 7.79434 2.22403 7.57031 2.50019 7.57031Z" fill="rgb(5, 95, 194)" fill-rule="evenodd" />
<path id="矢量 610" d="M8 3L13 8L8 13" stroke="rgb(5, 95, 194)" stroke-linecap="round" stroke-width="1.000000" />
</g>
</svg>
src/components/base/WarningPane/icons/warnning-icon.svg 0 → 100644
浏览文件 @ 97bf602f
<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="容器 1922" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
<path id="减去顶层" d="M15.8612 13.4253L8.86371 1.38047C8.47821 0.716925 7.51986 0.716925 7.13436 1.38047L0.136829 13.4253C-0.250475 14.0919 0.230498 14.9276 1.0015 14.9276L14.9966 14.9276C15.7676 14.9276 16.2485 14.0919 15.8612 13.4253ZM8.73076 9.86062C8.71726 10.2202 8.42184 10.5047 8.06201 10.5047C7.7017 10.5047 7.40606 10.2195 7.39322 9.85936L7.25891 6.0939C7.24261 5.63713 7.60849 5.25797 8.06555 5.25797C8.5232 5.25797 8.8893 5.63808 8.87213 6.09541L8.73076 9.86062ZM7.21926 11.7574C7.26412 11.6666 7.32814 11.5851 7.41131 11.513C7.46859 11.4633 7.52999 11.4215 7.59553 11.3876C7.73661 11.3146 7.89683 11.278 8.07618 11.278C8.26676 11.278 8.43415 11.3187 8.57836 11.3999C8.6354 11.4321 8.68881 11.4706 8.73859 11.5154C8.81988 11.5886 8.88236 11.6708 8.92603 11.7618C8.97673 11.8675 9.00208 11.9853 9.00208 12.115C9.00208 12.2317 8.981 12.3396 8.93885 12.4386C8.89617 12.5388 8.83188 12.63 8.74598 12.7121C8.66424 12.7902 8.5746 12.8496 8.47706 12.8903C8.37086 12.9346 8.25529 12.9568 8.13036 12.9568C7.86357 12.9568 7.64481 12.8932 7.47407 12.7659C7.45149 12.7491 7.42975 12.7311 7.40885 12.7121C7.31197 12.6238 7.24131 12.5249 7.19688 12.4155C7.15926 12.3229 7.14044 12.2227 7.14044 12.115C7.14044 11.983 7.16671 11.8638 7.21926 11.7574Z" fill="rgb(255,255,255)" fill-rule="evenodd" />
</svg>
src/components/base/WarningPane/index.vue 0 → 100644
浏览文件 @ 97bf602f
<template>
<div class="warnning-pane-wrapper" :style="{ width: width ? width : '1600px', height: height ? height : '116px' }"
:class="{
level1: warnningLevel === '特别重大风险',
level2: warnningLevel === '重大风险',
level3: warnningLevel === '较大风险',
level4: warnningLevel === '一般风险',
}" @click="handleClickPane">
<div class="warnning-pane-header">
<div class="header-left" :class="{
'header-left-level1': warnningLevel === '特别重大风险',
'header-left-level2': warnningLevel === '重大风险',
'header-left-level3': warnningLevel === '较大风险',
'header-left-level4': warnningLevel === '一般风险',
}">
<div class="warnning-icon">
<img src="./icons/warnning-icon.svg" alt="">
</div>
<div class="warnning-text text-title-3-bold">{{ warnningLevel }}</div>
</div>
<div class="header-right">
<img v-if="warnningLevel === '特别重大风险'" src="./icons/level1.svg" alt="">
<img v-else-if="warnningLevel === '重大风险'" src="./icons/level2.svg" alt="">
<img v-else-if="warnningLevel === '较大风险'" src="./icons/level3.svg" alt="">
<img v-else-if="warnningLevel === '一般风险'" src="./icons/level4.svg" alt="">
<img v-else src="./icons/level5.svg" alt="">
</div>
</div>
<div class="warnning-pane-content text-regular">
{{ warnningContent }}
</div>
</div>
</template>
<script setup>
import { ElMessage } from 'element-plus'
const props = defineProps(
{
warnningContent: {
type: String,
default: ''
},
warnningLevel: {
type: String,
default: '低风险'
}
}
)
const emit = defineEmits(['clickPane'])
const handleClickPane = () => {
ElMessage.success('点击了预警面板')
emit('clickPane')
}
</script>
<style lang="scss" scoped>
.warnning-pane-wrapper {
border-radius: 10px;
border: 1px solid var(--color-primary-100);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
}
.level1 {
border: 1px solid var(--color-red-100) !important;
}
.level2 {
border: 1px solid var(--color-orange-100) !important;
}
.level3 {
border: 1px solid var(--color-yellow-100) !important;
}
.level4 {
border: 1px solid var(--color-green-100) !important;
}
.warnning-pane-header {
height: 44px;
display: flex;
justify-content: space-between;
}
.header-left {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
width: 164px;
height: 32px;
background: var(--color-main-active);
border-radius: 10px 0 10px 0;
}
.header-left-level1 {
background: var(--color-red-100) !important;
}
.header-left-level2 {
background: var(--color-orange-100) !important;
}
.header-left-level3 {
background: var(--color-yellow-100) !important;
}
.header-left-level4 {
background: var(--color-green-100) !important;
}
.warnning-icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.warnning-text {
color: #fff;
}
.header-right {
width: 16px;
height: 16px;
margin-top: 17px;
margin-right: 16px;
img {
width: 100%;
height: 100%;
}
}
.warnning-pane-content{
width: calc(100% - 40px);
margin: 0 auto;
height: 60px;
display: -webkit-box;
/* 2. 设置内部布局方向为垂直 */
-webkit-box-orient: vertical;
/* 3. 限制显示的行数为 2 行 */
-webkit-line-clamp: 2;
/* 4. 隐藏超出部分 */
overflow: hidden;
/* 5. 设置文本溢出显示省略号 */
text-overflow: ellipsis;
}
</style>
\ No newline at end of file
src/components/base/boxBackground/analysisBox.vue
浏览文件 @ 97bf602f
...@@ -122,7 +122,7 @@ const emit = defineEmits(['save', 'download', 'collect']) ...@@ -122,7 +122,7 @@ const emit = defineEmits(['save', 'download', 'collect'])
.header-btn1 { .header-btn1 {
position: absolute; position: absolute;
top: 14px; top: 14px;
right: 104px; right: 116px;
} }
.header-right { .header-right {
......
src/components/base/panes/AiTipPane.vue
浏览文件 @ 97bf602f
<script setup>
</script>
<template> <template>
<div class="flex-display box"> <div class="flex-display box">
<div class="img"></div> <div class="img">
<img src="@/assets/icons/box-footer-left-icon.png" alt="">
</div>
<div class="flex-fill txt text-tip-1"> <div class="flex-fill txt text-tip-1">
<slot></slot> <slot></slot>
</div> </div>
<div class="arrow"><span>→</span></div> <div class="arrow">
<img src="@/assets/icons/box-footer-right-icon.png" alt="">
</div>
</div> </div>
</template> </template>
<script setup>
</script>
<style scoped lang="scss"> <style scoped lang="scss">
@use '@/styles/common.scss'; @use '@/styles/common.scss';
...@@ -29,7 +33,11 @@ ...@@ -29,7 +33,11 @@
.img { .img {
width: 19px; width: 19px;
height: 20px; height: 20px;
background-image: url("@/assets/icons/model.png");
img {
width: 100%;
height: 100%;
}
} }
.txt { .txt {
...@@ -42,21 +50,12 @@ ...@@ -42,21 +50,12 @@
} }
.arrow { .arrow {
border-radius: 50%;
min-width: 24px;
width: 24px; width: 24px;
height: 24px; height: 24px;
background: var(--color-primary-10);
display: flex;
align-items: center;
justify-content: center;
span { img {
font-size: 22px; width: 100%;
font-weight: bold; height: 100%;
position: relative;
top: -3px;
/* 向上偏移2px */
} }
} }
</style> </style>
\ No newline at end of file
src/styles/components/WarnningPane/index.vue 0 → 100644
浏览文件 @ 97bf602f
<script setup>
import { ElRow, ElCol } from 'element-plus';
import '@/styles/common.scss'
import WarnningPane from '@/components/base/WarningPane/index.vue'
const span = 12
</script>
<template>
<el-row class="wrapper layout-grid-line">
<el-col :span="span">
<pre>
{{
`import WarnningPane from '@/components/base/WarningPane/index.vue';
<template>
<WarnningPane warnningLevel="特别重大风险" warnningContent="我是特别重大风险内容文字">
</WarnningPane>
</template>
`}}
</pre>
<WarnningPane warnningLevel="特别重大风险" warnningContent="我是特别重大风险内容文字">
</WarnningPane>
</el-col>
</el-row>
</template>
<style lang="scss" scoped>
.person-avatar {
width: 200px;
}
</style>
\ No newline at end of file
src/styles/components/index.vue
浏览文件 @ 97bf602f
...@@ -28,6 +28,9 @@ ...@@ -28,6 +28,9 @@
<el-tab-pane label="人物" lazy> <el-tab-pane label="人物" lazy>
<people-page /> <people-page />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="预警面板" lazy>
<WarnningPane />
</el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
</el-space> </el-space>
...@@ -47,6 +50,7 @@ import CommonPage from './CommonPage/index.vue'; ...@@ -47,6 +50,7 @@ import CommonPage from './CommonPage/index.vue';
import TextPage from './TextPage/index.vue'; import TextPage from './TextPage/index.vue';
import ImagesPage from './Images/index.vue'; import ImagesPage from './Images/index.vue';
import PeoplePage from './People/index.vue'; import PeoplePage from './People/index.vue';
import WarnningPane from './WarnningPane/index.vue'
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
src/views/marketAccessRestrictions/marketAccessHome/index.vue
浏览文件 @ 97bf602f
...@@ -390,6 +390,8 @@ ...@@ -390,6 +390,8 @@
<script setup> <script setup>
import { onMounted, ref } from "vue"; import { onMounted, ref } from "vue";
import LeftBtn from "@/components/base/PageBtn/LeftBtn.vue";
import RightBtn from "@/components/base/PageBtn/RightBtn.vue";
import RiskSignal from "@/components/base/RiskSignal/index.vue"; import RiskSignal from "@/components/base/RiskSignal/index.vue";
import TipTab from "@/components/base/TipTab/index.vue" import TipTab from "@/components/base/TipTab/index.vue"
import MessageBubble from "@/components/base/MessageBubble/index.vue" import MessageBubble from "@/components/base/MessageBubble/index.vue"
......
src/views/marketAccessRestrictions/marketAccessLayout/assets/icons/icon1.svg 0 → 100644
浏览文件 @ 97bf602f
<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="Icon/Line/AntDesign" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
<path id="合并" d="M2 4C2 4.21118 2.06685 4.41694 2.19098 4.58779C2.31511 4.75863 2.49014 4.8858 2.69098 4.95106C2.89183 5.01631 3.10817 5.01631 3.30902 4.95106C3.50986 4.8858 3.68489 4.75863 3.80902 4.58779C3.93315 4.41694 4 4.21118 4 4C4 3.78882 3.93315 3.58306 3.80902 3.41221C3.68489 3.24137 3.50986 3.1142 3.30902 3.04894C3.10817 2.98369 2.89183 2.98369 2.69098 3.04894C2.49014 3.1142 2.31511 3.24137 2.19098 3.41221C2.06685 3.58306 2 3.78882 2 4ZM6.11111 5L13.8889 5C14.5 5 15 4.55 15 4C15 3.45 14.5 3 13.8889 3L6.11111 3C5.5 3 5 3.45 5 4C5 4.55 5.5 5 6.11111 5ZM2.19098 8.50064C2.06685 8.32979 2 8.12403 2 7.91285C2 7.70167 2.06685 7.49592 2.19098 7.32507C2.31511 7.15422 2.49014 7.02705 2.69098 6.9618C2.89183 6.89654 3.10817 6.89654 3.30902 6.9618C3.50986 7.02705 3.68489 7.15422 3.80902 7.32507C3.93315 7.49592 4 7.70167 4 7.91285C4 8.12403 3.93315 8.32979 3.80902 8.50064C3.68489 8.67149 3.50986 8.79865 3.30902 8.86391C3.10817 8.92917 2.89183 8.92917 2.69098 8.86391C2.49014 8.79865 2.31511 8.67149 2.19098 8.50064ZM6.11111 8.91309L13.8889 8.91309C14.5 8.91309 15 8.46309 15 7.91309C15 7.36309 14.5 6.91309 13.8889 6.91309L6.11111 6.91309C5.5 6.91309 5 7.36309 5 7.91309C5 8.46309 5.5 8.91309 6.11111 8.91309ZM2 11.8261C2 12.0373 2.06685 12.243 2.19098 12.4139C2.31511 12.5847 2.49014 12.7119 2.69098 12.7772C2.89183 12.8424 3.10817 12.8424 3.30902 12.7772C3.50986 12.7119 3.68489 12.5847 3.80902 12.4139C3.93315 12.243 4 12.0373 4 11.8261C4 11.6149 3.93315 11.4092 3.80902 11.2383C3.68489 11.0675 3.50986 10.9403 3.30902 10.875C3.10817 10.8098 2.89183 10.8098 2.69098 10.875C2.49014 10.9403 2.31511 11.0675 2.19098 11.2383C2.06685 11.4092 2 11.6149 2 11.8261ZM6.11111 12.8262L13.8889 12.8262C14.5 12.8262 15 12.3762 15 11.8262C15 11.2762 14.5 10.8262 13.8889 10.8262L6.11111 10.8262C5.5 10.8262 5 11.2762 5 11.8262C5 12.3762 5.5 12.8262 6.11111 12.8262Z" fill="rgb(59,65,75)" fill-rule="evenodd" />
</svg>
src/views/marketAccessRestrictions/marketAccessLayout/assets/icons/icon1_active.svg 0 → 100644
浏览文件 @ 97bf602f
<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="Icon/Line/AntDesign" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
<path id="合并" d="M2 4C2 4.21118 2.06685 4.41694 2.19098 4.58779C2.31511 4.75863 2.49014 4.8858 2.69098 4.95106C2.89183 5.01631 3.10817 5.01631 3.30902 4.95106C3.50986 4.8858 3.68489 4.75863 3.80902 4.58779C3.93315 4.41694 4 4.21118 4 4C4 3.78882 3.93315 3.58306 3.80902 3.41221C3.68489 3.24137 3.50986 3.1142 3.30902 3.04894C3.10817 2.98369 2.89183 2.98369 2.69098 3.04894C2.49014 3.1142 2.31511 3.24137 2.19098 3.41221C2.06685 3.58306 2 3.78882 2 4ZM6.11111 5L13.8889 5C14.5 5 15 4.55 15 4C15 3.45 14.5 3 13.8889 3L6.11111 3C5.5 3 5 3.45 5 4C5 4.55 5.5 5 6.11111 5ZM2.19098 8.50064C2.06685 8.32979 2 8.12403 2 7.91285C2 7.70167 2.06685 7.49592 2.19098 7.32507C2.31511 7.15422 2.49014 7.02705 2.69098 6.9618C2.89183 6.89654 3.10817 6.89654 3.30902 6.9618C3.50986 7.02705 3.68489 7.15422 3.80902 7.32507C3.93315 7.49592 4 7.70167 4 7.91285C4 8.12403 3.93315 8.32979 3.80902 8.50064C3.68489 8.67149 3.50986 8.79865 3.30902 8.86391C3.10817 8.92917 2.89183 8.92917 2.69098 8.86391C2.49014 8.79865 2.31511 8.67149 2.19098 8.50064ZM6.11111 8.91309L13.8889 8.91309C14.5 8.91309 15 8.46309 15 7.91309C15 7.36309 14.5 6.91309 13.8889 6.91309L6.11111 6.91309C5.5 6.91309 5 7.36309 5 7.91309C5 8.46309 5.5 8.91309 6.11111 8.91309ZM2 11.8261C2 12.0373 2.06685 12.243 2.19098 12.4139C2.31511 12.5847 2.49014 12.7119 2.69098 12.7772C2.89183 12.8424 3.10817 12.8424 3.30902 12.7772C3.50986 12.7119 3.68489 12.5847 3.80902 12.4139C3.93315 12.243 4 12.0373 4 11.8261C4 11.6149 3.93315 11.4092 3.80902 11.2383C3.68489 11.0675 3.50986 10.9403 3.30902 10.875C3.10817 10.8098 2.89183 10.8098 2.69098 10.875C2.49014 10.9403 2.31511 11.0675 2.19098 11.2383C2.06685 11.4092 2 11.6149 2 11.8261ZM6.11111 12.8262L13.8889 12.8262C14.5 12.8262 15 12.3762 15 11.8262C15 11.2762 14.5 10.8262 13.8889 10.8262L6.11111 10.8262C5.5 10.8262 5 11.2762 5 11.8262C5 12.3762 5.5 12.8262 6.11111 12.8262Z" fill="rgb(5,95,194)" fill-rule="evenodd" />
</svg>
src/views/marketAccessRestrictions/marketAccessLayout/assets/icons/icon2.svg 0 → 100644
浏览文件 @ 97bf602f
<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="矢量 828" d="M13.3712 9C13.032 9 12.7507 9.22792 12.7507 9.51994C12.6266 9.78348 11.038 10.4316 7.99328 10.4316C4.94855 10.4316 3.35172 9.77635 3.23589 9.54131C3.23589 9.5057 3.21934 9.47009 3.21107 9.43447C3.21107 9.39886 3.20279 9.36325 3.18624 9.33476C3.1697 9.29914 3.1366 9.27065 3.11178 9.23504C3.09523 9.21367 3.07869 9.18518 3.05387 9.16382C3.02077 9.13533 2.9794 9.11396 2.93803 9.09259C2.91321 9.07835 2.88839 9.05698 2.86357 9.04986C2.8222 9.03561 2.77256 9.03561 2.73119 9.02849C2.6981 9.02849 2.665 9.00712 2.62363 9.00712C2.54089 9.00712 2.45816 9.02137 2.38369 9.04986C2.36715 9.04986 2.35887 9.0641 2.3506 9.07122C2.29268 9.09971 2.23477 9.1282 2.18512 9.16382C2.17685 9.17094 2.16858 9.18518 2.1603 9.19943C2.11893 9.24216 2.07757 9.2849 2.05274 9.33476C2.04447 9.35612 2.04447 9.38461 2.0362 9.40598C2.01965 9.44872 2.0031 9.49145 2.0031 9.54131L2.0031 12.0342C1.99483 12.084 2.0031 12.1339 2.02792 12.1838C2.25959 13.6083 5.85038 14 8.00155 14C10.1527 14 14 13.5869 14 12.0413C14 12.0271 13.9917 12.0128 13.9917 11.9915L13.9917 9.54843L14 9.54843C14 9.25641 13.727 9 13.3795 9L13.3712 9ZM7.99328 12.9316C4.94027 12.9316 3.35172 12.2764 3.23589 12.0413C3.23589 12.0271 3.22761 12.0128 3.22761 11.9915L3.22761 10.8091C4.52659 11.3291 6.57847 11.5 7.99328 11.5C9.40808 11.5 11.4434 11.3291 12.7424 10.8162L12.7424 12.0271C12.5686 12.2977 10.9884 12.9245 7.99328 12.9245L7.99328 12.9316Z" fill="rgb(59,65,75)" fill-rule="nonzero" />
<path id="矢量 829" d="M14 4.10383C14 2.44372 10.2272 2 8.00155 2C5.77592 2 2.01138 2.44372 2.0031 4.09618L2.0031 6.88853C1.99483 6.94208 2.0031 6.99563 2.02792 7.04918C2.25959 8.57924 5.85038 9 8.00155 9C10.1527 9 14 8.55628 14 6.89617C14 6.88087 13.9917 6.86557 13.9917 6.84262L13.9917 4.10383L14 4.10383ZM8.00155 3.14754C10.9635 3.14754 12.5521 3.81311 12.7507 4.10383C12.5521 4.39454 10.9635 5.06011 8.00155 5.06011C5.03956 5.06011 3.37654 4.36393 3.24416 4.13443C3.37654 3.84372 4.96509 3.14754 8.00155 3.14754ZM8.00155 7.85246C4.94855 7.85246 3.35999 7.14863 3.24416 6.89618C3.24416 6.88087 3.23589 6.86557 3.23589 6.84262L3.23589 5.45792C4.54314 6.01639 6.58674 6.2 8.00155 6.2C9.41636 6.2 11.4517 6.01639 12.7507 5.46557L12.7507 6.88087C12.5769 7.17159 10.9966 7.84481 8.00155 7.84481L8.00155 7.85246Z" fill="rgb(59,65,75)" fill-rule="nonzero" />
</svg>
src/views/marketAccessRestrictions/marketAccessLayout/assets/icons/icon2_active.svg 0 → 100644
浏览文件 @ 97bf602f
<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="矢量 828" d="M13.3712 9C13.032 9 12.7507 9.22792 12.7507 9.51994C12.6266 9.78348 11.038 10.4316 7.99328 10.4316C4.94855 10.4316 3.35172 9.77635 3.23589 9.54131C3.23589 9.5057 3.21934 9.47009 3.21107 9.43447C3.21107 9.39886 3.20279 9.36325 3.18624 9.33476C3.1697 9.29914 3.1366 9.27065 3.11178 9.23504C3.09523 9.21367 3.07869 9.18518 3.05387 9.16382C3.02077 9.13533 2.9794 9.11396 2.93803 9.09259C2.91321 9.07835 2.88839 9.05698 2.86357 9.04986C2.8222 9.03561 2.77256 9.03561 2.73119 9.02849C2.6981 9.02849 2.665 9.00712 2.62363 9.00712C2.54089 9.00712 2.45816 9.02137 2.38369 9.04986C2.36715 9.04986 2.35887 9.0641 2.3506 9.07122C2.29268 9.09971 2.23477 9.1282 2.18512 9.16382C2.17685 9.17094 2.16858 9.18518 2.1603 9.19943C2.11893 9.24216 2.07757 9.2849 2.05274 9.33476C2.04447 9.35612 2.04447 9.38461 2.0362 9.40598C2.01965 9.44872 2.0031 9.49145 2.0031 9.54131L2.0031 12.0342C1.99483 12.084 2.0031 12.1339 2.02792 12.1838C2.25959 13.6083 5.85038 14 8.00155 14C10.1527 14 14 13.5869 14 12.0413C14 12.0271 13.9917 12.0128 13.9917 11.9915L13.9917 9.54843L14 9.54843C14 9.25641 13.727 9 13.3795 9L13.3712 9ZM7.99328 12.9316C4.94027 12.9316 3.35172 12.2764 3.23589 12.0413C3.23589 12.0271 3.22761 12.0128 3.22761 11.9915L3.22761 10.8091C4.52659 11.3291 6.57847 11.5 7.99328 11.5C9.40808 11.5 11.4434 11.3291 12.7424 10.8162L12.7424 12.0271C12.5686 12.2977 10.9884 12.9245 7.99328 12.9245L7.99328 12.9316Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
<path id="矢量 829" d="M14 4.10383C14 2.44372 10.2272 2 8.00155 2C5.77592 2 2.01138 2.44372 2.0031 4.09618L2.0031 6.88853C1.99483 6.94208 2.0031 6.99563 2.02792 7.04918C2.25959 8.57924 5.85038 9 8.00155 9C10.1527 9 14 8.55628 14 6.89617C14 6.88087 13.9917 6.86557 13.9917 6.84262L13.9917 4.10383L14 4.10383ZM8.00155 3.14754C10.9635 3.14754 12.5521 3.81311 12.7507 4.10383C12.5521 4.39454 10.9635 5.06011 8.00155 5.06011C5.03956 5.06011 3.37654 4.36393 3.24416 4.13443C3.37654 3.84372 4.96509 3.14754 8.00155 3.14754ZM8.00155 7.85246C4.94855 7.85246 3.35999 7.14863 3.24416 6.89618C3.24416 6.88087 3.23589 6.86557 3.23589 6.84262L3.23589 5.45792C4.54314 6.01639 6.58674 6.2 8.00155 6.2C9.41636 6.2 11.4517 6.01639 12.7507 5.46557L12.7507 6.88087C12.5769 7.17159 10.9966 7.84481 8.00155 7.84481L8.00155 7.85246Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
</svg>
src/views/marketAccessRestrictions/marketAccessLayout/case/337/index.vue
浏览文件 @ 97bf602f
...@@ -203,7 +203,6 @@ ...@@ -203,7 +203,6 @@
</AnalysisBox> </AnalysisBox>
</div> </div>
</div> </div>
<SearchBox placeholder="请输入搜索条件" v-model:search-text="searchData" @search="handleSearch" />
</div> </div>
</template> </template>
...@@ -215,13 +214,6 @@ import { Search, ArrowDown, ArrowUp } from "@element-plus/icons-vue"; ...@@ -215,13 +214,6 @@ import { Search, ArrowDown, ArrowUp } from "@element-plus/icons-vue";
import { getSearchAllArea, getSearchAllYear, getSurveyList, getSearchAllCountry } from "@/api/marketAccessRestrictions"; import { getSearchAllArea, getSearchAllYear, getSurveyList, getSearchAllCountry } from "@/api/marketAccessRestrictions";
import AnalysisBox from "@/components/base/BoxBackground/AnalysisBox.vue" import AnalysisBox from "@/components/base/BoxBackground/AnalysisBox.vue"
import SearchBox from "@/components/base/SearchBox/index.vue"
const searchData = ref('你好啊')
const handleSearch1 = () => {
console.log(searchData.value)
}
const route = useRoute(); const route = useRoute();
......
src/views/marketAccessRestrictions/marketAccessLayout/index.vue
浏览文件 @ 97bf602f
...@@ -47,10 +47,10 @@ ...@@ -47,10 +47,10 @@
<script setup> <script setup>
import { ref, computed, onMounted } from "vue"; import { ref, computed, onMounted } from "vue";
import router from "@/router/index"; import router from "@/router/index";
import icon1 from "./assets/images/icon1.png"; import icon1 from "./assets/icons/icon1.svg";
import icon1Active from "./assets/images/icon1_active.png"; import icon1Active from "./assets/icons/icon1_active.svg";
import icon2 from "./assets/images/icon2.png"; import icon2 from "./assets/icons/icon2.svg";
import icon2Active from "./assets/images/icon2_active.png"; import icon2Active from "./assets/icons/icon2_active.svg";
import Img337 from "./assets/images/337.png"; import Img337 from "./assets/images/337.png";
import Img232 from "./assets/images/232.png"; import Img232 from "./assets/images/232.png";
import Img301 from "./assets/images/301.png"; import Img301 from "./assets/images/301.png";
...@@ -207,10 +207,10 @@ onMounted(() => { ...@@ -207,10 +207,10 @@ onMounted(() => {
height: 48px; height: 48px;
margin-left: 160px; margin-left: 160px;
display: flex; display: flex;
gap: 24px;
.btn-item { .btn-item {
display: flex; display: flex;
width: 92px; gap: 4px;
margin-right: 30px;
cursor: pointer; cursor: pointer;
.icon { .icon {
width: 16px; width: 16px;
......
src/views/marketAccessRestrictions/marketAccessLayout/overview/337/index.vue
浏览文件 @ 97bf602f
...@@ -6,77 +6,49 @@ ...@@ -6,77 +6,49 @@
<div class="item-left1">{{ "总调查案件数" }}</div> <div class="item-left1">{{ "总调查案件数" }}</div>
<div class="item-left2">{{ "1980-2025" }}</div> <div class="item-left2">{{ "1980-2025" }}</div>
</div> </div>
<div class="item-right">{{ "452项" }}</div> <div class="item-right">{{ `${totalCaseNum}项` }}</div>
</div> </div>
<div class="item"> <div class="item">
<div class="item-left">{{ "仍在调查中的案件" }}</div> <div class="item-left">{{ "仍在调查中的案件" }}</div>
<div class="item-right">{{ "28项" }}</div> <div class="item-right">{{ `${onCaseNum}项` }}</div>
</div> </div>
<div class="item"> <div class="item">
<div class="item-left">{{ "涉及中企数量" }}</div> <div class="item-left">{{ "涉及中企数量" }}</div>
<div class="item-right">{{ "326家" }}</div> <div class="item-right">{{ `${relateCnNum}家` }}</div>
</div> </div>
<div class="item"> <div class="item">
<div class="item-left">{{ "胜诉/和解率" }}</div> <div class="item-left">{{ "胜诉/和解率" }}</div>
<div class="item-right">{{ "38%" }}</div> <div class="item-right">{{ `${windRate}/${cancelRate}` }}</div>
</div> </div>
</div> </div>
<div class="center"> <div class="center">
<div class="box1" v-loading="box1Loading"> <div class="box1" v-loading="box1Loading">
<div class="box-header"> <AnalysisBox title="美国对华337调查年度趋势">
<div class="header-left"></div>
<div class="title">美国对华337调查年度趋势</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box1-main" id="chart1"></div> <div class="box1-main" id="chart1"></div>
<div class="box1-footer">
<TipTab />
</div> </div>
<div class="box2" v-loading="box2Loading"> </AnalysisBox>
<div class="box-header">
<div class="header-left"></div>
<div class="title">调查案件领域分布</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div> </div>
<div class="box2" v-loading="box2Loading">
<AnalysisBox title="调查案件领域分布">
<div class="box2-main" id="chart2"></div> <div class="box2-main" id="chart2"></div>
<div class="box2-footer">
<TipTab />
</div>
</AnalysisBox>
</div> </div>
</div> </div>
<div class="footer"> <div class="footer">
<div class="box3" v-loading="box3Loading"> <div class="box3" v-loading="box3Loading">
<div class="box-header"> <!-- <div class="box-header">
<div class="header-left"></div> <div class="header-left"></div>
<div class="title">中国公司受调查情况</div> <div class="title">中国公司受调查情况</div>
<div class="header-btn-box"> <div class="header-btn-box">
<div <div class="btn" :class="{ btnActive: btnActiveName === '调查次数' }" @click="handleClickBox3Btn('调查次数')">
class="btn"
:class="{ btnActive: btnActiveName === '调查次数' }"
@click="handleClickBox3Btn('调查次数')"
>
调查次数 调查次数
</div> </div>
<div <div class="btn" :class="{ btnActive: btnActiveName === '注册地分布' }" @click="handleClickBox3Btn('注册地分布')">
class="btn"
:class="{ btnActive: btnActiveName === '注册地分布' }"
@click="handleClickBox3Btn('注册地分布')"
>
注册地分布 注册地分布
</div> </div>
</div> </div>
...@@ -105,55 +77,244 @@ ...@@ -105,55 +77,244 @@
</div> </div>
<div class="box3-main1-right" id="chartMap"></div> <div class="box3-main1-right" id="chartMap"></div>
</div> </div>
<div class="box3-footer">
<TipTab />
</div> -->
<AnalysisBox title="中国公司受调查情况">
<template #header-btn>
<div class="header-btn-box">
<div class="btn" :class="{ btnActive: btnActiveName === '调查次数' }" @click="handleClickBox3Btn('调查次数')">
调查次数
</div> </div>
<div class="box4" v-loading="box4Loading"> <div class="btn" :class="{ btnActive: btnActiveName === '注册地分布' }" @click="handleClickBox3Btn('注册地分布')">
<div class="box-header"> 注册地分布
<div class="header-left"></div>
<div class="title">调查结果分布</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div> </div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div> </div>
<div class="icon"> </template>
<img src="@/assets/icons/box-header-icon3.png" alt="" /> <div v-show="btnActiveName === '调查次数'" class="box3-main" id="chart3"></div>
<div v-show="btnActiveName === '注册地分布'" class="box3-main1">
<div class="box3-main1-left">
<div class="box3-main1-left-item" v-for="(item, index) in mapData" :key="index">
<div class="box3-main1-left-item-left">{{ index + 1 }}</div>
<div class="box3-main1-left-item-center">{{ item.name }}</div>
<div class="box3-main1-left-item-right">
{{ item.value + "次" }}
</div>
</div>
</div>
<div class="box3-main1-right" id="chartMap"></div>
</div> </div>
<div class="box3-footer">
<TipTab />
</div> </div>
</AnalysisBox>
</div> </div>
<div class="box4" v-loading="box4Loading">
<AnalysisBox title="调查结果分布">
<div class="box4-main" id="chart4"></div> <div class="box4-main" id="chart4"></div>
<div class="box4-footer">
<TipTab />
</div>
</AnalysisBox>
</div> </div>
</div> </div>
<div class="graph-box" id="graphChart">
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, onMounted, nextTick } from "vue"; import { ref, onMounted, nextTick } from "vue";
import * as echarts from "echarts"; import setChart from "@/utils/setChart";
import TipTab from "@/components/base/TipTab/index.vue"
import AnalysisBox from "@/components/base/BoxBackground/AnalysisBox.vue"
import ChinaJson from "../../assets/json/China.json"; import { getStatCount, getStatcnOrgCount, getSearchResult, getStatArea, getStatNum } from "@/api/marketAccessRestrictions";
import { getStatcnOrgCount, getSearchResult, getStatArea, getStatNum } from "@/api/marketAccessRestrictions";
import getMultiLineChart from "./utils/multiLineChart"; import getMultiLineChart from "./utils/multiLineChart";
import getBarChart from "./utils/barChart"; import getBarChart from "./utils/barChart";
import getPieChart from "./utils/piechart"; import getPieChart from "./utils/piechart";
import getMapChart from "./utils/mapChart"; import getMapChart from "./utils/mapChart";
// 绘制echarts图表 import CompanyImg from "./symbol.png"
const setChart = (option, chartId) => {
let chartDom = document.getElementById(chartId); import getGraphChart from "./utils/graphChart";
chartDom.removeAttribute("_echarts_instance_"); import getGraph from "./utils/graph";
let chart = echarts.init(chartDom);
chart.setOption(option);
return chart;
};
const box1Loading = ref(false); const box1Loading = ref(false);
const box2Loading = ref(false); const box2Loading = ref(false);
const box3Loading = ref(false); const box3Loading = ref(false);
const box4Loading = ref(false); const box4Loading = ref(false);
const btnActiveName = ref("注册地分布"); const btnActiveName = ref("调查次数");
const nodes = ref([
{
id: 0,
name: "泰丰先行",
// category: 0,
symbolSize: 30,
value: 8,
symbol: `image://${CompanyImg}`,
},
{
id: 1,
name: "国轩高科",
// category: 0,
symbolSize: 30,
value: 9,
symbol: `image://${CompanyImg}`,
},
{
id: 2,
name: "智方纳米",
// category: 2,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
},
{
id: 3,
name: "香百科技",
// category: 1,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
},
{
id: 4,
name: "格林滨",
// category: 2,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
},
{
id: 5,
name: "江西紫宸",
// category: 2,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
},
{
id: 6,
name: "紫江企业",
// category: 4,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
},
{
id: 7,
name: "大而美法案",
// category: 4,
symbolSize: 50,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 8,
name: "比亚迪",
// category: 0,
symbolSize: 30,
value: 10,
symbol: `image://${CompanyImg}`,
},
{
id: 9,
name: "铜陵有色",
// category: 3,
symbolSize: 30,
value: 8,
symbol: `image://${CompanyImg}`,
},
{
id: 10,
name: "长盛精密",
// category: 1,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
},
{
id: 11,
name: "天合光能",
// category: 0,
symbolSize: 30,
value: 8,
symbol: `image://${CompanyImg}`,
},
{
id: 12,
name: "昆仑化学",
// category: 2,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
},
{
id: 13,
name: "嘉源科技",
// category: 1,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: "华阳集团",
// category: 4,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
},
{
id: 15,
name: "海辰智能",
// category: 1,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
},
]);
const links = ref([
{ source: 1, target: 7, label: { show: true, formatter: '合作' } },
{ source: 2, target: 7, label: { show: true, formatter: '持股' } },
{ source: 3, target: 7, label: { show: true, formatter: '合作' } },
{ source: 4, target: 7, lineStyle: { type: 'dashed', color: '#d32f2f' }, label: { show: true, formatter: '从属' } },
{ source: 5, target: 7, label: { show: true, formatter: '合作' } },
{ source: 6, target: 7, label: { show: true, formatter: '持股' } },
{ source: 0, target: 7, label: { show: true, formatter: '持股' } },
{ source: 8, target: 7, label: { show: true, formatter: '合作' } },
{ source: 9, target: 7, lineStyle: { type: 'dashed', color: '#d32f2f' }, label: { show: true, formatter: '从属' } },
{ source: 10, target: 7, lineStyle: { type: 'dashed', color: '#d32f2f' }, label: { show: true, formatter: '合作' } },
{ source: 11, target: 7, label: { show: true, formatter: '合作' } },
{ source: 12, target: 7, label: { show: true, formatter: '合作' } },
{ source: 13, target: 7, label: { show: true, formatter: '合作' } },
{ source: 14, target: 7, label: { show: true, formatter: '合作' } },
{ source: 15, target: 7, label: { show: true, formatter: '合作' } },
// { source: 0, target: 1, value: 1 },
// { source: 1, target: 8, value: 2 },
// { source: 1, target: 2, value: 1 },
// { source: 8, target: 11, value: 1 },
// { source: 8, target: 9, value: 1 },
// { source: 2, target: 5, value: 1 },
// { source: 2, target: 12, value: 1 },
// { source: 3, target: 10, value: 1 },
// { source: 3, target: 15, value: 1 },
// { source: 3, target: 13, value: 1 },
// { source: 4, target: 5, value: 1 },
// { source: 4, target: 12, value: 1 },
// { source: 5, target: 6, value: 1 },
// { source: 6, target: 14, value: 1 },
// { source: 7, target: 14, value: 1 },
// { source: 9, target: 10, value: 1 },
// { source: 10, target: 15, value: 1 },
// { source: 11, target: 13, value: 1 },
// { source: 12, target: 14, value: 1 },
]);
const provinceCoords = { const provinceCoords = {
"北京": [116.46, 39.92], "北京": [116.46, 39.92],
...@@ -192,6 +353,36 @@ const provinceCoords = { ...@@ -192,6 +353,36 @@ const provinceCoords = {
"台湾": [121.5, 25.05] "台湾": [121.5, 25.05]
}; };
// 数量统计
const totalCaseNum = ref(0)
const onCaseNum = ref(0)
const relateCnNum = ref(0)
const cancelRate = ref('0%')
const windRate = ref('0%')
const handleGetStat = async () => {
const params = {
sortCode: '337'
}
try {
const res = await getStatCount(params)
console.log('337数量统计', res);
if (res.code === 200 && res.data) {
totalCaseNum.value = res.data.allCaseNum
onCaseNum.value = res.data.underCaseNum
relateCnNum.value = res.data.involvinChinese
cancelRate.value = res.data.cancelNum
windRate.value = res.data.winRate
}
} catch (error) {
console.error('337数量统计error', error);
}
}
handleGetStat()
const handleGetStatcnOrgCount = async (type) => { const handleGetStatcnOrgCount = async (type) => {
box3Loading.value = true; box3Loading.value = true;
try { try {
...@@ -199,6 +390,8 @@ const handleGetStatcnOrgCount = async (type) => { ...@@ -199,6 +390,8 @@ const handleGetStatcnOrgCount = async (type) => {
type, type,
sortCode: "337" sortCode: "337"
}); });
console.log('中国公司受调查情况', res);
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
if (type === "01") { if (type === "01") {
chart3Data.value = { chart3Data.value = {
...@@ -274,7 +467,6 @@ const handleGetStatNum = async () => { ...@@ -274,7 +467,6 @@ const handleGetStatNum = async () => {
}; };
const chart2Data = ref([]); const chart2Data = ref([]);
const chart2ColorList = ref(["#69B1FF", "#FFC069", "#87E8DE", "#597EF7", "#D6E4FF", "#FF7875", "#B37FEB", "#FFA39E"]);
const handleGetStatArea = async () => { const handleGetStatArea = async () => {
box2Loading.value = true; box2Loading.value = true;
...@@ -283,14 +475,16 @@ const handleGetStatArea = async () => { ...@@ -283,14 +475,16 @@ const handleGetStatArea = async () => {
sortCode: "337" sortCode: "337"
}); });
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
console.log('调查案件领域分布', res);
chart2Data.value = res.data chart2Data.value = res.data
.filter(item => item.SORTCODE === "337" || item.SORTNAME === "337调查") .filter(item => item.sortcode === "337" || item.sortname === "337调查")
.map(item => ({ .map(item => ({
name: item.AREANAME, name: item.areaname,
value: item.AREACOUNT value: item.areacount
})); }));
nextTick(() => { nextTick(() => {
let chart2 = getPieChart(chart2Data.value, chart2ColorList.value); let chart2 = getPieChart(chart2Data.value);
setChart(chart2, "chart2"); setChart(chart2, "chart2");
}); });
} }
...@@ -309,7 +503,6 @@ const chart3Data = ref({ ...@@ -309,7 +503,6 @@ const chart3Data = ref({
const mapData = ref([]); const mapData = ref([]);
const chart4Data = ref([]); const chart4Data = ref([]);
const chart4ColorList = ref(["#69B1FF", "#FFC069", "#87E8DE", "#597EF7", "#D6E4FF", "#FF7875", "#B37FEB", "#FFA39E"]);
const handleGetSearchResult = async () => { const handleGetSearchResult = async () => {
box4Loading.value = true; box4Loading.value = true;
...@@ -323,7 +516,7 @@ const handleGetSearchResult = async () => { ...@@ -323,7 +516,7 @@ const handleGetSearchResult = async () => {
value: item.RESULTNUM value: item.RESULTNUM
})); }));
nextTick(() => { nextTick(() => {
let chart4 = getPieChart(chart4Data.value, chart4ColorList.value); let chart4 = getPieChart(chart4Data.value);
setChart(chart4, "chart4"); setChart(chart4, "chart4");
}); });
} }
...@@ -335,10 +528,13 @@ const handleGetSearchResult = async () => { ...@@ -335,10 +528,13 @@ const handleGetSearchResult = async () => {
}; };
onMounted(() => { onMounted(() => {
handleGetStatNum();
handleGetStatArea(); let graph = getGraphChart(nodes.value, links.value)
setChart(graph, 'graphChart')
handleGetStatNum();
handleGetStatArea();
handleGetStatcnOrgCount(btnActiveName.value === "调查次数" ? "01" : "02"); handleGetStatcnOrgCount(btnActiveName.value === "调查次数" ? "01" : "02");
handleGetSearchResult(); handleGetSearchResult();
}); });
...@@ -349,19 +545,34 @@ onMounted(() => { ...@@ -349,19 +545,34 @@ onMounted(() => {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
position: relative;
.graph-box {
position: absolute;
top: 100px;
left: 100px;
width: 1000px;
height: 600px;
border-radius: 10px;
z-index: 9999;
background: #fff;
}
.top { .top {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: 16px 160px; margin: 16px 160px;
.item { .item {
width: 388px; width: 388px;
height: 80px; height: 80px;
border-radius: 4px; border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2); box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
position: relative; position: relative;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
&::before { &::before {
position: absolute; position: absolute;
content: ""; content: "";
...@@ -371,6 +582,7 @@ onMounted(() => { ...@@ -371,6 +582,7 @@ onMounted(() => {
left: 0; left: 0;
top: 15px; top: 15px;
} }
.item-left { .item-left {
margin-left: 30px; margin-left: 30px;
margin-top: 25px; margin-top: 25px;
...@@ -381,6 +593,7 @@ onMounted(() => { ...@@ -381,6 +593,7 @@ onMounted(() => {
font-weight: 700; font-weight: 700;
line-height: 24px; line-height: 24px;
} }
.item-right { .item-right {
margin-top: 28px; margin-top: 28px;
margin-right: 35px; margin-right: 35px;
...@@ -391,8 +604,10 @@ onMounted(() => { ...@@ -391,8 +604,10 @@ onMounted(() => {
font-weight: 700; font-weight: 700;
line-height: 24px; line-height: 24px;
} }
.item-left-box { .item-left-box {
margin-left: 30px; margin-left: 30px;
.item-left1 { .item-left1 {
margin-top: 13px; margin-top: 13px;
height: 24px; height: 24px;
...@@ -402,6 +617,7 @@ onMounted(() => { ...@@ -402,6 +617,7 @@ onMounted(() => {
font-weight: 700; font-weight: 700;
line-height: 24px; line-height: 24px;
} }
.item-left2 { .item-left2 {
height: 2px; height: 2px;
color: rgba(95, 101, 108, 1); color: rgba(95, 101, 108, 1);
...@@ -413,10 +629,12 @@ onMounted(() => { ...@@ -413,10 +629,12 @@ onMounted(() => {
} }
} }
} }
.box-header { .box-header {
height: 56px; height: 56px;
display: flex; display: flex;
position: relative; position: relative;
.header-left { .header-left {
margin-top: 18px; margin-top: 18px;
width: 8px; width: 8px;
...@@ -424,6 +642,7 @@ onMounted(() => { ...@@ -424,6 +642,7 @@ onMounted(() => {
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
background: var(--color-main-active); background: var(--color-main-active);
} }
.title { .title {
margin-left: 14px; margin-left: 14px;
margin-top: 14px; margin-top: 14px;
...@@ -434,33 +653,37 @@ onMounted(() => { ...@@ -434,33 +653,37 @@ onMounted(() => {
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
} }
.header-btn-box {
position: absolute; // .header-btn-box {
top: 14px; // position: absolute;
right: 120px; // top: 14px;
display: flex; // right: 120px;
.btn { // display: flex;
margin-left: 8px;
height: 28px; // .btn {
padding: 0 8px; // margin-left: 8px;
box-sizing: border-box; // height: 28px;
border: 1px solid rgba(230, 231, 232, 1); // padding: 0 8px;
border-radius: 4px; // box-sizing: border-box;
background: rgba(255, 255, 255, 1); // border: 1px solid rgba(230, 231, 232, 1);
text-align: center; // border-radius: 4px;
line-height: 28px; // background: rgba(255, 255, 255, 1);
color: rgba(59, 65, 75, 1); // text-align: center;
font-family: Microsoft YaHei; // line-height: 28px;
font-size: 16px; // color: rgba(59, 65, 75, 1);
font-weight: 400; // font-family: Microsoft YaHei;
cursor: pointer; // font-size: 16px;
} // font-weight: 400;
.btnActive { // cursor: pointer;
border: 1px solid var(--color-main-active); // }
background: rgba(246, 250, 255, 1);
color: var(--color-main-active); // .btnActive {
} // border: 1px solid var(--color-main-active);
} // background: rgba(246, 250, 255, 1);
// color: var(--color-main-active);
// }
// }
.header-right { .header-right {
position: absolute; position: absolute;
top: 14px; top: 14px;
...@@ -468,9 +691,11 @@ onMounted(() => { ...@@ -468,9 +691,11 @@ onMounted(() => {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: 4px; gap: 4px;
.icon { .icon {
width: 28px; width: 28px;
height: 28px; height: 28px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -478,59 +703,99 @@ onMounted(() => { ...@@ -478,59 +703,99 @@ onMounted(() => {
} }
} }
} }
.center { .center {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: 0 160px; margin: 0 160px;
.box1 { .box1 {
width: 792px; width: 792px;
height: 360px; height: 360px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box1-main { .box1-main {
height: 300px; height: 263px;
}
.box1-footer {
height: 40px;
} }
} }
.box2 { .box2 {
width: 792px; width: 792px;
height: 360px; height: 360px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box2-main { .box2-main {
height: 300px; width: 792px;
// width: 752px; height: 263px;
box-sizing: border-box; box-sizing: border-box;
padding: 0 20px; padding: 0 24px;
} }
.box2-footer {
height: 40px;
} }
} }
}
.footer { .footer {
margin: 16px 160px; margin: 16px 160px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.box3 { .box3 {
width: 792px; width: 792px;
height: 360px; height: 360px;
.header-btn-box {
display: flex;
.btn {
margin-left: 8px;
height: 28px;
padding: 0 8px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px; border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
text-align: center;
line-height: 28px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
cursor: pointer;
}
.btnActive {
border: 1px solid var(--color-main-active);
background: rgba(246, 250, 255, 1);
color: var(--color-main-active);
}
}
.box3-main { .box3-main {
height: 300px; height: 263px;
} }
.box3-main1 { .box3-main1 {
height: 300px; height: 263px;
display: flex; display: flex;
.box3-main1-left { .box3-main1-left {
padding-top: 24px;
width: 380px; width: 380px;
height: 300px; height: 263px;
overflow-y: auto; // overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
.box3-main1-left-item { .box3-main1-left-item {
display: flex; display: flex;
height: 36px; height: 36px;
margin-left: 20px; margin-left: 20px;
.box3-main1-left-item-left { .box3-main1-left-item-left {
width: 24px; width: 24px;
height: 24px; height: 24px;
...@@ -542,12 +807,14 @@ onMounted(() => { ...@@ -542,12 +807,14 @@ onMounted(() => {
text-align: center; text-align: center;
line-height: 24px; line-height: 24px;
} }
.box3-main1-left-item-center { .box3-main1-left-item-center {
height: 36px; height: 36px;
line-height: 36px; line-height: 36px;
width: 220px; width: 220px;
margin-left: 12px; margin-left: 12px;
} }
.box3-main1-left-item-right { .box3-main1-left-item-right {
width: 80px; width: 80px;
box-sizing: border-box; box-sizing: border-box;
...@@ -556,22 +823,33 @@ onMounted(() => { ...@@ -556,22 +823,33 @@ onMounted(() => {
} }
} }
} }
.box3-main1-right { .box3-main1-right {
width: 390px; width: 390px;
height: 300px; height: 263px;
box-sizing: border-box;
padding-top: 24px;
padding-right: 24px;
}
.box3-footer {
height: 40px;
} }
} }
} }
.box4 { .box4 {
width: 792px; width: 792px;
height: 360px; height: 360px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box4-main { .box4-main {
height: 300px; height: 263px;
box-sizing: border-box; box-sizing: border-box;
padding: 0 20px; padding: 0 24px;
}
.box4-footer {
height: 40px;
} }
} }
} }
......
src/views/marketAccessRestrictions/marketAccessLayout/overview/337/utils/barChart.js
浏览文件 @ 97bf602f
...@@ -4,10 +4,10 @@ const getBarChart = (nameList, valueList) => { ...@@ -4,10 +4,10 @@ const getBarChart = (nameList, valueList) => {
const option = { const option = {
tooltip: {}, tooltip: {},
grid: { grid: {
top: '3%', top: 40,
right: '3%', right: 64,
bottom: '1%', bottom: 24,
left: '1%', left: 24,
containLabel: true containLabel: true
}, },
xAxis: { xAxis: {
...@@ -30,7 +30,12 @@ const getBarChart = (nameList, valueList) => { ...@@ -30,7 +30,12 @@ const getBarChart = (nameList, valueList) => {
show: false show: false
}, },
axisLabel: { axisLabel: {
show: true show: true,
textStyle: {
color: 'rgb(59, 65, 75)',
fontSize: '16px',
fontFamliy: 'Source Han Sans CN'
}
} }
}, },
series: [{ series: [{
...@@ -38,9 +43,14 @@ const getBarChart = (nameList, valueList) => { ...@@ -38,9 +43,14 @@ const getBarChart = (nameList, valueList) => {
data: valueList, data: valueList,
label: { label: {
show: true, show: true,
position: [610, 0], position: [480, 0],
formatter: function (params) { formatter: function (params) {
return params.value + ' 次' return params.value + ' 次'
},
textStyle: {
color: 'rgb(59, 65, 75)',
fontSize: '16px',
fontFamliy: 'Source Han Sans CN'
} }
}, },
barWidth: 8, barWidth: 8,
...@@ -49,11 +59,11 @@ const getBarChart = (nameList, valueList) => { ...@@ -49,11 +59,11 @@ const getBarChart = (nameList, valueList) => {
return new echarts.graphic.LinearGradient(0, 0, 1, 0, return new echarts.graphic.LinearGradient(0, 0, 1, 0,
[{ [{
offset: 0, offset: 0,
color: 'rgba(255,255,255,0)' color: 'rgb(231, 243, 255)'
}, },
{ {
offset: 1, offset: 1,
color: '#1778ff' color: 'rgb(5, 95, 194)'
} }
]); ]);
}, },
......
src/views/marketAccessRestrictions/marketAccessLayout/overview/337/utils/graph.js 0 → 100644
浏览文件 @ 97bf602f
import CompanyImg from "../symbol.png"
const getGraph = () => {
const nodes = [
'宁德时代', '泰丰先行', '国轩高科', '晶科能源', '容百科技',
'江西紫宸', '比亚迪', '长盈精密', '昆仑化学',
'海辰储能', '华阳集团', '嘉源科技', '天合光能',
'铜陵有色', '紫江企业', '格林美', '德方纳米'
];
return {
series: [{
type: 'graph',
layout: 'force',
symbolSize: 60,
roam: true,
label: {
show: true,
position: 'bottom',
color: '#333',
fontWeight: 'bold'
},
edgeSymbol: ['arrow', 'none'],
edgeSymbolSize: [8, 4],
force: {
repulsion: 800,
gravity: 0.1,
edgeLength: 240
},
data: nodes.map((name, idx) => ({
name,
draggable: true,
symbol: `image://${CompanyImg}`,
itemStyle: {
color: '#fff', // 设置圆形背景色
borderColor: 'rgb(59, 65, 75)', // 可选：圆形边框色
borderWidth: 3 // 可选：圆形边框宽度
},
symbolKeepAspect: true, // 保持图片比例
symbolSize: 60,
symbolClip: true, // 裁剪为圆形
label: {
show: true,
position: 'bottom',
color: '#333',
fontWeight: 'bold'
}
})),
links: [
{ source: 0, target: 1, label: { show: true, formatter: '合作' } },
{ source: 0, target: 2, label: { show: true, formatter: '持股' } },
{ source: 0, target: 3, label: { show: true, formatter: '合作' } },
{ source: 0, target: 4, lineStyle: { type: 'dashed', color: '#d32f2f' }, label: { show: true, formatter: '从属' } },
{ source: 0, target: 5, label: { show: true, formatter: '合作' } },
{ source: 0, target: 6, label: { show: true, formatter: '持股' } },
{ source: 0, target: 7, label: { show: true, formatter: '合作' } },
{ source: 0, target: 8, label: { show: true, formatter: '合作' } },
{ source: 0, target: 9, lineStyle: { type: 'dashed', color: '#d32f2f' }, label: { show: true, formatter: '从属' } },
{ source: 0, target: 10, lineStyle: { type: 'dashed', color: '#d32f2f' }, label: { show: true, formatter: '合作' } },
{ source: 0, target: 11, label: { show: true, formatter: '合作' } },
{ source: 0, target: 12, label: { show: true, formatter: '合作' } },
{ source: 0, target: 13, label: { show: true, formatter: '合作' } },
{ source: 0, target: 14, label: { show: true, formatter: '合作' } },
{ source: 0, target: 15, label: { show: true, formatter: '合作' } },
{ source: 0, target: 16, label: { show: true, formatter: '合作' } }
],
edgeLabel: {
show: true,
position: 'middle',
fontSize: 14,
color: '#666',
backgroundColor: 'rgba(255,255,255,0.9)',
borderColor: '#bbb',
borderWidth: 1,
borderRadius: 8,
padding: [4, 8],
formatter: params => params.data.label ? params.data.label.formatter : ''
}
}]
}
}
export default getGraph
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/overview/337/utils/graphChart.js 0 → 100644
浏览文件 @ 97bf602f
const getGraphChart = (nodes, links) => {
const option = {
// title: {
// text: '企业关系网络',
// subtext: '节点图标表示企业，箭头表示关联方向',
// top: 'top',
// left: 'center',
// textStyle: {
// fontSize: 20,
// color: '#2c3e50'
// }
// },
// tooltip: {
// formatter: function (params) {
// if (params.dataType === 'node') {
// return `<div style="font-weight:bold;margin-bottom:5px">${params.data.name}</div>
// <div>类别: ${categories[params.data.category].name}</div>
// <div>关联度: ${params.data.value}</div>`;
// } else {
// return `<div>${nodes[params.data.source].name} → ${nodes[params.data.target].name}</div>
// <div>关联强度: ${params.data.value}</div>`;
// }
// }
// },
legend: {
// data: categories.map(c => c.name),
show: false,
top: 40,
textStyle: {
fontSize: 12
}
},
animation: true,
animationDuration: 1000,
animationEasing: 'cubicOut',
series: [{
type: 'graph',
itemStyle: {
color: '#73C0DE'
},
layout: 'force',
data: nodes,
links: links,
// categories: categories,
roam: true,
label: {
show: true,
position: 'bottom',
formatter: '{b}',
fontSize: 12,
fontWeight: 'bold',
// backgroundColor: 'rgba(255,255,255,0.8)',
padding: [4, 6],
borderRadius: 4
},
lineStyle: {
color: 'source',
curveness: 0,
width: 2,
type: 'dashed',
color: '#AED6FF'
},
edgeSymbol: ['none', 'arrow'],
edgeSymbolSize: [0, 10],
emphasis: {
focus: 'adjacency',
lineStyle: {
width: 4
},
label: {
show: true,
fontSize: 14
}
},
force: {
repulsion: 300,
gravity: 0,
edgeLength: 300
},
edgeLabel: {
show: true,
position: 'middle',
fontSize: 14,
color: '#666',
backgroundColor: 'rgba(255,255,255,0.9)',
borderColor: '#bbb',
borderWidth: 1,
borderRadius: 4,
padding: [4, 8],
formatter: params => params.data.label ? params.data.label.formatter : ''
}
}],
// color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de']
};
return option
}
export default getGraphChart
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/overview/337/utils/multiLineChart.js
浏览文件 @ 97bf602f
...@@ -12,10 +12,10 @@ const getMultiLineChart = (dataX, dataY1, dataY2) => { ...@@ -12,10 +12,10 @@ const getMultiLineChart = (dataX, dataY1, dataY2) => {
} }
}, },
grid: { grid: {
top: '8%', top: 40,
right: '5%', right: 24,
bottom: '5%', bottom: 24,
left: '5%', left: 24,
containLabel: true containLabel: true
}, },
legend: { legend: {
...@@ -32,7 +32,16 @@ const getMultiLineChart = (dataX, dataY1, dataY2) => { ...@@ -32,7 +32,16 @@ const getMultiLineChart = (dataX, dataY1, dataY2) => {
], ],
yAxis: [ yAxis: [
{ {
type: 'value' type: 'value',
name: '数量',
splitLine: {
show: true,
lineStyle: {
type: 'dashed', // 虚线类型
color: 'rgb(231, 243, 255)', // 灰色线条
width: 1 // 线宽为1
}
}
} }
], ],
series: [ series: [
......
src/views/marketAccessRestrictions/marketAccessLayout/overview/337/utils/piechart.js
浏览文件 @ 97bf602f
const getPieChart = (data,colorList) => { 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: [
...@@ -7,6 +8,7 @@ const getPieChart = (data,colorList) => { ...@@ -7,6 +8,7 @@ const getPieChart = (data,colorList) => {
radius: [80, 100], radius: [80, 100],
height: '100%', height: '100%',
left: 'center', left: 'center',
top: 'center',
width: '100%', width: '100%',
itemStyle: { itemStyle: {
borderColor: '#fff', borderColor: '#fff',
...@@ -17,11 +19,18 @@ const getPieChart = (data,colorList) => { ...@@ -17,11 +19,18 @@ const getPieChart = (data,colorList) => {
formatter: '{name|{b}} {time|{c} 项 {d}%}\n', formatter: '{name|{b}} {time|{c} 项 {d}%}\n',
minMargin: 5, minMargin: 5,
edgeDistance: 10, edgeDistance: 10,
lineHeight: 15, lineHeight: 24,
rich: { rich: {
name: {
color: 'rgba(59, 65, 75, 1)',
fontFamily: 'Source Han Sans CN',
fontSize: 16,
fontWeight: 'bold',
},
time: { time: {
fontSize: 12, fontSize: 14,
color: '#999' fontFamily: 'Source Han Sans CN',
color: 'rgba(95, 101, 108, 1)',
} }
} }
}, },
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论