meilan-web/src/views/dataBigScreen/dashboard/components/pageView/OrganizationalPortraitSectionLevel.vue

<template>
  <div class="content">
    <div class="content-top">
      <div class="content-left">
        <div class="personal" v-if=" pageType === 'personal' ">
          <div>
            <QualificationCapabilityPersonal />
          </div>
          <div style="height: 280px;">
            <Attendance type="personal" />
          </div>
        </div>
        <div class="department" v-else>
          <QualificationCapability />
        </div>

      </div>
      <div class="content-center">
        <div class="userSelectParams">
          <CustomStyleSelect type="tree" :propsConfig="{ value: 'id', showPrefix: false }" v-model="params.deptId"
            :options="departments" />
        </div>
        <div class="quantity-overview">
          <div class="quantity-overview-item" v-for=" item in pageInfo " :key="item.label" :data-title="item.label">
            <div>{{ item.desc }}</div>
            <div style="font-size: 22px;">{{ getLabel( item.value, item.list ) }}</div>
          </div>
        </div>
        <template v-if=" pageType === 'personal' ">
          <div style="flex: 1; overflow: hidden;">
            <CollaborationPersonal />
          </div>
          <div class="quantity-buttom">
            <WorkOutput type="personal" />
            <LearningGrowth type="personal" />
          </div>
        </template>
        <Collaboration v-else />
      </div>
      <div class="content-right">
        <!-- if 销毁组件 重制布局 -->
        <template v-if="pageType === 'personal'">
          <StandardExecution :type="pageType" />
          <SubjectiveImpression :type="pageType" />
        </template>
        <template v-else>
          <StandardExecution :type="pageType" />
          <SubjectiveImpression :type="pageType" />
        </template>
      </div>
    </div>
    <div class="content-bottom" v-if=" pageType !== 'personal' ">
      <Attendance :type="pageType" />
      <WorkOutput :type="pageType" />
      <LearningGrowth :type="pageType" />
      <DepartmentInfo :type="pageType" />
    </div>
  </div>
</template>

<script setup>
import {
  QualificationCapability,
  Collaboration,
  StandardExecution,
  SubjectiveImpression,
  Attendance,
  WorkOutput,
  LearningGrowth,
  DepartmentInfo,
  CustomStyleSelect,
  CollaborationPersonal,
  QualificationCapabilityPersonal
} from '../pageItems';
import { getOverview, getDeptUserTree } from '@/api/item/items'
import moment from 'moment'
import { useDict } from '@/utils/dict'
import { useTimeOut } from '../pageItems/useTimeOut'
import { provide, computed } from 'vue'

const dictList = useDict(
  'sys_user_working_style',
  'sys_user_personality_trait',
  'sys_user_capability_performance',
  'sys_user_interpersonal_interaction',
  'sys_user_growth_potential')

const params = ref({
  deptId: ''
})
const defaultIndex = ref(0)
const flatDepartments = ref([])
const pageType = computed(() => {
  const item = flatDepartments.value.find(item => String(item.id) === String(params.value.deptId)) || { type: 'department' }
  return item.type
})

const departments = ref([])
const provideParams = computed(() => {
  return {
    deptId: params.value.deptId
  }
})

try {
  getDeptUserTree().then(res => {
    const flatDepartmentsList = []
    const appendItem = (list) => {
      list.forEach(attr => {
        let type = 'department'
         if (attr.deptType === 'BRIGADE') {
          type = 'brigade'
        }
        if (attr.deptType === 'MANAGER') {
          type = 'department'
        }
        if (attr.deptType === 'TEAMS') {
          type = 'team'
        }
        if (attr.nodeType === 'user') {
          type = 'personal'
        }
        flatDepartmentsList.push({
          id: attr.id,
          type: type
        })
        if (attr.children && attr.children.length) {
          appendItem(attr.children)
        }
      })
    }
    
    departments.value = res.data.reduce((cur, acc) => {
      acc.children && acc.children.length && cur.push(...acc.children)
      appendItem(acc.children)
      return cur
    }, [])
    flatDepartments.value = flatDepartmentsList
    params.value.deptId = departments.value[ 0 ] ? departments.value[ 0 ].id : ''
  })
} catch (err) { }




provide('provideParams', provideParams)

const infoNumber = ref({})
const pageInfo = computed(() => {
  return pageType.value === 'personal' ? [
    {
      label: '资质能力',
      value: infoNumber.value.qualificationLevel
    },
    {
      label: '工作履历',
      desc: '安检工作年限',
      value: infoNumber.value.workYears
    },
    {
      label: '出勤投入',
      desc: '上岗时长',
      value: (infoNumber.value.avgWorkingHours || 0) + 'h'
    },
    {
      label: '工作产出',
      desc: '有效查获数据',
      value: infoNumber.value.avgSeizureCount
    },
    {
      label: '标准执行',
      desc: '巡检问题总次数',
      value: infoNumber.value.checkCount
    },
    {
      label: '学习成长',
      desc: '平均分',
      value: infoNumber.value.learningGrowthScore
    },
    {
      label: '协调配合',
      desc: '工作风格',
      value: infoNumber.value.workingStyle,
      list: dictList.sys_user_working_style.value
    },
    {
      label: '主观印象',
      desc: '高频词',
      value: infoNumber.value.subjectiveImpression,
      list: [
        ...dictList.sys_user_personality_trait.value,
        ...dictList.sys_user_capability_performance.value,
        ...dictList.sys_user_interpersonal_interaction.value,
        ...dictList.sys_user_growth_potential.value
      ]
    },
  ] : [
    {
      label: '资质能力',
      desc: '高级资质等级人数',
      value: infoNumber.value.qualificationLevel
    },
    {
      label: '工作履历',
      desc: '平均安检工作年限',
      value: infoNumber.value.workYears
    },
    {
      label: '出勤投入',
      desc: '人均上岗时长',
      value: (infoNumber.value.avgWorkingHours || 0) + 'h'
    },
    {
      label: '工作产出',
      desc: '有效查获数据',
      value: infoNumber.value.avgSeizureCount
    },
    {
      label: '标准执行',
      desc: '巡检问题总次数',
      value: infoNumber.value.checkCount
    },
    {
      label: '学习成长',
      desc: '平均分',
      value: infoNumber.value.learningGrowthScore
    },
    {
      label: '协调配合',
      desc: '工作风格',
      value: infoNumber.value.workingStyle,
      list: dictList.sys_user_working_style.value
    },
    {
      label: '主观印象',
      desc: '高频词',
      value: infoNumber.value.subjectiveImpression,
      list: [
        ...dictList.sys_user_personality_trait.value,
        ...dictList.sys_user_capability_performance.value,
        ...dictList.sys_user_interpersonal_interaction.value,
        ...dictList.sys_user_growth_potential.value
      ]
    },
  ]
})
const getLabel = (value, list = []) => {
  const item = list.find(item => item.value.includes(value)) || { label: value }
  return item.label
}
useTimeOut(() => {
  getOverview(pageType.value === 'personal' ? { userId: provideParams.value.deptId } : {
    ...provideParams.value
  }).then((res) => {
    const data = res.data || {}
    infoNumber.value = {
      ...data
    }
  })
}, [ provideParams ])

defineExpose({
  next: () => {
    defaultIndex.value++
    if (defaultIndex.value === departments.value.length) {
      return () => { // resetIndex
        defaultIndex.value = 0
      }
    } else {
      params.value.deptId = departments.value[ defaultIndex.value ] ? departments.value[ defaultIndex.value ].id : ''
      return false
    }
  }
})

</script>

<style lang="scss" scoped>
.content {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  row-gap: 15px;

}

.content-top {
  flex: 1;
  display: flex;
  width: 100%;
  column-gap: 30px;
  overflow: hidden;

  .content-left {
    width: 30%;
    height: 100%;

    .department {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      row-gap: 15px;

      &>*:nth-child(2) {
        width: 100%;
        height: 70%;
      }
    }

    .personal {
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      row-gap: 15px;

      &>div:nth-child(1) {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        row-gap: 15px;

        &>*:nth-child(2) {
          width: 100%;
          height: 70%;
        }
      }
    }

  }

  .content-center {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    overflow: hidden;
    padding-top: 20px;
    box-sizing: border-box;

    .userSelectParams {
      display: flex;
      column-gap: 30px;
      --el-input-height: 40px;

      :deep(.el-select__wrapper) {
        font-size: 16px;
      }

      :deep(.el-input) {
        font-size: 16px;
        --el-input-height: 40px;
        --el-input-inner-height: 40px;
      }

      &>*:nth-child(1) {
        flex: 1;
      }
    }

    .public-inheritance-style {
      width: 100%;
      display: flex;
      column-gap: 10px;
    }

    .quantity-overview {
      @extend .public-inheritance-style;
      color: #fff;
      font-size: 18px;
      display: flex;
      column-gap: 15px;
      row-gap: 25px;
      padding: 20px 0px 10px;
      box-sizing: border-box;
      flex-wrap: wrap;

      .quantity-overview-item {
        flex: calc(25% - 12px);
        background: #051E40;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        row-gap: 5px;
        padding-top: 25px;
        padding-bottom: 10px;
        border-radius: 5px;
        font-weight: bold;
        position: relative;

        div {
          overflow: hidden;
          width: 100%;
          text-align: center;
        }

        &::before {
          display: block;
          content: attr(data-title);
          position: absolute;
          white-space: nowrap;
          padding: 2px 10px;
          top: 0px;
          left: 50%;
          width: fit-content;
          transform: translate(-50%, -50%);
          background: #062047;
          border: 1px solid #064371;
          color: #32CDF4;
          border-radius: 6px;
        }
      }
    }

    .quantity-buttom {
      height: 280px;
      display: flex;
      column-gap: 15px;
    }
  }

  .content-right {
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    row-gap: 15px;

    &>*:nth-child(2) {
      width: 100%;
      height: 80%;
    }

  }
}

.content-bottom {
  height: 30%;
  display: flex;
  column-gap: 15px;

  &>*:nth-child(4) {
    min-width: 40%;
  }
}
</style>