Skip to content

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

feat:市场准入限制修改完

上级 ba8f3569
显示空白字符变更
内嵌 并排
正在显示 包含 97 行增加 和 67 行删除
src/views/decree/decreeHome/index.vue
浏览文件 @ 860f09f3
......@@ -112,10 +112,10 @@
</div>
</div>
<div class="box5-main" style="padding-top: 16px;">
<div v-if="chart1Data.dataX?.length" class="box5-chart" id="chart1"></div>
<div v-if="chart1Data.title?.length" class="box5-chart" id="chart1"></div>
<el-empty v-else style="padding-top: 100px;" description="暂无数据" :image-size="100" />
</div>
<div style="padding: 14px 22px;">
<div style="padding: 0px 22px 14px;">
<TipTab text="数据来源：美国各行政机构官网" />
</div>
<AiReport ref="refAiReport1"></AiReport>
......@@ -142,7 +142,7 @@
<div v-if="chart2Data.length" class="box5-chart" ref="box6Ref"></div>
<el-empty v-else style="padding-top: 100px;" description="暂无数据" :image-size="100" />
</div>
<div style="padding: 14px 22px;">
<div style="padding: 0px 22px 14px;">
<TipTab text="数据来源：美国各行政机构官网" />
</div>
<AiReport ref="refAiReport2"></AiReport>
......@@ -661,8 +661,11 @@ const refAiReport3 = ref(null)
// 数量变化趋势
const chart1Data = reactive({
dataX: [],
dataY: []
title: [],
data: [
{ name: '全部政令', list: [] },
{ name: '涉华政令', list: [] },
],
});
const box5Params = reactive({
year: yearList[0].value,
......@@ -680,24 +683,31 @@ const handleGetDecreeYearOrder = async () => {
});
console.log("数量变化趋势", res);
if (res.code === 200 && res.data) {
chart1Data.dataX = res.data.map(item => item.year);
chart1Data.dataY = res.data.map(item => item.count);
chart1Data.title = res.data.map(item => item.year);
chart1Data.data = [
{ name: '全部政令', list: res.data.map(item => item.count) },
{ name: '涉华政令', list: res.data.map(item => item.count) },
];
} else {
chart1Data.dataX = [];
chart1Data.dataY = [];
chart1Data.title = [];
chart1Data.data = [
{ name: '全部政令', list: [] },
{ name: '涉华政令', list: [] },
];
}
} catch (error) {
chart1Data.dataX = [];
chart1Data.dataY = [];
chart1Data.title = [];
chart1Data.data = [
{ name: '全部政令', list: [] },
{ name: '涉华政令', list: [] },
];
}
refAiReport1.value?.onDataInfo({ type: "柱状图", name: "数量变化趋势", data: chart1Data })
box5Params.loading = false
};
const getBox5Data = async () => {
await handleGetDecreeYearOrder();
let chart1 = getBarChart(chart1Data.dataX, chart1Data.dataY);
chart1.yAxis.name = "数量";
chart1.yAxis.nameTextStyle = { align: 'right' }
let chart1 = getBarChart(chart1Data.title, chart1Data.data);
let org = govInsList.value.find(item => item.orgId === box5Params.proposeName)?.orgName || '全部机构'
let domain = areaList.value.find(item => item.id === box5Params.domainId)?.name || '全部领域'
nextTick(() => {
......
src/views/decree/decreeHome/utils/barChart.js
浏览文件 @ 860f09f3
import * as echarts from "echarts";
import { DOUBLECHARTCOLORS } from '@/common/constant'
import { hexToRgba } from '@/views/marketAccessRestrictions/utils/index.ts'
const getBarChart = (nameList, valueList) => {
const getSerie = (index, data) => {
return {
name: data[index].name,
type: 'bar',
data: data[index].list,
label: {
show: true,
position: 'top',
color: DOUBLECHARTCOLORS[index],
fontWeight: 'bold', // 文字加粗
fontSize: 14,
formatter: (params) => params.value,
},
barWidth: 20,
itemStyle: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0,
[{
offset: 0,
color: hexToRgba(DOUBLECHARTCOLORS[index], 0.3)
},
{
offset: 1,
color: hexToRgba(DOUBLECHARTCOLORS[index], 1)
}
]);
},
barBorderRadius: 10,
}
}
}
const getBarChart = (dataX, dataY) => {
const option = {
color: DOUBLECHARTCOLORS,
legend: {
show: true,
top: 0,
icon: 'circle',
textStyle: {
color: 'rgba(95, 101, 108, 1)',
fontFamily: 'Microsoft YaHei',
fontSize: '14px',
}
},
tooltip: {},
grid: {
top: '8%',
......@@ -12,6 +57,8 @@ const getBarChart = (nameList, valueList) => {
},
yAxis: {
type: 'value',
name: '项',
nameTextStyle: { align: 'right' },
splitLine: {
show: true,
lineStyle: {
......@@ -34,7 +81,7 @@ const getBarChart = (nameList, valueList) => {
},
xAxis: {
type: 'category',
data: nameList,
data: dataX,
splitLine: {
show: false
},
......@@ -56,36 +103,7 @@ const getBarChart = (nameList, valueList) => {
}
}
},
series: [{
type: 'bar',
data: valueList,
label: {
show: true,
position: 'top',
color: 'rgba(5, 95, 194, 1)',
fontWeight: 'bold', // 文字加粗
fontSize: 14,
formatter: function (params) {
return params.value
},
},
barWidth: 20,
itemStyle: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0,
[{
offset: 0,
color: 'rgba(10, 87, 166, 0)'
},
{
offset: 1,
color: 'rgba(5, 95, 194, 1)'
}
]);
},
barBorderRadius: 10,
}
}]
series: [ getSerie(0, dataY), getSerie(1, dataY) ]
}
return option
}
......
src/views/marketAccessRestrictions/pages/reportOriginal.vue
浏览文件 @ 860f09f3
......@@ -37,7 +37,7 @@
<img class="translate-icon" src="@/views/thinkTank/ReportDetail/images/image-translate.png" alt=""
style="width: 16px; height: 16px; max-width: 16px; max-height: 16px; display: block; object-fit: contain;" />
</div>
<div class="translate-text">{{ "显示原文" }}</div>
<div class="translate-text">{{ "显示译文" }}</div>
</div>
<div class="btn" @click="handleDownload">
<div class="icon">
......@@ -53,8 +53,7 @@
<pdf ref="leftPdfRef" :pdfUrl="reportUrlEnWithPage" class="pdf-pane-inner" />
</div>
<div class="pdf-pane-wrap" :class="{ 'is-full': !valueSwitch }" v-if="reportUrlWithPage">
<pdf :key="`right-pdf-${valueSwitch ? 'split' : 'full'}`" ref="rightPdfRef" :pdfUrl="reportUrlWithPage"
class="pdf-pane-inner" />
<pdf :key="`right-pdf-${valueSwitch ? 'split' : 'full'}`" ref="rightPdfRef" :pdfUrl="reportUrlWithPage" class="pdf-pane-inner" />
</div>
</div>
</div>
......@@ -371,15 +370,15 @@ onMounted(() => {
margin: 0 auto;
background: rgb(255, 255, 255);
width: 1600px;
height: 20px;
flex: auto;
height: 948px;
margin-bottom: 86px;
border: 1px, solid, rgb(234, 236, 238);
box-shadow: 0 0 20px 0 rgba(25, 69, 130, 0.1);
display: flex;
flex-direction: column;
.main-header {
height: 64px;
/* box-sizing: border-box; */
border-bottom: 1px solid rgb(234, 236, 238);
background: rgb(255, 255, 255);
margin: 0 70px;
......@@ -463,6 +462,8 @@ onMounted(() => {
.btn {
width: 88px;
height: 32px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 6px;
background: rgba(255, 255, 255, 1);
......@@ -516,6 +517,7 @@ onMounted(() => {
.search-input {
width: 160px;
height: 24px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
background: rgba(246, 250, 255, 1);
border-radius: 4px;
......@@ -543,6 +545,7 @@ onMounted(() => {
.search-nav-btn {
width: 68px;
height: 24px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
background: rgba(246, 250, 255, 1);
border-radius: 4px;
......@@ -565,13 +568,11 @@ onMounted(() => {
}
.report-box {
height: 20px;
flex: auto;
margin-left: 70px;
width: 1456px;
height: 881px;
display: flex;
overflow-y: auto;
/* 右侧统一滚动条，控制两侧原文+译文一起滚动 */
overflow-x: hidden;
}
......
src/views/marketAccessRestrictions/utils/baseLineChart.js
浏览文件 @ 860f09f3
import * as echarts from 'echarts'
import { MUTICHARTCOLORS } from '@/common/constant'
// 十六进制颜色转 rgba 的工具函数
function hexToRgba(hex, alpha) {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}
import { hexToRgba } from '@/views/marketAccessRestrictions/utils/index.ts'
const getSerie = (data, index) => {
return {
......@@ -38,8 +31,8 @@ const createLineChart = (chartDom, data, option={}) => {
if (existingChart) existingChart.dispose();
// 获取容器宽度/高度
const containerWidth = chartDom.value.clientWidth;
const containerHeight = chartDom.value.clientHeight;
// const containerWidth = chartDom.value.clientWidth;
// const containerHeight = chartDom.value.clientHeight;
const myChart = echarts.init(chartDom.value);
myChart.setOption({
......
src/views/marketAccessRestrictions/utils/index.ts
浏览文件 @ 860f09f3
......@@ -26,7 +26,6 @@ export const onNumToChinese = (num:number) => {
}
}
/**
* 获取 n 天前的日期，格式：YYYY-MM-DD
* @param num 往前推的天数
......@@ -56,3 +55,11 @@ export const getNearYearList = (num=6) => {
}
return yearOptions;
};
// 十六进制颜色转 rgba 的工具函数
export const hexToRgba = (hex:any, alpha:number) => {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论