人力资源添加

src/components/header.vue

@@ -61,7 +61,7 @@ export default {
         {
           index: "7",
           title: "人力资源",
-          path: "/07"
+          path: "/humanResources"
         },
         {
           index: "4",

src/pages/humanResources/home.vue

@@ -0,0 +1,397 @@
+<template>
+  <div class="main_box">
+    <div class="home_left">
+      <InnerBox :echartObj="echartObj1" header_title="当月缺勤数据占比" little_font="（%）" />
+      <InnerBox :echartObj="echartObj2" header_title="本年度出勤率统计" little_font="（人）" />
+      <InnerBox :echartObj="echartObj3" header_title="本年度缺勤人数统计" little_font="（人）" />
+    </div>
+    <div class="home_center">
+      <div style="width: 100%;height: 10%;display: flex;justify-content: space-between;align-items: flex-start;">
+        <img src="@/assets/img/humanResources/1.png" style="width: 31%;max-height: 100%;">
+        <img src="@/assets/img/humanResources/2.png" style="width: 31%;max-height: 100%;">
+        <img src="@/assets/img/humanResources/3.png" style="width: 31%;max-height: 100%;">
+      </div>
+      <!--当前员工人数和党员人数占比-->
+      <dv-border-box-11 title="当前员工人数和党员人数占比(%)" :color="['#48E5E5', '#1F7DAF']" :titleWidth="400" style="height: 45%;">
+        <div style="width: 100%;height: 100%;display: flex;align-items: center;">
+          <img src="@/assets/img/humanResources/4.png" style="width: 95%;max-height: 100%;">
+        </div>
+      </dv-border-box-11>
+
+      <!--员工年龄和学历占比(个)-->
+      <dv-border-box-11 title="员工年龄和学历占比(%)" :color="['#16ADDE', '#0C7DE7']" :titleWidth="400" style="height: 40%;">
+
+      </dv-border-box-11>
+    </div>
+    <div class="home_right">
+      <InnerBox :echartObj="echartObj5" header_title="当前员工男女和职称比例" little_font="（%）" style="height: 50%;" />
+      <InnerBox :echartObj="echartObj6" header_title="岗位分析" little_font="（人）" style="height: 50%;" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import { Progress,Divider } from 'ant-design-vue';
+Vue.use(Progress);
+Vue.use(Divider);
+import Echarts from "@/components/echarts";
+
+export default {
+  data() {
+    return {
+      // 当月缺勤数据占比
+      echartObj1: {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+          right: '10',
+          top: 'center',
+          orient: 'vertical',
+          data: ['事假', '病假', '调休','婚假','年假','产假',],
+          textStyle: {
+            color: '#FFFFFF',
+            lineHeight: 18
+          },
+          formatter: (name) => {
+            let data = this.echartObj1.series[0].data
+            let total = 0
+            let tarValue
+            for (let i = 0; i < data.length; i++) {
+              total += data[i].value
+              if (data[i].name == name) {
+                tarValue = data[i].value
+              }
+            }
+            //计算出百分比
+            let p = Math.round((tarValue / total) * 100, 2) + '%'
+            return `${name}(${p})`
+          }
+        },
+        color: ['#4AA2CB','#91CC75','#68A400','#3D7DFA','#48E5E5','#FAC858'],
+        toolbox: {
+          show: false,
+          feature: {
+            mark: {show: true},
+            dataView: {show: true, readOnly: false},
+            magicType: {
+              show: true,
+              type: ['pie', 'funnel']
+            },
+            restore: {show: true},
+            saveAsImage: {show: true}
+          }
+        },
+        series: [
+          {
+            name: '占比分析',
+            type: 'pie',
+            radius: [30, 100],
+            top: 'middle',
+            label: {
+              show: false,
+              position: 'inside',
+              formatter: '{d}%',
+            },
+            data: [
+              {value: 32.35, name: '事假'},
+              {value: 7.71, name: '病假'},
+              {value: 23.53, name: '调休'},
+              {value: 8.88, name: '婚假'},
+              {value: 17.59, name: '年假'},
+              {value: 9.94, name: '产假'},
+            ]
+          }
+        ]
+      },
+      // 本年度出勤率统计
+      echartObj2: {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {//x轴文字的配置
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 10,
+            }
+          },
+          data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {//y轴文字的配置
+            textStyle: {
+              color: "#fff",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed',
+              color: ['#1F7DAF']
+            }
+          },
+        },
+        series: [
+          {
+            data: [
+              {name: '1月', value: 300},
+              {name: '2月', value: 470},
+              {name: '3月', value: 380},
+              {name: '4月', value: 480},
+              {name: '5月', value: 400},
+              {name: '6月', value: 330},
+              {name: '7月', value: 480},
+              {name: '8月', value: 500},
+              {name: '9月', value: 500},
+              {name: '10月', value: 400},
+              {name: '11月', value: 350},
+              {name: '12月', value: 220},
+            ],
+            type: 'bar',
+            barGap:'100%',
+            barWidth: 10,
+            itemStyle: this.setSeriesItemStyle('lan', {label: {show: false}}),
+          },
+        ]
+      },
+      // 本年度缺勤人数统计
+      echartObj3: {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {//x轴文字的配置
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 10,
+            }
+          },
+          data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {//y轴文字的配置
+            textStyle: {
+              color: "#fff",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed',
+              color: ['#1F7DAF']
+            }
+          },
+        },
+        series: [
+          {
+            data: [
+              {name: '1月', value: 300},
+              {name: '2月', value: 470},
+              {name: '3月', value: 380},
+              {name: '4月', value: 480},
+              {name: '5月', value: 400},
+              {name: '6月', value: 330},
+              {name: '7月', value: 480},
+              {name: '8月', value: 500},
+              {name: '9月', value: 500},
+              {name: '10月', value: 400},
+              {name: '11月', value: 350},
+              {name: '12月', value: 220},
+            ],
+            type: 'bar',
+            barGap:'100%',
+            barWidth: 10,
+            itemStyle: this.setSeriesItemStyle('huang', {label: {show: false}}),
+          },
+        ]
+      },
+      echartObj5: {},
+      echartObj6: {},
+    }
+  },
+  created() {
+    this.init();
+  },
+  components: {
+    Echarts,
+  },
+  methods: {
+    init() {
+      this.getData();
+    },
+    search() {
+      this.init();
+    },
+    getData() {
+    },
+    setSeriesItemStyle(color, obj={}){
+      let colors = {
+        qing: ['#48E5E5', 'rgba(72,228,229,0.30)'],
+        lan: ['#2B8EF3', 'rgba(25,118,226,0.30)'],
+        // huang: ['#F5B12D', 'rgba(255,123,0,0.30)'],
+        huang: ['#FF7B00', 'rgba(255,123,0,0.30)'],
+        lv: ['#07F090', 'rgba(60,212,149,0.28)'],
+        zi: ['#9B64D3', 'rgba(155,100,211,0.24)'],
+      }
+      return {
+        normal: {
+          label: {
+            show: true,
+            position: 'top',
+            textStyle: {
+              color: '#FFFFFF',
+              fontSize: 12
+            },
+          },
+          color: () => {
+            return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: colors[color][0] },
+              { offset: 1, color: colors[color][1] },
+            ]);
+          },
+          ...obj,
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+/deep/ .ant-progress-circle .ant-progress-text {
+  color: #FFFFFF;
+  font-size: 20px;
+}
+/deep/ .ant-progress-circle-trail{
+  stroke:#334D60 !important;
+}
+.main_box{
+  padding: 0 2rem;
+  > div{
+    padding: 0;
+  }
+  .inner_box{
+    overflow: hidden;
+  }
+  .home_left,
+  .home_right{
+    width: 25%;
+    height: 100%;
+    display: flex;
+    justify-content: space-around;
+    .inner_box{
+      width: 100%;
+      height: 32%;
+    }
+  }
+  .home_center{
+    width: 50%;
+    padding: 0 1em;
+    .dv-border-box-11 {
+      font-size: 1rem;
+      /deep/ .border-box-content {
+        padding: 4rem 1.5rem 1rem;
+      }
+    }
+    .zz{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 100%;
+      overflow: hidden;
+      .dv-border-box-8{
+        margin-right: 1%;
+      }
+      .box8{
+        width: 15%;
+        /deep/ .border-box-content {
+          padding: 0;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+      .zz1{
+        width: 50%;
+        background: linear-gradient(89deg, #088152 3%, #01190C 99%);
+        padding: 0 1rem;
+
+        height: 100%;
+        border-radius: 100vw;
+        border: 3px solid #038F81;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        /*/deep/ .border-box-content{
+          padding: 0;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }*/
+        .circle{
+          display: inline-block;
+          position: absolute;
+          width: 12px;
+          height: 1.5em;
+          border-left: 1px solid;
+          border-bottom: 1px solid;
+          border-color: #00B4FF;
+          margin-left: -12px;
+          // margin-top: -0.5em;
+          &:after{
+            content: "";
+            display: block;
+            width: 7px;
+            height: 7px;
+            border-radius: 7px;
+            background: #00B4FF;
+            position: absolute;
+            margin-top: -7px;
+            margin-left: -3.5px;
+          }
+        }
+        .circle2{
+          border-color: #F77802;
+          &:after{
+            background: #F77802;
+          }
+        }
+      }
+    }
+    .inner_box /deep/ .box_content{
+      flex: 1;
+      height: calc(100% - 60px);
+    }
+  }
+  .echart5{
+    padding: 1rem 0;
+    display: flex;
+    justify-content: space-around !important;
+    > div{
+      font-size: 1rem;
+      color: #FFFFFF;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+    }
+  }
+}
+</style>

src/pages/humanResources/index.vue

@@ -1,11 +1,19 @@
 <template>
   <div class="main">
+    <!--    <userStatus />-->
+    <!-- <h1>首页</h1> -->
+    <!--    <img class="h1" src="../../assets/img/h1.png" />-->
     <Header :headerObj="{title:'中科软养老大数据分析平台', index: '7'}"/>
-    <img src="@/assets/img/page2/07人力.png" alt="" style="width: 100vw;height: calc(100vh - 5vw);">
+    <home></home>
+    <!--    <Nav />-->
+    <!--    <img class="b" src="../../assets/img/1.png" alt="" />-->
   </div>
 </template>
 <script>
 import Header from '@/components/header'
+import home from './home.vue'
+import userStatus from "@/components/userStatus";
+import { Index } from "@/api/index";
 
 export default {
   name: "index",
@@ -26,6 +34,8 @@ export default {
   },
   components: {
     Header,
+    home,
+    userStatus,
   },
   methods: {
     init() {

src/pages/page/09.vue

@@ -1,81 +0,0 @@
-<template>
-  <div class="main">
-    <Header :headerObj="{title:'中科软养老大数据分析平台', index: '9'}"/>
-    <img src="@/assets/img/page2/09智能设备.png" alt="" style="width: 100vw;height: calc(100vh - 5vw);">
-  </div>
-</template>
-<script>
-import Header from '@/components/header'
-
-export default {
-  name: "index",
-  data: function () {
-    return {
-      param: {
-        startYear: "",
-        endYear: "",
-      },
-    };
-  },
-  created() {
-    this.param = {
-      startYear: "",
-      endYear: "",
-    };
-    // this.init();
-  },
-  components: {
-    Header,
-  },
-  methods: {
-     init() {
-      this.getData();
-    },
-    getData() {
-      Index(this.param).then((res) => {
-        console.log(res);
-      });
-    },
-  },
-};
-</script>
-<style scoped lang="less">
-.main {
-  height: 100%;
-  background: url(../../assets/img/bigScreen/background.jpg) no-repeat;
-  background-size: 100% 100%;
-  /deep/ .modal,
-  /deep/ .el-icon-close {
-    display: none;
-  }
-  h1 {
-    font-size: 50px;
-    font-weight: 600;
-    padding-top: 50px;
-    text-align: center;
-    -webkit-line-clamp: 2;
-    background-image: -webkit-linear-gradient(bottom, #eefcff, #51dcfe);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-  }
-  .h1 {
-    position: absolute;
-    left: 50%;
-    margin-left: -509px;
-  }
-  //.b {
-  //  position: absolute;
-  //  bottom: 0;
-  //  width: 100%;
-  //  // animation:turn 10s linear infinite;
-  //}
-  @keyframes turn {
-    0% {
-      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-    }
-    100% {
-      transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
-    }
-  }
-}
-</style>

src/router.js

@@ -72,14 +72,6 @@ export default new Router({
         index: 0,
       }
     },
-    {
-      path: '/07',
-      name: '07',
-      component: () => import('@/pages/page/07'),
-      meta: {
-        index: 0,
-      }
-    },
     {
       path: '/08',
       name: '08',
@@ -97,6 +89,15 @@ export default new Router({
         index: 0,
       },
     },
+    // 人力资源
+    {
+      path: '/humanResources',
+      name: 'humanResources',
+      component: () => import('@/pages/humanResources/index'),
+      meta: {
+        index: 0,
+      },
+    },
     // 首页
     {
       path: '/home',