培训管理看板

src/api/platform/spectaculars/lab.js

@@ -2,7 +2,7 @@ import request from '@/utils/request'
 import { DATA_URL } from '@/api/baseUrl'
 
 /**
- * 标记为已读
+ * 实验室看板
  * @param {*} params
  */
 export function labsDashBoard(params) {
@@ -12,3 +12,14 @@ export function labsDashBoard(params) {
     params: params
   })
 }
+/**
+ * 培训看板
+ * @param {*} params
+ */
+ export function trainingDashBoard(params) {
+  return request({
+    url: DATA_URL() + '/report/statistic/trainingDashBoard',
+    method: 'get',
+    params: params
+  })
+}

src/views/business/deviceManagement/components/CarouselTabl.vue

@@ -1,10 +1,10 @@
 <template>
-    <div style="width: 98%;height: 98%;background-color: rgba(6,30,93,.5);overflow: hidden;padding: 1%;">
+    <div style="width: 98%;height: 98%;overflow: hidden;padding: 1%;">
         <div class="title" style="vertical-align: top; height: 10%;font-size: 24px;color: white;font-weight:600;">{{ title }}</div>
-        <div v-show="showChart" style="width:100%;height: 89%;display: flex;justify-content: center;background-color: #06163f;">
+        <div v-show="showChart" style="width:100%;height: 89%;display: flex;justify-content: center;">
             <dv-scroll-board :config="configData" style="width:100%;height:100%" />
         </div>
-        <div v-if="!showChart" style="background: #061237;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;">
+        <div v-if="!showChart" style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;">
             <div style="color: #c7c7c7">目前无数据</div>
         </div>
     </div>

src/views/business/deviceManagement/components/barCharto.vue

@@ -1,15 +1,11 @@
 <template>
   <div class="statisticsPage" :style="{width:width,height:height}">
-    <!-- <div style="height:8%;font-size:28px;font-weight: 600;"> {{title}} </div> -->
-    <!-- <div style="height:90%;display:flex;justify-content: space-between;"> -->
       <div :id="'staff'+id" :style="{height:'100%'}"/>
-    <!-- </div> -->
   </div>
 </template>
 
 <script>
   import * as echarts from 'echarts'
-  import { getFormatDate } from '../utils/config.js'
   export default {
     components: {
     },
@@ -119,9 +115,9 @@
           },
           grid: { // 让图表占满容器
               top: '80px',
-              left: '65px',
-              right: '60px',
-              bottom: '40px'
+              left: '40px',
+              right: '20px',
+              bottom: '30px'
           },
           tooltip: {
             trigger: 'axis',

src/views/business/deviceManagement/components/pieChart.vue

@@ -77,7 +77,7 @@
             itemHeight: 18, // 图例标记的图形高度，默认为18
             icon: 'circle',
             right: '0',
-            top: '45',
+            top: '60',
             formatter: function (name) {
                 let mid = that.value.find(i => i.name === name)
                 let rate = ((mid.value/totality)*100).toFixed(2)
@@ -90,7 +90,7 @@
               // align: 'right',
               rich: {
                 a: {
-                  width:120,
+                  width:80,
                   align: 'left',
                   fontSize: 16
                 },

src/views/business/deviceManagement/index.vue

@@ -15,39 +15,39 @@
             <dv-border-box-1>
                 <div class="vessel">
                     <div class="area">
-                        <dv-border-box-7 :color="['rgb(22,47,98)', 'rgba(116, 142, 194, 1)']" backgroundColor="rgba(6, 30, 93, 0.5)" style="width:100%;height:32%;">
+                        <dv-border-box-7 :color="['rgb(22,47,98)', 'rgba(116, 142, 194, 1)']" backgroundColor="rgba(6, 30, 93, 0)" style="width:100%;height:31.66%;">
                             <middleCard v-if="mergeData[0].numData.length>0" v-model="mergeData[0].numData" :title="mergeData[0].title" :width="'98%'" :height="'98%'" />
                         </dv-border-box-7>
-                        <dv-decoration-2 :key="`line1`" :dur="6" style="width:100%;height:2%;" />
-                        <dv-border-box-7 :color="['rgb(22,47,98)', 'rgba(116, 142, 194, 1)']" backgroundColor="rgba(6, 30, 93, 0.5)" style="width:100%;height:32%;">
+                        <dv-decoration-2 :key="`line1`" :dur="6" style="width:100%;height:2.5%;" />
+                        <dv-border-box-7 :color="['rgb(22,47,98)', 'rgba(116, 142, 194, 1)']" backgroundColor="rgba(6, 30, 93, 0)" style="width:100%;height:31.66%;">
                             <pie-chart v-if="mergeData[1].numData.length>0" :title="mergeData[1].title" v-model="mergeData[1].numData" :width="'98%'" :height="'98%'" :id="1"/>
                         </dv-border-box-7>
-                        <dv-decoration-2 :key="`line2`" :dur="6" style="width:100%;height:2%;" />
-                        <dv-border-box-7 :color="['rgb(22,47,98)', 'rgba(116, 142, 194, 1)']" backgroundColor="rgba(6, 30, 93, 0.5)" style="width:100%;height:32%;">
+                        <dv-decoration-2 :key="`line2`" :dur="6" style="width:100%;height:2.5%;" />
+                        <dv-border-box-7 :color="['rgb(22,47,98)', 'rgba(116, 142, 194, 1)']" backgroundColor="rgba(6, 30, 93, 0)" style="width:100%;height:31.33%;">
                             <bar-chart v-if="mergeData[2].numData.length>0" :title="mergeData[2].title" v-model="mergeData[2].numData" :width="'98%'" :height="'98%'" :id="1" />
                         </dv-border-box-7>
                     </div>
                     <dv-decoration-2 :key="`line3`" :reverse="true" :dur="6" style="width:1%;height:100%;" />
                     <div class="area midArea">
-                        <dv-border-box-7 :color="['rgb(22,47,98)', 'rgba(116, 142, 194, 1)']" backgroundColor="rgba(6, 30, 93, 0.5)" style="width:100%;height:42%;">
+                        <dv-border-box-7 :color="['rgb(22,47,98)', 'rgba(116, 142, 194, 1)']" backgroundColor="rgba(6, 30, 93, 0)" style="width:100%;height:41.5%;">
                             <entirety :title="mergeData[7].title" v-model="mergeData[7].numData" :width="'98%'" :height="'98%'"/>
                         </dv-border-box-7>
-                        <dv-decoration-2 :key="`line5`" :dur="6" style="width:100%;height:2%;" />
-                        <dv-border-box-7 :color="['rgb(22,47,98)', 'rgba(116, 142, 194, 1)']" backgroundColor="rgba(6, 30, 93, 0.5)" style="width:100%;height:56.26%;">
+                        <dv-decoration-2 :key="`line5`" :dur="6" style="width:100%;height:2.5%;" />
+                        <dv-border-box-7 :color="['rgb(22,47,98)', 'rgba(116, 142, 194, 1)']" backgroundColor="rgba(6, 30, 93, 0)" style="width:100%;height:55.9%;">
                             <bar-chart v-if="mergeData[3].numData.length>0" :title="mergeData[3].title" v-model="mergeData[3].numData" :width="'98%'" :height="'98%'" :id="2" />
                         </dv-border-box-7>
                     </div>
                     <dv-decoration-2 :key="`line4`" :reverse="true" :dur="6" style="width:1%;height:100%;" />
                     <div class="area">
-                        <dv-border-box-7 :color="['rgb(22,47,98)', 'rgba(116, 142, 194, 1)']" backgroundColor="rgba(6, 30, 93, 0.5)" style="width:100%;height:32%;">
+                        <dv-border-box-7 :color="['rgb(22,47,98)', 'rgba(116, 142, 194, 1)']" backgroundColor="rgba(6, 30, 93, 0)" style="width:100%;height:31.66%;">
                             <bar-chart v-if="mergeData[4].numData.length>0" :title="mergeData[4].title" v-model="mergeData[4].numData" :width="'98%'" :height="'98%'" :id="3" />
                         </dv-border-box-7>
-                        <dv-decoration-2 :key="`line1`" :dur="6" style="width:100%;height:2%;" />
-                        <dv-border-box-7 :color="['rgb(22,47,98)', 'rgba(116, 142, 194, 1)']" backgroundColor="rgba(6, 30, 93, 0.5)" style="width:100%;height:32%;">
+                        <dv-decoration-2 :key="`line1`" :dur="6" style="width:100%;height:2.5%;" />
+                        <dv-border-box-7 :color="['rgb(22,47,98)', 'rgba(116, 142, 194, 1)']" backgroundColor="rgba(6, 30, 93, 0)" style="width:100%;height:31.66%;">
                             <bar-chart v-if="mergeData[5].numData.length>0" :title="mergeData[5].title" v-model="mergeData[5].numData" :width="'98%'" :height="'98%'" :id="4" />
                         </dv-border-box-7>
-                        <dv-decoration-2 :key="`line1`" :dur="6" style="width:100%;height:2%;" />
-                        <dv-border-box-7 :color="['rgb(22,47,98)', 'rgba(116, 142, 194, 1)']" backgroundColor="rgba(6, 30, 93, 0.5)" style="width:100%;height:32%;">
+                        <dv-decoration-2 :key="`line1`" :dur="6" style="width:100%;height:2.5%;" />
+                        <dv-border-box-7 :color="['rgb(22,47,98)', 'rgba(116, 142, 194, 1)']" backgroundColor="rgba(6, 30, 93, 0)" style="width:100%;height:31.66%;">
                             <CarouselTabl v-if="mergeData[6].numData.data.length>0" :title="mergeData[6].title" v-model="mergeData[6].numData"/> 
                         </dv-border-box-7>
                     </div>
@@ -109,9 +109,11 @@ export default {
                     title: '检验科设备停用/报废列表',
                     numData: {
                         header: ['部门', '设备名称', '设备编号', '状态'],
+                        headerBGC: 'rgba(0,0,0,0)',
                         data: dataobj.scrapData,
                         columnWidth: ['120', '250', '180', '110'],
-                        rowNum: 5
+                        rowNum: 5,
+                        hoverPause: true
                     }
                 },
                 {
@@ -188,7 +190,7 @@ export default {
                 height: 98%;
                 .vessel{
                     width: 98%;
-                    height: 98%;
+                    height: 96%;
                     padding: 1% 1% 0 1%;
                     display: flex;
                     flex-flow: wrap;

src/views/business/trainManagement/components/jobPlanChart.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="statisticsPage" :style="{width:width,height:height}">
     <div style="height:8%;font-size:24px;font-weight: 600;"> {{ title }} </div>
-    <div style="height:92%;display:flex">
+    <div v-show="show" style="height:92%;display:flex">
       <div style="width:30%;display: flex;margin-top: 5%;">
         <div class="leftSty">
           <div style="width: 100%;height:20%;font-size: 20px;">自动创建培训计划</div>
           <div style="display:flex;height: 90%;display: flex;align-items: center;width:100%">
             <div style="width: 46%;display:flex;flex-flow: column;height: 100%;font-size: 20px;">
-              <div style="line-height: 250%;">{{data.num}}</div>
-              <div>占比{{data.proportion}}%</div>
+              <div style="line-height: 250%;color: rgb(250, 200, 88);">{{data.autoNum}}</div>
+              <div style="color: rgb(250, 200, 88);">占比{{data.rate}}%</div>
             </div>
             <div :id="'jobPie'+id" :style="{height:'100%',width:'64%'}"/>
           </div>
@@ -16,6 +16,7 @@
       </div>
       <div :id="'job'+id" :style="{height:'100%',width:'70%'}"/>
     </div>
+    <div v-show="!show" class="nullShow">暂无数据</div>
   </div>
 </template>
 
@@ -57,27 +58,36 @@
     },
     data () {
       return {
+        show: false
       }
     },
     watch: {
         value: {
-            handler () {
-                this.drawLine()
+            handler (val, old) {
+              if(val.length>0){
+                this.show = true
+                setTimeout(() => {
+                  this.drawLine()
+                  this.drawLinePie()
+                }, 100)
+              }else{
+                this.show = false
+              }
             },
             deep: true
         },
-        data: {
-            handler () {
-                this.drawLinePie()
-            },
-            deep: true
-        }
+        // data: {
+        //     handler () {
+        //         this.drawLinePie()
+        //     },
+        //     deep: true
+        // }
     },
     mounted(){
-      setTimeout(() => {
-        this.drawLine()
-        this.drawLinePie()
-      }, 100);
+      // setTimeout(() => {
+      //   this.drawLine()
+      //   this.drawLinePie()
+      // }, 100);
       
     },
     methods: {
@@ -85,7 +95,7 @@
         let xData = []
         let yData = []
         this.value.forEach(e => {
-          xData.push(getFormatDate('string', 5, 10, e.date)+'\n'+e.week)
+          xData.push(getFormatDate('string', 5, 10, e.date)+'\n'+e.dayName)
           yData.push(e.value)
         })
         const that = this
@@ -181,8 +191,8 @@
                 show: false
               },
               data: [
-                { value: this.data.proportion, name: 'Search Engine' },
-                { value: 100-this.data.proportion, name: 'Direct' }
+                { value: this.data.rate, name: 'Search Engine' },
+                { value: 100-this.data.rate, name: 'Direct' }
               ]
             }
           ]
@@ -213,4 +223,11 @@
     align-items: center;
     flex-flow: column;
   }
+  .nullShow{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    height: 92%;
+  }
 </style>

src/views/business/trainManagement/components/pieChart.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="statisticsPage" :style="{width:width,height:height}">
-    <div :id="'pie'+id" :style="{height:'100%'}"/>
+    <div v-show="show"  :id="'pie'+id" :style="{height:'100%'}"/>
+    <div v-show="!show"  :style="{height:'100%'}">
+      <div style="height:8%;font-size:24px;font-weight: 600;"> {{ title }} </div>
+      <div class="nullShow">暂无数据</div>
+    </div>
   </div>
 </template>
 
@@ -34,29 +38,46 @@
       },
       title:{
         type: String
-      }
+      },
+      total:{
+        type: Number
+      },
     },
     data () {
       return {
+        valueArr:[],
+        show: false
       }
     },
     watch: {
         value: {
-            handler () {
-                this.drawLine()
+            handler (val,old) {
+              if(val.length>0){
+                this.show = true
+                this.valueArr.length=0
+                val.forEach((item, i) => {
+                  let mid = {name: item.typeName, value: item.typeNum * 1}
+                  this.valueArr.push(mid)
+                })
+                setTimeout(() => {
+                  this.drawLine()
+                }, 100)
+              }else{
+                this.show = false
+              }
             },
             deep: true
         }
     },
     mounted(){
-      setTimeout(() => {
-        this.drawLine()
-      }, 100);
+      // setTimeout(() => {
+      //   this.drawLine()
+      // }, 100);
       
     },
     methods: {
       drawLine(){
-        const totality = GetTotality(this.value)
+        const totality = this.total
         const that = this
         echarts.dispose(document.getElementById('pie'+this.id))
         let pie = echarts.init(document.getElementById('pie'+this.id))
@@ -80,8 +101,8 @@
             right: '0',
             top: '45',
             formatter: function (name) {
-                let mid = that.value.find(i => i.name === name)
-                let rate = ((mid.value/totality)*100).toFixed(2)
+                let mid = that.valueArr.find(i => i.name === name)
+                let rate = that.value.find(i => i.typeName === name).rate
                 let str = `{a|${name}} | {b|${rate}%}{c|${mid.value}}`
                 return str
             },
@@ -132,7 +153,7 @@
                 color: this.colorw,
                 position: 'center'
               },
-              data: this.value,
+              data: this.valueArr,
               labelLine: {
                 normal: {
                     show: false,
@@ -167,4 +188,11 @@
       padding: 1%;
       /* background-color: rgba(6, 30, 93, 0.5); */
   }
+  .nullShow{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    height: 92%;
+  }
 </style>

src/views/business/trainManagement/components/preWorkChart.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="statisticsPage" :style="{width:width,height:height}">
-    <div :id="'prew'+id" :style="{height:'100%',width:'100%'}"/>
+    <div v-show="show" :id="'prew'+id" :style="{height:'100%',width:'100%'}"/>
+    <div v-show="!show"  :style="{height:'100%'}">
+      <div style="height:8%;font-size:24px;font-weight: 600;"> {{ title }} </div>
+      <div class="nullShow">暂无数据</div>
+    </div>
   </div>
 </template>
 
@@ -41,20 +45,29 @@
     },
     data () {
       return {
+        show: false
       }
     },
     watch: {
         value: {
-            handler () {
-                this.drawLine()
+            handler (val, old) {
+              if(val.length>0){
+                this.show = true
+                setTimeout(() => {
+                  this.drawLine()
+                }, 100)
+              }else{
+                this.show = false
+              }
+                // this.drawLine()
             },
             deep: true
         }
     },
     mounted(){
-      setTimeout(() => {
-        this.drawLine()
-      }, 100);
+      // setTimeout(() => {
+      //   this.drawLine()
+      // }, 100);
     },
     methods: {
       drawLine(){
@@ -141,4 +154,11 @@
       padding: 1%;
       /* background-color: rgba(6, 30, 93, 0.5); */
   }
+  .nullShow{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    height: 92%;
+  }
 </style>

src/views/business/trainManagement/components/staffList.vue

@@ -4,6 +4,7 @@
         <div class="box mt10"  style="height:100%">
             <div style="height:100%">
                 <dv-scroll-board
+                    :key="scrollBoardKey" 
                     :config="provinceConfirmedCountBoardConfig"
                     style="width: 100%; height: 100%"
                 />
@@ -27,18 +28,27 @@ const initProvinceConfirmedCountBoardConfig = (resultList = []) => {
   };
 };
 export default {
-    props: {
+  props: {
         value: {
             type: Array,
         },
-    },
-    data () {
+  },
+  data () {
         return {
-        provinceConfirmedCountBoardConfig:
+          scrollBoardKey: 0,
+          provinceConfirmedCountBoardConfig:
             initProvinceConfirmedCountBoardConfig(),
         }
-    },
-
+  },
+  watch: {
+        value: {
+            handler (val,old) {
+              this.scrollBoardKey++
+              this.queryProvinceDataList(val)
+            },
+            deep: true
+        }
+  },
   created () {
     this.getBizBoardFn()
   },
@@ -54,11 +64,11 @@ export default {
     setProvinceComfirmedCountBoardData (areaList) {
       if (areaList && areaList.length > 0) {
         let resultList = areaList.map((item,i) => {
-            let mid = i > 2 ? `<span class="circleOption" >${i+1}</span>` : `<span class="circleOption indexStyle">${i+1}</span>`
+            let mid = item.rank > 2 ? `<span class="circleOption" >${item.rank}</span>` : `<span class="circleOption indexStyle">${item.rank}</span>`
             return [
                 mid,
-                item.name,
-                `<div style="width:100%;text-align: right;">${item.num}</div>`,
+                item.userName,
+                `<div style="width:100%;text-align: right;">${item.count}</div>`,
             ]
         })
         this.provinceConfirmedCountBoardConfig =
@@ -79,8 +89,9 @@ export default {
   border-radius: 10px;
 }
 .fontS{
-    font-size: 20px;
-    font-weight: 600;
+  padding-left: 25px;
+  font-size: 20px;
+  font-weight: 600;
 }
 //修改的是下拉框选项内容上方的尖角
 ::v-deep .el-popper .popper__arrow,

src/views/business/trainManagement/components/trainingStaffChart.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="statisticsPage" :style="{width:width,height:height}">
-    <div style="height:8%;font-size:24px;font-weight: 600;"> {{title}} </div>
-    <div style="height:90%;display:flex;justify-content: space-between;">
+    <div style="height:10%;font-size:24px;font-weight: 600;"> {{title}} </div>
+    <div v-show="show" style="height:92%;display:flex;justify-content: space-between;">
       <div :id="'staff'+id" :style="{height:'100%',width:'76%'}"/>
-      <staff-list v-model="data" :style="{height:'80%',width:'22%'}"></staff-list>
+      <staff-list v-model="staffData" :style="{height:'80%',width:'22%'}"></staff-list>
     </div>
+    <div v-show="!show" class="nullShow">暂无数据</div>
   </div>
 </template>
 
@@ -48,20 +49,36 @@
     },
     data () {
       return {
+        valueArr:[],
+        show: false,
+        staffData: []
       }
     },
     watch: {
         value: {
-            handler () {
-                this.drawLine()
+            handler (val,old) {
+              if(val.length>0){
+                this.show = true
+                this.valueArr.length=0
+                val.forEach((item, i) => {
+                  let mid = {date: getFormatDate('string', 5, 10, item.date)+'\n'+ item.dayName, numAll: item.numAll, numReal: item.numReal, numUn: item.numUn}
+                  this.valueArr.push(mid)
+                })
+                setTimeout(() => {
+                  this.drawLine()
+                  this.staffData = this.data
+                }, 100)
+              }else{
+                this.show = false
+              }
             },
             deep: true
         }
     },
     mounted(){
-      setTimeout(() => {
-        this.drawLine()
-      }, 100);
+      // setTimeout(() => {
+      //   this.drawLine()
+      // }, 100);
     },
     methods: {
       drawLine(){
@@ -69,7 +86,7 @@
         let yData = []
         let yData1 = []
         let yData2 = []
-        this.value.forEach(e => {
+        this.valueArr.forEach(e => {
           xData.push(e.date)
           yData.push(e.numReal)
           yData1.push(e.numUn)
@@ -83,7 +100,7 @@
           grid: {
             left: '3%',
             right: '1%',
-            bottom: '20%',
+            bottom: '25%',
             top: '10%'
           },
           tooltip: {
@@ -95,7 +112,7 @@
               }
             },
             formatter: function (params) {
-              let str = `${that.value[params[0].dataIndex].date}`
+              let str = `${that.valueArr[params[0].dataIndex].date}`
               params.forEach(item =>{
                 let nameNum = ''
                 if(item.seriesName === 'numUn'){
@@ -187,7 +204,14 @@
   } */
   .statisticsPage{
       box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-      padding: 1%;
+      padding: 1% 1% 0 1%;
       /* background-color: rgba(6, 30, 93, 0.5); */
   }
+  .nullShow{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    height: 92%;
+  }
 </style>

src/views/business/trainManagement/index.vue

@@ -12,13 +12,13 @@
                         <el-button type="text" size="mini">部门</el-button>
                     </el-row>
                     <dv-border-box-8>
-                        <el-select v-model="deptVal" clearable placeholder="请选择部门">
+                        <el-select v-model="deptVal" @change="updateAll" :clearable="false" placeholder="请选择部门">
                             <el-option
                             v-for="item in chooseDept"
                             :key="item.positionId"
                             :label="item.positionName"
                             :value="item.positionId"
-                            @change="updateAll">
+                            >
                             </el-option>
                         </el-select>
                     </dv-border-box-8>
@@ -52,6 +52,7 @@
                             value-format="yyyy-MM"
                             placeholder="选择月"
                             @change="updateAll"
+                            :clearable="false"
                         />
                         <el-date-picker
                             v-show="hoverClassAdd === 'y'"
@@ -61,6 +62,7 @@
                             value-format="yyyy"
                             placeholder="选择年"
                             @change="updateAll"
+                            :clearable="false"
                         />
                     </dv-border-box-8>  
                 </div>
@@ -99,27 +101,24 @@
                 </div> -->
                 <div class="vessel">
                     <dv-border-box-12 class="areaTop" :color="['rgb(22,47,98)', 'rgba(116, 142, 194, 1)']" backgroundColor="rgba(6, 30, 93, 0)">
-                    <!-- <dv-border-box-12 class="areaTop" :color="['rgba(255,255,255,0.3)', 'rgba(255,255,255,0.9)']" backgroundColor="rgba(6, 30, 93, 0)"> -->
                         <div class="area">
                             <job-plan-chart class="merge" :title="mergeData[1].title" v-model="nowWeekData" :data="mergeData[1].numData" :width="'63%'" :height="'85%'" :id="1" />
                             <dv-decoration-2  :color="['rgba(255, 255, 255, 0.5)']" :key="`line1`" :reverse="true" :dur="6" style="width:1%;height:85%;margin: auto;" />
-                            <pie-chart class="tabular" :title="mergeData[0].title" v-model="mergeData[0].numData" :width="'32%'" :height="'85%'" :id="1"/>
+                            <pie-chart class="tabular" :title="mergeData[0].title" v-model="mergeData[0].numData" :total="mergeData[0].total" :width="'32%'" :height="'85%'" :id="1"/>
                         </div>
-                        <dv-decoration-2  :color="['rgba(255, 255, 255, 0.5)']" :key="`line4`" :dur="6" style="width:99%;height:4%;margin: auto;" />
-                        <!-- <dv-decoration-10 style="width:99%;height:4%;margin: auto;" /> -->
+                        <dv-decoration-2 :color="['rgba(255, 255, 255, 0.5)']" :key="`line4`" :dur="6" style="width:98%;height:4%;margin: auto;" />
                         <div class="area">
                             <training-staff-chart class="merge"  :title="mergeData[2].title" v-model="mergeData[2].numData" :data="mergeData[2].perList" :width="'63%'" :height="'85%'" :id="1" />
                             <dv-decoration-2  :color="['rgba(255, 255, 255, 0.5)']" :key="`line2`" :reverse="true" :dur="6" style="width:1%;height:85%;margin: auto;" />
-                            <pie-chart class="tabular" :title="mergeData[3].title" v-model="mergeData[3].numData" :width="'32%'" :height="'85%'" :id="2"/>
+                            <pie-chart class="tabular" :title="mergeData[3].title" v-model="mergeData[3].numData" :total="mergeData[3].total" :width="'32%'" :height="'85%'" :id="2"/>
                         </div>
                     </dv-border-box-12>
                     <div style="width:100%;height:2.64%" />
                     <dv-border-box-12 class="areaBottom" :color="['rgb(22,47,98)', 'rgba(116, 142, 194, 1)']" backgroundColor="rgba(6, 30, 93, 0)">
-                    <!-- <dv-border-box-12 class="areaBottom" :color="['rgba(255,255,255,0.3)', 'rgba(255,255,255,0.9)']" backgroundColor="rgba(6, 30, 93, 0)"> -->
                         <div class="area" style="height:100%">
                             <pre-work-chart class="merge" :title="mergeData[5].title" v-model="mergeData[5].numData" :width="'63%'" :height="'87%'" :id="1" />
                             <dv-decoration-2 :color="['rgba(255, 255, 255, 0.5)']" :key="`line3`" :reverse="true" :dur="6" style="width:1%;height:87%;margin: auto;" />
-                            <pie-chart class="tabular" :title="mergeData[4].title" v-model="mergeData[4].numData" :width="'32%'" :height="'87%'" :id="3"/>
+                            <pie-chart class="tabular" :title="mergeData[4].title" v-model="mergeData[4].numData" :total="mergeData[4].total" :width="'32%'" :height="'87%'" :id="3"/>
                         </div>
                     </dv-border-box-12>
                 </div>
@@ -131,8 +130,7 @@
 import screenfull from 'screenfull'
 import data from './constants/simulated.js'
 import { getFormatDate } from './utils/config.js'
-
-// import { labsDashBoard } from '@/api/platform/spectaculars/lab'
+import { trainingDashBoard } from '@/api/platform/spectaculars/lab'
 export default {
     components: {
         JobPlanChart: () => import('./components/jobPlanChart.vue'),
@@ -171,7 +169,8 @@ export default {
             mergeData:[
                 {
                     title: '在岗培训类别占比',
-                    numData: data.dataObj
+                    numData: [],
+                    total: 0
                 },
                 {
                     title: '在岗培训计划',
@@ -184,11 +183,13 @@ export default {
                 },
                 {
                     title: '在岗培训对象占比',
-                    numData: data.dataObj
+                    numData: data.dataObj,
+                    total: 0
                 },
                 {
                     title: '本年度培训类别占比',
-                    numData: data.dataObj
+                    numData: data.dataObj,
+                    total: 0
                 },
                 {
                     title: '本年度岗前培训',
@@ -224,7 +225,7 @@ export default {
         initializeData () {
             const w = window.innerWidth
             const { first = '', second = '' } = this.$store.getters.level || {}
-            this.nowWeekData = this.getNowWeek()
+            this.nowWeekData = []
             this.initData = {}
             this.itemIndex = 0
             this.chartIndex = 0
@@ -232,12 +233,67 @@ export default {
             this.fontSize = w >= 1600 ? 20 : w > 1366 && w < 1600 ? 18 : 16
             this.tabularArr1=[]
             this.tabularArr2=[]
+            this.mergeData=[
+                {
+                    title: '在岗培训类别占比',
+                    numData: [],
+                    total: 0
+                },
+                {
+                    title: '在岗培训计划',
+                    numData: {}
+                },
+                {
+                    title: '在岗培训人员统计情况',
+                    numData: [],
+                    perList: []
+                },
+                {
+                    title: '在岗培训对象占比',
+                    numData: [],
+                    total: 0
+                },
+                {
+                    title: '本年度培训类别占比',
+                    numData: [],
+                    total: 0
+                },
+                {
+                    title: '本年度岗前培训',
+                    numData: []
+                }
+            ]
         },
         updateAll (val) {
+            const loading = this.$loading({
+                lock: true,
+                // text: 'Loading',
+                // spinner: 'el-icon-loading',
+                background: 'rgba(0, 0, 0, 0.7)'
+            })
             this.initializeData()
-            data.jobPlanObj.forEach(e => {
-                let mid = this.nowWeekData.find(i => i.date === e.date)
-                mid['value'] = e.value
+            trainingDashBoard(
+                {
+                    dept: this.deptVal,
+                    date: this.hoverClassAdd === 'm' ? this.dateValM :this.dateValY
+                }
+            ).then(res=>{
+                let data = res.data[0] || {}
+                this.nowWeekData = data.weekDtoList
+                this.mergeData[1].numData = data.planDto
+                this.mergeData[0].numData = data.typeDto.typeDtoList
+                this.mergeData[0].title = data.typeDto.remark
+                this.mergeData[0].total = data.typeDto.typeTotal
+                this.mergeData[3].numData = data.objectDto.objectDtoList
+                this.mergeData[3].title = data.objectDto.remark
+                this.mergeData[3].total = data.objectDto.objectTotal
+                this.mergeData[4].numData = data.yearPreWorkDto.yearProWorkDtoList
+                this.mergeData[4].title = data.yearPreWorkDto.remark
+                this.mergeData[4].total = data.yearPreWorkDto.yearPreWorkTotal
+                this.mergeData[2].numData = data.pxrytjqkDtoList
+                this.mergeData[2].perList = data.userRankList
+                this.mergeData[5].numData = data.ndgqpxList
+                loading.close();
             })
         },
         async fetchData () {