feat: 个人画像

src/views/portraitManagement/components/SearchBar.vue

@@ -0,0 +1,114 @@
+<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>
+    <el-popover title="" :visible="visible" placement="bottom-end" trigger="click" width="60vw">
+      <template #reference>
+        <el-button type="primary" @click.stop="visible = !visible">组织架构/模糊搜索</el-button>
+      </template>
+      <div style="width:100%; padding: 15px;">
+        <div>
+          <el-autocomplete
+            v-model="personName"
+            :fetch-suggestions="queryUsers"
+            placeholder="搜索员工/团队画像"
+            style="width:320px"
+            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="() => searchHandler()">模糊搜索</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>
+</template>
+
+<script setup>
+const visible = defineModel('visible', false)
+const emit = defineEmits(['search'])
+const currentTime = ref('year')
+const personName = ref('')
+
+const queryUsers = async (query, cb) => {
+  if (!query?.trim()) { cb([]); return }
+  try {
+    const res = await searchPortraitUsers(query.trim())
+    cb((res.data || []).map(u => ({ ...u, value: u.nickName })))
+  } catch (_) { cb([]) }
+}
+
+const getTimeRange = () => {
+  if (currentTime.value === 'custom') {
+    if (dateRange.value?.length === 2) {
+      return { beginTime: formatDate(dateRange.value[0]), endTime: formatDate(dateRange.value[1]) }
+    }
+    return {}
+  }
+  const end = new Date(), begin = new Date()
+  if (currentTime.value === 'week') begin.setDate(end.getDate()-7)
+  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)
+  return { beginTime: formatDate(begin), endTime: formatDate(end) }
+}
+
+const selectTime = (t) => {
+  currentTime.value = t
+  if (t !== 'custom') searchHandler()
+}
+
+const searchHandler = (query = {}) => {
+  emit('search', { ...getTimeRange(), personName: personName.value }, ...query)
+}
+
+const handleNodeClick = (node) => {
+  if (node.nodeType === 'user') {
+    searchHandler({ personName: node.label })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ep-topbar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  height: 90px;
+  padding: 15px;
+  box-sizing: border-box;
+  gap: 12px;
+  flex-wrap: wrap;
+
+  .time-btns {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-wrap: wrap;
+    margin-right: 40px;
+  }
+}
+</style>

src/views/portraitManagement/components/card.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="info-card">
+    <div class="card-inner">
+      <div class="card-header" v-if="title">
+        <div class="gradient-dot"></div>
+        <div class="card-title">{{ title }}</div>
+      </div>
+      <div class="card-content">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  title: {
+    type: String
+  }
+})
+
+</script>
+
+<style lang="scss" scoped>
+
+  /* 卡片容器 - 实现渐变边框 */
+  .info-card {
+    position: relative;
+    width: 100%;
+    border-radius: 40px;
+    overflow: hidden;
+    filter: opacity(0.9);
+  }
+
+  /* 渐变边框伪元素 */
+  .info-card::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: 40px;
+    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;
+  }
+  /* 渐变边框伪元素 */
+  .info-card::after {
+    content: '';
+    position: absolute;
+    inset: 1px;
+    border-radius: 40px;
+    background: #21213a;
+    z-index: -1;
+  }
+
+  /* 卡片内部内容区 */
+  .card-inner {
+    border-radius: 39px;
+    padding: 15px 20px;
+    height: 100%;
+  }
+
+  /* 标题区域 */
+  .card-header {
+    display: flex;
+    align-items: center;
+    opacity: 1;
+    height: 32px;
+  }
+
+  .gradient-dot {
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    background: url('@/assets/dataBigScreen/title_icon01.png');
+  }
+
+  /* 标题文字 */
+  .card-title {
+    font-size: 24px;
+    font-weight: normal;
+    color: #ffffff;
+    margin-left: 10px;
+    line-height: 30px;
+  }
+
+  /* 内容文字 */
+  .card-content {
+    color: #fff;
+    font-size: 16px;
+    height: 100%;
+  }
+</style>

src/views/portraitManagement/components/page.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="bg">
+    <div class="page">
+      <div class="title">{{ title }}</div>
+      <div class="content">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+
+  
+</template>
+
+<script setup>
+const props = defineProps({
+  title: {
+    type: String,
+    default: '安检人事管理可视化大屏'
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.bg {
+  height: 100vh;
+  width: 100%;
+  position: relative;
+  background-image: url('@/assets/dataBigScreen/bg.png');
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(45deg, #231A43, #1c2d3e) ;
+    opacity: 0.8;
+    z-index: 1;
+  }
+  .page {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+  }
+  .title {
+    height: 88px;
+    line-height: 88px;
+    text-align: center;
+    color: #fff;
+    font-size: 48px;
+    background: #2b394d86;
+    position: relative;
+    margin-bottom: 2px;
+    font-weight: bold;
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: -2px;
+      margin: auto;
+      background: linear-gradient(90deg, transparent, #0f46facd 40%, #8a06e8cd 60%, transparent);
+      filter: brightness(1.5);
+      z-index: -1;
+    }
+  }
+  .content {
+    flex: 1;
+  }
+}
+</style>