ai小模块

也可以显示在tooltip中

package.json

@@ -33,6 +33,7 @@
     "element-plus": "^2.5.0",
     "file-saver": "^2.0.5",
     "js-cookie": "^3.0.5",
+    "lodash": "^4.17.21",
     "monaco-editor": "^0.30.1",
     "naive-ui": "^2.41.0",
     "pinia": "^2.1.0",

src/App.vue

@@ -5,12 +5,14 @@
       <router-view />
     </main>
     <AppFooter v-if="!$route.meta.hideNav"/>
+    <AIChatBot />
   </div>
 </template>
 
 <script setup>
 import AppHeader from './components/AppHeader.vue'
 import AppFooter from './components/AppFooter.vue'
+import AIChatBot from '@/components/AIChatBot/AIChatBot.vue'
 </script>
 
 <style lang="scss">

src/api/chat.js

@@ -0,0 +1,11 @@
+import request from '@/utils/request'
+
+export function chatWithAI(message) {
+  return request({
+    url: '/api/common/testQwen',
+    method: 'get',
+    params: {
+      str1: message
+    }
+  })
+}

src/api/course.js

@@ -7,7 +7,7 @@ export function getCourses(params) {
 
 export function getCoursesMethod(params) {
   console.log(params)
-  return get('/bs/courses', params)
+  return get('/bs/courses/homePage', params)
 }
 
 

src/components/AIChatBot/AIChatBot.vue

@@ -0,0 +1,438 @@
+<template>
+  <div class="ai-chat-container">
+    <!-- 悬浮图标 -->
+    <div class="ai-chat-icon" @click="toggleChat" :class="{ 'is-open': showChat }">
+      <el-badge :is-dot="hasNewMessage">
+        <el-button class="chat-button" circle>
+          <el-icon><Service /></el-icon>
+        </el-button>
+      </el-badge>
+    </div>
+
+    <!-- 聊天侧边栏 -->
+    <el-drawer
+      v-model="showChat"
+      title="AI 智能助手"
+      direction="rtl"
+      size="380px"
+      :with-header="false"
+      custom-class="chat-drawer"
+    >
+      <div class="chat-content">
+        <!-- 自定义头部 -->
+        <div class="chat-header">
+          <div class="header-left">
+            <div class="bot-avatar">
+              <el-icon><Service /></el-icon>
+            </div>
+            <div class="bot-info">
+              <h3>AI 智能助手</h3>
+              <span class="status">在线</span>
+            </div>
+          </div>
+          <el-button circle class="close-btn" @click="showChat = false">
+            <el-icon><Close /></el-icon>
+          </el-button>
+        </div>
+
+        <div class="chat-messages" ref="messageContainer">
+          <div v-for="(msg, index) in messages" 
+               :key="index" 
+               :class="['message-wrapper', msg.type]">
+            <div class="avatar" v-if="msg.type === 'bot'">
+              <el-icon><Service /></el-icon>
+            </div>
+            <div class="message">
+              <div class="message-content">{{ msg.content }}</div>
+              <div class="message-time">{{ msg.time || '刚刚' }}</div>
+            </div>
+          </div>
+        </div>
+        
+        <div class="chat-input">
+          <el-input
+            v-model="inputMessage"
+            placeholder="输入你的问题..."
+            :prefix-icon="ChatLineRound"
+            clearable
+            @keyup.enter="sendMessage"
+          >
+            <template #append>
+              <el-button type="primary" @click="sendMessage" :loading="isLoading">
+                <span v-if="!isLoading">发送</span>
+                <el-icon v-else class="is-loading"><Loading /></el-icon>
+              </el-button>
+            </template>
+          </el-input>
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script setup>
+import { ref, nextTick } from 'vue'
+import { Service, Position, ChatLineRound, Close, Loading } from '@element-plus/icons-vue'
+import { chatWithAI } from '@/api/chat'
+import { ElMessage } from 'element-plus'
+
+const showChat = ref(false)
+const hasNewMessage = ref(false)
+const inputMessage = ref('')
+const messageContainer = ref(null)
+const isLoading = ref(false)
+
+const messages = ref([
+  { 
+    type: 'bot', 
+    content: '你好！我是 AI 助手，很高兴为你服务 👋\n有什么我可以帮你的吗？', 
+    time: '现在'
+  }
+])
+
+const toggleChat = () => {
+  showChat.value = !showChat.value
+  hasNewMessage.value = false
+}
+
+const scrollToBottom = async () => {
+  await nextTick()
+  const container = messageContainer.value
+  if (container) {
+    container.scrollTop = container.scrollHeight
+  }
+}
+
+const sendMessage = async () => {
+  if (!inputMessage.value.trim() || isLoading.value) return
+  
+  const userMessage = inputMessage.value
+  inputMessage.value = ''
+  isLoading.value = true
+  
+  messages.value.push({
+    type: 'user',
+    content: userMessage,
+    time: '刚刚'
+  })
+  
+  await scrollToBottom()
+  
+  try {
+    const response = await chatWithAI(userMessage)
+    
+    if (response.code === 200) {
+      messages.value.push({
+        type: 'bot',
+        content: response.data,
+        time: '刚刚'
+      })
+    } else {
+      throw new Error(response.message || '请求失败')
+    }
+  } catch (error) {
+    ElMessage.error('AI 响应出错：' + (error.message || '未知错误'))
+    messages.value.push({
+      type: 'bot',
+      content: '抱歉，我遇到了一些问题，请稍后再试。',
+      time: '刚刚'
+    })
+  } finally {
+    isLoading.value = false
+    await scrollToBottom()
+  }
+}
+</script>
+
+<style scoped>
+.ai-chat-container {
+  position: fixed;
+  left: 20px;
+  bottom: 20px;
+  z-index: 999;
+}
+
+.chat-button {
+  background: #409eff;
+  border: none;
+  border-radius: 50%;
+  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
+  transition: all 0.3s ease;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.chat-button::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: inherit;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+}
+
+.chat-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(64, 158, 255, 0.4);
+  background: #66b1ff;
+}
+
+.chat-button .el-icon {
+  font-size: 20px;
+  color: white;
+  width: 1em;
+  height: 1em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  z-index: 1;
+}
+
+.chat-button :deep(svg) {
+  width: 1em;
+  height: 1em;
+  display: block;
+}
+
+.ai-chat-icon {
+  cursor: pointer;
+  filter: drop-shadow(0 2px 8px rgba(64, 158, 255, 0.25));
+}
+
+.ai-chat-icon.is-open .chat-button {
+  transform: rotate(360deg);
+  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.chat-drawer :deep(.el-drawer__body) {
+  padding: 0;
+}
+
+.chat-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: #f9fafb;
+}
+
+.chat-header {
+  padding: 16px 20px;
+  background: #ffffff;
+  color: #303133;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.bot-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: #409eff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.bot-avatar .el-icon {
+  color: white;
+  font-size: 1.5em;
+}
+
+.bot-info h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.status {
+  font-size: 12px;
+  color: #67c23a;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.status::before {
+  content: "";
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  background-color: #67c23a;
+  border-radius: 50%;
+}
+
+.close-btn {
+  background: transparent;
+  border: 1px solid #e4e7ed;
+  color: #909399;
+}
+
+.close-btn:hover {
+  background: #f4f4f5;
+  color: #409eff;
+}
+
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+}
+
+.message-wrapper {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 16px;
+  animation: slideIn 0.3s ease;
+}
+
+.message-wrapper.user {
+  flex-direction: row-reverse;
+}
+
+.avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: #409eff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 8px;
+  flex-shrink: 0;
+}
+
+.avatar .el-icon {
+  color: white;
+  font-size: 1.2em;
+}
+
+.message {
+  padding: 12px 16px;
+  border-radius: 12px;
+  max-width: 80%;
+  position: relative;
+}
+
+.message-content {
+  white-space: pre-wrap;
+  word-break: break-word;
+  line-height: 1.5;
+}
+
+.message-time {
+  font-size: 11px;
+  color: #909399;
+  margin-top: 4px;
+}
+
+.bot .message {
+  background-color: #f4f4f5;
+  color: #303133;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  border-top-left-radius: 4px;
+}
+
+.user .message {
+  background-color: #409eff;
+  color: white;
+  border-top-right-radius: 4px;
+}
+
+.user .message-time {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.chat-input {
+  padding: 16px;
+  background-color: white;
+  border-top: 1px solid #e4e7ed;
+}
+
+:deep(.el-input__wrapper) {
+  box-shadow: 0 0 0 1px #e4e7ed inset !important;
+}
+
+:deep(.el-input__wrapper:hover) {
+  box-shadow: 0 0 0 1px #409eff inset !important;
+}
+
+:deep(.el-button--primary) {
+  background-color: #409eff;
+  border-color: #409eff;
+  border-radius: 0 4px 4px 0;
+  padding: 0 16px;
+}
+
+.chat-drawer {
+  transition: transform 0.3s ease-out;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* 滚动条样式 */
+.chat-messages::-webkit-scrollbar {
+  width: 4px;
+}
+
+.chat-messages::-webkit-scrollbar-thumb {
+  background-color: #e4e7ed;
+  border-radius: 2px;
+}
+
+.chat-messages::-webkit-scrollbar-thumb:hover {
+  background-color: #c0c4cc;
+}
+
+.chat-messages::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+/* 优化加载状态样式 */
+:deep(.is-loading) {
+  animation: rotating 2s linear infinite;
+}
+
+@keyframes rotating {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 添加红点样式 */
+:deep(.el-badge__content.is-dot) {
+  width: 8px;
+  height: 8px;
+  padding: 0;
+  right: 3px;
+  top: 3px;
+  border: 2px solid #fff;
+  box-shadow: 0 0 0 1px #ff4d4f;
+}
+</style> 

src/components/ECharts/index.vue

@@ -156,6 +156,32 @@ const generateOptions = computed(() => {
       }
     }))
 
+  const dataZoom = [
+    {
+      type: 'slider', // 滑动条类型
+      xAxisIndex: 0,  // 绑定到 X 轴
+      filterMode: 'filter', // 过滤模式
+      start: 0, // 初始左侧位置（百分比）
+      end: 100, // 初始右侧位置（百分比）
+      height: 30, // 高度
+      bottom: 10, // 距离底部的距离
+      handleSize: '80%',
+      handleStyle: {
+        color: '#fff',
+        shadowBlur: 3,
+        shadowColor: 'rgba(0, 0, 0, 0.6)',
+        shadowOffsetX: 2,
+        shadowOffsetY: 2
+      }
+    },
+    {
+      type: 'inside', // 内置类型（鼠标滚轮）
+      xAxisIndex: 0,
+      filterMode: 'filter'
+    }
+  ]
+
+
   return {
     title: props.title ? {
       text: props.title
@@ -166,34 +192,57 @@ const generateOptions = computed(() => {
         type: 'cross'
       },
       formatter: (params) => {
-        // 找到原始配置中对应的系列配置
-        const validParams = params.filter(param => {
-          const seriesConfig = config.series.find(s => s.name === param.seriesName)
-          return seriesConfig && seriesConfig.tooltip?.show !== false
-        })
+        // 获取所有系列的配置
+        const allSeries = config.series;
+        // 获取当前鼠标所在的类目轴值（例如，'手机'）
+        const currentAxisValue = params[0].axisValue;
 
-        if (validParams.length === 0) return ''
+        // 找到当前类目轴值对应的所有系列的数据
+        const dataMap = {};
+        props.data.forEach(item => {
+          if (item[config.xField] === currentAxisValue) {
+            allSeries.forEach(series => {
+              dataMap[series.name] = item[series.field];
+            });
+          }
+        });
 
-        let result = `${validParams[0].axisValue}<br/>`
-        validParams.forEach(param => {
-          // 找到对应的系列配置
-          const seriesConfig = config.series.find(s => s.name === param.seriesName)
-          // 提取 labelFormatter 中的单位
-          let unit = ''
-          if (seriesConfig?.labelFormatter) {
-            const match = seriesConfig.labelFormatter.match(/\{c\}(.+)/)
+        // 构造 tooltip 内容
+        let result = `${currentAxisValue}<br/>`;
+        allSeries.forEach(series => {
+
+          // 只有 tooltip.show 为 true 的系列才显示在 tooltip 中
+          if (series.tooltip && series.tooltip.show === false) {
+            return;
+          }
+
+          // 获取系列的颜色
+          const seriesColor = series.color || '#000';
+          // 获取系列的值
+          const seriesValue = dataMap[series.name];
+          // 获取系列的单位（从 labelFormatter 中提取）
+          let unit = '';
+          if (series.labelFormatter) {
+            const match = series.labelFormatter.match(/\{c\}(.+)/);
             if (match) {
-              unit = match[1]
+              unit = match[1];
             }
           }
-          result += `${param.marker}${param.seriesName}: ${param.value}${unit}<br/>`
-        })
+          // 添加到 tooltip 内容中
+          result += `<div style="display: flex; align-items: center;">
+                    <span style="display: inline-block; width: 10px; height: 10px; background-color: ${seriesColor}; margin-right: 5px;"></span>
+                    ${series.name}: ${seriesValue}${unit}
+                 </div>`;
+        });
 
-        return result
+        return result;
       }
     },
     legend: {
-      data: series.map(s => s.name)
+      show: true,
+      data: config.series
+          .filter(s => s.legendShow !== false)
+          .map(s => s.name)
     },
     xAxis: {
       type: 'category',
@@ -223,7 +272,8 @@ const generateOptions = computed(() => {
       left: '10%',
       right: '10%',
       containLabel: true
-    }
+    },
+    dataZoom: dataZoom
   }
 })
 

src/utils/request.js

@@ -51,6 +51,7 @@ service.interceptors.request.use(
 // 响应拦截器
 service.interceptors.response.use(
   response => {
+
     const res = response.data
 
     // 根据实际后端返回的状态码和数据结构调整这里的逻辑

src/views/activity/TestCenter.vue

@@ -43,7 +43,7 @@
 
     <!-- 表格区域 -->
     <div class="table-section">
-      <el-table :data="tableData" style="width: 100%">
+      <el-table :data="tableData" style="width: 100%" @cell-click="handleCellClick">
         <el-table-column prop="date" label="Date" width="180" />
         <el-table-column prop="name" label="Name" width="180" />
         <el-table-column prop="address" label="Address" />
@@ -330,6 +330,13 @@ const marketShareConfig = {
     }
   ]
 }
+
+const handleCellClick = (row, column, cell, event) => {
+  console.log('点击的值:', row[column.property])
+  console.log('点击的列 字段名:', column.property)
+  console.log('点击的列 标题:', column.label)
+}
+
 </script>
 
 <style lang="scss" scoped>

src/views/activity/composables/useSalesChart.js

@@ -11,7 +11,7 @@ export function useSalesChart() {
     try {
       // 模拟 API 延迟
       await new Promise(resolve => setTimeout(resolve, 1500))
-      
+
       salesData.value = [
         {
           productName: '手机',
@@ -59,6 +59,7 @@ export function useSalesChart() {
         type: 'bar',
         color: '#409EFF',
         showLabel: true,
+        legendShow: false,
         labelFormatter: '{c}台',
         show: true,
       },
@@ -69,9 +70,9 @@ export function useSalesChart() {
         color: '#67C23A',
         showLabel: true,
         labelFormatter: '{c}台',
-        show: true,
+        show: false,
         tooltip: {
-          show: false
+          show: true
         }
       },
       {
@@ -98,7 +99,18 @@ export function useSalesChart() {
         max: 100,
         axisLabel: '{value}%'
       }
+    ],
+    dataZoom: [ // 自定义 dataZoom 配置
+      {
+        type: 'slider',
+        xAxisIndex: 0,
+        start: 10,
+        end: 60,
+        height: 20,
+        bottom: 20
+      }
     ]
+
   }
 
   return {