完成侧边导航栏的区别展示
yzw
parent
f1f4752d82
commit
c866c076f6
|
|
@ -1,16 +1,43 @@
|
|||
<template>
|
||||
<div v-if="!item.hidden">
|
||||
<template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
|
||||
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
|
||||
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
|
||||
<item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
|
||||
<template
|
||||
v-if="
|
||||
hasOneShowingChild(item.children, item) &&
|
||||
(!onlyOneChild.children || onlyOneChild.noShowingChildren) &&
|
||||
!item.alwaysShow
|
||||
"
|
||||
>
|
||||
<app-link
|
||||
v-if="
|
||||
onlyOneChild.meta &&
|
||||
(item.path != '/priority' || (item.path === '/priority' && admin))
|
||||
"
|
||||
:to="resolvePath(onlyOneChild.path)"
|
||||
>
|
||||
<el-menu-item
|
||||
:index="resolvePath(onlyOneChild.path)"
|
||||
:class="{ 'submenu-title-noDropdown': !isNest }"
|
||||
>
|
||||
<item
|
||||
:icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"
|
||||
:title="onlyOneChild.meta.title"
|
||||
/>
|
||||
</el-menu-item>
|
||||
</app-link>
|
||||
</template>
|
||||
|
||||
<el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
|
||||
<el-submenu
|
||||
v-else
|
||||
ref="subMenu"
|
||||
:index="resolvePath(item.path)"
|
||||
popper-append-to-body
|
||||
>
|
||||
<template slot="title">
|
||||
<item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
|
||||
<item
|
||||
v-if="item.meta"
|
||||
:icon="item.meta && item.meta.icon"
|
||||
:title="item.meta.title"
|
||||
/>
|
||||
</template>
|
||||
<sidebar-item
|
||||
v-for="child in item.children"
|
||||
|
|
@ -25,71 +52,73 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import path from 'path'
|
||||
import { isExternal } from '@/utils/validate'
|
||||
import Item from './Item'
|
||||
import AppLink from './Link'
|
||||
import FixiOSBug from './FixiOSBug'
|
||||
import path from "path";
|
||||
import { isExternal } from "@/utils/validate";
|
||||
import Item from "./Item";
|
||||
import AppLink from "./Link";
|
||||
import FixiOSBug from "./FixiOSBug";
|
||||
|
||||
export default {
|
||||
name: 'SidebarItem',
|
||||
name: "SidebarItem",
|
||||
components: { Item, AppLink },
|
||||
mixins: [FixiOSBug],
|
||||
props: {
|
||||
// route object
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
isNest: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
default: false,
|
||||
},
|
||||
basePath: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
// To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
|
||||
// TODO: refactor with render function
|
||||
this.onlyOneChild = null
|
||||
return {}
|
||||
this.onlyOneChild = null;
|
||||
return {
|
||||
admin: this.$store.state.user.is_admin,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
hasOneShowingChild(children = [], parent) {
|
||||
const showingChildren = children.filter(item => {
|
||||
const showingChildren = children.filter((item) => {
|
||||
if (item.hidden) {
|
||||
return false
|
||||
return false;
|
||||
} else {
|
||||
// Temp set(will be used if only has one showing child)
|
||||
this.onlyOneChild = item
|
||||
return true
|
||||
this.onlyOneChild = item;
|
||||
return true;
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
// When there is only one child router, the child router is displayed by default
|
||||
if (showingChildren.length === 1) {
|
||||
return true
|
||||
return true;
|
||||
}
|
||||
|
||||
// Show parent if there are no child router to display
|
||||
if (showingChildren.length === 0) {
|
||||
this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
|
||||
return true
|
||||
this.onlyOneChild = { ...parent, path: "", noShowingChildren: true };
|
||||
return true;
|
||||
}
|
||||
|
||||
return false
|
||||
return false;
|
||||
},
|
||||
resolvePath(routePath) {
|
||||
if (isExternal(routePath)) {
|
||||
return routePath
|
||||
return routePath;
|
||||
}
|
||||
if (isExternal(this.basePath)) {
|
||||
return this.basePath
|
||||
return this.basePath;
|
||||
}
|
||||
return path.resolve(this.basePath, routePath)
|
||||
}
|
||||
}
|
||||
}
|
||||
return path.resolve(this.basePath, routePath);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -203,6 +203,20 @@ export const constantRoutes = [
|
|||
}]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/person_review',
|
||||
component: Layout,
|
||||
children: [{
|
||||
path: 'person_review',
|
||||
name: 'person_review',
|
||||
component: () => import('@/views/person_review/person_review'),
|
||||
meta: {
|
||||
title: '人才盘点',
|
||||
icon: '人员'
|
||||
}
|
||||
}]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/event',
|
||||
component: Layout,
|
||||
|
|
|
|||
|
|
@ -89,6 +89,8 @@ export default {
|
|||
loginForm: {
|
||||
username: "422823198510203671",
|
||||
password: "123456",
|
||||
// username: "admin",
|
||||
// password: "admin",
|
||||
},
|
||||
loginRules: {
|
||||
username: [
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<el-header height="150px" class="main-head">
|
||||
<div class="person-pic">
|
||||
<img
|
||||
:src="getPicUrl"
|
||||
:src="avatarUrl"
|
||||
alt="人员头像"
|
||||
style="height: 130px; width: 130px"
|
||||
/>
|
||||
|
|
@ -33,7 +33,6 @@
|
|||
<el-tab-pane label="个人信息" name="ComPersonInformation"></el-tab-pane>
|
||||
<el-tab-pane label="人事变动记录" name="ComChange"></el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<component :is="comName" :data="personData"></component>
|
||||
</el-container>
|
||||
</template>
|
||||
|
|
@ -57,56 +56,8 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
comName: "ComPersonPicture",
|
||||
personData: {
|
||||
机构名称: "湖北中烟工业有限责任公司恩施卷烟厂",
|
||||
部门名称: "厂办公室",
|
||||
岗位名称: "档案管理员",
|
||||
现岗位起始时间: "2008-12-01",
|
||||
姓名: "杨秀芬",
|
||||
用工形式: "劳动关系",
|
||||
人员状态: "在职",
|
||||
个人职级: "正科级",
|
||||
岗位类别: "专业技术类",
|
||||
任职单位: "1",
|
||||
职务名称: "1",
|
||||
职务属性: "1",
|
||||
职务级别: "1",
|
||||
任现职务级别时间: "1",
|
||||
性别: "女",
|
||||
出生日期: "1973-09-03",
|
||||
证件类型: "身份证",
|
||||
证件号码: "422827197309031821",
|
||||
民族: "苗族",
|
||||
籍贯: "湖北来凤",
|
||||
出生地: "湖北来凤",
|
||||
参加工作时间: "1994-05-01",
|
||||
进入行业时间: "1998-06-01",
|
||||
到本单位时间: "1998-06-01",
|
||||
行业入职类别: "社会招聘",
|
||||
本单位入职类别: "社会招聘",
|
||||
联系电话: "13986854131",
|
||||
国籍: "中国",
|
||||
预计退休年龄: "55",
|
||||
是否本单位集中保管档案: "是",
|
||||
档案保管机构: "本级人事部门",
|
||||
政治面貌: "中共党员",
|
||||
入党时间: "2012-12-18",
|
||||
最高全日制学历: "初中",
|
||||
最高全日制学位: "无",
|
||||
"全日制毕（肄）业学校（单位）名称": "1",
|
||||
全日制学校所在国家: "1",
|
||||
"全日制毕（肄）业专业名称": "1",
|
||||
最高在职学历: "大学",
|
||||
最高在职学位: "无",
|
||||
"在职毕（肄）业学校（单位）名称": "华中农业大学",
|
||||
在职学校所在国家: "中国",
|
||||
"在职毕（肄）业专业名称": "人力资源管理",
|
||||
最高专业技术资格名称: "助理馆员",
|
||||
最高专业技术资格等级: "初级",
|
||||
最高职业技能等级名称: "1",
|
||||
最高职业技能等级级别: "1",
|
||||
备注说明: "1",
|
||||
},
|
||||
personData: null,
|
||||
avatarUrl: require("@/assets/images/女.png")
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -116,6 +67,7 @@ export default {
|
|||
}).then(
|
||||
(res)=> {
|
||||
this.personData = res.data;
|
||||
this.avatarUrl = require("@/assets/images/" + this.personData["性别"] + ".png");
|
||||
},
|
||||
(err) => {
|
||||
console.log('err:', err);
|
||||
|
|
@ -123,9 +75,6 @@ export default {
|
|||
)
|
||||
},
|
||||
computed: {
|
||||
getPicUrl() {
|
||||
return require("@/assets/images/" + this.personData["性别"] + ".png");
|
||||
},
|
||||
personAge() {
|
||||
return this.getAge(this.personData["出生日期"]);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,255 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="pic1" class="pic"></div>
|
||||
<div id="pic2" class="pic"></div>
|
||||
<div id="pic3" class="pic"></div>
|
||||
<div id="pic4" class="pic"></div>
|
||||
<div id="pic5" class="pic"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
export default {
|
||||
name: "person_review",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
genderData: [
|
||||
{ value: 588, name: "男" },
|
||||
{ value: 177, name: "女" },
|
||||
],
|
||||
ageData: {
|
||||
xAxis: [
|
||||
"21~25",
|
||||
"26~30",
|
||||
"31~35",
|
||||
"36~40",
|
||||
"41~45",
|
||||
"46~50",
|
||||
"51~55",
|
||||
"56~60",
|
||||
"61~65",
|
||||
],
|
||||
yAxis: [58, 170, 39, 23, 68, 109, 180, 116, 2],
|
||||
},
|
||||
nationData: [
|
||||
{ value: 423, name: "汉族" },
|
||||
{ value: 265, name: "土家族" },
|
||||
{ value: 62, name: "苗族" },
|
||||
{ value: 2, name: "白族" },
|
||||
{ value: 2, name: "回族" },
|
||||
{ value: 2, name: "满族" },
|
||||
{ value: 2, name: "畲族" },
|
||||
{ value: 2, name: "侗族" },
|
||||
{ value: 2, name: "蒙古族" },
|
||||
{ value: 1, name: "藏族" },
|
||||
{ value: 1, name: "瑶族" },
|
||||
{ value: 1, name: "壮族" },
|
||||
],
|
||||
politicsData: [
|
||||
{ value: 314, name: "群众" },
|
||||
{ value: 243, name: "中共党员" },
|
||||
{ value: 199, name: "共青团员" },
|
||||
{ value: 9, name: "中共预备党员" },
|
||||
],
|
||||
partyAgeData: {
|
||||
xAxis: [
|
||||
"1~5",
|
||||
"6~10",
|
||||
"11~15",
|
||||
"16~20",
|
||||
"21~25",
|
||||
"26~30",
|
||||
"31~35",
|
||||
"36~40",
|
||||
"41~100",
|
||||
],
|
||||
yAxis: [52, 35, 27, 41, 53, 34, 6, 5, 0],
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.showGenderPie();
|
||||
this.showAgeBar();
|
||||
this.showNationPie();
|
||||
this.showPoliticsPie();
|
||||
this.showPartyAgeBar();
|
||||
},
|
||||
methods: {
|
||||
showGenderPie() {
|
||||
let chartDom = document.getElementById("pic1");
|
||||
let myChart = echarts.init(chartDom);
|
||||
let option;
|
||||
|
||||
option = {
|
||||
title: {
|
||||
text: "恩施卷烟厂员工性别分布饼图",
|
||||
// subtext: "",
|
||||
left: "center",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
legend: {
|
||||
orient: "vertical",
|
||||
left: "left",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
// name: "Access From",
|
||||
type: "pie",
|
||||
radius: "50%",
|
||||
data: this.genderData,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: "rgba(0, 0, 0, 0.5)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
showAgeBar() {
|
||||
let chartDom = document.getElementById("pic2");
|
||||
let myChart = echarts.init(chartDom);
|
||||
let option;
|
||||
|
||||
option = {
|
||||
title: {
|
||||
text: "恩施卷烟厂员工年龄分布直方图",
|
||||
left: "center",
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: this.ageData.xAxis,
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: this.ageData.yAxis,
|
||||
type: "bar",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
showNationPie() {
|
||||
let chartDom = document.getElementById("pic3");
|
||||
let myChart = echarts.init(chartDom);
|
||||
let option;
|
||||
|
||||
option = {
|
||||
title: {
|
||||
text: "恩施卷烟厂员工民族分布饼图",
|
||||
// subtext: "",
|
||||
left: "center",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
legend: {
|
||||
orient: "vertical",
|
||||
left: "left",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
// name: "Access From",
|
||||
type: "pie",
|
||||
radius: "50%",
|
||||
data: this.nationData,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: "rgba(0, 0, 0, 0.5)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
showPoliticsPie() {
|
||||
let chartDom = document.getElementById("pic4");
|
||||
let myChart = echarts.init(chartDom);
|
||||
let option;
|
||||
|
||||
option = {
|
||||
title: {
|
||||
text: "恩施卷烟厂员工民族分布饼图",
|
||||
// subtext: "",
|
||||
left: "center",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
legend: {
|
||||
orient: "vertical",
|
||||
left: "left",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
// name: "Access From",
|
||||
type: "pie",
|
||||
radius: "50%",
|
||||
data: this.politicsData,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: "rgba(0, 0, 0, 0.5)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
showPartyAgeBar() {
|
||||
let chartDom = document.getElementById("pic5");
|
||||
let myChart = echarts.init(chartDom);
|
||||
let option;
|
||||
|
||||
option = {
|
||||
title: {
|
||||
text: "恩施卷烟厂员工党员年龄分布直方图",
|
||||
left: "center",
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: this.partyAgeData.xAxis,
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: this.partyAgeData.yAxis,
|
||||
type: "bar",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.pic {
|
||||
height: 600px;
|
||||
width: 600px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -38,8 +38,9 @@ module.exports = {
|
|||
},
|
||||
proxy: {
|
||||
'/': {
|
||||
// target: 'http://127.0.0.1:4523/m1/1256020-0-default/',
|
||||
target: 'http://192.168.31.102:8000',
|
||||
target: 'http://127.0.0.1:4523/m1/1256020-0-default/',
|
||||
// target: 'http://192.168.31.102:8000',
|
||||
// target: 'http://222.20.95.239:8000',
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue