数据统计问题调整

src/views/statistics/index_kanban.vue

@@ -309,7 +309,7 @@
           v-if="activeKanbanTab === 'internalAudit'"
           class="kanban-tab-panel"
         >
-          <div class="kanban-chart-row kanban-chart-row--inline">
+          <div class="kanban-chart-row kanban-chart-row--pie">
             <div class="kanban-chart-cell">
               <s2manYiDu
                 v-if="showAll || showComponents[17]"
@@ -331,6 +331,8 @@
                 :data="getS2manYiDuFB()"
               />
             </div>
+          </div>
+          <div class="kanban-chart-row kanban-chart-row--bar">
             <div class="kanban-chart-cell">
               <s14bufuhexiang
                 v-if="showAll || showComponents[19]"
@@ -349,7 +351,7 @@
           v-if="activeKanbanTab === 'managementReview'"
           class="kanban-tab-panel"
         >
-          <div class="kanban-chart-row kanban-chart-row--inline">
+          <div class="kanban-chart-row kanban-chart-row--pie">
             <div class="kanban-chart-cell">
               <s1zhiLiangMuBiao
                 v-if="showAll || showComponents[21]"
@@ -371,6 +373,8 @@
                 :data="getS1renwuFB()"
               />
             </div>
+          </div>
+          <div class="kanban-chart-row kanban-chart-row--bar">
             <div class="kanban-chart-cell">
               <s16bzJunZhu
                 v-if="showAll || showComponents[23]"
@@ -382,17 +386,6 @@
                 :data="getbzJunZhujNum()"
               />
             </div>
-            <!-- <div class="kanban-chart-cell">
-              <s11biaoZhunWu
-                v-if="showAll || showComponents[24]"
-                width="100%"
-                height="100%"
-                :colorw="colorw"
-                :direction="direction"
-                style="box-shadow: none"
-                :data="getyangPinCaiJiObjNum()"
-              />
-            </div> -->
           </div>
         </div>
         <div class="clear" />
@@ -404,6 +397,7 @@
 <script>
 // 全屏展示
 import screenfull from 'screenfull'
+import * as echarts from 'echarts'
 // 大屏标题组件
 import headerDecoration from './headerDecoration'
 
@@ -443,7 +437,7 @@ import s16bzJunZhu from './item/s16bzJunZhuCol2.vue'
 import s17bzXiBao from './item/s17bzXiBao.vue'
 
 import none from './item/none.vue'
-import * as echarts from 'echarts'
+// import * as echarts from 'echarts'
 import {
   DBData,
   getConfig,
@@ -542,7 +536,7 @@ export default {
       height: window.screen.height - 200 + 'px',
       BeginDate: '',
       endDate: '',
-      activeDateRange: '',
+      activeDateRange: 'month',
       activeKanbanTab: 'personnel',
       jiaoyanObj: [],
       jiaoyanMGObj: [],
@@ -628,6 +622,14 @@ export default {
     }
   },
   watch: {
+    activeKanbanTab() {
+      this.scheduleKanbanChartResize()
+    },
+    relOf(val) {
+      if (val) {
+        this.scheduleKanbanChartResize()
+      }
+    },
     zhiliangmuNeirong: {
       handler() {
         // this.drawLine()
@@ -654,12 +656,10 @@ export default {
     }
     /* 开始及结束时间的默认设置*/
     if (!Array.isArray(this.endDate) || this.endDate.length !== 2) {
-      this.BeginDate = this.getDate(1) + ''
-      this.endDate = this.getDate(0)
-      this.activeDateRange = 'year'
-      this.dataScope = [this.BeginDate, this.endDate]
+      this.setDateRange('month')
+    } else {
+      this.getqualityData()
     }
-    this.getqualityData()
     // 获取统计的配置
 
     // if (this.buhegelvObj.length > 0) {
@@ -687,6 +687,24 @@ export default {
     clearInterval(this.timer)
   },
   methods: {
+    scheduleKanbanChartResize() {
+      this.$nextTick(() => {
+        requestAnimationFrame(() => {
+          this.resizeVisibleKanbanCharts()
+        })
+      })
+    },
+    resizeVisibleKanbanCharts() {
+      if (!this.$el) return
+      this.$el
+        .querySelectorAll('.kanban-tab-panel canvas')
+        .forEach((canvas) => {
+          const chartDom = canvas.parentElement
+          if (!chartDom) return
+          const chart = echarts.getInstanceByDom(chartDom)
+          if (chart) chart.resize()
+        })
+    },
     /* 判断是否统计子组件中传递过来的，是否需要隐藏。若需要则进行隐藏的遍历  */
     isShowComponents() {
       /* 将参数进行显示 */
@@ -750,6 +768,8 @@ export default {
     getConfigData(end, allDept, filterDept) {
       console.log(end, allDept, filterDept)
       const that = this
+      this.tableData.data = []
+      this.tableData1.data = []
       const queryEnd = [...end]
       queryEnd[2] = queryEnd[1]
       queryEnd[1] = this.getNextMonth(queryEnd[1])
@@ -876,14 +896,17 @@ export default {
     },
     /* 查询全部*/
     selectAll() {
+      this.relOf = false
       this.getqualityData()
     },
     checkYear(year, data) {
       this.selectAll()
     },
     onDateRangeChange(val) {
+      if (!val || val.length !== 2) return
       this.activeDateRange = ''
-      this.checkYear(val, 'end')
+      this.dataScope = val
+      this.selectAll()
     },
     formatMonth(date) {
       const year = date.getFullYear()
@@ -918,7 +941,8 @@ export default {
 
       this.activeDateRange = range
       this.endDate = [start, end]
-      this.checkYear(this.endDate, 'end')
+      this.dataScope = [start, end]
+      this.selectAll()
     },
     /* 获取当前年份*/
     getDate(year) {
@@ -1267,9 +1291,6 @@ export default {
     height: 400px;
     margin-top: 12px;
   }
-  &--inline {
-    height: 450px;
-  }
 }
 .kanban-chart-cell {
   flex: 1;
@@ -1281,6 +1302,10 @@ export default {
     height: 100%;
     float: none;
     box-shadow: none;
+    > div:hover {
+      transform: none !important;
+      transition: none !important;
+    }
   }
 }
 </style>

src/views/statistics/item/s14bufuhexiangCol.vue

@@ -130,8 +130,8 @@ export default {
               },
               position: this.direction == 'x' ? 'right' : 'top',
               textStyle: {
-                fontSize: 12,
-                color: '#B0CEFC'
+              fontSize: 12,
+              color: this.colorw
               }
             }
           })
@@ -145,8 +145,8 @@ export default {
                 position: this.direction == 'x' ? 'right' : 'top',
 
                 textStyle: {
-                  fontSize: 12,
-                  color: '#B0CEFC'
+              fontSize: 12,
+              color: this.colorw
                 }
               }
             }
@@ -205,8 +205,8 @@ export default {
         },
         legend: {
           textStyle: {
-            fontSize: 12,
-            color: '#B0CEFC' // 图例文字颜色
+              fontSize: 12,
+              color: this.colorw // 图例文字颜色
           },
           top: '5%',
           formatter: function (name) {
@@ -244,6 +244,9 @@ export default {
       }
 
       option && s14bufuhexiang.setOption(option)
+      this.$nextTick(() => {
+        s14bufuhexiang.resize()
+      })
     }
   }
 }

src/views/statistics/item/s16bzJunZhuCol2.vue

@@ -127,8 +127,8 @@ export default {
               },
               position: this.direction == 'x' ? 'right' : 'top',
               textStyle: {
-                fontSize: 12,
-                color: '#B0CEFC'
+              fontSize: 12,
+              color: this.colorw
               }
             }
           })
@@ -142,8 +142,8 @@ export default {
                 position: this.direction == 'x' ? 'right' : 'top',
 
                 textStyle: {
-                  fontSize: 12,
-                  color: '#B0CEFC'
+              fontSize: 12,
+              color: this.colorw
                 }
               }
             }
@@ -202,8 +202,8 @@ export default {
         },
         legend: {
           textStyle: {
-            fontSize: 12,
-            color: '#B0CEFC' // 图例文字颜色
+              fontSize: 12,
+              color: this.colorw // 图例文字颜色
           },
           top: '5%',
           formatter: function (name) {
@@ -241,6 +241,9 @@ export default {
       }
 
       option && s16bzJunZhu.setOption(option)
+      this.$nextTick(() => {
+        s16bzJunZhu.resize()
+      })
     }
   }
 }

src/views/statistics/item/s1zhiLiangMuBiao.vue

@@ -109,7 +109,7 @@ export default {
             label: {
               formatter: '{b}: {d}%',
               color: this.colorw,
-              fontSize: '12px'
+              fontSize: 12
             },
             data: [
               { value: this.data.t_jchzbNum.val, name: '完成率' },
@@ -190,6 +190,9 @@ export default {
         //   },
       }
       option && s5zhiLiangMuBiao.setOption(option)
+      this.$nextTick(() => {
+        s5zhiLiangMuBiao.resize()
+      })
     }
   }
 }

src/views/statistics/item/s1zhiLiangMuBiaoCol.vue

@@ -129,8 +129,8 @@ export default {
               },
               position: this.direction == 'x' ? 'right' : 'top',
               textStyle: {
-                fontSize: 12,
-                color: '#B0CEFC'
+              fontSize: 12,
+              color: this.colorw
               }
             }
           })
@@ -144,8 +144,8 @@ export default {
                 position: this.direction == 'x' ? 'right' : 'top',
 
                 textStyle: {
-                  fontSize: 12,
-                  color: '#B0CEFC'
+              fontSize: 12,
+              color: this.colorw
                 }
               }
             }
@@ -204,8 +204,8 @@ export default {
         },
         legend: {
           textStyle: {
-            fontSize: 12,
-            color: '#B0CEFC' // 图例文字颜色
+              fontSize: 12,
+              color: this.colorw // 图例文字颜色
           },
           top: '5%',
           formatter: function (name) {
@@ -242,6 +242,9 @@ export default {
         ]
       }
       option && s5zhiLiangMuBiaocol.setOption(option)
+      this.$nextTick(() => {
+        s5zhiLiangMuBiaocol.resize()
+      })
     }
   }
 }

src/views/statistics/item/s2manYiDu.vue

@@ -121,7 +121,7 @@ export default {
             label: {
               formatter: '{b}: {d}%',
               color: this.colorw,
-              fontSize: '12px'
+              fontSize: 12
             },
             data: [
               { value: this.data.t_khmydtjbNum.val, name: '完成率' },
@@ -270,6 +270,9 @@ export default {
         // ]
       }
       option && s2manYiDu.setOption(option)
+      this.$nextTick(() => {
+        s2manYiDu.resize()
+      })
     }
   }
 }

src/views/statistics/item/s2manYiDuPro.vue

@@ -131,8 +131,8 @@ export default {
               },
               position: this.direction == 'x' ? 'right' : 'top',
               textStyle: {
-                fontSize: 12,
-                color: '#B0CEFC'
+              fontSize: 12,
+              color: this.colorw
               }
             }
           })
@@ -146,8 +146,8 @@ export default {
                 position: this.direction == 'x' ? 'right' : 'top',
 
                 textStyle: {
-                  fontSize: 12,
-                  color: '#B0CEFC'
+              fontSize: 12,
+              color: this.colorw
                 }
               }
             }
@@ -206,8 +206,8 @@ export default {
         },
         legend: {
           textStyle: {
-            fontSize: 12,
-            color: '#B0CEFC' // 图例文字颜色
+              fontSize: 12,
+              color: this.colorw // 图例文字颜色
           },
           top: '5%',
           formatter: function (name) {
@@ -244,6 +244,9 @@ export default {
         ]
       }
       option && s2manYiDucol.setOption(option)
+      this.$nextTick(() => {
+        s2manYiDucol.resize()
+      })
     }
   }
 }