feat: 个人画像

src/views/portraitManagement/employeeProfile/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="ep-root">
     <!-- 顶部工具栏 -->
-    <div class="ep-topbar">
+    <div class="ep-topbar" @click="visible = false">
       <div class="time-btns">
         <el-button size="small" :type="currentTime==='week'?'primary':'default'" @click="selectTime('week')">近一周</el-button>
         <el-button size="small" :type="currentTime==='month'?'primary':'default'" @click="selectTime('month')">近一月</el-button>
@@ -20,31 +20,55 @@
           @change="loadPortrait"
         />
       </div>
-      <el-autocomplete
-        v-model="personName"
-        :fetch-suggestions="queryUsers"
-        placeholder="搜索员工/团队画像"
-        size="small"
-        style="width:220px"
-        @select="handlePersonSelect"
-        @clear="portrait=null"
-        clearable
+      <el-popover
+        title=""
+        :visible="visible"
+        placement="bottom-end"
+        trigger="click"
+        width="60vw"
       >
-        <template #suffix><el-icon><Search /></el-icon></template>
-        <template #default="{ item }">
-          <span>{{ item.nickName }}</span>
-          <span v-if="item.deptName" style="font-size:12px;color:#999;margin-left:8px">{{ item.deptName }}</span>
+        <template #reference>
+          <el-button type="primary" @click.stop="visible = !visible">组织架构/模糊搜索</el-button>
         </template>
-      </el-autocomplete>
+        <div style="width:100%; padding: 15px;">
+          <div>
+            <el-autocomplete
+              v-model="personName"
+              :fetch-suggestions="queryUsers"
+              placeholder="搜索员工/团队画像"
+              style="width:320px"
+              @clear="portrait=null"
+              clearable
+            >
+              <template #suffix><el-icon><Search /></el-icon></template>
+              <template #default="{ item }">
+                <span>{{ item.nickName }}</span>
+                <span v-if="item.deptName" style="font-size:12px;color:#999;margin-left:8px">{{ item.deptName }}</span>
+              </template>
+            </el-autocomplete>
+            <el-button type="primary" style="margin-left: 30px;" @click="handlePersonSelect({nickName: personName})">模糊搜索</el-button>
+          </div>
+          <div style="margin-top: 20px;">
+            <el-tree
+              :data="departments"
+              :props="{ value: 'id', showPrefix: false }"
+              accordion
+              @node-click="handleNodeClick"
+            />
+          </div>
+
+        </div>
+      </el-popover>
+      
     </div>
 
     <!-- 空状态 -->
-    <div v-if="!portrait" class="ep-empty">
+    <div v-if="!portrait" class="ep-empty"  @click="visible = false">
       <el-empty description="请在右上角搜索员工姓名以查看画像" />
     </div>
 
     <!-- 主内容 -->
-    <div v-else v-loading="loading" class="ep-body" ref="content">
+    <div v-else v-loading="loading" class="ep-body" ref="content"  @click="visible = false">
       <!-- 左侧主区 -->
       <div class="ep-left">
 
@@ -82,7 +106,7 @@
               <div class="basic-detail-row">
                 <div class="basic-detail-col">
                   <div class="basic-label">学历：</div>
-                  <div class="basic-value">{{ portrait.schooling || '-' }}</div>
+                  <div class="basic-value">{{ getSchooling(portrait.schooling) }}</div>
                 </div>
                 <div class="basic-detail-col">
                   <div class="basic-label">专业：</div>
@@ -92,8 +116,13 @@
               <div class="basic-detail-row">
                 <div class="basic-detail-col">
                   <div class="basic-label">标签：</div>
-                  <el-tag size="small" type="primary" style="margin-right:6px" v-if="portrait.roleNames">{{ portrait.roleNames }}</el-tag>
-                  <el-tag size="small" type="warning" v-if="portrait.postNames">{{ portrait.postNames }}</el-tag>
+                  <div style="display: flex; flex-wrap: wrap; gap: 8px;">
+                    <el-tag size="small" type="primary" style="margin-right:6px" v-if="portrait.roleNames">{{ portrait.roleNames }}</el-tag>
+                    <template v-if="portrait.postNames">
+                      <el-tag size="small" v-for="value in portrait.postNames.split('、')" :key="value" type="warning" >{{ value }}</el-tag>
+                    </template>
+                  </div>
+                  
                 </div>
               </div>
               <!-- 
@@ -108,7 +137,7 @@
           <!-- 综合评价 -->
           <div class="card score-card">
             <div class="score-label">综合评价</div>
-            <div class="score-num">{{ portrait.totalScore }}</div>
+            <div class="score-num">{{ portrait.totalScore }}+2</div>
             <!-- <div class="score-level-tag">{{ scoreLevel }}</div> -->
           </div>
         </div>
@@ -132,7 +161,7 @@
             <div class="sec-title">获奖记录</div>
             <div class="award-table-wrap">
               <div class="award-table" v-if="portrait.awards && portrait.awards.length">
-                <div class="award-table-row level1" v-for="(aw, i) in portrait.awards" :key="i">
+                <div :class="getLevel(aw)" v-for="(aw, i) in portrait.awards" :key="i">
                     <div class="award-table-col">{{ aw.level3Name || '-' }}</div>
                     <div class="award-table-col">{{ aw.level2Name || '-' }}</div>
                     <div class="award-table-col">{{ aw.level4Name || '-' }}</div>
@@ -167,31 +196,6 @@
 
               <!-- 雷达图 -->
               <div ref="abilityChart" class="chart-box">
-                <!-- <div style="position: absolute;" v-if="activeDimName">
-                  <div style="padding: 12px; font-size: 14px; line-height: 1.6;">
-                    <div style="font-weight: bold; margin-bottom: 8px; font-size: 16px;">
-                      {{ activeDimName }}
-                    </div>
-                    <div style="margin-bottom: 10px;">
-                      <div style="color: #f56c6c; font-weight: bold;">扣分详情 (PENALTIES)</div>
-                      <ul style="margin: 6px 0; padding-left: 20px; color: #666;">
-                        <li>不安全事件(一类): -10.0分</li>
-                        <li>不安全事件(二类): -8.0分</li>
-                        <li>三/四/五类事件: -5/-3/-2分</li>
-                      </ul>
-                      <div style="text-align: right; color: #f56c6c; font-weight: bold;">合计扣分: 30.3分</div>
-                    </div>
-                    <div>
-                      <div style="color: #67c23a; font-weight: bold;">加分详情 (BONUSES)</div>
-                      <ul style="margin: 6px 0; padding-left: 20px; color: #666;">
-                        <li>一类查获/隐患上报: +1.0分</li>
-                        <li>建议采纳/二类查获: +1.0/+0.5分</li>
-                        <li>特殊物品查获: +0.15分</li>
-                      </ul>
-                      <div style="text-align: right; color: #67c23a; font-weight: bold;">合计加分: 4.3分</div>
-                    </div>
-                  </div>
-                </div> -->
               </div>
               
               <!-- 加分明细浮窗（点击维度后显示，绝对定位右侧） -->
@@ -238,15 +242,15 @@
               </div>
               <div class="supp-item">
                 <span class="s-lbl">籍贯</span>
-                <span class="s-val">{{ portrait.sexText || '-' }}</span>
+                <span class="s-val">{{ portrait.nativePlace || '-' }}</span>
               </div>
               <div class="supp-item">
                 <span class="s-lbl">民族</span>
-                <span class="s-val">{{ portrait.sexText || '-' }}</span>
+                <span class="s-val">{{ portrait.nation || '-' }}</span>
               </div>
               <div class="supp-item">
                 <span class="s-lbl">年龄</span>
-                <span class="s-val">{{ portrait.sexText || '-' }}</span>
+                <span class="s-val">{{ getAge(portrait.birthday) }}</span>
               </div>
               <div class="supp-item">
                 <span class="s-lbl">司龄</span>
@@ -308,15 +312,15 @@
               </div>
               <div class="supp-item">
                 <span class="s-lbl">监察问题记录</span>
-                <span class="s-val">{{ portrait.qualityControlCount ?? '-' }}</span>
+                <span class="s-val">{{ portrait.d ?? '-' }}</span>
               </div>
               <div class="supp-item">
                 <span class="s-lbl">三级质控巡查记录</span>
-                <span class="s-val">{{ portrait.qualityControlCount ?? '-' }}</span>
+                <span class="s-val">{{ portrait.e ?? '-' }}</span>
               </div>
               <div class="supp-item">
                 <span class="s-lbl">实时质控拦截记录</span>
-                <span class="s-val">{{ portrait.qualityControlCount ?? '-' }}</span>
+                <span class="s-val">{{ portrait.q ?? '-' }}</span>
               </div>
             </div>
           </div>
@@ -373,6 +377,8 @@ import * as echarts from 'echarts'
 import { Search } from '@element-plus/icons-vue'
 import { useRoute } from 'vue-router'
 import { searchPortraitUsers, getEmployeePortrait } from '@/api/score/index'
+import { getDeptUserTree } from '@/api/item/items'
+import { useDict } from '@/utils/dict'
 
 defineOptions({ name: 'EmployeeProfile' })
 
@@ -384,6 +390,34 @@ const portrait = ref(null)
 const loading = ref(false)
 const abilityChart = ref(null)
 let chart = null
+const { sys_user_schooling } = useDict('sys_user_schooling')
+
+function getSchooling (schooling) {
+  const result = (sys_user_schooling.value || []).find(item => item.value === schooling) || { label: schooling }
+  return result.label || '-'
+}
+
+function getAge (birthday) {
+  const birthDate = new Date(birthday);
+  if (isNaN(birthDate.getTime())) {
+    return '-'
+  }
+  const today = new Date();
+  // 计算年份差
+  let age = today.getFullYear() - birthDate.getFullYear();
+  // 计算月份差
+  const monthDiff = today.getMonth() - birthDate.getMonth();
+  // 如果还没到今年生日，年龄减1
+  if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
+    age--;
+  }
+  return `${age}岁`;
+}
+function getLevel (level) {
+  if (level.level3Name === '部门层级') return ['award-table-row', 'level2'] 
+  if (level.level3Name === '班组层级') return ['award-table-row', 'level3'] 
+  return ['award-table-row', 'level1'] 
+}
 
 const formatDate = (d) => {
   const dt = new Date(d)
@@ -421,6 +455,14 @@ const queryUsers = async (query, cb) => {
 const handlePersonSelect = (item) => {
   personName.value = item.nickName
   loadPortrait()
+  visible.value = false
+}
+const visible = ref(false)
+const handleNodeClick = (node) => {
+  if (node.nodeType === 'user') {
+    handlePersonSelect({ nickName: node.label })
+  }
+  
 }
 
 const loadPortrait = async () => {
@@ -494,10 +536,7 @@ const examScoreStyle = (score) => {
 }
 
 const radarColor = computed(() => {
-  const total = Number(portrait.value?.totalScore ?? 0)
-  if (total < 75)  return { line: '#28ABE2', fill: '#5BBCE7', label: '#000' }
-  if (total >= 90) return { line: '#28ABE2', fill: '#5BBCE7',  label: '#000' }
-  return             { line: '#28ABE2',  fill: '#5BBCE7',    label: '#000' }
+  return { line: '#EEBE7C',  fill: 'rgba(246, 238, 202, 0.8)', label: '#000' }
 })
 
 const tipRef = ref(null)
@@ -506,7 +545,6 @@ const initChart = () => {
   if (chart) { chart.dispose(); chart = null }
   chart = echarts.init(abilityChart.value)
   const dims = portrait.value.dimensions || []
-  console.log(dims);
   
   const c = radarColor.value
 
@@ -515,9 +553,9 @@ const initChart = () => {
       indicator: dims.map(d => ({ name: d.name + '\n\n' + d.score, max: 100 })),
       center: ['50%', '52%'],
       radius: '65%',
-      splitNumber: 4,
-      axisLine: { lineStyle: { color: '#8EC742' } },
-      splitLine: { lineStyle: { color: '#8EC742' } },
+      splitNumber: 7,
+      axisLine: { lineStyle: { color: '#ccc' } },
+      splitLine: { lineStyle: { color: ['#fe4322', '#fe4322', '#fe4322', '#fe4322', '#fe4322', '#fe4322', '#28ABE2', '#8EC742'], width: 3  } },
       splitArea: { show: false },
       axisName: {
         color: '#000',
@@ -530,7 +568,7 @@ const initChart = () => {
         value: dims.map(d => Number(d.score)),
         name: '个人能力',
         areaStyle: { color: c.fill },
-        lineStyle: { color: c.line, width: 3 },
+        lineStyle: { color: c.line, width: 2 },
         itemStyle: { color: c.line }
       }],
       symbol: 'circle',
@@ -573,9 +611,7 @@ const initChart = () => {
 
     // 显示 tooltip
     tip.style.display = 'block'
-    
-    // tip.style.left = rect.x + e.offsetX + 30 + 'px'
-    // tip.style.top = rect.y + e.offsetY + 'px'
+
     tip.style.left = pisition.x + 30 + 'px'
     tip.style.top = pisition.y + 'px'
     activeDimName.value = dims[idx].name
@@ -621,7 +657,10 @@ let pisition = {
   x: 0,
   y: 0
 }
-onMounted(() => {
+const departments = ref([])
+onMounted(async () => {
+  const res = await getDeptUserTree()
+  departments.value = res.data
   window.addEventListener('resize', handleResize)
   const n = route.query.personName
   if (n) { personName.value = n; loadPortrait() }
@@ -654,7 +693,7 @@ onBeforeUnmount(() => {
 .ep-topbar {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-start;
   background: rgba(255, 255, 255, 1);
   // border-radius: 20px;
   padding: 10px 16px;
@@ -669,6 +708,7 @@ onBeforeUnmount(() => {
     align-items: center;
     gap: 6px;
     flex-wrap: wrap;
+    margin-right: 40px;
   }
 }
 
@@ -704,7 +744,7 @@ onBeforeUnmount(() => {
   display: flex;
   flex-direction: column;
   gap: 20px;
-  font-size: 20px;
+  font-size: 18px;
   color: rgba(16, 16, 16, 1);
   line-height: 28px;
 }
@@ -715,7 +755,7 @@ onBeforeUnmount(() => {
   border-radius: 20px;
   box-sizing: border-box;
     .sec-title {
-    font-size: 48px;
+    font-size: 32px;
     font-weight: bold;
     line-height: 68px;
     color: rgba(31, 135, 232, 1);
@@ -728,8 +768,8 @@ onBeforeUnmount(() => {
     &::before {
       content: '';
       display: block;
-      width: 20px;
-      height: 20px;
+      width: 12px;
+      height: 12px;
       border-radius: 50%;
       transform: translateX(15px);
       background: rgba(31, 135, 232, 1);
@@ -792,7 +832,7 @@ onBeforeUnmount(() => {
     .basic-detail-row {
       display: flex;
       color: rgba(16,16,16,1);
-      font-size: 20px;
+      font-size: 18px;
       text-align: left;
       font-weight: bold;
       width: 100%;
@@ -800,8 +840,8 @@ onBeforeUnmount(() => {
         flex: 1;
         display: flex;
         align-items: center;
-        line-height: 28px;
         .basic-label {
+          white-space: nowrap;
         }
         .basic-value {
           flex: 1;
@@ -839,7 +879,7 @@ onBeforeUnmount(() => {
   flex-direction: column;
   align-items: center;
   background: var(--cardBgColor);
-  font-size: 20px;
+  font-size: 18px;
   text-align: center;
 
   .score-label {
@@ -871,7 +911,7 @@ onBeforeUnmount(() => {
 
   .score-level-tag {
     margin-top: 12px;
-    font-size: 20px;
+    font-size: 18px;
     font-weight: 600;
     color: rgba(16, 16, 16, 1);
     background: #f5f5f5;
@@ -884,14 +924,14 @@ onBeforeUnmount(() => {
 
 /* ── 工作履历 + 获奖 ── */
 .left-mid-card {
-  width: 604px;
+  width: 560px;
   flex-shrink: 0;
   background: var(--cardBgColor);
   color: rgba(16, 16, 16, 1);
-  font-size: 20px;
+  font-size: 18px;
   line-height: 28px;
   box-sizing: border-box;
-  padding: 30px 10px;
+  padding: 0 10px 10px;
   text-align: center;
   height: 100%;
   overflow: hidden;
@@ -906,7 +946,7 @@ onBeforeUnmount(() => {
     padding: 20px;
 
     .history-item {
-      font-size: 20px;
+      font-size: 18px;
       font-weight: bold;
       color: #101010;
       line-height: 28px;
@@ -929,6 +969,10 @@ onBeforeUnmount(() => {
       .award-table-row {
         display: flex;
         height: 48px;
+        border-bottom: 1px dashed #fff;
+        &:last-child {
+          border: none;
+        }
         .award-table-col {
           flex: 1;
           text-align: center;
@@ -948,27 +992,6 @@ onBeforeUnmount(() => {
   }
 }
 
-.award-section {
-  margin-top: 16px;
-  background-color: rgba(169, 209, 250, 1);
-  border-radius: 20px;
-  padding: 12px;
-  font-size: 20px;
-  font-family: 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
-  font-weight: bold;
-
-  .sec-title {
-    font-size: 48px;
-    font-weight: bold;
-    line-height: 68px;
-    color: rgba(31, 135, 232, 1);
-    text-align: left;
-    font-family: 'YSBiaoTiHei-bold', 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
-    margin-bottom: 10px;
-  }
-}
-
-
 /* ── 雷达图卡 ── */
 .radar-card {
   flex: 1;
@@ -977,7 +1000,7 @@ onBeforeUnmount(() => {
   flex-direction: column;
   background: rgb(242, 249, 253);
   color: rgba(16, 16, 16, 1);
-  font-size: 20px;
+  font-size: 18px;
   line-height: 28px;
   text-align: center;
 
@@ -1006,13 +1029,24 @@ onBeforeUnmount(() => {
   flex-direction: column;
   .side-title {
     font-size: 32px;
-    font-weight: 900;
+    font-weight: bold;
     line-height: 50px;
     color: rgba(31, 135, 232, 1);
     text-indent: 20px;
     text-align: left;
     font-style: italic;
-    font-family: 'YSBiaoTiHei-bold', 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+    text-indent: 25px;
+    display: flex;
+    align-items: center;
+    &::before {
+      content: '';
+      display: block;
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      transform: translateX(15px);
+      background: rgba(31, 135, 232, 1);
+    }
   }
 }
 .pos-section {
@@ -1026,14 +1060,14 @@ onBeforeUnmount(() => {
   flex-direction: column;
   border-radius: 30px;
   padding: 5px 20px;
-  font-size: 20px;
+  font-size: 18px;
   font-family: 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
   
   .supp-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    font-size: 20px;
+    font-size: 18px;
     padding: 4px 0;
     line-height: 28px;
     color: rgba(0,0,0,1);
@@ -1087,7 +1121,7 @@ onBeforeUnmount(() => {
         display: table-cell;
         min-width: 5em;
         text-align: center;
-        font-size: 20px;
+        font-size: 18px;
       }
     }
   }
@@ -1113,7 +1147,7 @@ onBeforeUnmount(() => {
   pointer-events: none;
   font-size: 14px;
   line-height: 1.5;
-  transform: translateY(-50%);
+  transform: translateY(-80%);
   display: none;
 
   .tooltip-title {
@@ -1269,5 +1303,5 @@ onBeforeUnmount(() => {
 .add-score    { color: #1a9944; }
 .p-empty { color: #bbb; font-size: 11px; text-align: center; padding: 12px 0; }
 /* 通用 */
-.empty-text { color: #bbb; font-size: 20px; text-align: center; padding: 8px 0; }
+.empty-text { color: #bbb; font-size: 18px; text-align: center; padding: 8px 0; }
 </style>

src/views/system/user/components/UserInfoEdit.vue

@@ -41,6 +41,11 @@
             </el-form-item>
           </el-col>
           <el-col :span="12">
+            <el-form-item label="籍贯" prop="nativePlace">
+              <el-input v-model="form.nativePlace" placeholder="请输入籍贯" maxlength="128"  />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
             <el-form-item label="用户性别" prop="sex">
               <el-select v-model="form.sex" placeholder="请选择用户性别">
                 <el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label"
@@ -49,6 +54,11 @@
             </el-form-item>
           </el-col>
           <el-col :span="12">
+            <el-form-item label="民族" prop="nation">
+              <el-input v-model="form.nation" placeholder="请输入民族" maxlength="128"  />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
             <el-form-item label="生肖" prop="zodiac">
               <el-select v-model="form.zodiac" placeholder="请选择生肖">
                 <el-option v-for="item in sys_user_zodiac" :key="item.value" :label="item.label" :value="item.value" />
@@ -146,6 +156,11 @@
               </el-select>
             </el-form-item>
           </el-col>
+          <el-col :span="12">
+            <el-form-item label="专业" prop="professional">
+              <el-input v-model="form.professional" placeholder="请输入专业" />
+            </el-form-item>
+          </el-col>
           <el-col :span="24">
             <el-form-item label="行政处罚情况" prop="administrativeStatus">
               <el-input v-model="form.administrativeStatus" type="textarea" placeholder="请输入行政处罚情况"></el-input>

vite.config.js

@@ -2,8 +2,8 @@ import { defineConfig, loadEnv } from 'vite'
 import path from 'path'
 import createVitePlugins from './vite/plugins'
 
-const baseUrl = 'http://localhost:8088' // 后端接口
-// const baseUrl = 'http://airport.samsundot.com:9035/prod-api'
+// const baseUrl = 'http://localhost:8088' // 后端接口
+const baseUrl = 'http://airport.samsundot.com:9035/prod-api'
 // https://vitejs.dev/config/
 export default defineConfig(({ mode, command }) => {
   const env = loadEnv(mode, process.cwd())