Skip to content

R
risk-monitor
提交 cb673cbc authored 作者: 张烨's avatar 张烨
浏览文件
操作

Merge branch 'master' into zy-dev

上级 8c356cbc 2cc1c9e6
显示空白字符变更
内嵌 并排
正在显示 包含 855 行增加 和 37 行删除
src/api/news/newsBrief.js
浏览文件 @ cb673cbc
......@@ -55,3 +55,10 @@ export function getAreaList() {
url: `/api/commonDict/areaType`,
})
}
export function getNewsDetail(params) {
return request({
method: 'GET',
url: `/api/news/findById/${params.newsId}`,
params
})
}
src/components/base/GraphChart/graphChart.js 0 → 100644
浏览文件 @ cb673cbc
const getGraphChart = (nodes, links, layoutType) => {
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: layoutType,
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: '#333',
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 : ''
}
// edgeLabel: {
// show: true,
// position: 'middle',
// // fontSize: 14,
// // backgroundColor: 'rgba(255,255,255,0.9)',
// // borderColor: '#bbb',
// borderWidth: 1,
// borderRadius: 4,
// padding: [4, 8],
// // 核心：使用 formatter 函数
// formatter: function (params) {
// console.log('完整 params:', params);
// console.log('label 数据:', params.data.label);
// // 获取标签的文本内容，它存储在 params.data.label.formatter 里
// const labelText = params.data.label?.formatter || '';
// // 定义一个颜色映射
// const colorMap = {
// '合作': '#52c41a', // 绿色
// '持股': '#faad14', // 橙色
// '从属': '#f5222d' // 红色
// };
// // 根据文本内容获取对应的颜色，如果没有定义则使用默认的灰色
// const color = colorMap[labelText] || '#666';
// // 返回一个带内联样式的 HTML 字符串
// return `<span style="color: ${color};">${labelText}</span>`;
// }
// }
}],
// color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de']
};
return option
}
export default getGraphChart
\ No newline at end of file
src/components/base/GraphChart/index.vue 0 → 100644
浏览文件 @ cb673cbc
<template>
<div class="graph-chart-wrapper" id="graph">
</div>
</template>
<script setup>
import { onMounted, nextTick } from 'vue';
import setChart from '@/utils/setChart';
import getGraphChart from './graphChart';
const props = defineProps({
nodes: {
type: Array,
default: []
},
links: {
type: Array,
default: []
},
layoutType: {
type: String,
default: 'force'
},
width: {
type: String,
default: 'force'
},
height: {
type: String,
default: 'force'
}
})
onMounted(() => {
const graph = getGraphChart(props.nodes, props.links, props.layoutType)
setChart(graph, 'graph')
})
</script>
<style lang="scss" scoped>
.graph-chart-wrapper {
width: 100%;
height: 100%;
}
</style>
\ No newline at end of file
src/components/base/WarningPane/index.vue
浏览文件 @ cb673cbc
......@@ -64,6 +64,7 @@ const handleClickPane = () => {
border-radius: 10px;
border: 1px solid var(--color-primary-100);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
cursor: pointer;
}
.level1 {
......
src/components/base/images/ColorSvg.vue
浏览文件 @ cb673cbc
......@@ -21,9 +21,10 @@ const props = defineProps({
// SVG颜色
color: {
type: String,
default: '#000'
default: null
}
, size: {
,
size: {
type: Number,
default: null
}
......@@ -43,6 +44,7 @@ const processedSvgContent = computed(() => {
// 替换SVG中的颜色
let processed = svgContent.value;
if (props.color) {
// 替换fill属性
processed = processed.replace(/fill="([^"]*)"/g, (match, p1) => {
......@@ -61,7 +63,9 @@ const processedSvgContent = computed(() => {
}
return `stroke="${props.color}"`;
});
}
if (props.size) {
// 替换width属性
processed = processed.replace(/width="([^"]*)"/g, (match, p1) => {
if (props.size !== null) {
......@@ -77,6 +81,7 @@ const processedSvgContent = computed(() => {
}
return match;
});
}
console.log(processed)
return processed;
......@@ -131,10 +136,14 @@ onMounted(() => {
<style scoped>
.color-svg {
display: inline-block;
/* svg垂直居中 */
vertical-align: middle;
}
.svg-container {
display: inline-block;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
......
src/components/base/texts/ColorPrefixTitle.vue
浏览文件 @ cb673cbc
<template>
<el-space :size="16" class="text-tip-1-bold box">
<el-space :size="16" class="text-tip-1-bold box-color-prefix">
<div class="color-prefix"></div>
<slot></slot>
</el-space>
......@@ -11,6 +11,10 @@ const props = defineProps({
color: {
type: String,
default: 'var(--color-primary-100)'
},
height: {
type: String,
default: '16px'
}
})
</script>
......@@ -18,11 +22,11 @@ const props = defineProps({
<style lang="scss" scoped>
.color-prefix {
width: 8px;
height: 16px;
height: v-bind(height);
background-color: v-bind(color);
}
.box {
.box-color-prefix {
color: v-bind(color);
}
</style>
\ No newline at end of file
src/styles/components/GraphChart/index.vue 0 → 100644
浏览文件 @ cb673cbc
<template>
<el-row class="wrapper layout-grid-line">
<el-col :span="span">
<pre>
{{
`import GraphChart from '@/components/base/GraphChart/index.vue';
<template>
<GraphChart :nodes="nodes" :links="links" layoutType="none">
</GraphChart>
</template>
`}}
</pre>
<div class="chart-box">
<GraphChart :nodes="nodes" :links="links" layoutType="none">
</GraphChart>
</div>
</el-col>
</el-row>
</template>
<script setup>
import { ref } from 'vue'
import GraphChart from '@/components/base/GraphChart/index.vue'
import CompanyImg from "./symbol.png"
const span = 24
const nodes = ref([
{
id: 0,
name: "泰丰先行",
// category: 0,
symbolSize: 30,
value: 8,
symbol: `image://${CompanyImg}`,
x: 50,
y: 10
},
{
id: 1,
name: "国轩高科",
// category: 0,
symbolSize: 30,
value: 9,
symbol: `image://${CompanyImg}`,
x: 150,
y: 10
},
{
id: 2,
name: "智方纳米",
// category: 2,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
x: 250,
y: 10
},
{
id: 3,
name: "香百科技",
// category: 1,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
x: 350,
y: 10
},
{
id: 4,
name: "格林滨",
// category: 2,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
x: 450,
y: 10
},
{
id: 5,
name: "江西紫宸",
// category: 2,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
x: 550,
y: 10
},
{
id: 6,
name: "紫江企业",
// category: 4,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
x: 650,
y: 10
},
{
id: 7,
name: "大而美法案",
// category: 4,
symbolSize: 50,
value: 5,
symbol: `image://${CompanyImg}`,
x: 300,
y: 200
},
{
id: 8,
name: "比亚迪",
// category: 0,
symbolSize: 30,
value: 10,
symbol: `image://${CompanyImg}`,
x: 50,
y: 400
},
{
id: 9,
name: "铜陵有色",
// category: 3,
symbolSize: 30,
value: 8,
symbol: `image://${CompanyImg}`,
x: 150,
y: 400
},
{
id: 10,
name: "长盛精密",
// category: 1,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
x: 250,
y: 400
},
{
id: 11,
name: "天合光能",
// category: 0,
symbolSize: 30,
value: 8,
symbol: `image://${CompanyImg}`,
x: 350,
y: 400
},
{
id: 12,
name: "昆仑化学",
// category: 2,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
x: 250,
y: 400
},
{
id: 13,
name: "嘉源科技",
// category: 1,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
x: 450,
y: 400
},
{
id: 14,
name: "华阳集团",
// category: 4,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
x: 550,
y: 400
},
{
id: 15,
name: "海辰智能",
// category: 1,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
x: 650,
y: 400
},
]);
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: '合作', color: 'red', borderColor: 'red' } },
]);
</script>
<style lang="scss" scoped>
.wrapper {
width: 100%;
}
.chart-box {
width: 800px;
height: 500px;
}
</style>
\ No newline at end of file
src/styles/components/GraphTreeChart/index.vue 0 → 100644
浏览文件 @ cb673cbc
<template>
<el-row class="wrapper layout-grid-line">
<el-col :span="span">
<pre>
{{
`import GraphChart from '@/components/base/GraphChart/index.vue';
<template>
<GraphChart :nodes="nodes" :links="links" layoutType="force" >
</GraphChart>
</template>
`}}
</pre>
<div class="chart-box">
<GraphChart :nodes="nodes" :links="links">
</GraphChart>
</div>
</el-col>
</el-row>
</template>
<script setup>
import { ref } from 'vue'
import GraphChart from '@/components/base/GraphChart/index.vue'
import CompanyImg from "./symbol.png"
const span = 24
const nodes = ref([
{
id: 1,
name: "泰丰先行",
// category: 0,
symbolSize: 30,
value: 8,
symbol: `image://${CompanyImg}`,
},
{
id: 2,
name: "国轩高科",
// category: 0,
symbolSize: 30,
value: 9,
symbol: `image://${CompanyImg}`,
},
{
id: 3,
name: "智方纳米",
// category: 2,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
},
{
id: 4,
name: "香百科技",
// category: 1,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
},
{
id: 5,
name: "格林滨",
// category: 2,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
},
{
id: 6,
name: "江西紫宸",
// category: 2,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
},
{
id: 7,
name: "紫江企业",
// category: 4,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
},
{
id: 8,
name: "大而美法案",
// category: 4,
symbolSize: 50,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 9,
name: "比亚迪",
// category: 0,
symbolSize: 30,
value: 10,
symbol: `image://${CompanyImg}`,
},
{
id: 10,
name: "铜陵有色",
// category: 3,
symbolSize: 30,
value: 8,
symbol: `image://${CompanyImg}`,
},
{
id: 11,
name: "长盛精密",
// category: 1,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
},
{
id: 12,
name: "天合光能",
// category: 0,
symbolSize: 30,
value: 8,
symbol: `image://${CompanyImg}`,
},
{
id: 13,
name: "昆仑化学",
// category: 2,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: "嘉源科技",
// category: 1,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
},
{
id: 15,
name: "华阳集团",
// category: 4,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
},
{
id: 16,
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: 8, target: 7, label: { show: true, formatter: '持股' } },
{ source: 9, target: 7, label: { show: true, formatter: '合作' } },
{ source: 10, target: 7, lineStyle: { type: 'dashed', color: '#d32f2f' }, label: { show: true, formatter: '从属' } },
{ source: 11, target: 7, lineStyle: { type: 'dashed', color: '#d32f2f' }, 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: 16, target: 7, label: { show: true, formatter: '合作', color: 'red', borderColor: 'red' } },
]);
</script>
<style lang="scss" scoped>
.wrapper {
width: 100%;
}
.chart-box {
width: 1600px;
height: 800px;
}
</style>
\ No newline at end of file
src/styles/components/WarnningPane/index.vue
浏览文件 @ cb673cbc
......@@ -12,12 +12,12 @@ const span = 12
{{
`import WarnningPane from '@/components/base/WarningPane/index.vue';
<template>
<WarnningPane warnningLevel="特别重大风险" warnningContent="我是特别重大风险内容文字">
<WarnningPane warnningLevel="特别重大风险" warnningContent="我是特别重大风险内容文字我是特别重大风险内容文字">
</WarnningPane>
</template>
`}}
</pre>
<WarnningPane warnningLevel="特别重大风险" warnningContent="我是特别重大风险内容文字">
<WarnningPane warnningLevel="特别重大风险" warnningContent="我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字">
</WarnningPane>
</el-col>
</el-row>
......
src/styles/components/index.vue
浏览文件 @ cb673cbc
......@@ -31,6 +31,12 @@
<el-tab-pane label="预警面板" lazy>
<WarnningPane />
</el-tab-pane>
<el-tab-pane label="层级关系图" lazy>
<GraphChart />
</el-tab-pane>
<el-tab-pane label="引力关系图" lazy>
<GraphTreeChart />
</el-tab-pane>
</el-tabs>
</div>
</el-space>
......@@ -51,6 +57,8 @@ import TextPage from './TextPage/index.vue';
import ImagesPage from './Images/index.vue';
import PeoplePage from './People/index.vue';
import WarnningPane from './WarnningPane/index.vue'
import GraphChart from './GraphChart/index.vue'
import GraphTreeChart from './GraphTreeChart/index.vue'
</script>
<style lang="scss" scoped>
......
src/views/decree/decreeHome/index.vue
浏览文件 @ cb673cbc
......@@ -450,7 +450,7 @@ import {
getDecreehylyList,
getDecreeTypeList
} from "@/api/decree/home";
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 { getNews, getSocialMedia, getRiskSignal } from "@/api/general/index";
......@@ -2051,7 +2051,7 @@ onMounted(async () => {
margin-top: 21px;
height: 450px;
display: flex;
gap:16px;
gap: 16px;
.box3 {
width: 792px;
......
src/views/marketAccessRestrictions/marketAccessLayout/overview/337/index.vue
浏览文件 @ cb673cbc
......@@ -293,26 +293,7 @@ const links = ref([
{ 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 },
{ source: 15, target: 7, label: { show: true, formatter: '合作', color: 'red', borderColor: 'red' } },
]);
......
src/views/marketAccessRestrictions/marketAccessLayout/overview/337/utils/graphChart.js
浏览文件 @ cb673cbc
......@@ -84,14 +84,46 @@ const getGraphChart = (nodes, links) => {
show: true,
position: 'middle',
fontSize: 14,
color: '#666',
color: '#333',
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 : ''
}
// edgeLabel: {
// show: true,
// position: 'middle',
// // fontSize: 14,
// // backgroundColor: 'rgba(255,255,255,0.9)',
// // borderColor: '#bbb',
// borderWidth: 1,
// borderRadius: 4,
// padding: [4, 8],
// // 核心：使用 formatter 函数
// formatter: function (params) {
// console.log('完整 params:', params);
// console.log('label 数据:', params.data.label);
// // 获取标签的文本内容，它存储在 params.data.label.formatter 里
// const labelText = params.data.label?.formatter || '';
// // 定义一个颜色映射
// const colorMap = {
// '合作': '#52c41a', // 绿色
// '持股': '#faad14', // 橙色
// '从属': '#f5222d' // 红色
// };
// // 根据文本内容获取对应的颜色，如果没有定义则使用默认的灰色
// const color = colorMap[labelText] || '#666';
// // 返回一个带内联样式的 HTML 字符串
// return `<span style="color: ${color};">${labelText}</span>`;
// }
// }
}],
// color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de']
};
......
src/views/newsBrief/ModeuleNews.vue
浏览文件 @ cb673cbc
......@@ -38,7 +38,6 @@ import NewsList from "./NewsList.vue";
import { getAreaList, getHotNewsByArea } from "@/api/news/newsBrief";
import { ElSpace, ElDivider, ElRadioButton, ElRadioGroup, ElButton, ElIcon } from "element-plus";
import CommonText from "@/components/base/texts/CommonText.vue";
import AreaTag from "@/components/base/AreaTag/index.vue";
import { useGotoNewsBrief } from "@/router/modules/news";
const route = useRoute();
......
src/views/newsBrief/NewsDetial.vue
浏览文件 @ cb673cbc
<template>
<el-scrollbar>
<div class="flex-display common-page top-box-news-deatail" style="align-items: center;">
<!-- <color-svg :svg-url="NewsLogo" :size="72" style="margin-right:10px"></color-svg> -->
<img :src="NewsLogo" style="margin-right:24px">
<el-space direction="vertical" class="flex-fill" alignment="flex-start">
<common-text class="text-title-1-bold" color="var(--text-primary-80-color)">
{{ newsDetail.titleZh }}
</common-text>
<common-text class="text-tip-1-bold" color="var(--text-primary-80-color)">
{{ newsDetail.title }}
</common-text>
<common-text class="text-tip-1-bold" color="var(--text-primary-65-color)">
{{ `${newsDetail.publishedTime} · ${newsDetail.source}` }}
<el-space>
<area-tag :area-name="newsDetail.areaName" />
</el-space>
</common-text>
</el-space>
<!-- <el-button type="primary" @click="() => gotoNewsDetail(newsDetail.newsId)">
<el-icon class="icon">
<el-icon>
<top-right />
</el-icon>
</el-icon>
查看原网页
</el-button> -->
</div>
<div class="flex-display common-page content-box-news-detail">
<el-space direction="vertical" class="background-as-card flex-fill" fill alignment="flex-start">
<div style="margin-top: 10px; margin-right: 24px;" class="flex-display">
<color-prefix-title height="20px">
<div class="text-title-2-bold">新闻内容</div>
</color-prefix-title>
<div class="flex-fill"></div>
<el-button v-if="hasTranslation" :type="isOpenTranslation ? 'primary' : ''" plain
@click="handleTranslation">
<color-svg :svg-url="TranslationSvg" color="var(--color-primary-100)" :size="18"
style="margin-right:10px"></color-svg>
译文
</el-button>
</div>
<div class="common-padding">
<div class="flex-display" style="align-items: center;">
<common-text class="text-title-3-bold" color="var(--text-primary-80-color)">中文</common-text>
<div class="flex-fill" style="margin: 0 10px;">
<el-divider></el-divider>
</div>
<el-button @click="() => showMore = !showMore">
{{ showMore ? '收起' : '展开' }}
<el-icon>
<arrow-down v-if="showMore" />
<arrow-up v-else />
</el-icon>
</el-button>
</div>
<el-row :gutter="32">
<el-col :span="znEnColSpan"
v-for="(item, index) in showMore ? zhEnTexts : zhEnTexts.slice(0, 6)" :key="index">
<p class="p-news-content"> {{ item }}</p>
</el-col>
</el-row>
</div>
</el-space>
<el-space direction="vertical" class="background-as-card relation-news-box" alignment="flex-start">
<el-space style="margin-top: 10px;">
<color-prefix-title height="20px">
<div class="text-title-2-bold">相关新闻</div>
</color-prefix-title>
</el-space>
<el-space style="margin-top: 10px;">
<news-item v-for="item in relationNews" :key="item.newsId" :news-item="item" />
</el-space>
</el-space>
</div>
</el-scrollbar>
</template>
<script setup>
import { getNewsDetail } from "@/api/news/newsBrief";
import '@/styles/container.scss';
import '@/styles/common.scss';
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { ElSpace, ElImage, ElButton, ElIcon, ElScrollbar, ElRow, ElCol, ElDivider } from "element-plus";
import CommonText from "@/components/base/texts/CommonText.vue";
import AreaTag from "@/components/base/AreaTag/index.vue";
import ColorPrefixTitle from '@/components/base/texts/ColorPrefixTitle.vue';
import { getRelationNews } from "@/api/news/newsDetail";
import NewsItem from "@/components/base/newsList/NewsItem.vue";
import ColorSvg from "@/components/base/images/ColorSvg.vue";
import TranslationSvg from './assets/images/翻译 1.svg';
import NewsLogo from './assets/images/组合 293.svg';
const newsDetail = ref({});
const relationNews = ref([]);
const zhEnTexts = ref([]);
const znEnColSpan = ref(12);
const hasTranslation = ref(false);
const isOpenTranslation = ref(true);
const showMore = ref(false);
const route = useRoute();
onMounted(async () => {
const params = {
newsId: route.params.id
}
const { data: newsDetailData } = await getNewsDetail(params);
newsDetail.value = newsDetailData ?? {};
const { data: relationNewsData } = await getRelationNews(params);
relationNews.value = relationNewsData ?? [];
updateText();
});
function handleTranslation() {
isOpenTranslation.value = !isOpenTranslation.value;
updateText();
}
function updateText() {
const enTexts = newsDetail.value.content?.split('\n')
const zhTexts = newsDetail.value.contentZh?.split('\n')
console.log(enTexts.length, zhTexts.length)
const tempZhEnTexts = []
hasTranslation.value = enTexts.length === zhTexts.length
if (hasTranslation.value && isOpenTranslation.value) {
for (let i = 0; i < enTexts.length; i++) {
tempZhEnTexts.push(zhTexts[i]);
tempZhEnTexts.push(enTexts[i]);
}
znEnColSpan.value = 12;
} else {
for (let i = 0; i < enTexts.length; i++) {
tempZhEnTexts.push(enTexts[i]);
}
znEnColSpan.value = 24;
}
zhEnTexts.value = tempZhEnTexts;
}
</script>
<style lang="scss" scoped>
@import url("./style.css");
.top-box-news-deatail {
background-color: var(--bg-white-100);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
}
.content-box-news-detail {
align-items: flex-start;
gap: 16px;
}
.relation-news-box {
width: 520px;
}
.p-news-content {
//首行缩进
text-indent: 2em;
}
</style>
\ No newline at end of file
src/views/newsBrief/NewsList.vue
浏览文件 @ cb673cbc
......@@ -2,7 +2,7 @@
<el-space direction="vertical" fill class="full-width mouse-hover" v-for="(item, index) in props.news" :key="index">
<news-item2 :img="item.newsImage" :title="item.newsTitle" :from="`新闻来源：${item.newsOrg} 发表时间：${item.newsDate}`"
:aeraTags="item.industryList?.map(t => t.industryName)" @click="gotoNewsDetail(item.newsId)" />
<div class="divider"></div>
<div class="divider-news-list"></div>
</el-space>
</template>
<script setup>
......@@ -21,7 +21,7 @@ const props = defineProps({
</script>
<style lang="css" scoped>
.divider {
.divider-news-list {
width: 100%;
height: 1px;
background: #eaecee;
......
src/views/newsBrief/NewsMain.vue
浏览文件 @ cb673cbc
......@@ -51,9 +51,8 @@ import { ref, onMounted } from "vue";
import '@/styles/container.scss';
import '@/styles/radio.scss';
import { useGotoNewsModule, useGotoNewsDetail } from "@/router/modules/news";
import { getMoudleType, getTodayNews, getTodayNewByArea, getHotNewsByArea, getHotNews } from "@/api/news/newsBrief";
import { getMoudleType, getTodayNews, getHotNews } from "@/api/news/newsBrief";
import { ElInput, ElSpace, ElImage, ElDivider, ElCol, ElRow, ElRadioButton, ElRadioGroup } from "element-plus";
import AreaTag from '@/components/base/AreaTag/index.vue'
import CommonText from "@/components/base/texts/CommonText.vue";
import BoxBackground from '@/components/base/boxBackground/overviewNormalBox.vue'
import NewsList from "./NewsList.vue";
......
src/views/newsBrief/assets/images/组合 293.svg 0 → 100644
浏览文件 @ cb673cbc
<svg viewBox="0 0 71 72" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="71.000000" height="72.000000" fill="none" customFrame="#000000">
<defs>
<linearGradient id="paint_linear_0" x1="30.3467731" x2="30.3467731" y1="0" y2="72" gradientUnits="userSpaceOnUse">
<stop stop-color="rgb(5,95,194)" offset="0" stop-opacity="1" />
<stop stop-color="rgb(137,193,255)" offset="1" stop-opacity="1" />
</linearGradient>
</defs>
<g id="组合 293">
<path id="矩形 396" d="M63 31C63 28.7909 64.7909 27 67 27C69.2091 27 71 28.7909 71 31L71 64C71 68.4183 67.4183 72 63 72L63 31Z" fill="rgb(185,220,255)" fill-rule="evenodd" />
<path id="矩形 395" d="M56.6935 0C58.9027 0 60.6935 1.79086 60.6935 4L60.6935 72L4 72C1.79086 72 0 70.2091 0 68L0 4C0 1.79086 1.79086 0 4 0L56.6935 0Z" fill="url(#paint_linear_0)" fill-rule="evenodd" />
<path id="矢量 625" d="M25.3392 29.7137L22.2712 29.7137C21.9571 29.7137 21.6612 29.5661 21.4723 29.3152L14.8878 20.5694L14.8873 28.7138C14.8873 29.266 14.4396 29.7137 13.8873 29.7137L11.3066 29.7137C10.7544 29.7137 10.3066 29.266 10.3066 28.7137L10.3066 15.8555C10.3066 15.3032 10.7544 14.8555 11.3066 14.8555L14.8873 14.8555L21.773 23.9991L21.773 23.9991L21.773 23.9991L21.7729 15.8574C21.7729 15.3051 22.2207 14.8573 22.7729 14.8573L25.3391 14.8574C25.8914 14.8574 26.3391 15.3051 26.3391 15.8574L26.3393 28.7137C26.3393 29.266 25.8915 29.7137 25.3392 29.7137Z" fill="rgb(255,255,255)" fill-rule="evenodd" />
<rect id="矩形 397" width="20.612902" height="4.571429" x="30.919922" y="14.855469" rx="1.000000" fill="rgb(255,255,255)" />
<rect id="矩形 398" width="20.612902" height="4.571429" x="30.919922" y="25.144531" rx="1.000000" fill="rgb(255,255,255)" />
<rect id="矩形 399" width="41.225803" height="4.571429" x="10.306641" y="35.429688" rx="1.000000" fill="rgb(255,255,255)" />
<rect id="矩形 400" width="41.225803" height="4.571429" x="10.306641" y="45.714844" rx="1.000000" fill="rgb(255,255,255)" />
<rect id="矩形 401" width="41.225803" height="4.571429" x="10.306641" y="56.000000" rx="1.000000" fill="rgb(255,255,255)" />
</g>
</svg>
src/views/newsBrief/assets/images/翻译 1.svg 0 → 100644
浏览文件 @ cb673cbc
<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="矢量 455" d="M3.33301 9.9987L3.33301 11.332C3.33299 11.3736 3.33492 11.4151 3.33879 11.4565C3.34266 11.4979 3.34846 11.5391 3.35618 11.5799C3.36389 11.6208 3.3735 11.6612 3.385 11.7012C3.3965 11.7411 3.40985 11.7805 3.42503 11.8192C3.44021 11.8579 3.45717 11.8958 3.4759 11.933C3.49463 11.9701 3.51505 12.0063 3.53716 12.0415C3.55928 12.0767 3.58299 12.1108 3.6083 12.1438C3.6336 12.1768 3.6604 12.2086 3.68867 12.2391C3.71695 12.2696 3.74659 12.2987 3.77759 12.3264C3.80859 12.3541 3.84082 12.3803 3.87427 12.405C3.90773 12.4297 3.94226 12.4528 3.97787 12.4743C4.01349 12.4958 4.05003 12.5155 4.08749 12.5336C4.12495 12.5516 4.16318 12.5679 4.20216 12.5824C4.24115 12.5969 4.28073 12.6095 4.32089 12.6203C4.36106 12.631 4.40164 12.6399 4.44264 12.6469C4.48364 12.6539 4.52487 12.6589 4.56634 12.662L4.66634 12.6654L6.66634 12.6654L6.66634 13.9987L4.66634 13.9987C4.579 13.9987 4.49188 13.9944 4.40496 13.9859C4.31805 13.9773 4.23176 13.9645 4.1461 13.9475C4.06044 13.9304 3.97582 13.9092 3.89225 13.8839C3.80867 13.8585 3.72654 13.8291 3.64585 13.7957C3.56516 13.7623 3.48631 13.725 3.40928 13.6838C3.33226 13.6427 3.25744 13.5978 3.18482 13.5493C3.1122 13.5008 3.04214 13.4488 2.97463 13.3934C2.90711 13.338 2.84248 13.2794 2.78072 13.2176C2.71897 13.1559 2.66039 13.0913 2.60498 13.0237C2.54957 12.9562 2.49761 12.8862 2.44909 12.8136C2.40057 12.7409 2.35572 12.6661 2.31455 12.5891C2.27338 12.5121 2.23608 12.4332 2.20266 12.3525C2.16924 12.2718 2.13985 12.1897 2.1145 12.1061C2.08915 12.0225 2.06795 11.9379 2.05091 11.8523C2.03387 11.7666 2.02108 11.6803 2.01252 11.5934C2.00395 11.5065 1.99967 11.4194 1.99967 11.332L1.99967 9.9987L3.33301 9.9987L3.33301 9.9987ZM11.9997 6.66536L14.933 13.9987L13.4963 13.9987L12.6957 11.9987L9.96901 11.9987L9.16967 13.9987L7.73367 13.9987L10.6663 6.66536L11.9997 6.66536L11.9997 6.66536ZM11.333 8.5887L10.5017 10.6654L12.163 10.6654L11.333 8.5887ZM5.33301 1.33203L5.33301 2.66536L7.99967 2.66536L7.99967 7.33203L5.33301 7.33203L5.33301 9.33203L3.99967 9.33203L3.99967 7.33203L1.33301 7.33203L1.33301 2.66536L3.99967 2.66536L3.99967 1.33203L5.33301 1.33203ZM11.333 1.9987C11.4203 1.9987 11.5075 2.00298 11.5944 2.01154C11.6813 2.0201 11.7676 2.0329 11.8532 2.04994C11.9389 2.06698 12.0235 2.08817 12.1071 2.11352C12.1907 2.13888 12.2728 2.16826 12.3535 2.20169C12.4342 2.23511 12.513 2.2724 12.5901 2.31357C12.6671 2.35474 12.7419 2.39959 12.8145 2.44811C12.8871 2.49663 12.9572 2.5486 13.0247 2.604C13.0922 2.65941 13.1569 2.71799 13.2186 2.77975C13.2804 2.8415 13.339 2.90614 13.3944 2.97365C13.4498 3.04116 13.5017 3.11123 13.5503 3.18384C13.5988 3.25646 13.6436 3.33128 13.6848 3.40831C13.726 3.48533 13.7633 3.56419 13.7967 3.64488C13.8301 3.72556 13.8595 3.8077 13.8848 3.89127C13.9102 3.97485 13.9314 4.05947 13.9484 4.14512C13.9655 4.23078 13.9783 4.31707 13.9868 4.40399C13.9954 4.4909 13.9997 4.57803 13.9997 4.66536L13.9997 5.9987L12.6663 5.9987L12.6663 4.66536C12.6663 4.6217 12.6642 4.57813 12.6599 4.53467C12.6556 4.49122 12.6492 4.44807 12.6407 4.40524C12.6322 4.36241 12.6216 4.32011 12.6089 4.27832C12.5963 4.23653 12.5816 4.19546 12.5648 4.15512C12.5481 4.11478 12.5295 4.07535 12.5089 4.03684C12.4883 3.99832 12.4659 3.96091 12.4416 3.9246C12.4174 3.88829 12.3914 3.85326 12.3637 3.81951C12.336 3.78575 12.3067 3.75343 12.2758 3.72256C12.2449 3.69168 12.2126 3.66239 12.1789 3.63468C12.1451 3.60698 12.1101 3.581 12.0738 3.55674C12.0375 3.53248 12 3.51005 11.9615 3.48947C11.923 3.46888 11.8836 3.45024 11.8433 3.43352C11.8029 3.41681 11.7618 3.40212 11.7201 3.38944C11.6783 3.37677 11.636 3.36617 11.5931 3.35765C11.5503 3.34913 11.5072 3.34273 11.4637 3.33845C11.4202 3.33417 11.3767 3.33203 11.333 3.33203L9.33301 3.33203L9.33301 1.9987L11.333 1.9987L11.333 1.9987ZM3.99967 3.9987L2.66634 3.9987L2.66634 5.9987L3.99967 5.9987L3.99967 3.9987ZM6.66634 3.9987L5.33301 3.9987L5.33301 5.9987L6.66634 5.9987L6.66634 3.9987Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
</svg>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论