|  |  | 
 |  |  |                         <div class="content_left_item1_content_row_line"> | 
 |  |  |                             <el-progress | 
 |  |  |                                 :show-text="false" | 
 |  |  |                                 :percentage="item.doneNum"> | 
 |  |  |                                 :percentage="item.doneNum / baseNum"> | 
 |  |  |                             </el-progress> | 
 |  |  |                         </div> | 
 |  |  |                         <div class="content_left_item1_content_row_num">{{ item.doneNum }}</div> | 
 |  |  | 
 |  |  |                                         effect="dark" | 
 |  |  |                                         :content="'已报工良品数' + child.doneNum + ';工序计划数' + child.planNum" | 
 |  |  |                                         placement="top"> | 
 |  |  |                                         <div class="scroll_item_row_item" @click="jump(child.procedureId)"> | 
 |  |  |                                         <div class="scroll_item_row_item" @click="jump(child.procedureId, child.procedureName)"> | 
 |  |  |                                             <div class="scroll_item_row_item_x"></div> | 
 |  |  |                                             <!-- <img v-if="i == 0 || i == 1" src="@/assets/img/ic_complete@2x.png" alt="" /> --> | 
 |  |  |                                             <span v-if="child.rate < 100">{{ child.rate }}%</span> | 
 |  |  |                                             <img v-else src="@/assets/img/ic_complete@2x.png" alt="" /> | 
 |  |  |                                             <span class="scroll_item_row_item_wz">{{ child.procedureName }}</span> | 
 |  |  |                                         </div> | 
 |  |  |                                     </el-tooltip> | 
 |  |  |                                 </div> | 
 |  |  | 
 |  |  | </template> | 
 |  |  |  | 
 |  |  | <script setup> | 
 |  |  |     import { reactive, ref, onMounted, nextTick, onUnmounted, computed, watch, onActivated } from 'vue' | 
 |  |  |     import { reactive, ref, onMounted, nextTick, onUnmounted, computed, watch, toRefs } from 'vue' | 
 |  |  |     import { getPlanData, getTop, getStockList, getWorkPlansList, getProcedureProcessList, getRecordLogPage, getDeviceCheckPage, getUnqualified7DayData, getUnqualifiedCateData } from '@/utils/api.js' | 
 |  |  |     import { useCounterStore } from '@/stores/counter.js' | 
 |  |  |     import * as echarts from 'echarts' | 
 |  |  | 
 |  |  |         patrolInspection: [], | 
 |  |  |         dayDistribution: [], | 
 |  |  |         typeDistribution: [], | 
 |  |  |         num: 0 | 
 |  |  |         num: 0, | 
 |  |  |         baseNum: 0 | 
 |  |  |     }) | 
 |  |  |  | 
 |  |  |     let { baseNum } = toRefs(data) | 
 |  |  |  | 
 |  |  |     let timer = ref(null) | 
 |  |  |     let timer1 = ref(null) | 
 |  |  |     let timer2 = ref(null) | 
 |  |  |     let timer3 = ref(null) | 
 |  |  |     let timer4 = ref(null) | 
 |  |  |     let timer5 = ref(null) | 
 |  |  |     let scrollContainer = ref(null) | 
 |  |  |     let scrollContainer1 = ref(null) | 
 |  |  |     let scrollContainer2 = ref(null) | 
 |  |  | 
 |  |  |         return enterprise.departId | 
 |  |  |     }) | 
 |  |  |  | 
 |  |  |     const jump = (procedureId) => { | 
 |  |  |     const jump = (procedureId, procedureName) => { | 
 |  |  |         enterprise.setProcedureName(procedureName) | 
 |  |  |         router.push({ name: 'process', query: { procedureId } }) | 
 |  |  |     } | 
 |  |  |  | 
 |  |  | 
 |  |  |             init() | 
 |  |  |         } | 
 |  |  |     }) | 
 |  |  |     // router.afterEach((to) => { | 
 |  |  |     //     if (to.fullPath === '/') { | 
 |  |  |     //         if (!departId.value) return | 
 |  |  |     //         // data.production = [] | 
 |  |  |     //         // data.marginStatistics = [] | 
 |  |  |     //         // data.plannedProgress = [] | 
 |  |  |     //         // data.processProgress = [] | 
 |  |  |     //         // data.log = [] | 
 |  |  |     //         // init() | 
 |  |  |     //     } else { | 
 |  |  |     //         clearTimeout(timer.value) | 
 |  |  |     //         clearTimeout(timer1.value) | 
 |  |  |     //         clearTimeout(timer2.value) | 
 |  |  |     //         clearTimeout(timer3.value) | 
 |  |  |     //         clearTimeout(timer4.value) | 
 |  |  |     //     } | 
 |  |  |     // }) | 
 |  |  |     // router.beforeEach((to) => { | 
 |  |  |     //     console.log(to); | 
 |  |  |     //     if (to.fullPath === '/') { | 
 |  |  |     //         if (!departId.value) return | 
 |  |  |     //         init() | 
 |  |  |     //     } else { | 
 |  |  |     //         clearTimeout(timer.value) | 
 |  |  |     //         clearTimeout(timer1.value) | 
 |  |  |     //         clearTimeout(timer2.value) | 
 |  |  |     //         clearTimeout(timer3.value) | 
 |  |  |     //         clearTimeout(timer4.value) | 
 |  |  |     //     } | 
 |  |  |     // }) | 
 |  |  |  | 
 |  |  |     start1() | 
 |  |  |  | 
 |  |  | 
 |  |  |         getTop(companyId.value, departId.value) | 
 |  |  |             .then(res => { | 
 |  |  |                 if (res.length > 0) { | 
 |  |  |                     res.forEach((item, index) => { | 
 |  |  |                         if (index > 1) { | 
 |  |  |                             item.doneNum1 = res[0].doneNum / item.doneNum | 
 |  |  |                         } | 
 |  |  |                     }) | 
 |  |  |                     data.baseNum = res[0].doneNum | 
 |  |  |                     data.production = res | 
 |  |  |                 } | 
 |  |  |             }) | 
 |  |  | 
 |  |  |         // 成品计划进度 | 
 |  |  |         getWorkPlansList(companyId.value, departId.value) | 
 |  |  |             .then(res => { | 
 |  |  |                 res.forEach(item => { | 
 |  |  |                     item.rate = Math.trunc(item.rate) | 
 |  |  |                 }) | 
 |  |  |                 data.plannedProgress = res | 
 |  |  |                 nextTick(() => { | 
 |  |  |                     start1() | 
 |  |  | 
 |  |  |             //   formatter: '{a} <br/>{b} : {c} ({d}%)' | 
 |  |  |             // }, | 
 |  |  |             legend: { | 
 |  |  |             show: false, | 
 |  |  |             type: 'scroll', | 
 |  |  |             orient: 'vertical', | 
 |  |  |             right: 10, | 
 |  |  |             top: 20, | 
 |  |  |             bottom: 20, | 
 |  |  |             data: legendData | 
 |  |  |                 show: false, | 
 |  |  |                 type: 'scroll', | 
 |  |  |                 orient: 'vertical', | 
 |  |  |                 right: 10, | 
 |  |  |                 top: 20, | 
 |  |  |                 bottom: 20, | 
 |  |  |                 data: legendData | 
 |  |  |             }, | 
 |  |  |             series: [ | 
 |  |  |             { | 
 |  |  |                 // name: '姓名', | 
 |  |  |                 type: 'pie', | 
 |  |  |  | 
 |  |  |                 radius: ['60%', '70%'], | 
 |  |  |                 // avoidLabelOverlap: false, | 
 |  |  |                 itemStyle: { | 
 |  |  |                 borderRadius: 4, | 
 |  |  |                 borderColor: 'rgba(52, 88, 159, 0.4)', | 
 |  |  |                 borderWidth: 4 | 
 |  |  |                 }, | 
 |  |  |                 center: ['50%', '50%'], | 
 |  |  |                 labelLine: { | 
 |  |  |                 show: false | 
 |  |  |                 }, | 
 |  |  |                 label: { | 
 |  |  |                 formatter:'{dot| } {title|{b} {c}}\n\n{per|{d}%}', | 
 |  |  |                 rich: { | 
 |  |  |                     title: { | 
 |  |  |                     color: '#fff' | 
 |  |  |                 { | 
 |  |  |                     // name: '姓名', | 
 |  |  |                     type: 'pie', | 
 |  |  |                     radius: ['60%', '70%'], | 
 |  |  |                     // avoidLabelOverlap: false, | 
 |  |  |                     itemStyle: { | 
 |  |  |                         borderRadius: 4, | 
 |  |  |                         borderColor: 'rgba(52, 88, 159, 0.4)', | 
 |  |  |                         borderWidth: 4 | 
 |  |  |                     }, | 
 |  |  |                     per: { | 
 |  |  |                     color: '#01D9FE' | 
 |  |  |                     center: ['50%', '50%'], | 
 |  |  |                     labelLine: { | 
 |  |  |                         show: false | 
 |  |  |                     }, | 
 |  |  |                     dot: { | 
 |  |  |                     backgroundColor: 'inherit', | 
 |  |  |                     width: 8, | 
 |  |  |                     height: 8, | 
 |  |  |                     borderRadius: 4 | 
 |  |  |                     label: { | 
 |  |  |                         formatter:'{dot| } {title|{b} {c}}\n\n{per|{d}%}', | 
 |  |  |                         rich: { | 
 |  |  |                             title: { | 
 |  |  |                                 color: '#fff' | 
 |  |  |                             }, | 
 |  |  |                             per: { | 
 |  |  |                                 color: '#01D9FE' | 
 |  |  |                             }, | 
 |  |  |                             dot: { | 
 |  |  |                                 backgroundColor: 'inherit', | 
 |  |  |                                 width: 8, | 
 |  |  |                                 height: 8, | 
 |  |  |                                 borderRadius: 4 | 
 |  |  |                             } | 
 |  |  |                         } | 
 |  |  |                     }, | 
 |  |  |                     // labelLayout: { | 
 |  |  |                     //   hideOverlap: true | 
 |  |  |                     // }, | 
 |  |  |                     endLabel: { | 
 |  |  |                         show: true, | 
 |  |  |                         distance: 5, | 
 |  |  |                         color: "red" | 
 |  |  |                     }, | 
 |  |  |                     data: seriesData, | 
 |  |  |                     emphasis: { | 
 |  |  |                         itemStyle: { | 
 |  |  |                             shadowBlur: 10, | 
 |  |  |                             shadowOffsetX: 0, | 
 |  |  |                             shadowColor: 'rgba(0, 0, 0, 1)' | 
 |  |  |                         } | 
 |  |  |                     } | 
 |  |  |                 } | 
 |  |  |                 }, | 
 |  |  |                 // labelLayout: { | 
 |  |  |                 //   hideOverlap: true | 
 |  |  |                 // }, | 
 |  |  |                 endLabel: { | 
 |  |  |                 show: true, | 
 |  |  |                 distance: 5, | 
 |  |  |                 color: "red" | 
 |  |  |                 }, | 
 |  |  |                 data: seriesData, | 
 |  |  |                 emphasis: { | 
 |  |  |                 itemStyle: { | 
 |  |  |                     shadowBlur: 10, | 
 |  |  |                     shadowOffsetX: 0, | 
 |  |  |                     shadowColor: 'rgba(0, 0, 0, 1)' | 
 |  |  |                 } | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |             ] | 
 |  |  |         } | 
 |  |  |         option && myChart.setOption(option); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     // onBeforeUnmount(()=>{ | 
 |  |  |     //     clearTimeout(timer.value) | 
 |  |  |     //     clearTimeout(timer1.value) | 
 |  |  |     //     clearTimeout(timer2.value) | 
 |  |  |     //     clearTimeout(timer3.value) | 
 |  |  |     //     clearTimeout(timer4.value) | 
 |  |  |     // }) | 
 |  |  |     onUnmounted(()=>{ | 
 |  |  |         clearTimeout(timer.value) | 
 |  |  |         clearTimeout(timer1.value) | 
 |  |  |         clearTimeout(timer2.value) | 
 |  |  |         clearTimeout(timer3.value) | 
 |  |  |         clearTimeout(timer4.value) | 
 |  |  |         clearTimeout(timer5.value) | 
 |  |  |     }) | 
 |  |  |     const clickCate = (index) => { | 
 |  |  |         clearTimeout(timer1.value) | 
 |  |  | 
 |  |  |     // }) | 
 |  |  |  | 
 |  |  |     onMounted(() => { | 
 |  |  |         console.log('11111') | 
 |  |  |         init() | 
 |  |  |         if (!departId.value) return; | 
 |  |  |         timer5.value = setInterval(init(), 60000) | 
 |  |  |     }) | 
 |  |  | </script> | 
 |  |  |  | 
 |  |  | 
 |  |  |                                 align-items: center; | 
 |  |  |                                 .scroll_item_row { | 
 |  |  |                                     flex: 1; | 
 |  |  |                                     width: 0; | 
 |  |  |                                     overflow: hidden; | 
 |  |  |                                     text-overflow: ellipsis; | 
 |  |  |                                     white-space: nowrap; | 
 |  |  | 
 |  |  |                                     align-items: center; | 
 |  |  |                                     justify-content: center; | 
 |  |  |                                     color: #FFFFFF; | 
 |  |  |                                     font-size: 13px; | 
 |  |  |                                     &:first-child { | 
 |  |  |                                         flex: 1.5; | 
 |  |  |                                     } | 
 |  |  | 
 |  |  |                                 .scroll_item_row { | 
 |  |  |                                     flex: 1; | 
 |  |  |                                     height: 100%; | 
 |  |  |                                     overflow: hidden; | 
 |  |  |                                     text-overflow: ellipsis; | 
 |  |  |                                     white-space: nowrap; | 
 |  |  |                                     display: flex; | 
 |  |  |                                     align-items: center; | 
 |  |  |                                     justify-content: center; | 
 |  |  |                                     color: #FFFFFF; | 
 |  |  |                                     font-size: 13px; | 
 |  |  |                                     &:nth-child(5) { | 
 |  |  |                                         flex: 3; | 
 |  |  |                                     } | 
 |  |  | 
 |  |  |                                             font-family: PingFangSC-Regular, PingFang SC; | 
 |  |  |                                             font-weight: 400; | 
 |  |  |                                             color: #01D9FE; | 
 |  |  |                                         } | 
 |  |  |                                         .scroll_item_row_item_wz { | 
 |  |  |                                             white-space: nowrap; | 
 |  |  |                                             position: absolute; | 
 |  |  |                                             bottom: -10px; | 
 |  |  |                                             left: 50%; | 
 |  |  |                                             transform: translate(-50%, 45%); | 
 |  |  |                                             font-size: 12px; | 
 |  |  |                                             font-family: PingFangSC-Regular, PingFang SC; | 
 |  |  |                                             font-weight: 400; | 
 |  |  |                                             color: #FFFFFF; | 
 |  |  |                                         } | 
 |  |  |                                         .scroll_item_row_item_x { | 
 |  |  |                                             position: absolute; | 
 |  |  | 
 |  |  |                                 .scroll_item_row { | 
 |  |  |                                     flex: 1; | 
 |  |  |                                     height: 100%; | 
 |  |  |                                     overflow: hidden; | 
 |  |  |                                     text-overflow: ellipsis; | 
 |  |  |                                     white-space: nowrap; | 
 |  |  |                                     display: flex; | 
 |  |  |                                     align-items: center; | 
 |  |  |                                     font-size: 13px; | 
 |  |  |                                     justify-content: center; | 
 |  |  |                                     color: #FFFFFF; | 
 |  |  |                                     .scroll_item_row_item { | 
 |  |  | 
 |  |  |                                 .scroll_item_row { | 
 |  |  |                                     flex: 1; | 
 |  |  |                                     height: 100%; | 
 |  |  |                                     overflow: hidden; | 
 |  |  |                                     text-overflow: ellipsis; | 
 |  |  |                                     white-space: nowrap; | 
 |  |  |                                     display: flex; | 
 |  |  |                                     font-size: 13px; | 
 |  |  |                                     align-items: center; | 
 |  |  |                                     justify-content: center; | 
 |  |  |                                     color: #FFFFFF; | 
 |  |  | 
 |  |  |                                 .scroll_item_row { | 
 |  |  |                                     flex: 1; | 
 |  |  |                                     height: 100%; | 
 |  |  |                                     overflow: hidden; | 
 |  |  |                                     text-overflow: ellipsis; | 
 |  |  |                                     white-space: nowrap; | 
 |  |  |                                     font-size: 13px; | 
 |  |  |                                     display: flex; | 
 |  |  |                                     align-items: center; | 
 |  |  |                                     justify-content: center; |