完成侧边导航栏的区别展示

src/layout/components/Sidebar/SidebarItem.vue

@@ -1,16 +1,43 @@
 <template>
   <div v-if="!item.hidden">
-    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+    <template
-      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
+      v-if="
-        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+        hasOneShowingChild(item.children, item) &&
-          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
+        (!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 path from "path";
-import { isExternal } from '@/utils/validate'
+import { isExternal } from "@/utils/validate";
-import Item from './Item'
+import Item from "./Item";
-import AppLink from './Link'
+import AppLink from "./Link";
-import FixiOSBug from './FixiOSBug'
+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
+    this.onlyOneChild = null;
-    return {}
+    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
+          this.onlyOneChild = item;
-          return true
+          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 }
+        this.onlyOneChild = { ...parent, path: "", noShowingChildren: true };
-        return 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>

src/router/index.js

@@ -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,

src/views/login/index.vue

@@ -89,6 +89,8 @@ export default {
       loginForm: {
         username: "422823198510203671",
         password: "123456",
+        // username: "admin",
+        // password: "admin",
       },
       loginRules: {
         username: [

src/views/person/person.vue

@@ -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: {
+      personData: null,
-        机构名称: "湖北中烟工业有限责任公司恩施卷烟厂",
+      avatarUrl: require("@/assets/images/女.png")
-        部门名称: "厂办公室",
-        岗位名称: "档案管理员",
-        现岗位起始时间: "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",
-      },
     };
   },
   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["出生日期"]);
     },

src/views/person_review/person_review.vue

@@ -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>

vue.config.js

@@ -38,8 +38,9 @@ module.exports = {
     },
     proxy: {
       '/': {
-        // target: 'http://127.0.0.1:4523/m1/1256020-0-default/',
+        target: 'http://127.0.0.1:4523/m1/1256020-0-default/',
-        target: 'http://192.168.31.102:8000',
+        // target: 'http://192.168.31.102:8000',
+        // target: 'http://222.20.95.239:8000',
         changeOrigin: true,
         pathRewrite: {
         }