bug整改

src/layout/components/Sidebar/index.vue

@@ -72,6 +72,9 @@ export default {
       return !this.sidebar.opened;
     },
   },
+  mounted(){
+    console.log(this.sidebarRouters,'sidebarRouters');
+  },
   methods: {
     toggleSideBar() {
       this.$store.dispatch("app/toggleSideBar");

src/views/dashboard/PanelGroup.vue

@@ -1,136 +1,18 @@
 <template>
-  <el-row :gutter="20" class="panel-group">
-    <el-col class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
-        <div class="card-panel-icon-wrapper icon-people">
-          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            访客
+  <el-card>
+    <div class="panel-group">
+        <div class="card-panel" @click="handleClick(v)" v-for="(v,i) in menuList" :key="i">
+          <div class="card-panel-icon-wrapper icon-people">
+            <svg-icon class-name="card-panel-icon" v-if="v.icon" :icon-class="v.icon"/>
           </div>
-          <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
-        </div>
-      </div>
-    </el-col>
-    <el-col class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('messages')">
-        <div class="card-panel-icon-wrapper icon-message">
-          <svg-icon icon-class="message" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            消息
-          </div>
-          <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
-        </div>
-      </div>
-    </el-col>
-    <el-col class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('purchases')">
-        <div class="card-panel-icon-wrapper icon-money">
-          <svg-icon icon-class="money" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            履职率
-          </div>
-          <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
-        </div>
-      </div>
-    </el-col>
-    <el-col class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
-        <div class="card-panel-icon-wrapper icon-shopping">
-          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            隐患
+          <div class="card-panel-description">
+            <div class="card-panel-text">
+              {{v.name}}
+            </div>
           </div>
-          <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
         </div>
-      </div>
-    </el-col>
-    <el-col class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
-        <div class="card-panel-icon-wrapper icon-shopping">
-          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            隐患
-          </div>
-          <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
-        </div>
-      </div>
-    </el-col>
-    <el-col class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
-        <div class="card-panel-icon-wrapper icon-shopping">
-          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            隐患
-          </div>
-          <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
-        </div>
-      </div>
-    </el-col>
-    <el-col class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
-        <div class="card-panel-icon-wrapper icon-shopping">
-          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            隐患
-          </div>
-          <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
-        </div>
-      </div>
-    </el-col>
-    <el-col class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
-        <div class="card-panel-icon-wrapper icon-shopping">
-          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            隐患
-          </div>
-          <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
-        </div>
-      </div>
-    </el-col>
-    <el-col class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
-        <div class="card-panel-icon-wrapper icon-shopping">
-          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            隐患
-          </div>
-          <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
-        </div>
-      </div>
-    </el-col>
-    <el-col class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
-        <div class="card-panel-icon-wrapper icon-shopping">
-          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            隐患
-          </div>
-          <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
-        </div>
-      </div>
-    </el-col>
-  </el-row>
+    </div>
+  </el-card>
 </template>
 
 <script>
@@ -140,9 +22,67 @@ export default {
   components: {
     CountTo
   },
+  data(){
+    return {
+      menuList:[
+        {
+          name:'履职任务下发',
+          icon:'education',
+          url:'',
+        },
+        {
+          name:'调阅任务下发',
+          icon:'//',
+          url:'',
+        },
+        {
+          name:'培训任务下发',
+          icon:'//',
+          url:'',
+        },
+        {
+          name:'演练任务下发',
+          icon:'//',
+          url:'',
+        },
+        {
+          name:'检查任务下发',
+          icon:'//',
+          url:'',
+        },
+        {
+          name:'履职情况跟踪',
+          icon:'//',
+          url:'',
+        },
+        {
+          name:'调阅情况跟踪',
+          icon:'//',
+          url:'',
+        },
+        {
+          name:'培训登记跟踪',
+          icon:'//',
+          url:'',
+        },
+        {
+          name:'检查登记跟踪',
+          icon:'//',
+          url:'',
+        },
+        {
+          name:'演练登记跟踪',
+          icon:'//',
+          url:'',
+        }
+      ],
+    }
+  },
   methods: {
-    handleSetLineChartData(type) {
-      this.$emit('handleSetLineChartData', type)
+    handleClick(v) {
+      this.$router.push({
+        path:'/resumption/plan'
+      })
     }
   }
 }
@@ -150,11 +90,12 @@ export default {
 
 <style lang="scss" scoped>
 .panel-group {
-  .card-panel-col {
-    margin-bottom: 20px;
-  }
+  display: grid;
+  grid-template-columns:repeat(auto-fill, 140px);
+  grid-row-gap: 20px;
+  grid-column-gap: 20px;
+  justify-content: space-between;
   .card-panel {
-    height: 108px;
     cursor: pointer;
     font-size: 12px;
     position: relative;
@@ -163,7 +104,12 @@ export default {
     background: #fff;
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
-
+    //&:first-child{
+    //  margin-left: 0;
+    //}
+    //&:last-child{
+    //  margin-right: 0;
+    //}
     &:hover {
       .card-panel-icon-wrapper {
         color: #fff;
@@ -203,11 +149,14 @@ export default {
     }
 
     .card-panel-icon-wrapper {
-      float: left;
-      margin: 14px 0 0 14px;
+      height: 80px;
+      margin: 14px;
       padding: 16px;
       transition: all 0.38s ease-out;
       border-radius: 6px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
 
     .card-panel-icon {
@@ -216,14 +165,12 @@ export default {
     }
 
     .card-panel-description {
-      float: right;
       font-weight: bold;
-      margin: 26px;
-      margin-left: 0px;
-
+      margin: 14px;
       .card-panel-text {
+        text-align: center;
         line-height: 18px;
-        color: rgba(0, 0, 0, 0.45);
+        color: rgba(0, 0, 0, 0.65);
         font-size: 16px;
         margin-bottom: 12px;
       }

src/views/index.vue

@@ -1,27 +1,42 @@
 <template>
-  <div class="dashboard-editor-container">
+  <div class="home-container">
 
-    <panel-group @handleSetLineChartData="handleSetLineChartData" />
+    <panel-group />
+
+    <el-row :gutter="20">
+      <el-col :xs="24" :sm="12" :md="13"  :lg="10">
+        <el-card class="card-group">
+          <el-row :gutter="20">
+            <el-col :xs="24" :sm="24" :md="12"  :lg="12" v-for="(v,i) in menuList" :key="i">
+              <div class="card-panel"  >
+                <div class="card-panel-icon-wrapper icon-people">
+                  <svg-icon icon-class="peoples" class-name="card-panel-icon" />
+                  <div class="card-icon-text">
+                    访客管理菜单
+                  </div>
+                </div>
+                <div class="card-panel-description">
+                  <div class="card-panel-text">
+                    访客管理菜单
+                  </div>
+                  <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+        </el-card>
 
-    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
-      <line-chart :chart-data="lineChartData" />
-    </el-row>
 
-    <el-row :gutter="32">
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <raddar-chart />
-        </div>
-      </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <pie-chart />
-        </div>
       </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <bar-chart />
-        </div>
+      <el-col :xs="24" :sm="12" :md="11"  :lg="14">
+        <el-card class="chart-wrapper">
+          <el-tabs type="border-card">
+            <el-tab-pane label="用户管理">用户管理</el-tab-pane>
+            <el-tab-pane label="配置管理">配置管理</el-tab-pane>
+            <el-tab-pane label="角色管理">角色管理</el-tab-pane>
+            <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
+          </el-tabs>
+        </el-card>
       </el-col>
     </el-row>
 
@@ -31,68 +46,157 @@
 
 <script>
 import PanelGroup from './dashboard/PanelGroup'
-import LineChart from './dashboard/LineChart'
-import RaddarChart from './dashboard/RaddarChart'
-import PieChart from './dashboard/PieChart'
-import BarChart from './dashboard/BarChart'
-
-const lineChartData = {
-  newVisitis: {
-    expectedData: [100, 120, 161, 134, 105, 160, 165],
-    actualData: [120, 82, 91, 154, 162, 140, 145]
-  },
-  messages: {
-    expectedData: [200, 192, 120, 144, 160, 130, 140],
-    actualData: [180, 160, 151, 106, 145, 150, 130]
-  },
-  purchases: {
-    expectedData: [80, 100, 121, 104, 105, 90, 100],
-    actualData: [120, 90, 100, 138, 142, 130, 130]
-  },
-  shoppings: {
-    expectedData: [130, 140, 141, 142, 145, 150, 160],
-    actualData: [120, 82, 91, 154, 162, 140, 130]
-  }
-}
-
+import CountTo from 'vue-count-to'
 export default {
   name: 'Index',
   components: {
     PanelGroup,
-    LineChart,
-    RaddarChart,
-    PieChart,
-    BarChart
+    CountTo
   },
   data() {
     return {
-      lineChartData: lineChartData.newVisitis
+      menuList:[1,2,3,4,5,6],
     }
   },
   methods: {
-    handleSetLineChartData(type) {
-      this.lineChartData = lineChartData[type]
-    }
+
   }
 }
 </script>
-
 <style lang="scss" scoped>
-.dashboard-editor-container {
-  padding: 32px;
+::v-deep{
+  .el-card__body{
+    padding: 20px;
+  }
+  .card-group{
+    .el-card__body {
+      padding: 10px 20px;
+    }
+  }
+}
+.home-container {
+  padding: 20px;
   background-color: rgb(240, 242, 245);
-  position: relative;
-
   .chart-wrapper {
     background: #fff;
-    padding: 16px 16px 0;
-    margin-bottom: 32px;
+    margin-top: 20px;
   }
 }
 
-@media (max-width:1024px) {
-  .chart-wrapper {
-    padding: 8px;
+.card-group {
+  margin-top: 20px;
+  .card-panel {
+    display: flex;
+    flex:1;
+    justify-content: space-between;
+    cursor: pointer;
+    font-size: 12px;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    margin: 10px 0;
+    &:hover {
+      .card-panel-icon-wrapper {
+        color: #fff;
+      }
+      .card-icon-text{
+        color: #fff;
+      }
+      .icon-people {
+        background: #40c9c6;
+
+      }
+
+      .icon-message {
+        background: #36a3f7;
+      }
+
+      .icon-money {
+        background: #f4516c;
+      }
+
+      .icon-shopping {
+        background: #34bfa3
+      }
+    }
+
+    .icon-people {
+      color: #40c9c6;
+    }
+
+    .icon-message {
+      color: #36a3f7;
+    }
+
+    .icon-money {
+      color: #f4516c;
+    }
+
+    .icon-shopping {
+      color: #34bfa3
+    }
+
+    .card-panel-icon-wrapper {
+      height: 120px;
+      margin: 10px;
+      padding: 10px;
+      transition: all 0.38s ease-out;
+      border-radius: 6px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .card-panel-icon {
+      float: left;
+      font-size: 44px;
+    }
+    .card-icon-text{
+      padding-top: 8px;
+      text-align: center;
+      line-height: 20px;
+      color: rgba(0, 0, 0, 0.65);
+      font-size: 16px;
+    }
+    .card-panel-description {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      font-weight: bold;
+      margin: 10px;
+      .card-panel-text {
+        text-align: center;
+        line-height: 18px;
+        color: rgba(0, 0, 0, 0.65);
+        font-size: 16px;
+        margin-bottom: 12px;
+      }
+
+      .card-panel-num {
+        font-size: 20px;
+      }
+    }
+  }
+}
+
+@media (max-width:550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
   }
 }
 </style>

src/views/system/dept/extend.vue

@@ -347,7 +347,6 @@
               <image-upload
                 :limit="5"
                 :value="askariCertificate"
-                :fileSize="2"
                 @input="getImgUrl"
               ></image-upload>
             </el-descriptions-item>