feat: 个人画像

src/hooks/useEcharts.js

@@ -17,13 +17,19 @@ export function useECharts(
 ) {
   const chartInstance = ref(null);
   const resizeObserver = ref(null);
+  let eventQueue = []
 
   // 初始化图表
   const init = () => {
     if (!containerRef.value) return;
     dispose();
     chartInstance.value = markRaw(echarts.init(containerRef.value, theme))
+    
     chartInstance.value.setOption(options.value);
+    eventQueue = eventQueue.filter((handler) => {
+      handler()
+      return false
+    })
     // 初始化 resize 监听
     if (autoResize) {
       setupResizeObserver();
@@ -71,6 +77,11 @@ export function useECharts(
     }
   };
 
+  const bindEvent = (eventName, callback) => {
+    eventQueue.push(() => chartInstance.value.getZr().on(eventName, callback))
+    return result
+  }
+
   // 监听 options 变化
   watch(options, (newOptions) => {
     if (chartInstance.value) {
@@ -79,14 +90,17 @@ export function useECharts(
   }, { deep: true, immediate: true });
 
   // 组件生命周期
-  onMounted(() => init());
+  onMounted(() => {
+    init()
+  });
   onBeforeUnmount(() => dispose());
-
-  return {
+  const result = {
     instance: chartInstance,
     init,
     dispose,
     reset,
-    resize
+    resize,
+    bindEvent
   };
+  return result
 }

src/views/portraitManagement/components/SearchBar.vue

@@ -1,34 +1,32 @@
 <template>
   <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>
-      <el-button size="small" :type="currentTime==='quarter'?'primary':'default'" @click="selectTime('quarter')">近三月</el-button>
-      <el-button size="small" :type="currentTime==='year'?'primary':'default'" @click="selectTime('year')">近一年</el-button>
-      <el-button size="small" :type="currentTime==='custom'?'primary':'default'" @click="selectTime('custom')">自定义时间范围</el-button>
-      <el-date-picker
-        v-if="currentTime==='custom'"
-        v-model="dateRange"
-        type="daterange"
-        range-separator="至"
-        start-placeholder="开始"
-        end-placeholder="结束"
-        size="small"
-        style="margin-left:8px;width:240px"
-        @change="() => searchHandler()" />
+      <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 title="" :visible="visible" placement="bottom-end" trigger="click" width="60vw">
+    <el-popover class="popover" title="" :visible="visible" placement="bottom-start" trigger="click" width="45vw">
       <template #reference>
-        <el-button type="primary" @click.stop="visible = !visible">组织架构/模糊搜索</el-button>
+        <div class="primary" style="border-radius: 6px;" @click.stop="visible = !visible">组织架构/模糊搜索</div>
       </template>
-      <div style="width:100%; padding: 15px;">
+
+      <div class="custom-el-style">
         <div>
-          <el-autocomplete
-            v-model="personName"
-            :fetch-suggestions="queryUsers"
-            placeholder="搜索员工/团队画像"
-            style="width:320px"
-            clearable>
+          <el-autocomplete v-model="personName" :fetch-suggestions="queryUsers" placeholder="搜索员工/团队画像" style="width:320px;" clearable>
             <template #suffix
               ><el-icon><Search /></el-icon
             ></template>
@@ -37,10 +35,10 @@
               <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="() => searchHandler()">模糊搜索</el-button>
+          <div class="primary" style="border-radius: 6px;" @click="() => searchHandler()">模糊搜索</div>
         </div>
         <div style="margin-top: 20px;">
-          <el-tree :data="departments" :props="{ value: 'id', showPrefix: false }" accordion @node-click="handleNodeClick" />
+          <el-tree :data="departments" :default-expanded-keys="[100]" :props="{ value: 'id', showPrefix: false }" accordion @node-click="handleNodeClick" />
         </div>
       </div>
     </el-popover>
@@ -48,10 +46,16 @@
 </template>
 
 <script setup>
+import { onMounted, onUnmounted } from 'vue'
+import { searchPortraitUsers } from '@/api/score/index'
+import { getDeptUserTree } from '@/api/item/items'
+
 const visible = defineModel('visible', false)
 const emit = defineEmits(['search'])
 const currentTime = ref('year')
 const personName = ref('')
+const departments = ref([])
+const dateRange = ref([])
 
 const queryUsers = async (query, cb) => {
   if (!query?.trim()) { cb([]); return }
@@ -76,13 +80,21 @@ const getTimeRange = () => {
   return { beginTime: formatDate(begin), endTime: formatDate(end) }
 }
 
+const formatDate = (d) => {
+  const dt = new Date(d)
+  return `${dt.getFullYear()}-${String(dt.getMonth()+1).padStart(2,'0')}-${String(dt.getDate()).padStart(2,'0')}`
+}
+
 const selectTime = (t) => {
   currentTime.value = t
   if (t !== 'custom') searchHandler()
 }
 
 const searchHandler = (query = {}) => {
-  emit('search', { ...getTimeRange(), personName: personName.value }, ...query)
+  const queryParams = { ...getTimeRange(), personName: personName.value, ...query }
+  if (queryParams.personName) {
+    emit('search', queryParams)
+  }
 }
 
 const handleNodeClick = (node) => {
@@ -90,6 +102,45 @@ const handleNodeClick = (node) => {
     searchHandler({ personName: node.label })
   }
 }
+
+const setStyle = () => {
+  const root = document.querySelector(':root')
+  root.style.setProperty('--el-bg-color-overlay', '#1c1936')
+  root.style.setProperty('--el-border-color-extra-light', '#5c676d')
+  root.style.setProperty('--el-border-color-light', 'transparent')
+  root.style.setProperty('--el-popover-padding', '0px')
+  root.style.setProperty('--el-text-color-regular', '#fff')
+  root.style.setProperty('--el-fill-color-light', '#5c676d')
+}
+
+const resetStyle = () => {
+  const root = document.querySelector(':root')
+  root.style.setProperty('--el-bg-color-overlay', '#ffffff')
+  root.style.setProperty('--el-border-color-extra-light', '#f2f6fc')
+  root.style.setProperty('--el-border-color-light', '#e4e7ed')
+  root.style.setProperty('--el-popover-padding', '12px')
+  root.style.setProperty('--el-text-color-regular', '#606266')
+  root.style.setProperty('--el-fill-color-light', '#f5f7fa')
+
+}
+
+onMounted(async () => {
+  setStyle()
+  const res = await getDeptUserTree()
+  departments.value = res.data
+})
+onUnmounted(() => {
+  resetStyle()
+})
+
+defineExpose({
+  getDefQuery () {
+    return {
+      personName: '',
+      ...getTimeRange()
+    }
+  }
+})
 </script>
 
 <style lang="scss" scoped>
@@ -97,8 +148,8 @@ const handleNodeClick = (node) => {
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  height: 90px;
-  padding: 15px;
+  height: 60px;
+  padding: 0 15px;
   box-sizing: border-box;
   gap: 12px;
   flex-wrap: wrap;
@@ -106,9 +157,103 @@ const handleNodeClick = (node) => {
   .time-btns {
     display: flex;
     align-items: center;
-    gap: 6px;
+    gap: 10px;
     flex-wrap: wrap;
     margin-right: 40px;
+    & > div {
+      padding: 8px 24px;
+      border-radius: 28px;
+      font-weight: 500;
+    }
+  }
+  .primary {
+    background: linear-gradient(125deg, #2AB3E6, #9605FC);
+    color: #fff;
+    padding: 8px 24px;
+  }
+  .default {
+    background: #1C1936;
+    color: #4C4C93;
+    position: relative;
+    &::before {
+      content: '';
+      position: absolute;
+      inset: -1px;
+      border-radius: 29px;
+      background: linear-gradient(150deg, #0f46fa 0%, #bd03fb 100%);
+      filter: brightness(2) contrast(150%);
+      z-index: -1;
+      opacity: 0.5;
+    }
+  }
+  .custom-style-date-picker-wrap {
+    position: relative;
+    border-radius: 19px;
+    height: 38px;
+    padding: 0 !important;
+    --el-text-color-primary: #fff;
+    &::before {
+      content: '';
+      position: absolute;
+      inset: -1px;
+      border-radius: 19px;
+      background: linear-gradient(150deg, #0f46fa 0%, #bd03fb 100%);
+      filter: brightness(2) contrast(150%);
+      z-index: -1;
+      opacity: 0.5;
+    }
   }
 }
 </style>
+
+<style lang="scss">
+  .custom-el-style {
+    width:100%;
+    padding: 10px;
+    position: relative;
+    background: #1c1936;
+    border-radius: 8px;
+    --el-text-color-regular: #fff;
+    --el-fill-color-blank: #17122A;
+    --el-border-color: linear-gradient(150deg, #0f46fa 0%, #bd03fb 100%);
+    --el-border-color-hover: linear-gradient(150deg, #0f46fa 0%, #bd03fb 100%);
+    .primary {
+      background: linear-gradient(125deg, #2AB3E6, #9605FC);
+      color: #fff;
+      padding: 6px 20px;
+      display: inline-block;
+      margin-left: 15px;
+    }
+    &::before {
+      content: '';
+      position: absolute;
+      inset: -2px;
+      border-radius: 10px;
+      background: linear-gradient(150deg, #0f46fa 0%, #0f46fa 10%, #020E15, #020E15, #020E15, #bd03fb 90%, #bd03fb 100%);
+      filter: brightness(2) contrast(150%);
+      z-index: -2;
+      opacity: 0.5;
+    }
+    .el-input__wrapper {
+    }
+    .el-tree {
+      background-color: #1c1936;
+      color: #fff;
+      .el-tree-node__content {
+        --el-tree-node-hover-bg-color: #5c676d;
+      }
+    }
+  }
+  .el-autocomplete-suggestion {
+    background: #17122A;
+  }
+  .custom-style-date-picker {
+    background: #1C1936 !important;
+    box-shadow: none !important;
+    height: 38px !important;
+    border-radius: 19px;
+  }
+  .el-popper {
+    --el-popover-padding: 0px;
+  }
+</style>

src/views/portraitManagement/components/card.vue

@@ -58,6 +58,9 @@ const props = defineProps({
     border-radius: 39px;
     padding: 15px 20px;
     height: 100%;
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
   }
 
   /* 标题区域 */
@@ -88,6 +91,6 @@ const props = defineProps({
   .card-content {
     color: #fff;
     font-size: 16px;
-    height: 100%;
+    flex: 1;
   }
 </style>

src/views/portraitManagement/employeeProfile/indexNew.vue

@@ -1,87 +0,0 @@
-<template>
-  <Page>
-    <div class="content">
-      <div class="content-search">
-        <SearchBar v-model:visible="visible" @search="searchHandler"/>
-      </div>
-      <div class="content-info">
-        <Card title="个人基本信息"> </Card>
-      </div>
-      <div class="content-bottom">
-        <div class="content-bottom-left">
-          <Card title="个人基本信息">
-            <div class="work-history">2020.1.1入职，司龄6年、开机年限5年，现任职班组长。</div>
-          </Card>
-          <Card title="个人基本信息"> </Card>
-        </div>
-        <div class="content-bottom-center">
-          <Card title="个人基本信息"></Card>
-        </div>
-        <div class="content-bottom-right">
-          <Card title="个人基本信息"></Card>
-        </div>
-      </div>
-    </div>
-  </Page>
-</template>
-
-<script setup>
-import Page from '../components/page.vue'
-import Card from '../components/card.vue'
-import SearchBar from '../components/SearchBar.vue'
-import { ref } from 'vue'
-const visible = ref(false)
-const searchHandler = () => {
-  
-}
-</script>
-
-<style lang="scss" scoped>
-
-.content {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  row-gap: 15px;
-  padding: 15px;
-  .content-search {}
-  .content-info {
-    height: 230px;
-    & > * {
-        height: 100%;
-      }
-  }
-  .content-bottom {
-    flex: 1;
-    display: flex;
-    column-gap: 15px;
-    .content-bottom-left {
-      width: 380px;
-      display: flex;
-      flex-direction: column;
-      row-gap: 15px;
-      & > *:nth-child(1) {
-        flex: 1;
-        .work-history {
-          padding: 15px;
-        }
-      }
-      & > *:nth-child(2) {
-        flex: 1.6;
-      }
-    }
-    .content-bottom-center {
-      flex: 1;
-      & > * {
-        height: 100%;
-      }
-    }
-    .content-bottom-right {
-      width: 380px;
-      & > * {
-        height: 100%;
-      }
-    }
-  }
-}
-</style>