优化

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "axios": "^0.20.0",
+    "echarts": "^4.9.0",
     "element-ui": "^2.13.2",
     "less": "^3.8.1",
     "less-loader": "^4.1.0",

src/components/kpi-layout/AppMain.vue

@@ -28,7 +28,7 @@ export default {
 .appamin{
   flex: 1;
   box-sizing: border-box;
-  padding: 60px 80px 0;
+  padding: 30px 80px 0;
 }
 
 </style>

src/components/kpi-layout/SmallNav.vue

@@ -0,0 +1,59 @@
+<!--  -->
+<template>
+    <div class="smallNav">
+      <span @click="handleBack" class="smallNav-back">返回</span>
+      <span class="commonFont smallNav-title a">{{title}}</span>
+    </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+
+    }
+  },
+  computed: {
+    title () {
+      return this.$route.meta.title || ''
+    }
+  },
+  beforeMount () {},
+  mounted () {},
+  methods: {
+    handleBack () {
+      this.$router.go(-1)
+    }
+  },
+  watch: {}
+
+}
+
+</script>
+
+<style lang='less' scoped>
+.smallNav{
+  height: 40px;
+  &-back{
+    margin-right: 10px;
+    color: #aaaaaa;
+    cursor: pointer;
+  }
+  &-title{
+    padding: 0 10px;
+    position: relative;
+
+  }
+  .a::before{
+      content:"";
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      height: 70%;
+      // background: red;
+      border-left: 1px solid #aaaaaa;
+    }
+}
+</style>

src/components/kpi-layout/index.vue

@@ -1,6 +1,6 @@
 <!--  -->
 <template>
-    <div class="main">
+    <div class="main noSelect">
         <nav-bar />
         <app-main />
     </div>

src/main.js

@@ -3,11 +3,10 @@
 import Vue from 'vue'
 import App from './App'
 import router from './router'
-
 import './utils/elementConfig'
+import './utils/permission'
 import './style/index.less'
 import '@/icons'
-
 Vue.config.productionTip = false
 /* eslint-disable no-new */
 new Vue({

src/router/kpi_route.js

@@ -15,7 +15,34 @@ export default [
       meta: {
         title: '工作台',
         isNav: true
+      },
+      redirect: 'workbench/home',
+      children: [{
+        path: 'home',
+        name: 'workbench-home',
+        component: (resolve) => require(['@/views/kpi/workbench/home/index.vue'], resolve),
+        meta: {
+          title: '首页',
+          isNav: true
+        }
+      }, {
+        path: 'todo',
+        name: 'workbench-todo',
+        component: (resolve) => require(['@/views/kpi/workbench/todo/index.vue'], resolve),
+        meta: {
+          title: '待办事项',
+          isNav: true
+        }
+      }, {
+        path: 'group',
+        name: 'workbench-group',
+        component: (resolve) => require(['@/views/kpi/workbench/assessmentGroup/index.vue'], resolve),
+        meta: {
+          title: '考评组设置',
+          isNav: false
+        }
       }
+      ]
     }, {
       path: 'assessment',
       name: 'assessment',
@@ -48,21 +75,23 @@ export default [
         title: '设置',
         isNav: true
       }
-    }, {
-      path: 'home',
-      name: 'home',
-      component: (resolve) => require(['@/views/kpi/home/index.vue'], resolve),
-      meta: {
-        title: '智能测试'
-      }
-    }, {
-      path: 'home1',
-      name: 'home1',
-      component: (resolve) => require(['@/views/kpi/home1/index.vue'], resolve),
-      meta: {
-        title: '智能测试带弹窗',
-        pop: true
-      }
-    } ]
+    }
+    // , {
+    //   path: 'home',
+    //   name: 'home',
+    //   component: (resolve) => require(['@/views/kpi/home/index.vue'], resolve),
+    //   meta: {
+    //     title: '智能测试'
+    //   }
+    // }, {
+    //   path: 'home1',
+    //   name: 'home1',
+    //   component: (resolve) => require(['@/views/kpi/home1/index.vue'], resolve),
+    //   meta: {
+    //     title: '智能测试带弹窗',
+    //     pop: true
+    //   }
+    // }
+    ]
   }
 ]

src/style/common.less

@@ -1 +1,19 @@
 @borderColor: #ebebeb;
+@fontBlue: #3ba1ff;
+.boderAndRadius{
+  border: 1px solid @borderColor;
+  border-radius:6px ;
+  background: #fff;
+}
+.commonFont {
+  font-size: 16px;
+  color: #52575b;
+}
+.noSelect {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}

src/utils/permission.js

@@ -0,0 +1,7 @@
+import router from '@/router'
+router.beforeEach((to, from, next) => {
+  next()
+})
+
+router.afterEach(() => {
+})

src/views/kpi/assessment/index.vue

@@ -15,7 +15,7 @@
               </el-select>
             </el-form-item>
             <el-form-item >
-              <el-input v-model="form.name" placeholder="搜索考核名称"></el-input>
+              <el-input  prefix-icon="el-icon-search" v-model="form.name" placeholder="搜索考核名称"></el-input>
             </el-form-item>
           </div>
           <div>

src/views/kpi/workbench/assessmentGroup/index.vue

@@ -0,0 +1,27 @@
+<!--  -->
+<template>
+    <div>
+        考评组
+    </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+
+    }
+  },
+  computed: {},
+  beforeMount () {},
+  mounted () {},
+  methods: {},
+  watch: {}
+
+}
+
+</script>
+
+<style lang='' scoped>
+
+</style>

src/views/kpi/workbench/home/index.vue

@@ -0,0 +1,110 @@
+<!--  -->
+<template>
+    <div class="home boderAndRadius" >
+        <div class='home-left'>
+          <div class="home-left-todo">
+            <div  class="commonFont">待办事项<span style="margin:0 4px" class="blueColor">0</span>条</div>
+            <div  class="blueColor noSelect commonFont" style="cursor: pointer;" @click="handleGetMoreToDo('workbench-todo')">查看更多<i class="el-icon-arrow-right"></i></div>
+          </div>
+          <div class="home-left-enter">
+            <div class="home-left-enter-title commonFont">快捷入口</div>
+            <div class="home-left-enter-content">
+              <div class="boderAndRadius commonFont noSelect" @click="handleGetMoreToDo('assessment')">考核管理</div>
+              <div class="boderAndRadius commonFont noSelect" @click="handleGetMoreToDo('workbench-group')" >考评组</div>
+              <div class="boderAndRadius commonFont noSelect">发起考核</div>
+              <div class="boderAndRadius commonFont noSelect">指标库</div>
+            </div>
+          </div>
+        </div>
+        <div class="home-right boderAndRadius">
+          <report />
+        </div>
+    </div>
+</template>
+
+<script>
+import report from './report'
+export default {
+  data () {
+    return {
+
+    }
+  },
+  components: {
+    report
+  },
+  computed: {},
+  beforeMount () {},
+  mounted () {},
+  methods: {
+    handleGetMoreToDo (name) {
+      const params = {
+        name
+      }
+      this.$router.push(params)
+    }
+  },
+  watch: {}
+
+}
+
+</script>
+
+<style lang='less' scoped>
+.home{
+  width: 1252px;
+  height: 537px;
+  background: #fff;
+  margin: 0 auto;
+  display: flex;
+  padding: 28px;
+  justify-content: space-between;
+  align-items: flex-start;
+  &-left{
+    width: 828px;
+    &-todo{
+      width: 100%;
+      height: 80px;
+      border-bottom: 1px solid @borderColor;
+      display: flex;
+      justify-content: space-between;
+      padding-top: 18px;
+      .blueColor{
+        color: @fontBlue;
+      }
+    }
+    &-enter{
+      width: 100%;
+      height: 180px;
+      &-title{
+        margin: 22px 0;
+      }
+      &-content{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        >div{
+          width: 186px;
+          height: 76px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+        }
+        >div:hover{
+          box-shadow: 2px 2px 5px #e6e6e6;
+        }
+      }
+    }
+  }
+  &-right{
+    width: 330px;
+    min-height: 100px;
+    padding: 25px 20px;
+    &-content{
+      width: 100%;
+      height: 364px;
+    }
+  }
+}
+</style>

src/views/kpi/workbench/home/report.vue

@@ -0,0 +1,84 @@
+<!--  -->
+<template>
+    <div>
+      <div id="myChart" :style="{width: '100%', height: '270px'}"></div>
+    </div>
+</template>
+
+<script>
+// 引入基本模板
+let echarts = require('echarts/lib/echarts')
+// 引入柱状图组件
+require('echarts/lib/chart/bar')
+// 引入提示框和title组件
+require('echarts/lib/component/tooltip')
+require('echarts/lib/component/title')
+export default {
+  name: 'hello',
+  data () {
+    return {
+      option: {
+        color: ['#3398DB'],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: ['Mon', 'Tue'],
+            axisTick: {
+              alignWithLabel: true
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            axisLine: {show: false},
+            splitNumber: 3,
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: 'dashed'
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            name: '直接访问',
+            type: 'bar',
+            barWidth: '60%',
+            data: [1, 3]
+          }
+        ]
+      }
+    }
+  },
+  mounted () {
+    this.drawLine()
+  },
+  methods: {
+    drawLine () {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(document.getElementById('myChart'))
+      // 绘制图表
+      myChart.setOption(this.option)
+    }
+  }
+}
+
+</script>
+
+<style lang='' scoped>
+
+</style>

src/views/kpi/workbench/index.vue

@@ -1,7 +1,6 @@
 <!--  -->
 <template>
-    <div class="home">
-        考核管理
+    <div>
         <router-view></router-view>
     </div>
 </template>
@@ -23,11 +22,6 @@ export default {
 
 </script>
 
-<style lang='less' scoped>
-.home{
-  width: 800px;
-  height: 400px;
-  border: 1px solid #666666;
-  margin: 0 auto;
-}
+<style lang='' scoped>
+
 </style>

src/views/kpi/workbench/todo/index.vue

@@ -0,0 +1,41 @@
+<!--  -->
+<template>
+    <div class="todo">
+      <small-nav />
+      <div class="todo-content boderAndRadius">
+        待办事项
+      </div>
+    </div>
+</template>
+
+<script>
+import SmallNav from '@/components/kpi-layout/SmallNav'
+export default {
+  data () {
+    return {
+
+    }
+  },
+  components: {
+    SmallNav
+  },
+  computed: {},
+  beforeMount () {},
+  mounted () {},
+  methods: {
+  },
+  watch: {}
+
+}
+
+</script>
+
+<style lang='less' scoped>
+.todo{
+  &-content{
+    width: 1252px;
+    min-height: 537px;
+    padding: 28px;
+  }
+}
+</style>