|  |  | 
 |  |  | </template> | 
 |  |  |  | 
 |  |  | <script setup> | 
 |  |  | import { reactive, ref, toRefs, onMounted, onUnmounted } from 'vue' | 
 |  |  | import { reactive, ref, toRefs, onMounted, onUnmounted, nextTick } from 'vue' | 
 |  |  | import { getProcedurePlanData, getTop, getProcedurePlansList, getRecordLogPage, getUnqualified7DayData, getUnqualifiedCateData } from '@/utils/api.js' | 
 |  |  | import { useCounterStore } from '@/stores/counter.js' | 
 |  |  | import { useRoute } from 'vue-router' | 
 |  |  | 
 |  |  |  | 
 |  |  | onMounted(() => { | 
 |  |  |   window.addEventListener('resize', () => { | 
 |  |  |     setDayChart() | 
 |  |  |     setTypeChart() | 
 |  |  |     console.log('resize'); | 
 |  |  |     nextTick(() => { | 
 |  |  |       setDayChart() | 
 |  |  |       setTypeChart() | 
 |  |  |     }) | 
 |  |  |   }) | 
 |  |  |   initData() | 
 |  |  |   scrollTimer.value = setInterval(() => { | 
 |  |  | 
 |  |  |     dateList.push(item.createTime) | 
 |  |  |     numList.push(item.unqualifiedNum || 0) | 
 |  |  |   }) | 
 |  |  |   console.log(data.allBad); | 
 |  |  |   let option; | 
 |  |  |   option = { | 
 |  |  |     title: { | 
 |  |  | 
 |  |  |         fontSize: 12 | 
 |  |  |       } | 
 |  |  |     }, | 
 |  |  |     grid: { | 
 |  |  |       top: 40, | 
 |  |  |       bottom: 40 | 
 |  |  |     }, | 
 |  |  |     xAxis: { | 
 |  |  |       type: 'category', | 
 |  |  |       boundaryGap: false, | 
 |  |  | 
 |  |  |         lineStyle: { | 
 |  |  |           width: 0.5, | 
 |  |  |           color: ['#fff'] | 
 |  |  |         } | 
 |  |  |       }, | 
 |  |  |       axisLine: { | 
 |  |  |         show: true, | 
 |  |  |         onZero: true, | 
 |  |  |         lineStyle: { | 
 |  |  |           width: 1, | 
 |  |  |           color: '#fff', | 
 |  |  |           opacity: .5 | 
 |  |  |         } | 
 |  |  |       }, | 
 |  |  |       axisLabel: { | 
 |  |  | 
 |  |  |         lineStyle: { | 
 |  |  |           width: 0.5, | 
 |  |  |           color: ['#fff'] | 
 |  |  |         } | 
 |  |  |       }, | 
 |  |  |       axisLine: { | 
 |  |  |         show: true, | 
 |  |  |         onZero: true, | 
 |  |  |         lineStyle: { | 
 |  |  |           width: 1, | 
 |  |  |           color: '#fff', | 
 |  |  |           opacity: .5 | 
 |  |  |         } | 
 |  |  |       }, | 
 |  |  |       axisLabel: { | 
 |  |  | 
 |  |  |  */ | 
 |  |  | function setTypeChart() { | 
 |  |  |   let dayChartDom = document.getElementById('type-distribution'); | 
 |  |  |   console.log(dayChartDom); | 
 |  |  |   let myChart = echarts.init(dayChartDom); | 
 |  |  |   let legendData = [] | 
 |  |  |   let seriesData = [] |