refactor(portrait): adjust page card titles and optimize code format

1. adjust the card titles in employee profile page to match actual content
2. format code in SearchBar and deptProfile page, fix spacing and syntax issues
3. add init-done event binding for SearchBar in dept profile page
4. add debug log for department team stats data

src/views/portraitManagement/components/SearchBar.vue

@@ -1,45 +1,48 @@
 <template>
   <div class="ep-topbar" @click="visible = false">
     <div class="ep-topbar-content">
-    <div class="time-btns">
-      <div :class="currentTime === 'week' ? 'primary' : 'default'" @click="selectTime('week')">近一周</div>
-      <div :class="currentTime === 'month' ? 'primary' : 'default'" @click="selectTime('month')">近一月</div>
-      <div :class="currentTime === 'quarter' ? 'primary' : 'default'" @click="selectTime('quarter')">近三月</div>
-      <div :class="currentTime === 'year' ? 'primary' : 'default'" @click="selectTime('year')">近一年</div>
-      <div :class="currentTime === 'custom' ? 'primary' : 'default'" @click="selectTime('custom')">自定义时间范围</div>
-      <div class="custom-style-date-picker-wrap" v-if="currentTime === 'custom'">
-        <el-date-picker class="custom-style-date-picker" v-model="dateRange" type="daterange" range-separator="至"
-          start-placeholder="开始" end-placeholder="结束" style="width:320px" @change="() => searchHandler()" />
-      </div>
-    </div>
-    <el-popover class="popover" title="" :visible="visible" placement="bottom-start" trigger="click" width="45vw">
-      <template #reference>
-        <div class="primary" style="border-radius: 6px;" @click.stop="visible = !visible">{{ props.deptType === 'user' ?
-          '组织架构/模糊搜索' : '部门选择' }}</div>
-      </template>
-
-      <div class="custom-el-style">
-        <div>
-          <el-autocomplete v-model="personName" :fetch-suggestions="props.deptType === 'user' ? queryUsers : queryDept"
-            :placeholder="props.deptType === 'user' ? '搜索员工/团队画像' : '搜索部门'" style="width:320px;" clearable
-            @select="handleSelect">
-            <template #suffix><el-icon>
-                <Search />
-              </el-icon></template>
-            <template #default="{ item }">
-              <span>{{ item.nickName || item.deptName }}</span>
-              <span v-if="item.deptName && item.nickName" style="font-size:12px;color:#999;margin-left:8px">{{
-                item.deptName }}</span>
-            </template>
-          </el-autocomplete>
-          <!-- <div class="primary" style="border-radius: 6px;" @click="() => searchHandler()">模糊搜索</div> -->
-        </div>
-        <div style="margin-top: 20px;">
-          <el-tree ref="treeRef" :data="departments" :default-expanded-keys="[100]" node-key="id"
-            :current-node-key="currentKey" :props="{ value: 'id', showPrefix: false }" accordion @node-click="handleNodeClick" />
+      <div class="time-btns">
+        <div :class="currentTime === 'week' ? 'primary' : 'default'" @click="selectTime('week')">近一周</div>
+        <div :class="currentTime === 'month' ? 'primary' : 'default'" @click="selectTime('month')">近一月</div>
+        <div :class="currentTime === 'quarter' ? 'primary' : 'default'" @click="selectTime('quarter')">近三月</div>
+        <div :class="currentTime === 'year' ? 'primary' : 'default'" @click="selectTime('year')">近一年</div>
+        <div :class="currentTime === 'custom' ? 'primary' : 'default'" @click="selectTime('custom')">自定义时间范围</div>
+        <div class="custom-style-date-picker-wrap" v-if="currentTime === 'custom'">
+          <el-date-picker class="custom-style-date-picker" v-model="dateRange" type="daterange" range-separator="至"
+            start-placeholder="开始" end-placeholder="结束" style="width:320px" @change="() => searchHandler()" />
         </div>
       </div>
-    </el-popover>
+      <el-popover class="popover" title="" :visible="visible" placement="bottom-start" trigger="click" width="45vw">
+        <template #reference>
+          <div class="primary" style="border-radius: 6px;" @click.stop="visible = !visible">{{ props.deptType === 'user'
+            ?
+            '组织架构/模糊搜索' : '部门选择' }}</div>
+        </template>
+
+        <div class="custom-el-style">
+          <div>
+            <el-autocomplete v-model="personName"
+              :fetch-suggestions="props.deptType === 'user' ? queryUsers : queryDept"
+              :placeholder="props.deptType === 'user' ? '搜索员工/团队画像' : '搜索部门'" style="width:320px;" clearable
+              @select="handleSelect">
+              <template #suffix><el-icon>
+                  <Search />
+                </el-icon></template>
+              <template #default="{ item }">
+                <span>{{ item.nickName || item.deptName }}</span>
+                <span v-if="item.deptName && item.nickName" style="font-size:12px;color:#999;margin-left:8px">{{
+                  item.deptName }}</span>
+              </template>
+            </el-autocomplete>
+            <!-- <div class="primary" style="border-radius: 6px;" @click="() => searchHandler()">模糊搜索</div> -->
+          </div>
+          <div style="margin-top: 20px;">
+            <el-tree ref="treeRef" :data="departments" :default-expanded-keys="[100]" node-key="id"
+              :current-node-key="currentKey" :props="{ value: 'id', showPrefix: false }" accordion
+              @node-click="handleNodeClick" />
+          </div>
+        </div>
+      </el-popover>
     </div>
   </div>
 </template>
@@ -47,7 +50,7 @@
 <script setup>
 import { ref, nextTick, onMounted, onUnmounted } from 'vue'
 import { searchPortraitUsers } from '@/api/score/index'
-import { getDeptList,getDeptUserTree } from '@/api/item/items'
+import { getDeptList, getDeptUserTree } from '@/api/item/items'
 import { listDept } from '@/api/system/dept'
 
 const props = defineProps({
@@ -142,12 +145,12 @@ const filterDeptTree = (data, targetType) => {
 const getTimeRange = () => {
   if (currentTime.value === 'custom') {
     if (dateRange.value?.length === 2) {
-      if(props.deptType === 'user'){
+      if (props.deptType === 'user') {
         return { beginTime: formatDate(dateRange.value[0]), endTime: formatDate(dateRange.value[1]) }
-      }else{
+      } else {
         return { startDate: formatDate(dateRange.value[0]), endDate: formatDate(dateRange.value[1]) }
       }
-     
+
     }
     return {}
   }
@@ -156,9 +159,9 @@ const getTimeRange = () => {
   else if (currentTime.value === 'month') begin.setMonth(end.getMonth() - 1)
   else if (currentTime.value === 'quarter') begin.setMonth(end.getMonth() - 3)
   else begin.setFullYear(end.getFullYear() - 1)
-  if(props.deptType === 'user'){
+  if (props.deptType === 'user') {
     return { beginTime: formatDate(begin), endTime: formatDate(end) }
-  }else{
+  } else {
     return { startDate: formatDate(begin), endDate: formatDate(end) }
   }
 }
@@ -195,15 +198,15 @@ const handleNodeClick = (node) => {
     if (node.deptType === props.deptType) {
       personName.value = node.deptName || node.name || node.label;
       let obj = {}
-      
-      if (props.deptType === 'BRIGADE'||props.deptType === 'STATION') {
+
+      if (props.deptType === 'BRIGADE' || props.deptType === 'STATION') {
         obj = { deptId: node.deptId || node.id }
       }
       if (props.deptType === 'MANAGER') {
-        obj = { teamId: node.deptId || node.id, deptId:  node.deptId || node.id }
+        obj = { teamId: node.deptId || node.id, deptId: node.deptId || node.id }
       }
       if (props.deptType === 'TEAMS') {
-        obj = { groupId: node.deptId || node.id, deptId:  node.deptId || node.id }
+        obj = { groupId: node.deptId || node.id, deptId: node.deptId || node.id }
       }
       searchHandler(obj)
     }
@@ -276,8 +279,10 @@ onUnmounted(() => {
 
 defineExpose({
   getDefQuery() {
+   
     return {
       ...getTimeRange(),
+    
     }
   }
 })

src/views/portraitManagement/deptProfile/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="group-profile-page">
     <Page title="安检人事管理可视化大屏" :tabs="['能力画像', '运行数据']" @tab-change="handleTabChange">
-      <SearchBar v-model:visible="searchVisible" ref="searchBar" @search="handleSearch" :deptType="'BRIGADE'"/>
+      <SearchBar v-model:visible="searchVisible" ref="searchBar" @search="handleSearch" @init-done="handleInitDone" :deptType="'BRIGADE'" />
       <PentagonGroup :items="pentagonItems" />
       <Profile v-if="activeTab === 0" :query-params="queryParams" />
-      <RunData v-else :query-params="queryParams"/>
+      <RunData v-else :query-params="queryParams" />
     </Page>
 
   </div>
@@ -32,134 +32,135 @@ const teamStatsData = ref(null)
 const invokerCountDeptTeamStats = (params) => {
   countDeptTeamStats(params).then(res => {
     if (res.code === 200 && res.data) {
+      console.log(res.data)
       teamStatsData.value = [
-  {
-    value: '88',
-    label: '综合得分',
-    iconPath: zongheIcon,
-    cornerRadius: 20,
-    vertices: {
-      topLeft: { x: 0, y: 0 },
-      topRight: { x: 300, y: 0 },
-      bottomRight: { x: 260, y: 200 },
-      bottomLeft: { x: 0, y: 200 }
-    },
-    cardContentStyle: {
-      gap: '100px'
-    },
-    edgeGradients: {
-      top: { start: '#0f46fa', end: 'transparent' },
-      right: { start: 'transparent', end: '#9903C1' },
-      bottom: { start: '#9903C1', end: 'transparent' },
-      left: { start: 'transparent', end: '#0f46fa' }
-    },
-    bgGradientStart: 'rgba(33,33,58,0.95)',
-    bgGradientEnd: 'rgba(15,70,250,0.2)'
-  },
-  {
-    value: '10',
-    label: '人员数量',
-    iconPath: renyuanIcon,
-    cornerRadius: 20,
-    vertices: {
-      topLeft: { x: 10, y: 0 },
-      topRight: { x: 300, y: 0 },
-      bottomRight: { x: 260, y: 200 },
-      bottomLeft: { x: -30, y: 200 }
-    }, cardContentStyle: {
-      gap: '100px'
-    },
-    edgeGradients: {
-      top: { start: '#0f46fa', end: 'transparent' },
-      right: { start: 'transparent', end: '#9903C1' },
-      bottom: { start: '#9903C1', end: 'transparent' },
-      left: { start: 'transparent', end: '#0f46fa' }
-    },
-    bgGradientStart: 'rgba(33,33,58,0.95)',
-    bgGradientEnd: 'rgba(15,70,250,0.2)'
-  },
-  {
-    value: '周游波小组',
-    label: '',
-    iconPath: zu02Icon,
-    iconStyle: {
-      width: '250px',
-      height: '250px'
-    },
-    valueStyle: {
-      fontSize: '48px',
-      bottom: '26px',
-      position: 'relative'
-    },
-    vertical: true,
-    cornerRadius: 20,
-    vertices: {
-      topLeft: { x: 10, y: 0 },
-      topRight: { x: 280, y: 0 },
-      bottomRight: { x: 320, y: 200 },
-      bottomLeft: { x: -30, y: 200 }
-    },
-    cardContentStyle: {
-      gap: '0px',
-      position: 'relative',
-      bottom: '65px'
-    },
-    edgeGradients: {
-      top: { start: '#0f46fa', end: 'transparent' },
-      right: { start: 'transparent', end: '#9903C1' },
-      bottom: { start: '#9903C1', end: 'transparent' },
-      left: { start: 'transparent', end: '#0f46fa' }
-    },
-    bgGradientStart: 'rgba(33,33,58,0.95)',
-    bgGradientEnd: 'rgba(15,70,250,0.2)'
-  },
-  {
-    value: '28',
-    label: '平均年龄',
-    iconPath: nianlingIcon,
-    cornerRadius: 20,
-    vertices: {
-      topLeft: { x: -10, y: 0 },
-      topRight: { x: 290, y: 0 },
-      bottomRight: { x: 330, y: 200 },
-      bottomLeft: { x: 30, y: 200 }
-    },
-    cardContentStyle: {
-      gap: '100px'
-    },
-    edgeGradients: {
-      top: { start: '#0f46fa', end: 'transparent' },
-      right: { start: 'transparent', end: '#9903C1' },
-      bottom: { start: '#9903C1', end: 'transparent' },
-      left: { start: 'transparent', end: '#0f46fa' }
-    },
-    bgGradientStart: 'rgba(33,33,58,0.95)',
-    bgGradientEnd: 'rgba(15,70,250,0.2)'
-  },
-  {
-    value: '3.5',
-    label: '平均司龄',
-    iconPath: silingIcon,
-    cornerRadius: 20,
-    vertices: {
-      topLeft: { x: 0, y: 0 },
-      topRight: { x: 300, y: 0 },
-      bottomRight: { x: 300, y: 200 },
-      bottomLeft: { x: 40, y: 200 }
-    },
-    cardContentStyle: {
-      gap: '100px'
-    },
-    edgeGradients: {
-      top: { start: '#0f46fa', end: 'transparent' },
-      right: { start: 'transparent', end: '#9903C1' },
-      bottom: { start: '#9903C1', end: 'transparent' },
-      left: { start: 'transparent', end: '#0f46fa' }
-    },
-    bgGradientStart: 'rgba(33,33,58,0.95)',
-    bgGradientEnd: 'rgba(15,70,250,0.2)'
-  }
-]
+        {
+          value: '88',
+          label: '综合得分',
+          iconPath: zongheIcon,
+          cornerRadius: 20,
+          vertices: {
+            topLeft: { x: 0, y: 0 },
+            topRight: { x: 300, y: 0 },
+            bottomRight: { x: 260, y: 200 },
+            bottomLeft: { x: 0, y: 200 }
+          },
+          cardContentStyle: {
+            gap: '100px'
+          },
+          edgeGradients: {
+            top: { start: '#0f46fa', end: 'transparent' },
+            right: { start: 'transparent', end: '#9903C1' },
+            bottom: { start: '#9903C1', end: 'transparent' },
+            left: { start: 'transparent', end: '#0f46fa' }
+          },
+          bgGradientStart: 'rgba(33,33,58,0.95)',
+          bgGradientEnd: 'rgba(15,70,250,0.2)'
+        },
+        {
+          value: '10',
+          label: '人员数量',
+          iconPath: renyuanIcon,
+          cornerRadius: 20,
+          vertices: {
+            topLeft: { x: 10, y: 0 },
+            topRight: { x: 300, y: 0 },
+            bottomRight: { x: 260, y: 200 },
+            bottomLeft: { x: -30, y: 200 }
+          }, cardContentStyle: {
+            gap: '100px'
+          },
+          edgeGradients: {
+            top: { start: '#0f46fa', end: 'transparent' },
+            right: { start: 'transparent', end: '#9903C1' },
+            bottom: { start: '#9903C1', end: 'transparent' },
+            left: { start: 'transparent', end: '#0f46fa' }
+          },
+          bgGradientStart: 'rgba(33,33,58,0.95)',
+          bgGradientEnd: 'rgba(15,70,250,0.2)'
+        },
+        {
+          value: '周游波小组',
+          label: '',
+          iconPath: zu02Icon,
+          iconStyle: {
+            width: '250px',
+            height: '250px'
+          },
+          valueStyle: {
+            fontSize: '48px',
+            bottom: '26px',
+            position: 'relative'
+          },
+          vertical: true,
+          cornerRadius: 20,
+          vertices: {
+            topLeft: { x: 10, y: 0 },
+            topRight: { x: 280, y: 0 },
+            bottomRight: { x: 320, y: 200 },
+            bottomLeft: { x: -30, y: 200 }
+          },
+          cardContentStyle: {
+            gap: '0px',
+            position: 'relative',
+            bottom: '65px'
+          },
+          edgeGradients: {
+            top: { start: '#0f46fa', end: 'transparent' },
+            right: { start: 'transparent', end: '#9903C1' },
+            bottom: { start: '#9903C1', end: 'transparent' },
+            left: { start: 'transparent', end: '#0f46fa' }
+          },
+          bgGradientStart: 'rgba(33,33,58,0.95)',
+          bgGradientEnd: 'rgba(15,70,250,0.2)'
+        },
+        {
+          value: '28',
+          label: '平均年龄',
+          iconPath: nianlingIcon,
+          cornerRadius: 20,
+          vertices: {
+            topLeft: { x: -10, y: 0 },
+            topRight: { x: 290, y: 0 },
+            bottomRight: { x: 330, y: 200 },
+            bottomLeft: { x: 30, y: 200 }
+          },
+          cardContentStyle: {
+            gap: '100px'
+          },
+          edgeGradients: {
+            top: { start: '#0f46fa', end: 'transparent' },
+            right: { start: 'transparent', end: '#9903C1' },
+            bottom: { start: '#9903C1', end: 'transparent' },
+            left: { start: 'transparent', end: '#0f46fa' }
+          },
+          bgGradientStart: 'rgba(33,33,58,0.95)',
+          bgGradientEnd: 'rgba(15,70,250,0.2)'
+        },
+        {
+          value: '3.5',
+          label: '平均司龄',
+          iconPath: silingIcon,
+          cornerRadius: 20,
+          vertices: {
+            topLeft: { x: 0, y: 0 },
+            topRight: { x: 300, y: 0 },
+            bottomRight: { x: 300, y: 200 },
+            bottomLeft: { x: 40, y: 200 }
+          },
+          cardContentStyle: {
+            gap: '100px'
+          },
+          edgeGradients: {
+            top: { start: '#0f46fa', end: 'transparent' },
+            right: { start: 'transparent', end: '#9903C1' },
+            bottom: { start: '#9903C1', end: 'transparent' },
+            left: { start: 'transparent', end: '#0f46fa' }
+          },
+          bgGradientStart: 'rgba(33,33,58,0.95)',
+          bgGradientEnd: 'rgba(15,70,250,0.2)'
+        }
+      ]
     }
   })
 }
@@ -167,7 +168,7 @@ const invokerCountDeptTeamStats = (params) => {
 
 
 const pentagonItems = ref([
-  
+
 ])
 
 const handleSearch = (params) => {
@@ -181,9 +182,10 @@ const handleTabChange = (index) => {
 
 const searchBar = ref(null)
 onMounted(() => {
+
   const defParams = Object.assign({ deptId: '' }, searchBar.value.getDefQuery())
   queryParams.value = defParams
-  invokerCountDeptTeamStats(defParams)
+ 
 })
 
 </script>

src/views/portraitManagement/employeeProfile/index.vue

@@ -105,7 +105,7 @@
         </div>
         <div v-show="portrait.personName" class="content-bottom">
           <div class="content-bottom-left">
-            <Card title="个人基本信息">
+            <Card title="工作履历">
               <div class="work-history">
                 <span v-if="portrait.startWorkingDate">
                   {{ formatWorkDate(portrait.startWorkingDate)  }}入职 | 司龄{{ portrait.workYears != null ? portrait.workYears : '-' }}年 | 开机年限{{ portrait.securityCheckYears != null ? portrait.securityCheckYears : '-'
@@ -116,7 +116,7 @@
                 <span v-else>暂无数据</span>
               </div>
             </Card>
-            <Card title="个人基本信息">
+            <Card title="获奖记录">
               <div class="honor-item" v-for="(value, index) in portrait.awards" :key="index">
                 <div :style="{'--indexBgColor': value.color}">
                   <div :data-index="index + 1"></div>
@@ -127,12 +127,12 @@
             </Card>
           </div>
           <div class="content-bottom-center">
-            <Card title="个人基本信息">
+            <Card title="个人能力">
               <div ref="abilityChart" class="chart-box" />
             </Card>
           </div>
           <div class="content-bottom-right">
-            <Card title="个人基本信息">
+            <Card title="补充信息">
               <div class="supp-item">
                 <span class="s-lbl">政治面貌:</span>
                 <span class="s-val">{{ portrait.politicalStatusText || '-' }}</span>