|  |  |  | 
|---|
|  |  |  | </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(() => { | 
|---|
|  |  |  | 
|---|
|  |  |  | data.planScroll = false | 
|---|
|  |  |  | return | 
|---|
|  |  |  | } | 
|---|
|  |  |  | // scrollTop指的是“元素中的内容”超出“元素上边界”的那部分的高度 | 
|---|
|  |  |  | // scrollHeight指整个元素的高度,与元素本身有关,是元素本身的高度与你所设置的style属性相加的结果,但与overflow:hidden等属性无关,与是否在可视范围内无关 | 
|---|
|  |  |  | // clientHeight含义:元素的像素高度,包含元素的高度+内边距,不包含水平滚动条,边框和外边距 | 
|---|
|  |  |  | // 组件进行滚动 | 
|---|
|  |  |  | scrollDom.scrollTop += 2 | 
|---|
|  |  |  | console.log(scrollDom.scrollTop); | 
|---|
|  |  |  | // 判断是否滚动到底部 | 
|---|
|  |  |  | if (scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight - 2)) { | 
|---|
|  |  |  | // 获取组件第一个节点 | 
|---|
|  |  |  | 
|---|
|  |  |  | scrollDom = reportLogContainer.value | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | // 如果列表数量过少不进行滚动 | 
|---|
|  |  |  | if (scrollDom.children.length < 10) { | 
|---|
|  |  |  | if (scrollDom.children.length <= 10) { | 
|---|
|  |  |  | data.reportScroll = false | 
|---|
|  |  |  | return | 
|---|
|  |  |  | } | 
|---|
|  |  |  | // 组件进行滚动 | 
|---|
|  |  |  | scrollDom.scrollTop += 2 | 
|---|
|  |  |  | scrollDom.scrollTop += 1 | 
|---|
|  |  |  | console.log(scrollDom.scrollTop); | 
|---|
|  |  |  | // 判断是否滚动到底部 | 
|---|
|  |  |  | if (scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight - 2)) { | 
|---|
|  |  |  | if (scrollDom.scrollTop && scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight)) { | 
|---|
|  |  |  | // 获取组件第一个节点 | 
|---|
|  |  |  | let first = scrollDom.children[0] | 
|---|
|  |  |  | // 删除节点 | 
|---|
|  |  |  | 
|---|
|  |  |  | 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: { | 
|---|
|  |  |  | 
|---|
|  |  |  | color: ['#fff'] | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | axisLine: { | 
|---|
|  |  |  | show: true, | 
|---|
|  |  |  | onZero: true, | 
|---|
|  |  |  | lineStyle: { | 
|---|
|  |  |  | width: 1, | 
|---|
|  |  |  | color: '#fff', | 
|---|
|  |  |  | opacity: .5 | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | axisLabel: { | 
|---|
|  |  |  | textStyle: { | 
|---|
|  |  |  | color: '#fff' | 
|---|