feat:市场准入限制修改完

src/views/decree/decreeHome/index.vue

@@ -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

 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

@@ -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

 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

@@ -26,7 +26,6 @@ export const onNumToChinese = (num:number) => {
 	}
 }
 
-
 /**
  * 获取 n 天前的日期，格式：YYYY-MM-DD
  * @param num 往前推的天数
@@ -55,4 +54,12 @@ export const getNearYearList = (num=6) => {
 		yearOptions.push({ label: year.toString()+'年', value: year.toString() });
 	}
 	return yearOptions;
-};
+};
\ No newline at end of file
+
+// 十六进制颜色转 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