feat(团队分析): 添加团队和部门分析功能及弹窗
- 在api中添加获取团队各组分析报告的接口 - 在secondTop和seniorManager视图中添加团队分析弹窗组件 - 实现部门分析弹窗功能 - 添加样式和交互逻辑处理团队分析数据展示
This commit is contained in:
@@ -113,7 +113,20 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="group-performance">
|
||||
<button>团队整体分析</button>
|
||||
<button @click="showTeamAnalysisModal">团队整体分析</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 团队整体分析弹窗 -->
|
||||
<div v-if="showTeamAnalysis" class="team-analysis-modal" @click.self="closeTeamAnalysisModal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>团队整体分析</h3>
|
||||
<button class="close-btn" @click="closeTeamAnalysisModal">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>这里是团队整体分析的内容</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -286,6 +299,9 @@ const cardVisibility = ref({
|
||||
// FeedbackForm 控制变量
|
||||
const showFeedbackForm = ref(false)
|
||||
|
||||
// 团队整体分析弹窗控制变量
|
||||
const showTeamAnalysis = ref(false)
|
||||
|
||||
// 更新卡片显示状态
|
||||
const updateCardVisibility = (newVisibility) => {
|
||||
Object.assign(cardVisibility.value, newVisibility)
|
||||
@@ -300,6 +316,15 @@ const showFeedbackFormModal = () => {
|
||||
const closeFeedbackFormModal = () => {
|
||||
showFeedbackForm.value = false
|
||||
}
|
||||
|
||||
// 团队整体分析弹窗控制方法
|
||||
const showTeamAnalysisModal = () => {
|
||||
showTeamAnalysis.value = true
|
||||
}
|
||||
|
||||
const closeTeamAnalysisModal = () => {
|
||||
showTeamAnalysis.value = false
|
||||
}
|
||||
// 营期调控逻辑
|
||||
// This would ideally come from a prop or API call based on the logged-in user
|
||||
const centerData = ref({
|
||||
@@ -1638,7 +1663,77 @@ const hideTooltip = () => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 团队分析弹窗样式 */
|
||||
.team-analysis-modal {
|
||||
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;
|
||||
}
|
||||
|
||||
.team-analysis-modal .modal-content {
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
width: 80%;
|
||||
max-width: 600px;
|
||||
max-height: 80vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.team-analysis-modal .modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.team-analysis-modal .modal-header h3 {
|
||||
margin: 0;
|
||||
color: #1a202c;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.team-analysis-modal .close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
color: #718096;
|
||||
padding: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.team-analysis-modal .close-btn:hover {
|
||||
color: #1a202c;
|
||||
}
|
||||
|
||||
.team-analysis-modal .modal-body {
|
||||
padding: 1rem;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.team-analysis-modal .modal-body p {
|
||||
margin: 0;
|
||||
color: #4a5568;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
// 路由导航顶栏样式
|
||||
.route-header {
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user