|  |  |  | 
|---|
|  |  |  | </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 = [] | 
|---|