feat(导航): 添加双击导航功能并优化数据展示

- 在GroupComparison组件中添加双击部门跳转到经理页面的功能
- 在secondTop组件中添加双击成员跳转到销售页面的功能
- 优化topOne组件中客户迫切问题排行榜的数据格式转换
- 在RankingList组件中增加展示条目并添加排序功能
- 在SalesTimelineWithTaskList组件中替换alert弹窗为自定义模态框
- 优化secondTop组件路由跳转逻辑,避免重复请求
This commit is contained in:
2025-08-21 10:47:41 +08:00
parent c340f6c870
commit 544a66b8fa
5 changed files with 265 additions and 29 deletions

View File

@@ -116,12 +116,37 @@
</div>
</div>
</div>
<!-- 发言内容弹窗 -->
<div v-if="showModal" class="modal-overlay" @click="closeModal">
<div class="modal-content" @click.stop>
<div class="modal-header">
<h3>直播发言内容</h3>
<button class="close-btn" @click="closeModal">×</button>
</div>
<div class="modal-body">
<div v-if="!modalMessages || modalMessages.length === 0" class="no-messages">
暂无发言内容
</div>
<div v-else class="messages-list">
<div v-for="(message, index) in modalMessages" :key="index" class="message-item">
<span class="message-number">{{ index + 1 }}.</span>
<span class="message-content">{{ message }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { computed, ref } from 'vue';
// 弹窗相关的响应式数据
const showModal = ref(false);
const modalMessages = ref([]);
// 定义props
const props = defineProps({
data: {
@@ -303,18 +328,13 @@ const getHealthIndicator = (score) => {
// 显示发言内容弹框
const showSpeakMessages = (speakMessages) => {
if (!speakMessages || speakMessages.length === 0) {
alert('暂无发言内容');
return;
}
// 格式化发言内容
let content = '直播发言内容:\n\n';
speakMessages.forEach((message, index) => {
content += `${index + 1}. ${message}\n\n`;
});
alert(content);
modalMessages.value = speakMessages || [];
showModal.value = true;
};
const closeModal = () => {
showModal.value = false;
modalMessages.value = [];
};
@@ -1031,5 +1051,105 @@ $indigo: #4f46e5;
}
}
/* 弹窗样式 */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-content {
background: white;
border-radius: 8px;
width: 90%;
max-width: 600px;
max-height: 80vh;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
border-bottom: 1px solid #e5e7eb;
background-color: #f9fafb;
}
.modal-header h3 {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #374151;
}
.close-btn {
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: #6b7280;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: background-color 0.2s;
}
.close-btn:hover {
background-color: #e5e7eb;
color: #374151;
}
.modal-body {
padding: 20px;
max-height: 60vh;
overflow-y: auto;
}
.no-messages {
text-align: center;
color: #6b7280;
font-size: 16px;
padding: 40px 20px;
}
.messages-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.message-item {
display: flex;
gap: 8px;
padding: 12px;
background-color: #f9fafb;
border-radius: 6px;
border-left: 3px solid #3b82f6;
}
.message-number {
font-weight: 600;
color: #3b82f6;
min-width: 20px;
}
.message-content {
flex: 1;
line-height: 1.5;
color: #374151;
}
</style>