<template>
|
<div class="app-container">
|
<div style="display: flex;justify-content: space-between">
|
<el-form :inline="true" style="display: flex;align-items: center;flex-wrap: wrap;" >
|
<!-- <el-form-item>-->
|
<!-- <el-button-->
|
<!-- type="primary"-->
|
<!-- plain-->
|
<!-- icon="Plus"-->
|
<!-- @click="openDialog('add',{})"-->
|
<!-- >新增</el-button>-->
|
<!-- </el-form-item>-->
|
<el-form-item v-if="isAdmin" label="单位：" >
|
<el-select v-model="data.queryParams.companyId" placeholder="请选择" clearable>
|
<el-option
|
v-for="item in companyList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item >
|
<el-button v-if="isAdmin" type="primary" @click="getList">查询</el-button>
|
<el-button v-if="isAdmin" type="primary" plain @click="reset">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<!-- 表格数据 -->
|
<div style="background:#fff;padding: 20px;border-radius: 0.6rem;box-shadow: 8px 8px 15px rgba(0, 21, 41, 0.08), -8px -8px 15px #fff">
|
公司目前拥有职工总人数{{ dataList.totalUser }}人，包括{{ dataList.post }}等专业，
|
<span v-if="(dataList.qualification5 && dataList.qualification5>0) || (dataList.qualification4 && dataList.qualification4>0)">
|
<span v-if="dataList.qualification5>0">博士</span>
|
<span v-if="dataList.qualification4>0">硕士</span>
|
高端人才多人，
|
</span>
|
<span v-if="(dataList.positional3 && dataList.positional3>0) || (dataList.positional2 && dataList.positional2>0) || (dataList.positional1 && dataList.positional1>0)">
|
其中
|
<span v-if="dataList.positional3>0">高级人称{{dataList.positional3}}人，</span>
|
<span v-if="dataList.positional2>0">中级人称{{dataList.positional2}}人，</span>
|
<span v-if="dataList.positional1>0">初级人称{{dataList.positional1}}人</span>。
|
</span>
|
<br>
|
本科及以上学历{{dataList.qualification3 + dataList.qualification4 + dataList.qualification5}}人，占总人数的{{dataList.qualificationBKRatio}}%，
|
专业技术人员{{dataList.personTypeJS}}人，占总人数的{{dataList.jsRatio}}%以上，具备稳定的技术研发队伍。
|
<br>
|
公司员工年龄结构较为年轻化，平均年龄为{{dataList.avgAge}}岁，其中18周岁到40周岁的有{{dataList.age1840}}人，占总人数的{{dataList.age1840Ratio}}%，40周岁以上有{{dataList.age40}}人，占总人数的{{dataList.age40Ratio}}%。
|
</div>
|
<div style="margin-top: 40px">
|
<el-radio-group v-model="tabValue" style="margin-bottom: 20px">
|
<el-radio-button :label="1">饼图展示</el-radio-button>
|
<el-radio-button :label="2">柱状图展示</el-radio-button>
|
</el-radio-group>
|
<div v-show="tabValue == 1" style="width: 100%;display: flex">
|
<div id="pie1" style="width: 33.33%;height: 500px"></div>
|
<div id="pie2" style="width: 33.33%;height: 500px"></div>
|
<div id="pie3" style="width: 33.33%;height: 500px"></div>
|
</div>
|
<div v-show="tabValue == 2" style="width: 100%;display: flex">
|
<div id="stick1" style="width: calc((100vw - 280px)/3);height: 500px"></div>
|
<div id="stick2" style="width: calc((100vw - 280px)/3);height: 500px"></div>
|
<div id="stick3" style="width: calc((100vw - 280px)/3);height: 500px"></div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import {getCurrentInstance, onMounted, onUnmounted, reactive, ref, toRefs} from "vue";
|
import {ElMessage, ElMessageBox} from "element-plus";
|
import {delCompany, getCompany} from "@/api/onlineEducation/company";
|
import Cookies from "js-cookie";
|
import useUserStore from "@/store/modules/user";
|
import {getDepEmpsDetail} from "@/api/staffManage/staff";
|
import * as echarts from 'echarts';
|
const userStore = useUserStore()
|
const { proxy } = getCurrentInstance();
|
const loading = ref(false);
|
const dialogRef = ref();
|
const data = reactive({
|
queryParams: {
|
companyId: null
|
},
|
total: 0,
|
dataList: {},
|
companyList: [],
|
isAdmin: false,
|
tabValue: 1
|
});
|
|
const { queryParams, total, dataList,companyList, isAdmin, tabValue } = toRefs(data);
|
const userInfo = ref()
|
onMounted(async ()=>{
|
userInfo.value = JSON.parse(Cookies.get('userInfo'))
|
if(userStore.roles.includes('admin')){
|
data.isAdmin = true
|
await getCompanyList()
|
}else{
|
data.isAdmin = false
|
data.queryParams.companyId = userStore.companyId
|
}
|
await getList()
|
})
|
|
onUnmounted(()=>{
|
|
})
|
|
const getList = async () => {
|
loading.value = true
|
const res = await getDepEmpsDetail(data.queryParams)
|
if(res.code == 200){
|
data.dataList = res.data
|
await initPie1(data.dataList)
|
await initPie2(data.dataList)
|
await initPie3(data.dataList)
|
await initStick1(data.dataList)
|
await initStick2(data.dataList)
|
await initStick3(data.dataList)
|
}else{
|
ElMessage.warning(res.message)
|
}
|
loading.value = false
|
}
|
|
const getCompanyList = async ()=>{
|
const queryParams = {
|
pageNum: 1,
|
pageSize: 999
|
}
|
const res = await getCompany(queryParams)
|
if (res.code == 200) {
|
data.companyList = res.data.list?res.data.list:[]
|
data.queryParams.companyId = data.companyList[0].id
|
} else {
|
ElMessage.warning(res.message)
|
}
|
}
|
|
const initPie1 = (data)=>{
|
var chartDom = document.getElementById('pie1');
|
var myChart = echarts.init(chartDom);
|
var option;
|
option = {
|
title: {
|
text: '职称分布',
|
left: 'center'
|
},
|
tooltip: {
|
trigger: 'item'
|
},
|
legend: {
|
orient: 'horizontal',
|
left: 'center',
|
top: 40
|
},
|
series: [
|
{
|
type: 'pie',
|
radius: '50%',
|
data: [
|
{ value: data.positional3, name: '高级' },
|
{ value: data.positional2, name: '中级' },
|
{ value: data.positional1, name: '初级' },
|
],
|
emphasis: {
|
itemStyle: {
|
shadowBlur: 10,
|
shadowOffsetX: 0,
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
}
|
}
|
}
|
]
|
};
|
option && myChart.setOption(option);
|
}
|
|
const initPie2 = (data)=>{
|
var chartDom = document.getElementById('pie2');
|
var myChart = echarts.init(chartDom);
|
var option;
|
option = {
|
title: {
|
text: '学历分布',
|
left: 'center'
|
},
|
tooltip: {
|
trigger: 'item'
|
},
|
legend: {
|
orient: 'horizontal',
|
left: 'center',
|
top: 40
|
},
|
series: [
|
{
|
type: 'pie',
|
radius: '50%',
|
data: [
|
{ value: data.qualification1, name: '高中及以下' },
|
{ value: data.qualification2, name: '专科' },
|
{ value: data.qualification3, name: '本科' },
|
{ value: data.qualification4, name: '硕士' },
|
{ value: data.qualification5, name: '博士及以上' }
|
],
|
emphasis: {
|
itemStyle: {
|
shadowBlur: 10,
|
shadowOffsetX: 0,
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
}
|
}
|
}
|
]
|
};
|
option && myChart.setOption(option);
|
}
|
|
const initPie3 = (data)=>{
|
var chartDom = document.getElementById('pie3');
|
var myChart = echarts.init(chartDom);
|
var option;
|
option = {
|
title: {
|
text: '年龄分布',
|
left: 'center'
|
},
|
tooltip: {
|
trigger: 'item'
|
},
|
legend: {
|
orient: 'horizontal',
|
left: 'center',
|
top: 40
|
},
|
series: [
|
{
|
type: 'pie',
|
radius: '50%',
|
data: [
|
{ value: data.age1840, name: '18岁-40岁' },
|
{ value: data.age40, name: '40岁以上' }
|
],
|
emphasis: {
|
itemStyle: {
|
shadowBlur: 10,
|
shadowOffsetX: 0,
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
}
|
}
|
}
|
]
|
}
|
option && myChart.setOption(option);
|
}
|
|
const initStick1= (data) =>{
|
var chartDom = document.getElementById('stick1');
|
var myChart = echarts.init(chartDom);
|
var option;
|
|
option = {
|
title: {
|
text: '职称分布',
|
left: 'center'
|
},
|
tooltip: {
|
trigger: 'item'
|
},
|
legend: {
|
orient: 'horizontal',
|
left: 'center',
|
top: 40
|
},
|
xAxis: {
|
type: 'category',
|
data: ['高级', '中级', '初级']
|
},
|
yAxis: {
|
type: 'value'
|
},
|
series: [
|
{
|
data: [data.positional3, data.positional2, data.positional1],
|
type: 'bar'
|
}
|
]
|
};
|
option && myChart.setOption(option);
|
}
|
|
const initStick2= (data) =>{
|
var chartDom = document.getElementById('stick2');
|
var myChart = echarts.init(chartDom);
|
var option;
|
option = {
|
title: {
|
text: '学历分布',
|
left: 'center'
|
},
|
tooltip: {
|
trigger: 'item'
|
},
|
legend: {
|
orient: 'horizontal',
|
left: 'center',
|
top: 40
|
},
|
xAxis: {
|
type: 'category',
|
data: ['高中及以下','专科', '本科', '硕士', '博士及以上']
|
},
|
yAxis: {
|
type: 'value'
|
},
|
series: [
|
{
|
data: [data.qualification1, data.qualification2, data.qualification3, data.qualification4, data.qualification5],
|
type: 'bar'
|
}
|
]
|
};
|
option && myChart.setOption(option);
|
}
|
|
const initStick3= (data) =>{
|
var chartDom = document.getElementById('stick3');
|
var myChart = echarts.init(chartDom);
|
var option;
|
option = {
|
title: {
|
text: '年龄分布',
|
left: 'center'
|
},
|
tooltip: {
|
trigger: 'item'
|
},
|
legend: {
|
orient: 'horizontal',
|
left: 'center',
|
top: 40
|
},
|
xAxis: {
|
type: 'category',
|
data: ['18岁-40岁', '40岁以上']
|
},
|
yAxis: {
|
type: 'value'
|
},
|
series: [
|
{
|
data: [data.age1840, data.age40],
|
type: 'bar'
|
}
|
]
|
};
|
option && myChart.setOption(option);
|
}
|
|
/** 重置新增的表单以及其他数据 */
|
const reset= async()=> {
|
data.queryParams = {
|
pageNum: 1,
|
pageSize: 10,
|
companyId: null
|
}
|
await getCompanyList()
|
await getList()
|
}
|
|
</script>
|
