From 70b4fda1d9d75dafc26ba5ea3ebc453ed8140993 Mon Sep 17 00:00:00 2001
From: changyunju <2743319061@qq.com>
Date: Fri, 13 Jun 2025 11:02:21 +0800
Subject: [PATCH] Signed-off-by: changyunju <2743319061@qq.com>

---
 src/views/KeyNodeRecognition1.vue | 248 +++++++++++++++++++++++++++++-
 src/views/new_file.vue            |   8 +
 2 files changed, 254 insertions(+), 2 deletions(-)
 create mode 100644 src/views/new_file.vue

diff --git a/src/views/KeyNodeRecognition1.vue b/src/views/KeyNodeRecognition1.vue
index 9694f4a..f3165b9 100644
--- a/src/views/KeyNodeRecognition1.vue
+++ b/src/views/KeyNodeRecognition1.vue
@@ -90,7 +90,42 @@
       </div>
       <!-- 领袖分析 -->
       <div class="leader-ansys">
-        <div><img src="../assets/images/chuanbofenxi.png" alt="" style="margin-top: -6px;"></div>
+        <!-- <div><img src="../assets/images/chuanbofenxi.png" alt="" style="margin-top: -6px;"></div> -->
+		<div class="charts-wrapper">
+		  <div v-for="(chart, index) in chartData" :key="index" class="chart-section">
+		    <h3 class="chart-title">{{ chart.title }}</h3>
+		    
+		    <div class="chart-area">
+		      <div class="x-axis">
+		        <div class="axis-labels">
+		            <span v-for="n in 6" :key="n">{{ (n - 1) * 2 }}</span>
+		        </div>
+		        <span class="unit">{{ chart.unit }}</span>
+		      </div>
+		
+		      <div class="chart-body">
+		        <div v-for="item in chart.series" :key="item.name" class="bar-row">
+		          <span class="row-label">{{ item.name }}</span>
+		          <div class="bar-wrapper">
+		            <div class="bar-container">
+		              <div 
+		                class="bar" 
+		                :class="item.name === '所有用户' ? 'bar-user' : 'bar-leader'" 
+		                :style="{ width: (item.value / chart.max) * 100 + '%' }"
+		              ></div>
+		              <span 
+		                class="value" 
+		                :class="item.name === '所有用户' ? 'value-user' : 'value-leader'" 
+		                :style="{ left: `calc(${(item.value / chart.max) * 100}% + 8px)` }"
+		              >{{ item.value }}</span>
+		            </div>
+		          </div>
+		        </div>
+		      </div>
+		    </div>
+		  </div>
+		</div>
+		
       </div>
     </div>
 
@@ -214,7 +249,38 @@ onUnmounted(() => {
 });
 ;
 
-
+/* 领袖分析数据 */
+const chartData = ref([
+  {
+    title: '平均发帖数',
+    unit: '数量',
+    max: 10,
+    series: [
+      { name: '领袖', value: 6.4 },
+      { name: '所有用户', value: 0.46 }
+    ]
+  },
+  {
+    title: '帖子平均生存周期',
+    unit: '天数',
+    max: 10,
+    series: [
+      { name: '领袖', value: 2.19 },
+      { name: '所有用户', value: 0.46 }
+    ]
+  },
+  {
+    title: '平均粉丝数',
+    // NOTE: The unit in the original image is '天数' (Days), which is likely a typo.
+    // It has been replicated here to match the source image.
+    unit: '天数',
+    max: 10,
+    series: [
+      { name: '领袖', value: 2.19 },
+      { name: '所有用户', value: 0.46 }
+    ]
+  }
+]);
 </script>
 
 <style scoped>
@@ -450,4 +516,182 @@ onUnmounted(() => {
   /* 为了兼容 Safari 浏览器 */
   -webkit-backdrop-filter: blur(4px);
 }
+
+/* 领袖分析样式 */
+
+.analysis-container {
+  background-color: #0d1b38;
+  padding: 20px;
+  border-radius: 8px;
+  font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
+  color: #a7c5d4;
+  width: 100%;
+  max-width: 550px;
+  box-sizing: border-box;
+}
+
+.main-title-container {
+  position: relative;
+  border-bottom: 1px solid rgba(62, 115, 171, 0.3);
+  margin-bottom: 25px;
+  padding-bottom: 10px;
+}
+
+.main-title {
+  font-size: 18px;
+  color: #e0f7ff;
+  font-weight: 600;
+  text-align: left;
+  margin: 0;
+  padding-left: 10px;
+}
+
+/* Decorative vertical bar for the title */
+.main-title-container::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 4px;
+    height: 18px;
+    background-color: #4d9fdf;
+}
+
+/* Decorative chevrons for the title */
+.main-title-container::after {
+    content: '////';
+    letter-spacing: -2px;
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    color: rgba(77, 159, 223, 0.6);
+    font-weight: bold;
+    transform: translateY(-50%) skewX(-20deg);
+}
+
+.charts-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 35px;
+}
+
+.chart-title {
+  font-size: 16px;
+  color: #cdeeff;
+  margin: 0 0 25px 0;
+  position: relative;
+  padding-left: 15px;
+}
+
+/* Decorative square bullet for chart titles */
+.chart-title::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 8px;
+  height: 8px;
+  background-color: #4da0e0;
+}
+
+.chart-area {
+  position: relative;
+}
+
+.x-axis {
+  position: absolute;
+  top: -15px;
+  left: 65px; /* Aligns with the start of the bars */
+  right: 15px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 12px;
+  color: #8bacc8;
+}
+
+.axis-labels {
+  display: flex;
+  justify-content: space-between;
+  width: calc(100% - 25px); /* Leave space for unit */
+}
+
+.unit {
+  position: absolute;
+  right: -15px;
+}
+
+.chart-body {
+  position: relative;
+  /* Vertical grid lines */
+  background-image:
+    linear-gradient(to right, rgba(139, 172, 200, 0.2) 1px, transparent 1px),
+    linear-gradient(to right, rgba(139, 172, 200, 0.2) 1px, transparent 1px),
+    linear-gradient(to right, rgba(139, 172, 200, 0.2) 1px, transparent 1px),
+    linear-gradient(to right, rgba(139, 172, 200, 0.2) 1px, transparent 1px),
+    linear-gradient(to right, rgba(139, 172, 200, 0.2) 1px, transparent 1px);
+  background-repeat: no-repeat;
+  background-size: 20% 100%;
+  background-position: 20% 0, 40% 0, 60% 0, 80% 0, 100% 0;
+  padding: 10px 0;
+}
+
+.bar-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 25px;
+}
+
+.bar-row:last-child {
+  margin-bottom: 0;
+}
+
+.row-label {
+  width: 65px;
+  flex-shrink: 0;
+  text-align: left;
+  font-size: 14px;
+  padding-right: 5px;
+  color: #cdeeff;
+}
+
+.bar-wrapper {
+  flex-grow: 1;
+}
+
+.bar-container {
+  position: relative;
+  width: 100%;
+  height: 14px;
+}
+
+.bar {
+  height: 100%;
+  border-radius: 7px;
+  transition: width 0.5s ease-in-out;
+}
+
+.bar-leader {
+  background-color: #3d8dcb;
+}
+.bar-user {
+  background-color: #27c1a8;
+}
+
+.value {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+.value-leader {
+  color: #3d8dcb;
+}
+.value-user {
+  color: #27c1a8;
+}
 </style>
diff --git a/src/views/new_file.vue b/src/views/new_file.vue
new file mode 100644
index 0000000..02409e3
--- /dev/null
+++ b/src/views/new_file.vue
@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>
\ No newline at end of file