提交 727de69b authored 作者: huhuiqing's avatar huhuiqing

Merge branch 'master' of http://8.140.26.4:10003/caijian/risk-monitor into dev_hhq

......@@ -1346,7 +1346,7 @@ onUnmounted(() => {});
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 400;
line-height: 36px;
line-height: 32px;
margin-left: 5px;
}
.btn-icon {
......@@ -1492,6 +1492,7 @@ onUnmounted(() => {});
margin: 0 16px;
background: #e7f3ff;
cursor: pointer;
position: relative;
&:hover {
background: #cae3fc;
}
......@@ -1500,11 +1501,13 @@ onUnmounted(() => {});
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 400;
line-height: 44px;
line-height: 42px;
margin-left: 5px;
}
.btn-icon {
margin-left: 20px;
position: absolute;
top: 0;
right: 10px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
......
......@@ -8,17 +8,28 @@ import { ref, onMounted } from "vue";
import * as echarts from "echarts";
// import { graphData } from "./mockData";
import Img from "./assets/images/img.png";
import Img1 from "./assets/images/img1.png";
import Img2 from "./assets/images/img2.png";
import Img3 from "./assets/images/img3.png";
import Img4 from "./assets/images/img4.png";
import Img5 from "./assets/images/img5.png";
import Img6 from "./assets/images/img6.png";
import Img7 from "./assets/images/img7.png";
import Img8 from "./assets/images/img8.png";
const graphData = {
nodes: [
{ id: "huawei", name: "美国众议院", category: 0, symbolSize: 80 },
{ id: "huawei-cloud", name: "约翰·斯奎尔斯", category: 0, symbolSize: 50 },
{ id: "huawei-digital-energy", name: "马尔科·卢比奥", category: 0, symbolSize: 50 },
{ id: "huawei-intelligent-car", name: "埃隆·马斯克", category: 0, symbolSize: 50 },
{ id: "qualcomm", name: "道格·伯格姆", category: 1, symbolSize: 50 },
{ id: "intel", name: "斯科特·贝森特", category: 1, symbolSize: 50 },
{ id: "mediatek", name: "杰弗里·凯斯勒", category: 1, symbolSize: 50 },
{ id: "shenghongda", name: "杰弗里·凯斯勒", category: 1, symbolSize: 50 },
{ id: "foxconn", name: "唐纳德·特朗普", category: 1, symbolSize: 50 }
{ id: "huawei", name: "美国众议院", category: 0, symbolSize: 60, symbol: `image://${Img}` },
{ id: "foxconn", name: "唐纳德·特朗普", category: 1, symbolSize: 42, symbol: `image://${Img1}` },
{ id: "huawei-cloud", name: "约翰·斯奎尔斯", category: 2, symbolSize: 42, symbol: `image://${Img2}` },
{ id: "huawei-digital-energy", name: "马尔科·卢比奥", category: 2, symbolSize: 42, symbol: `image://${Img3}` },
{ id: "huawei-intelligent-car", name: "埃隆·马斯克", category: 2, symbolSize: 42, symbol: `image://${Img4}` },
{ id: "qualcomm", name: "道格·伯格姆", category: 2, symbolSize: 42, symbol: `image://${Img5}` },
{ id: "intel", name: "斯科特·贝森特", category: 2, symbolSize: 42, symbol: `image://${Img6}` },
{ id: "mediatek", name: "杰弗里·凯斯勒", category: 2, symbolSize: 42, symbol: `image://${Img7}` },
{ id: "shenghongda", name: "杰弗里·凯德勒", category: 2, symbolSize: 42, symbol: `image://${Img8}` }
// { id: "luxshare", name: "立讯精密", category: 1, symbolSize: 20 },
// { id: "tianma", name: "天马微电子", category: 1, symbolSize: 20 },
// { id: "desay", name: "德赛电池", category: 1, symbolSize: 20 },
......@@ -86,10 +97,10 @@ onMounted(() => {
const option = {
title: { text: "", left: "center" },
tooltip: {},
legend: {
data: graphData.categories.map(item => item.name),
left: "left"
},
// legend: {
// data: graphData.categories.map(item => item.name),
// left: "left"
// },
series: [
{
type: "graph",
......@@ -104,7 +115,33 @@ onMounted(() => {
roam: true, // 支持缩放、平移
label: {
show: true,
fontSize: 12
fontSize: 14,
position: "bottom",
formatter: function (params) {
// 根据条件返回不同样式的文本
if (params.data.category === 0) {
return `{a|${params.name}}`; // 使用富文本样式
} else if (params.data.category === 1) {
return `{b|${params.name}}`;
} else {
return params.name; // 默认样式
}
},
rich: {
a: {
// 重要节点的样式
color: "#000",
fontSize: 18,
fontWeight: "bold",
padding: [2, 4],
borderRadius: 2
},
b: {
// 普通节点的样式
color: "rgba(5, 95, 194, 1)",
fontSize: 14,
}
}
},
edgeSymbol: ["arrow", "none"], // 边的箭头
edgeSymbolSize: [8, 50],
......@@ -136,7 +173,8 @@ onMounted(() => {
<style scoped>
.chart-container {
width: 100%;
height: 600px;
background-color: #fff; /* 深色背景,模拟原图风格 */
height: 430px;
margin: 0 auto;
background-color: #f7f8f9; /* 深色背景,模拟原图风格 */
}
</style>
......@@ -27,7 +27,7 @@
<div class="resource-content" style="width: 49.25%;margin-left: 1.5%;">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/resource-icon-2.png"></img>
<div class="item-header-text" style="width: 130px;">创新主体排名</div>
<div class="item-header-text" style="width: 200px; margin-right: 130px;">创新主体排名</div>
<el-radio-group v-model="InnovationRankingBtn" size="small" @change="handleInnovationRankingBtn">
<el-radio-button value="enterprise" border>科技企业
</el-radio-button>
......@@ -95,7 +95,7 @@
</div>
美国
</div>
<el-select v-model="areaSelect" placeholder="" style="width: 150px;float: right;margin-right: 20px;"
<el-select v-model="areaSelect" placeholder="" style="width: 150px;margin-left: 160px;margin-right: 20px;"
size="small">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
......@@ -117,11 +117,11 @@
<div style="display: flex;height: 400px;">
<div style=" width:60%;height: 100%;" id="char4">
</div>
<div style="display: grid;width: 35%;margin: 10px;">
<el-select v-model="areaSelect" placeholder="" style="width: 150px;float: right ;" size="small">
<div style="width: 35%;margin: 20px 10px;">
<el-select v-model="areaSelect" placeholder="" style="width: 120px;margin-left: 150px;" size="small">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<div>
<div style="margin-top: 100px;">
<div style="display: flex;align-items: center;height: 30px;justify-content: space-between;">
<div class="legend-icon" style="background-color:#CE4F51 ;">
</div>
......@@ -198,7 +198,7 @@
</div>
<!-- 右侧选择器 -->
<el-select v-model="paperSelect" placeholder="" style="width: 150px;float: right;margin-right: 20px;"
<el-select v-model="paperSelect" placeholder="" style="width: 150px;float: right;margin-right: 10px;"
size="small">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
......@@ -422,7 +422,7 @@ onMounted(() => {
height: 450px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: var(---, 10px);
border-radius: 10px;
/* 业务系统/模块阴影 */
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
......@@ -496,7 +496,7 @@ onMounted(() => {
font-size: 16px;
line-height: 48px;
text-align: right;
margin-left: 30px;
width: calc(100% - 350px);
.item-header-right-icon {
......
......@@ -59,7 +59,7 @@
数据来源:美国某某局</div>
</div>
<div class="item-header-divider"></div>
<div style="display: flex;margin: 10px;">
<div style="display: flex;margin: 10px 20px; justify-content: space-between;">
<el-radio-group v-model="strengthBtn" size="small" @change="handleStrengthBtn">
<el-radio-button value="all" border>全部领域
</el-radio-button>
......@@ -91,11 +91,11 @@
<div style=" width:60%;height: 100%;" id="char2">
</div>
<div style="display: grid;width: 35%;margin: 10px;">
<el-select v-model="areaSelect" placeholder="" style="width: 100px;float: right;margin: 10px;" size="small">
<div style="width: 35%;margin: 10px;">
<el-select v-model="areaSelect" placeholder="" style="width: 120px;margin: 10px; margin-left: 140px;" size="small">
<el-option v-for="item in areaTimeList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<div>
<div style="width: 80%; margin: 60px auto 0;">
<div style="display: flex;align-items: center;height: 30px;justify-content: space-between;">
<div class="legend-icon" style="background-color:#CE4F51 ;">
</div>
......@@ -170,7 +170,7 @@
<script setup>
import { onMounted, ref, computed } from "vue";
import router from '@/router/index'
import router from "@/router/index";
import * as echarts from "echarts";
import DivideHeader from "@/components/DivideHeader.vue";
import Timeline from "../component/Timeline.vue";
......@@ -240,8 +240,8 @@ const distribution = ref([
text: "1626",
unit: "个",
change: "较上月+3",
path: '/billHome',
color: ['#9AC8FF', '#BCDCFF', '#E7F4FF', '#0F5EDB']
path: "/billHome",
color: ["#9AC8FF", "#BCDCFF", "#E7F4FF", "#0F5EDB"]
},
{
titlle: "行政令",
......@@ -249,8 +249,8 @@ const distribution = ref([
text: "1626",
unit: "个",
change: "较上月+1",
path: '/decree',
color: ['#FDE19A', '#FEECBD', '#FFFBE6', '#D68E16']
path: "/decree",
color: ["#FDE19A", "#FEECBD", "#FFFBE6", "#D68E16"]
},
{
titlle: "科技智库",
......@@ -258,8 +258,8 @@ const distribution = ref([
text: "66",
unit: "次",
change: "较上月+2",
path: '/thinkTank',
color: ['#C9AAF0', '#DFCAF6', '#FAF1FF', '#531DAC']
path: "/thinkTank",
color: ["#C9AAF0", "#DFCAF6", "#FAF1FF", "#531DAC"]
},
{
titlle: "出口管制",
......@@ -267,8 +267,8 @@ const distribution = ref([
text: "66",
unit: "次",
change: "较上月+1",
path: '/exportControl',
color: ['#96DFDD', '#BCEFEC', '#E7FFFB', '#006E75']
path: "/exportControl",
color: ["#96DFDD", "#BCEFEC", "#E7FFFB", "#006E75"]
},
{
titlle: "投融资限制",
......@@ -276,8 +276,8 @@ const distribution = ref([
text: "119",
unit: "次",
change: "较上月+1",
path: '/finance',
color: ['#F5BEBC', '#F7D3D0', '#FEF1F0', '#C64C4E']
path: "/finance",
color: ["#F5BEBC", "#F7D3D0", "#FEF1F0", "#C64C4E"]
},
{
titlle: "市场准入",
......@@ -285,8 +285,8 @@ const distribution = ref([
text: "223",
unit: "次",
change: "较上个月+1",
path: '/marketAccessRestrictions',
color: ['#FFE3B9', '#FFEDCE', '#FFF7E6', '#D46B08']
path: "/marketAccessRestrictions",
color: ["#FFE3B9", "#FFEDCE", "#FFF7E6", "#D46B08"]
}
]);
......@@ -321,7 +321,7 @@ const chart1Data = ref({
});
const strengthBtn = ref("all");
function handleStrengthBtn() { }
function handleStrengthBtn() {}
//打压遏制强度变化时间选择器
const strengthSelect = ref("近一年");
const strengthTimeList = ref([
......@@ -374,11 +374,11 @@ const setChart = (option, chartId) => {
};
// 点击打压遏制手段分布 跳转到各个页面
const handleClickItem = (item) => {
const handleClickItem = item => {
router.push({
path: item.path
})
}
});
};
onMounted(() => {
let char1 = getBarChart(chart1Data.value.name, chart1Data.value.value, true);
......@@ -467,7 +467,7 @@ onMounted(() => {
height: 450px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: var(---, 10px);
border-radius: 10px;
/* 业务系统/模块阴影 */
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
......
......@@ -107,7 +107,7 @@ import DivideHeader from "@/components/DivideHeader.vue";
import radarChart3 from '../js/radarChart3.js'
//科技实力按钮
const strengthBtn = ref('enterprise')
const strengthBtn = ref('potential')
function handlestrengthBtn() {
}
......@@ -297,6 +297,7 @@ onMounted(() => {
.resource-box {
height: 800px;
// width: 1600px;
}
.title-text {
......@@ -326,7 +327,7 @@ onMounted(() => {
height: 550px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: var(---, 10px);
border-radius: 10px;
/* 业务系统/模块阴影 */
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
......
......@@ -62,7 +62,7 @@
:class="{ tempActive: tempActiveIndex === index }"
v-for="(temp, index) in tempList"
:key="index"
@click="handleClickTemp(item, index)"
@click="handleClickTemp(temp, index)"
>
<div class="header">
<div class="title">{{ temp.title }}</div>
......@@ -359,7 +359,7 @@ const tabList = ref([
]);
const tempList = ref([
{
title: "法案",
title: "法案1",
desc: "基于法案内容生成各维度的综合分析报告"
},
{
......@@ -381,6 +381,7 @@ const tempActiveIndex = ref(0);
const handleClickTemp = (item, index) => {
tempActiveIndex.value = index;
curTempTitle.value = item.title;
};
// 导出
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论