fix:时间线模块调整

package.json

@@ -18,6 +18,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
+    "@antv/g6": "^5.0.51",
     "@element-plus/icons-vue": "^2.3.1",
     "@kangc/v-md-editor": "^2.3.18",
     "@microsoft/fetch-event-source": "^2.0.1",

src/styles/common.scss

@@ -182,7 +182,6 @@
     color: rgb(5, 95, 194);
 }
 
-
 // 业务主色 高亮背景
 .color-bg-active{
     background: rgb(246, 250, 255);

src/views/ZMOverView/components/fourSuppress/components/allGovernment/components/CalendarHeatmap.vue

@@ -83,6 +83,7 @@ import { CanvasRenderer } from 'echarts/renderers';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
 
+
 dayjs.locale('zh-cn');
 
 const props = defineProps(
@@ -213,13 +214,21 @@ function buildDataMap(arr) {
 
 console.log('timelineData', props.timelineData);
 
+// const calendarWidthPercent = 35;
+// const gapPercent = (80 - (calendarWidthPercent * 3)) / 4;
+
 
 const { dataMap, monthStats } = buildDataMap(props.timelineData);
 
 
 function getOption() {
-  const calendarWidthPercent = 33.3;
-  const gapPercent = (100 - (calendarWidthPercent * 3)) / 4;
+  const calendarWidthPercent = 27;
+  // const gapPercent = (90 - (calendarWidthPercent * 3)) / 4;
+  const gapPercent = 0.02;
+
+  // 修正每个calendar之间的间隙为0，且calendar宽度撑满
+  // 由于echarts calendar的cellSize为['auto', 82]，但宽度受calendar宽度影响
+  // 这里强制每个calendar的left分别为0%、33.33%、66.66%，宽度33.33%
 
   // 计算所有天的最大 count
   let maxCount = 0;
@@ -241,19 +250,39 @@ function getOption() {
   const calendars = months.map((month, index) => ({
     top: 40,
     left: `${gapPercent + index * (calendarWidthPercent + gapPercent)}%`,
-    // left: `${calendarWidthPercent * index - index * 82 / 1640 * 100}%`,
-    width: `${calendarWidthPercent}%`,
+    // width: `${calendarWidthPercent}%`,
     range: month.format('YYYY-MM'),
-    cellSize: ['auto', 82],
-    splitLine: { show: true, lineStyle: { color: '#fff', width: 4 } },
-    itemStyle: { color: '#f0f9ff', borderColor: '#fff', borderWidth: 4 },
+    cellSize: [110, 80],
+    splitLine: { show: true, lineStyle: { color: '#fff', width: 2 } },
+    itemStyle: { color: '#f0f9ff', borderColor: 'rgb(5, 95, 194)', borderWidth: 4 },
     yearLabel: { show: false },
     monthLabel: { show: false },
     dayLabel: { show: false },
+    // monthLabel: {
+    //   margin: 5 // 调整月份标签的边距 [citation:7]
+    // }
+    // top: 40,
+    // left: 50,
+    // right: 50,
+    // cellSize: ['auto', 'auto'], // 设置为固定的整数尺寸，避免因小数产生间隙
+    // range: month.format('YYYY-MM'),  // 显示2024年1月
+    // itemStyle: {
+    //   borderWidth: 0,  // 关键：将边框宽度设为0
+    //   // 可以设置其他样式，如格子的颜色
+    //   color: '#f0f0f0'
+    // },
+    // // 如果需要，可以进一步调整标签与格子的距离，避免标签造成的间隙错觉
+    // dayLabel: {
+    //   margin: 5 // 调整天数标签的边距 [citation:7]
+    // },
+    // monthLabel: {
+    //   margin: 5 // 调整月份标签的边距 [citation:7]
+    // }
   }));
 
   const titles = months.map((month, index) => ({
-    text: `{month|${month.format('M月')}}                                                      {stats|共 ${monthStats[index].total} 项, 已落实 ${monthStats[index].resolved} 项}`,
+    // text: `{month|${month.format('M月')}}                                         {stats|共 ${monthStats[index].total} 项, 已落实 ${monthStats[index].resolved} 项}`,
+    text: index ===0 ?`{month|${month.format('M月')}}                                                              {stats|共 ${monthStats[index].total} 项, 已落实 ${monthStats[index].resolved} 项}`:`                     {month|${month.format('M月')}}                                            {stats|共 ${monthStats[index].total} 项, 已落实 ${monthStats[index].resolved} 项}`,
     left: `${gapPercent + index * (calendarWidthPercent + gapPercent)}%`,
     top: 10,
     textStyle: {

src/views/exportControl/v2.0SingleSanction/components/deepMining/components/RelationGraph.vue

@@ -33,7 +33,8 @@
 
 <script setup>
 import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
-import G6 from '@antv/g6'
+// import G6 from '@antv/g6'
+import G6 from '@antv/g6/dist/g6.min';
 import { Close } from '@element-plus/icons-vue'
 
 import echartsIcon01 from '../assets/echartsicon01.png'