培训管理看板样式补充修改

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

@@ -1,9 +1,9 @@
 <template>
   <div class="statisticsPage" :style="{width:width,height:height}">
-    <div style="height:8%;font-size:28px;font-weight: 600;"> {{ title }} </div>
+    <div style="height:8%;font-size:24px;font-weight: 600;"> {{ title }} </div>
     <div style="height:92%;display:flex">
       <div style="width:30%;display: flex;margin-top: 5%;">
-        <div style="width: 100%;display:flex;border: 1px solid #fff;padding: 5%;height: 50%;display: flex;align-items: center;flex-flow: column;">
+        <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;">
@@ -89,6 +89,7 @@
           yData.push(e.value)
         })
         const that = this
+        echarts.dispose(document.getElementById('job'+this.id))
         let job = echarts.init(document.getElementById('job'+this.id))
         let option;
         option = {
@@ -149,6 +150,7 @@
       },
       drawLinePie(){
         const that = this
+        echarts.dispose(document.getElementById('jobPie'+this.id))
         let jobPie = echarts.init(document.getElementById('jobPie'+this.id))
         let option
         option = {
@@ -196,8 +198,19 @@
     transform:scale(1.03);
   } */
   .statisticsPage{
-      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-      padding: 1%;
-      background-color: rgba(6, 30, 93, 0.5);
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    padding: 1%;
+    /* background-color: rgba(6, 30, 93, 0.5); */
+  }
+  .leftSty{
+    width: 100%;
+    display:flex;
+    background-color: rgba(84, 112, 198, 0.3);
+    border-radius: 10px;
+    padding: 5%;
+    height: 50%;
+    display: flex;
+    align-items: center;
+    flex-flow: column;
   }
 </style>

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

@@ -58,13 +58,14 @@
       drawLine(){
         const totality = GetTotality(this.value)
         const that = this
+        echarts.dispose(document.getElementById('pie'+this.id))
         let pie = echarts.init(document.getElementById('pie'+this.id))
         let option;
         option = {
           title: {
             text: this.title,
             left: 'left',
-            textStyle:{ fontSize:28,color: this.colorw }
+            textStyle:{ fontSize:24,color: this.colorw }
           },
           tooltip: {
             trigger: 'item'
@@ -164,6 +165,6 @@
   .statisticsPage{
       box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
       padding: 1%;
-      background-color: rgba(6, 30, 93, 0.5);
+      /* background-color: rgba(6, 30, 93, 0.5); */
   }
 </style>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="statisticsPage" :style="{width:width,height:height}">
-    <div :id="'pre'+id" :style="{height:'100%',width:'100%'}"/>
+    <div :id="'prew'+id" :style="{height:'100%',width:'100%'}"/>
   </div>
 </template>
 
@@ -69,13 +69,14 @@
           // yData2.push(e.numAll)
         })
         const that = this
-        let pre = echarts.init(document.getElementById('pre'+this.id))
+        echarts.dispose(document.getElementById('prew'+this.id))
+        let pre = echarts.init(document.getElementById('prew'+this.id))
         let option
         option = {
           title: {
             text: this.title,
             left: 'left',
-            textStyle:{ fontSize:28,color: this.colorw }
+            textStyle:{ fontSize:24,color: this.colorw }
           },
           grid: {
             left: '3%',
@@ -138,6 +139,6 @@
   .statisticsPage{
       box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
       padding: 1%;
-      background-color: rgba(6, 30, 93, 0.5);
+      /* background-color: rgba(6, 30, 93, 0.5); */
   }
 </style>

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

@@ -76,7 +76,6 @@ export default {
 .box {
   padding: 20px;
   box-sizing: border-box;
-//   background-color: rgba(255, 255, 255, 0.1);
   border-radius: 10px;
 }
 .fontS{
@@ -90,7 +89,6 @@ export default {
 }
 ::v-deep .dv-scroll-board .header {
   background: transparent !important;
-//   border-bottom: 2px solid #9ca3b3 !important;
   border-radius: 0;
 }
 ::v-deep .rows .ceil{
@@ -98,8 +96,8 @@ export default {
     align-items: center;
 }
 ::v-deep .indexStyle {
-    background-color: #fff;
-    color: #A3A3A3 !important;
+    background-color: rgb(84, 112, 198);
+    border-color: rgb(84, 112, 198) !important;
 }
 ::v-deep .circleOption{ 
     align-items: center;
@@ -112,7 +110,6 @@ export default {
     height: 20px;
     justify-content: center;
     line-height: 25px;
-    // margin: 0 20px 30px;
     position: relative;
     width: 20px;
     border-color: #FAFAFA;

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

@@ -1,6 +1,6 @@
 <template>
   <div class="statisticsPage" :style="{width:width,height:height}">
-    <div style="height:8%;font-size:28px;font-weight: 600;"> {{title}} </div>
+    <div style="height:8%;font-size:24px;font-weight: 600;"> {{title}} </div>
     <div style="height:90%;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>
@@ -76,6 +76,7 @@
           yData2.push(e.numAll)
         })
         const that = this
+        echarts.dispose(document.getElementById('staff'+this.id))
         let staff = echarts.init(document.getElementById('staff'+this.id))
         let option
         option = {
@@ -187,6 +188,6 @@
   .statisticsPage{
       box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
       padding: 1%;
-      background-color: rgba(6, 30, 93, 0.5);
+      /* background-color: rgba(6, 30, 93, 0.5); */
   }
 </style>

src/views/business/trainManagement/constants/simulated.js

@@ -17,31 +17,31 @@ export const dataObj = [
 
 export const jobPlanObj = [
     {
-        date: '2024-07-29',
+        date: '2024-08-12',
         value: 15
     },
     {
-        date: '2024-07-30',
+        date: '2024-08-13',
         value: 13
     },
     {
-        date: '2024-07-31',
+        date: '2024-08-14',
         value: 3
     },
     {
-        date: '2024-08-01',
+        date: '2024-08-15',
         value: 8
     },
     {
-        date: '2024-08-02',
+        date: '2024-08-16',
         value: 8
     },
     {
-        date: '2024-08-03',
+        date: '2024-08-17',
         value: 0
     },
     {
-        date: '2024-08-04',
+        date: '2024-08-18',
         value: 10
     }
 ]

src/views/business/trainManagement/index.vue

@@ -18,22 +18,22 @@
                             :key="item.positionId"
                             :label="item.positionName"
                             :value="item.positionId"
-                            @change="updatePart">
+                            @change="updateAll">
                             </el-option>
                         </el-select>
                     </dv-border-box-8>
                 </div>
-                <div :class="$style.daterange" style="right:68%">
-                    <!-- <el-row style="display:flex">
-                        <el-button :class="hoverClassAdd === 'w'? 'hoverClass' : ''" type="text" @click="changeDate('week')" size="mini">本周</el-button>
-                        <el-button :class="hoverClassAdd === 'm'? 'hoverClass' : ''" type="text" @click="changeDate('month')" size="mini">本月</el-button>
-                        <el-button :class="hoverClassAdd === 'y'? 'hoverClass' : ''" type="text" @click="changeDate('year')" size="mini">全年</el-button>
-                    </el-row> -->
+                <div :class="$style.daterange" style="right:65%;">
                     <el-row style="display:flex">
-                        <el-button type="text" size="mini">日期</el-button>
+                        <!-- <el-button :class="hoverClassAdd === 'w'? 'hoverClass' : ''" type="text" @click="changeDate('week')" size="mini">本周</el-button> -->
+                        <el-button :class="hoverClassAdd === 'm'? 'hoverClass' : ''" type="text" @click="changeDate('month')" size="mini">月</el-button>
+                        <el-button :class="hoverClassAdd === 'y'? 'hoverClass' : ''" type="text" @click="changeDate('year')" size="mini">年</el-button>
                     </el-row>
+                    <!-- <el-row style="display:flex">
+                        <el-button type="text" size="mini">日期</el-button>
+                    </el-row> -->
                     <dv-border-box-8>
-                        <el-cascader v-model="dateVal" :options="options" :show-all-levels="false"></el-cascader>
+                        <!-- <el-cascader v-model="dateVal" :options="options" :show-all-levels="false"></el-cascader> -->
                         <!-- <el-date-picker
                             v-model="daterange"
                             type="daterange"
@@ -44,6 +44,24 @@
                             end-placeholder="结束日期"
                             @change="changeDate"
                         /> -->
+                        <el-date-picker
+                            v-show="hoverClassAdd === 'm'"
+                            v-model="dateValM"
+                            type="month"
+                            format="yyyy-MM"
+                            value-format="yyyy-MM"
+                            placeholder="选择月"
+                            @change="updateAll"
+                        />
+                        <el-date-picker
+                            v-show="hoverClassAdd === 'y'"
+                            v-model="dateValY"
+                            type="year"
+                            format="yyyy"
+                            value-format="yyyy"
+                            placeholder="选择年"
+                            @change="updateAll"
+                        />
                     </dv-border-box-8>  
                 </div>
                 <div :class="$style.back" @click.prevent="goBack()">
@@ -66,7 +84,7 @@
                     <dv-decoration-2 :key="`line3`" :reverse="true" :dur="5" style="width:1%;height:44%;" />
                     <pie-chart class="tabular" :title="mergeData[4].title" v-model="mergeData[4].numData" :width="'37%'" :height="'44%'" :id="3"/>
                 </div> -->
-                <div class="vessel">
+                <!-- <div class="vessel">
                     <job-plan-chart class="merge" :title="mergeData[1].title" v-model="nowWeekData" :data="mergeData[1].numData" :width="'63%'" :height="'29%'" :id="1" />
                     <dv-decoration-2 :key="`line1`" :reverse="true" :dur="6" style="width:1%;height:33%;" />
                     <pie-chart class="tabular" :title="mergeData[0].title" v-model="mergeData[0].numData" :width="'32%'" :height="'29%'" :id="1"/>
@@ -78,6 +96,32 @@
                     <pre-work-chart class="merge" :title="mergeData[5].title" v-model="mergeData[5].numData" :width="'63%'" :height="'29%'" :id="1" />
                     <dv-decoration-2 :key="`line3`" :reverse="true" :dur="6" style="width:1%;height:33%;" />
                     <pie-chart class="tabular" :title="mergeData[4].title" v-model="mergeData[4].numData" :width="'32%'" :height="'29%'" :id="3"/>
+                </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"/>
+                        </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;" /> -->
+                        <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"/>
+                        </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"/>
+                        </div>
+                    </dv-border-box-12>
                 </div>
             </dv-border-box-1>
         </dv-full-screen-container>
@@ -106,7 +150,7 @@ export default {
             chooseDept,
             deptVal: ' ',
             level: '',
-            title: '科研培训整体情况',
+            title: '培训统计看板',
             year: d.toJSON().slice(0, 4),
             cycleList: [],
             initData: {},
@@ -117,14 +161,16 @@ export default {
             tabularArr1:[],
             tabularArr2:[],
             daterange: [],
+            dateValM:'',
+            dateValY:'',
             nowWeekData: [],
             dateVal: ["week","nowWeek"],
             show: true,
             options: data.options,
-            hoverClassAdd:'w',
+            hoverClassAdd:'m',
             mergeData:[
                 {
-                    title: '培训类别占比',
+                    title: '在岗培训类别占比',
                     numData: data.dataObj
                 },
                 {
@@ -132,12 +178,12 @@ export default {
                     numData: data.jobPlanObjPie
                 },
                 {
-                    title: '培训人员统计情况',
+                    title: '在岗培训人员统计情况',
                     numData: data.staffWeek,
                     perList: data.personList
                 },
                 {
-                    title: '培训对象占比',
+                    title: '在岗培训对象占比',
                     numData: data.dataObj
                 },
                 {
@@ -159,14 +205,13 @@ export default {
             return this.sizeMap[this.selectedCycle]
         }
     },
-    watch: {
-    },
     created () {
         // 默认全屏展示
         if (screenfull.isEnabled && !screenfull.isFullscreen) {
             screenfull.request()
         }
-
+        this.dateValM = this.getYearMonth('m')
+        this.dateValY = this.getYearMonth('y')
         this.updateAll()
     },
     beforeDestroy () {
@@ -180,7 +225,6 @@ export default {
             const w = window.innerWidth
             const { first = '', second = '' } = this.$store.getters.level || {}
             this.nowWeekData = this.getNowWeek()
-            this.daterange = this.getCurrentWeek()
             this.initData = {}
             this.itemIndex = 0
             this.chartIndex = 0
@@ -189,16 +233,12 @@ export default {
             this.tabularArr1=[]
             this.tabularArr2=[]
         },
-        updateAll () {
+        updateAll (val) {
             this.initializeData()
-            // this.startAutoPlay()
             data.jobPlanObj.forEach(e => {
                 let mid = this.nowWeekData.find(i => i.date === e.date)
                 mid['value'] = e.value
             })
-        },
-        updatePart () {
-
         },
         async fetchData () {
         },
@@ -211,23 +251,25 @@ export default {
                     this.hoverClassAdd = 'w'
                     let w = this.getCurrentWeek()
                     this.daterange = w
-                    this.updatePart()
+                    this.updateAll()
                     break
                 case 'month':
                     this.hoverClassAdd = 'm'
-                    let m = this.getCurrentMonth()
-                    this.daterange = m
-                    this.updatePart()
+                    // let m = this.getCurrentMonth()
+                    // let m = this.getYearMonth('m')
+                    // this.dateValM = m
+                    this.updateAll()
                     break
                 case 'year':
                     this.hoverClassAdd = 'y'
-                    let y = this.getCurrentYear()
-                    this.daterange = y
-                    this.updatePart()
+                    // let y = this.getCurrentYear()
+                    // let y = this.getYearMonth('y')
+                    // this.dateValY = y
+                    this.updateAll()
                     break
                 default:
                     this.hoverClassAdd = 'A'
-                    this.updatePart()
+                    this.updateAll()
                     break
             }
         },
@@ -274,6 +316,14 @@ export default {
             const dayOfWeek = weekDays[date.getDay()]
             return dayOfWeek
         },
+        getYearMonth(val){
+            let currentDate = new Date()
+            let currentYear = currentDate.getFullYear()
+            let currentMonth = currentDate.getMonth() + 1
+            let mon = currentMonth > 9 ? currentMonth : '0' + currentMonth
+            let currentYearMonth = currentYear + '-' + mon
+            return val === 'm' ? currentYearMonth : currentYear+''
+        },
         toggleAutoPlay () {
             this.autoPlay ? this.stopAutoPlay() : this.startAutoPlay()
         },
@@ -340,21 +390,36 @@ export default {
                 flex-direction: column;
             }
             .dv-border-box-1 .border-box-content{
-                height: calc(100vh - 90px);
+                // height: calc(100vh - 90px);
+                height: 100%;
                 .vessel{
                     width: 98%;
                     height: 96%;
                     padding: 1%;
-                    display: flex;
-                    flex-flow: wrap;
-                    justify-content: space-evenly;
-                    align-content: space-evenly;
+                    // display: flex;
+                    // flex-flow: wrap;
+                    // justify-content: space-evenly;
+                    // align-content: space-between;
                     .tabular{
                         width: 40%;
                     }
                     .merge{
                         width: 80%;
                     }
+                    .area{
+                        width: 100%;
+                        height: 48%;
+                        display: flex;
+                        flex-flow: wrap;
+                    }
+                    .areaTop{
+                        width: 100%;
+                        height: 66%;
+                    }
+                    .areaBottom{
+                        width: 100%;
+                        height: 31%;
+                    }
                 }
             }
             .main-content {
@@ -428,12 +493,22 @@ export default {
                 justify-content: center;
                 align-items: center;
                 :global {
+                    .el-input--small{
+                        width: 100% !important;
+                        // background: rgba(255, 255, 255, 0);
+                        // border: none;
+                        // color: #fff;
+                        // font-size: 14px;
+                        // cursor: pointer;
+                        // // padding-left: 0;
+                        // padding-right: 0;
+                    }
                     .el-input--small .el-input__inner {
                         width: 100% !important;
                         background: rgba(255, 255, 255, 0);
                         border: none;
                         color: #fff;
-                        font-size: 16px;
+                        font-size: 14px;
                         cursor: pointer;
                         // padding-left: 0;
                         padding-right: 0;