task-4803 培训统计看板调整

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

@@ -1,14 +1,20 @@
 <template>
-  <div class="statisticsPage" :style="{width:width,height:height}">
-    <div style="height:8%;font-size:24px;font-weight: 600;"> {{ title }} </div>
-    <div v-show="show" style="height:92%;display:flex">
-      <div style="width:28%;margin: 4% 5% 0 0;">
-        <div class="leftSty">
-          <div class="numSize">手动<div class="numColor"> {{ data.autoNum + ' ' }} ({{calculatedPercentage(data.autoNum, data.total)}}%) </div></div>
-          <div style="flex: 1;"></div>
-          <div class="numSize">自动<div class="numColor" >{{ data.manual + ' ' }} ({{calculatedPercentage(data.manual, data.total)}}%) </div></div>
-          <div style="flex: 6;"><div :id="'jobPie'+id" :style="{height:'8vh',width:'100%'}"/></div>
-          <!-- <div style="width: 100%;font-size: 2vh;">自动创建培训计划</div>
+    <div class="statisticsPage" :style="{ width: width, height: height }">
+        <div style="height:8%;font-size:24px;font-weight: 600;"> {{ title }} </div>
+        <div v-show="show" style="height:92%;display:flex">
+            <div style="width:28%;margin: 4% 5% 0 0;">
+                <div class="leftSty">
+                    <div class="numSize">手动<div class="numColor"> {{ data.autoNum + ' ' }}
+                            ({{ calculatedPercentage(data.autoNum, data.total) }}%) </div>
+                    </div>
+                    <div style="flex: 1;"></div>
+                    <div class="numSize">自动<div class="numColor">{{ data.manual + ' ' }}
+                            ({{ calculatedPercentage(data.manual, data.total) }}%) </div>
+                    </div>
+                    <div style="flex: 6;">
+                        <div :id="'jobPie' + id" :style="{ height: '8vh', width: '100%' }" />
+                    </div>
+                    <!-- <div style="width: 100%;font-size: 2vh;">自动创建培训计划</div>
           <div style="display:flex;display: flex;align-items: center;width:100%">
             <div style="width: 46%;display:flex;flex-flow: column;height: 100%;font-size: 2vh;">
               <div style="line-height: 250%;color: rgb(250, 200, 88);">{{data.autoNum}}</div>
@@ -16,67 +22,67 @@
             </div>
             <div :id="'jobPie'+id" :style="{height:'8vh',width:'64%'}"/>
           </div> -->
+                </div>
+            </div>
+            <div :id="'job' + id" :style="{ height: '100%', width: '72%' }" />
         </div>
-      </div>
-      <div :id="'job'+id" :style="{height:'100%',width:'72%'}"/>
+        <div v-show="!show" class="nullShow">暂无数据</div>
     </div>
-    <div v-show="!show" class="nullShow">暂无数据</div>
-  </div>
 </template>
 
 <script>
-  import * as echarts from 'echarts'
-  import { getFormatDate } from '../utils/config.js'
+import * as echarts from 'echarts'
+import { getFormatDate } from '../utils/config.js'
 
-  export default {
+export default {
     props: {
-      value: {
-        type: Array,
-      },
-      width:{
-        type:String,
-        default:"100%"
-      },
-      height:{
-        type:String,
-        default: "100%"
-      },
-      id:{
-        type:Number,
-        default:0
-      },
-      click:{
-        type:String,
-        default:'true'
-      },
-      colorw:{
-        type:String,
-        default:'#fff'
-      },
-      title:{
-        type: String
-      },
-      data: {
-        type: Object,
-      }
+        value: {
+            type: Array,
+        },
+        width: {
+            type: String,
+            default: "100%"
+        },
+        height: {
+            type: String,
+            default: "100%"
+        },
+        id: {
+            type: Number,
+            default: 0
+        },
+        click: {
+            type: String,
+            default: 'true'
+        },
+        colorw: {
+            type: String,
+            default: '#fff'
+        },
+        title: {
+            type: String
+        },
+        data: {
+            type: Object,
+        }
     },
-    data () {
-      return {
-        show: false
-      }
+    data() {
+        return {
+            show: false
+        }
     },
     watch: {
         value: {
-            handler (val, old) {
-              if(val.length>0){
-                this.show = true
-                setTimeout(() => {
-                  this.drawLine()
-                  this.drawLinePie()
-                }, 100)
-              }else{
-                this.show = false
-              }
+            handler(val, old) {
+                if (val.length > 0) {
+                    this.show = true
+                    setTimeout(() => {
+                        this.drawLine()
+                        this.drawLinePie()
+                    }, 100)
+                } else {
+                    this.show = false
+                }
             },
             deep: true
         },
@@ -87,142 +93,146 @@
         //     deep: true
         // }
     },
-    mounted(){
-      // setTimeout(() => {
-      //   this.drawLine()
-      //   this.drawLinePie()
-      // }, 100);
-      
+    mounted() {
+        // setTimeout(() => {
+        //   this.drawLine()
+        //   this.drawLinePie()
+        // }, 100);
+
     },
     methods: {
-      drawLine(){
-        let xData = []
-        let yData = []
-        this.value.forEach(e => {
-          xData.push(getFormatDate('string', 5, 10, e.date)+'\n'+e.dayName)
-          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 = {
-          title: {
-            text: '近一周计划发布',
-            left: 'left',
-            textStyle:{ fontSize:18,color: this.colorw },
-            itemGap: 20
-          },
-          grid: {
-            left: '5%',
-            right: '3%',
-            bottom: '15%',
-            top: '20%'
-          },
-          tooltip: {
-            trigger: 'axis',
-            formatter: function (params) {
-              return `${that.value[params[0].dataIndex].date} <br /> ${params[0].marker} ${params[0].data}`
-            }
-          },
-          xAxis: {
-            type: 'category',
-            boundaryGap: false,
-            data: xData,
-            axisLabel: {
-                color: '#fff'
-            }
-          },
-          yAxis: {
-            type: 'value',
-            axisLabel: {
-                color: '#fff'
-            },
-            splitLine:{
-              show:true,
-              lineStyle:{
-                  type: [15,8],
-                  color: ['rgba(255,255,255,0.5)'],
-              }
-            }
-          },
-          series: [
-            {
-              data: yData,
-              type: 'line',
-              smooth: true,
-              itemStyle: {
-                color: 'rgba(24,146,234,1)'
-              },
-              areaStyle: {
-                opacity: 0.8,
-                color: 'rgba(24,146,234,0.5)'
-              }
+        drawLine() {
+            let xData = []
+            let yData = []
+            this.value.forEach(e => {
+                xData.push(getFormatDate('string', 5, 10, e.date) + '\n' + e.dayName)
+                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 = {
+                title: {
+                    text: '近一周计划发布',
+                    left: 'left',
+                    textStyle: { fontSize: 18, color: this.colorw },
+                    itemGap: 20
+                },
+                grid: {
+                    left: '5%',
+                    right: '3%',
+                    bottom: '15%',
+                    top: '20%'
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    formatter: function (params) {
+                        return `${that.value[params[0].dataIndex].date} <br /> ${params[0].marker} ${params[0].data}`
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    data: xData,
+                    axisLabel: {
+                        color: '#fff'
+                    }
+                },
+                yAxis: {
+                    type: 'value',
+                    axisLabel: {
+                        color: '#fff'
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                            type: [15, 8],
+                            color: ['rgba(255,255,255,0.5)'],
+                        }
+                    }
+                },
+                series: [
+                    {
+                        data: yData,
+                        type: 'line',
+                        smooth: true,
+                        itemStyle: {
+                            color: 'rgba(24,146,234,1)'
+                        },
+                        areaStyle: {
+                            opacity: 0.8,
+                            color: 'rgba(24,146,234,0.5)'
+                        }
+                    }
+                ]
+            };
+            option && job.setOption(option);
+        },
+        drawLinePie() {
+            const that = this
+            echarts.dispose(document.getElementById('jobPie' + this.id))
+            let jobPie = echarts.init(document.getElementById('jobPie' + this.id))
+            let option
+            option = {
+                tooltip: {
+                    show: false,
+                    trigger: 'item'
+                },
+                series: [
+                    {
+                        name: 'Access From',
+                        type: 'pie',
+                        radius: ['60%', '90%'],
+                        avoidLabelOverlap: false,
+                        label: {
+                            show: false,
+                            position: 'center'
+                        },
+                        itemStyle: {
+                            color: function (params) {
+                                let colorList = ['#1892ea', '#e9e9e9'];
+                                return colorList[params.dataIndex];
+                            }
+                        },
+                        emphasis: {
+                            scale: false
+                        },
+                        labelLine: {
+                            show: false
+                        },
+                        data: [
+                            { value: this.data.rate, name: 'Search Engine' },
+                            { value: 100 - this.data.rate, name: 'Direct' }
+                        ]
+                    }
+                ]
             }
-          ]
-       };
-       option && job.setOption(option);
-      },
-      drawLinePie(){
-        const that = this
-        echarts.dispose(document.getElementById('jobPie'+this.id))
-        let jobPie = echarts.init(document.getElementById('jobPie'+this.id))
-        let option
-        option = {
-          tooltip: {
-            show: false,
-            trigger: 'item'
-          },
-          series: [
-            {
-              name: 'Access From',
-              type: 'pie',
-              radius: ['60%', '90%'],
-              avoidLabelOverlap: false,
-              label: {
-                show: false,
-                position: 'center'
-              },
-              itemStyle:{
-                color: function(params) {
-                  let colorList = ['#1892ea','#e9e9e9'];
-                  return colorList[params.dataIndex];
-                }
-              },
-              emphasis: {
-                scale: false
-              },
-              labelLine: {
-                show: false
-              },
-              data: [
-                { value: this.data.rate, name: 'Search Engine' },
-                { value: 100-this.data.rate, name: 'Direct' }
-              ]
+            option && jobPie.setOption(option)
+        },
+        calculatedPercentage (up, down) {
+            if (down === 0) {
+                return 0 // 避免除零错误
             }
-          ]
-       }
-       option && jobPie.setOption(option)
-      },
-      calculatedPercentage(up, down){
-        return (up/down).toFixed(2)*100
-      }
+            return (up / down).toFixed(2) * 100
+        }
     }
-  }
+}
 </script>
 <style scoped>
-  /* #zlmbPie:hover{
+/* #zlmbPie:hover{
     transition: all 0.5s;
     transform:scale(1.03);
   } */
-  .statisticsPage{
+.statisticsPage {
     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
     padding: 1%;
     /* background-color: rgba(6, 30, 93, 0.5); */
-  }
-  .leftSty{
+}
+
+.leftSty {
     width: 90%;
-    display:flex;
+    display: flex;
     background-color: rgba(84, 112, 198, 0.3);
     border-radius: 10px;
     padding: 10%;
@@ -230,22 +240,25 @@
     display: flex;
     align-items: center;
     /* flex-flow: column; */
-  }
-  .nullShow{
+}
+
+.nullShow {
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
     height: 92%;
-  }
-  .numColor{
+}
+
+.numColor {
     color: rgb(250, 200, 88);
     margin: 2vh 0;
     letter-spacing: normal;
-  }
-  .numSize{
+}
+
+.numSize {
     font-size: 2vh;
     flex: 5;
     letter-spacing: 3px;
-  }
+}
 </style>

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

@@ -1,217 +1,223 @@
 <template>
-  <div class="statisticsPage" :style="{width:width,height:height}">
-    <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="staffData" :style="{height:'80%',width:'22%'}"></staff-list>
+    <div class="statisticsPage" :style="{ width: width, height: height }">
+        <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%' }" />
+            <dv-decoration-2 v-show="show" :color="dvLineColor" :key="`line6`" :reverse="true" :dur="6"
+            style="width:1%;height:100%;margin: auto;" />
+            <staff-list v-model="staffData" :style="{ height: '80%', width: '22%' }"></staff-list>
+        </div>
+        <div v-show="!show" class="nullShow">暂无数据</div>
     </div>
-    <div v-show="!show" class="nullShow">暂无数据</div>
-  </div>
 </template>
 
 <script>
-  import * as echarts from 'echarts'
-  import { getFormatDate } from '../utils/config.js'
-  export default {
+import * as echarts from 'echarts'
+import { getFormatDate } from '../utils/config.js'
+export default {
     components: {
         StaffList: () => import('./staffList.vue')
     },
     props: {
-      value: {
-        type: Array,
-      },
-      width:{
-        type:String,
-        default:"100%"
-      },
-      height:{
-        type:String,
-        default: "100%"
-      },
-      id:{
-        type:Number,
-        default:0
-      },
-      click:{
-        type:String,
-        default:'true'
-      },
-      colorw:{
-        type:String,
-        default:'#fff'
-      },
-      title:{
-        type: String
-      },
-      data: {
-        type: Array,
-      }
+        value: {
+            type: Array
+        },
+        width: {
+            type: String,
+            default: '100%'
+        },
+        height: {
+            type: String,
+            default: '100%'
+        },
+        id: {
+            type: Number,
+            default: 0
+        },
+        click: {
+            type: String,
+            default: 'true'
+        },
+        colorw: {
+            type: String,
+            default: '#fff'
+        },
+        title: {
+            type: String
+        },
+        data: {
+            type: Array
+        },
+        date: {
+            type: String
+        }
     },
     data () {
-      return {
-        valueArr:[],
-        show: false,
-        staffData: []
-      }
+        return {
+            valueArr: [],
+            show: false,
+            staffData: [],
+            dvLineColor: ['rgba(255, 255, 255, 0.5)'],
+        }
     },
     watch: {
         value: {
-            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
-              }
+            handler (val, old) {
+                if (val.length > 0) {
+                    this.show = true
+                    this.valueArr.length = 0
+                    val.forEach((item, i) => {
+                        let xValue = getFormatDate('string', 5, 10, item.date) + '\n' + item.dayName
+                        if (this.date === 'y') {
+                            xValue = item.dayName
+                        }
+                        const mid = { date: xValue, 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);
-    },
     methods: {
-      drawLine(){
-        let xData = []
-        let yData = []
-        let yData1 = []
-        let yData2 = []
-        this.valueArr.forEach(e => {
-          xData.push(e.date)
-          yData.push(e.numReal)
-          yData1.push(e.numUn)
-          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 = {
-          grid: {
-            left: '3%',
-            right: '1%',
-            bottom: '25%',
-            top: '10%'
-          },
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              type: 'cross',
-              crossStyle: {
-                color: '#999'
-              }
-            },
-            formatter: function (params) {
-              let str = `${that.valueArr[params[0].dataIndex].date}`
-              params.forEach(item =>{
-                let nameNum = ''
-                if(item.seriesName === 'numUn'){
-                  nameNum = '未参加人数'
-                }else if(item.seriesName === 'numReal'){
-                  nameNum = '实际参训人数'
-                }else if(item.seriesName === 'numAll'){
-                  nameNum = '培训总人数'
-                }
-                str += `<br /> ${item.marker} ${nameNum}  ${item.data}`
-              })
-              return str
-            }
-          },
-          legend: {
-            data: ['numReal', 'numUn', 'numAll'],
-            textStyle: {
-              color: '#fff'
-            },
-            icon: 'circle',
-            bottom: 0,
-            formatter: function (name) {
-              if(name === 'numUn'){
-                return '未参加人数';
-              }else if(name === 'numReal'){
-                return '实际参训人数';
-              }else if(name === 'numAll'){
-                return '培训总人数';
-              }
-            }
-          },
-          xAxis: {
-            type: 'category',
-            boundaryGap: true,
-            data: xData,
-            axisLabel: {
-                color: '#fff'
-            },
-            axisTick: {
-              alignWithLabel: true
-            }
-          },
-          yAxis: {
-            type: 'value',
-            axisLabel: {
-                color: '#fff'
-            },
-            // boundaryGap:true,
-            splitLine:{
-              show:true,
-              lineStyle:{
-                  type: [15,8],
-                  color: ['rgba(255,255,255,0.5)'],
-              }
-            }
-          },
-          series: [
-            {
-              name: 'numReal',
-              type: 'bar',
-              barWidth: 10,
-              color: 'rgb(78,203,115)',
-              data: yData
-            },
-            {
-              name: 'numUn',
-              type: 'bar',
-              barWidth: 10,
-              color: 'rgb(251,211,55)',
-              data: yData1
-            },
-            {
-              name: 'numAll',
-              type: 'line',
-              color: 'rgb(16,142,233)',
-              data: yData2
-            }
-          ]
-       };
-       option && staff.setOption(option);
-      },
+        drawLine () {
+            let xData = []
+            let yData = []
+            let yData1 = []
+            let yData2 = []
+            this.valueArr.forEach(e => {
+                xData.push(e.date)
+                yData.push(e.numReal)
+                yData1.push(e.numUn)
+                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 = {
+                grid: {
+                    left: '3%',
+                    right: '1%',
+                    bottom: '25%',
+                    top: '10%'
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'cross',
+                        crossStyle: {
+                            color: '#999'
+                        }
+                    },
+                    formatter: function (params) {
+                        let str = `${that.valueArr[params[0].dataIndex].date}`
+                        params.forEach(item => {
+                            let nameNum = ''
+                            if (item.seriesName === 'numUn') {
+                                nameNum = '未参加人数'
+                            } else if (item.seriesName === 'numReal') {
+                                nameNum = '实际参训人数'
+                            } else if (item.seriesName === 'numAll') {
+                                nameNum = '培训总人数'
+                            }
+                            str += `<br /> ${item.marker} ${nameNum}  ${item.data}`
+                        })
+                        return str
+                    }
+                },
+                legend: {
+                    data: ['numReal', 'numUn', 'numAll'],
+                    textStyle: {
+                        color: '#fff'
+                    },
+                    icon: 'circle',
+                    bottom: 0,
+                    formatter: function (name) {
+                        if (name === 'numUn') {
+                            return '未参加人数';
+                        } else if (name === 'numReal') {
+                            return '实际参训人数';
+                        } else if (name === 'numAll') {
+                            return '培训总人数';
+                        }
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: true,
+                    data: xData,
+                    axisLabel: {
+                        color: '#fff'
+                    },
+                    axisTick: {
+                        alignWithLabel: true
+                    }
+                },
+                yAxis: {
+                    type: 'value',
+                    axisLabel: {
+                        color: '#fff'
+                    },
+                    // boundaryGap:true,
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                            type: [15, 8],
+                            color: ['rgba(255,255,255,0.5)'],
+                        }
+                    }
+                },
+                series: [
+                    {
+                        name: 'numReal',
+                        type: 'bar',
+                        barWidth: 10,
+                        color: 'rgb(78,203,115)',
+                        data: yData
+                    },
+                    {
+                        name: 'numUn',
+                        type: 'bar',
+                        barWidth: 10,
+                        color: 'rgb(251,211,55)',
+                        data: yData1
+                    },
+                    {
+                        name: 'numAll',
+                        type: 'line',
+                        color: 'rgb(16,142,233)',
+                        data: yData2
+                    }
+                ]
+            };
+            option && staff.setOption(option);
+        },
     }
-  }
+}
 </script>
 <style scoped>
-  /* #zlmbPie:hover{
+/* #zlmbPie:hover{
     transition: all 0.5s;
     transform:scale(1.03);
   } */
-  .statisticsPage{
-      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-      padding: 1% 1% 0 1%;
-      /* background-color: rgba(6, 30, 93, 0.5); */
-  }
-  .nullShow{
+.statisticsPage {
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.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

@@ -64,7 +64,7 @@
                             @change="updateAll"
                             :clearable="false"
                         />
-                    </dv-border-box-8>  
+                    </dv-border-box-8>
                 </div>
                 <div :class="$style.back" @click.prevent="goBack()">
                     <dv-border-box-8>返回</dv-border-box-8>
@@ -103,24 +103,24 @@
                     <dv-border-box-12 class="areaTop" :color="dvColor" :backgroundColor="dvBackColor">
                         <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="dvLineColor" :key="`line1`" :reverse="true" :dur="6" style="width:1%;height:85%;margin: auto;" />
+                            <dv-decoration-2 :color="dvLineColor" :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" :total="mergeData[0].total" :width="'32%'" :height="'85%'" :id="1"/>
                         </div>
                         <dv-decoration-2 :color="dvLineColor" :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="dvLineColor" :key="`line2`" :reverse="true" :dur="6" style="width:1%;height:85%;margin: auto;" />
+                            <training-staff-chart class="merge"  :title="mergeData[2].title" v-model="mergeData[2].numData" :data="mergeData[2].perList" :date="hoverClassAdd" :width="'63%'" :height="'85%'" :id="1" />
+                            <dv-decoration-2 :color="dvLineColor" :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" :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="dvColor" :backgroundColor="dvBackColor">
-                        <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="dvLineColor" :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" :total="mergeData[4].total" :width="'32%'" :height="'87%'" :id="3"/>
-                        </div>
-                    </dv-border-box-12>
+                    <!-- <dv-border-box-12 class="areaBottom" :color="dvColor" :backgroundColor="dvBackColor"> -->
+                        <!-- <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="dvLineColor" :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" :total="mergeData[4].total" :width="'32%'" :height="'87%'" :id="3"/> -->
+                        <!-- </div> -->
+                    <!-- </dv-border-box-12> -->
                 </div>
             </dv-border-box-1>
         </dv-full-screen-container>
@@ -157,15 +157,15 @@ export default {
             chartIndex: 0,
             autoPlay: true,
             tabularArr1:[],
-            tabularArr2:[],
+            tabularArr2: [],
             daterange: [],
-            dateValM:'',
-            dateValY:'',
+            dateValM: '',
+            dateValY: '',
             nowWeekData: [],
             dvColor: ['rgb(22,47,98)', 'rgba(116, 142, 194, 1)'],
             dvLineColor: ['rgba(255, 255, 255, 0.5)'],
             dvBackColor: 'rgba(6, 30, 93, 0)',
-            dateVal: ["week","nowWeek"],
+            dateVal: ['week', 'nowWeek'],
             show: true,
             options: data.options,
             hoverClassAdd:'m',
@@ -228,7 +228,7 @@ export default {
         initializeData () {
             const w = window.innerWidth
             const { first = '', second = '' } = this.$store.getters.level || {}
-            let annual = this.hoverClassAdd === 'm' ? this.dateValM.substring(0,4) :this.dateValY 
+            let annual = this.hoverClassAdd === 'm' ? this.dateValM.substring(0,4) :this.dateValY
             this.nowWeekData = []
             this.initData = {}
             this.itemIndex = 0
@@ -414,14 +414,14 @@ export default {
 //         border-color: #1892ea;
 //         color: #FFFFFF;
 //     }
-    
+
 //     ::v-deep .el-button--text:focus,
 //     .el-button--text:hover {
 //         background: #1892ea;
 //         border-color: #1892ea;
 //         color: #FFFFFF;
 //     }
-    
+
     ::v-deep .el-button--text {
         color: #FFFFFF;
         padding: 5px 5px;