|  |  | 
 |  |  |                     <div @mouseenter="handleMouseEnter1" @mouseleave="handleMouseLeave1" class="main_container"> | 
 |  |  |                         <div ref="scrollContainer1" class="scroll_container"> | 
 |  |  |                             <div v-for="(item, index) in data.plannedProgress" :key="index" :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'"> | 
 |  |  |                                 <div class="scroll_item_row">323444112</div> | 
 |  |  |                                 <div class="scroll_item_row">电吉他</div> | 
 |  |  |                                 <div class="scroll_item_row">CP003</div> | 
 |  |  |                                 <div class="scroll_item_row">1000</div> | 
 |  |  |                                 <div class="scroll_item_row">{{ item.code }}</div> | 
 |  |  |                                 <div class="scroll_item_row">{{ item.materialName }}</div> | 
 |  |  |                                 <div class="scroll_item_row">{{ item.materialCode }}</div> | 
 |  |  |                                 <div class="scroll_item_row">{{ item.num }}</div> | 
 |  |  |                                 <div class="scroll_item_row"> | 
 |  |  |                                     <el-tooltip | 
 |  |  |                                         v-for="(child, i) in 6" :key="i" | 
 |  |  |                                         v-for="(child, i) in item.procedureList" :key="i" | 
 |  |  |                                         effect="dark" | 
 |  |  |                                         content="已报工良品数1000;工序计划数500" | 
 |  |  |                                         placement="top"> | 
 |  |  |                                         <div class="scroll_item_row_item"> | 
 |  |  |                                         <div class="scroll_item_row_item" @click="jump(child.procedureId)"> | 
 |  |  |                                             <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-else>98%</span> | 
 |  |  |                                             <span v-else>{{ child.rate }}%</span> | 
 |  |  |                                         </div> | 
 |  |  |                                     </el-tooltip> | 
 |  |  |                                 </div> | 
 |  |  |                                 <div class="scroll_item_row">498/500</div> | 
 |  |  |                                 <div class="scroll_item_row">{{ item.qualifiedNum }}/{{ item.doneNum }}</div> | 
 |  |  |                             </div> | 
 |  |  |                         </div> | 
 |  |  |                     </div> | 
 |  |  | 
 |  |  |                 </div> | 
 |  |  |                 <div class="content_right_top_nr"> | 
 |  |  |                     <div class="content_right_top_nr_bottom_yuan" v-if="data.typeDistribution.length > 0"> | 
 |  |  |                         <span>67</span> | 
 |  |  |                         <span>{{ data.num }}</span> | 
 |  |  |                         <span>不良项分布</span> | 
 |  |  |                     </div> | 
 |  |  |                     <div class="content_right_top_nr_top" id="lineChrat"></div> | 
 |  |  | 
 |  |  | </template> | 
 |  |  |  | 
 |  |  | <script setup> | 
 |  |  |     import { reactive, ref, onMounted, onBeforeUnmount, onUnmounted, nextTick, computed, watch } from 'vue' | 
 |  |  |     import { reactive, ref, onBeforeUnmount, onUnmounted, nextTick, computed, watch } from 'vue' | 
 |  |  |     import { getTop, getStockList, getWorkPlansList, getProcedureProcessList, getRecordLogPage, getDeviceCheckPage, getUnqualified7DayData, getUnqualifiedCateData } from '@/utils/api.js' | 
 |  |  |     import { useCounterStore } from '@/stores/counter.js' | 
 |  |  |     import * as echarts from 'echarts' | 
 |  |  |     import { useRouter } from 'vue-router' | 
 |  |  |  | 
 |  |  |     const router = useRouter() | 
 |  |  |  | 
 |  |  |     let data = reactive({ | 
 |  |  |         production: [], | 
 |  |  | 
 |  |  |         log: [], | 
 |  |  |         patrolInspection: [], | 
 |  |  |         dayDistribution: [], | 
 |  |  |         typeDistribution: [] | 
 |  |  |         typeDistribution: [], | 
 |  |  |         num: 0 | 
 |  |  |     }) | 
 |  |  |  | 
 |  |  |     let timer = ref(null) | 
 |  |  | 
 |  |  |     const departId = computed(() => { | 
 |  |  |         return enterprise.departId | 
 |  |  |     }) | 
 |  |  |  | 
 |  |  |     const jump = (procedureId) => { | 
 |  |  |         router.push({ name: 'process', query: { procedureId } }) | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     watch(() => departId.value, (val) => { | 
 |  |  |         if (val) { | 
 |  |  | 
 |  |  |             getUnqualifiedCateData(companyId.value, departId.value, '') | 
 |  |  |                 .then(res => { | 
 |  |  |                     if (res && res.length > 0) { | 
 |  |  |                         data.num = 0 | 
 |  |  |                         data.typeDistribution = res.map(item => { | 
 |  |  |                             data.num += item.unqualifiedNum | 
 |  |  |                             return { | 
 |  |  |                                 name: item.categoryName, | 
 |  |  |                                 num: item.unqualifiedNum | 
 |  |  | 
 |  |  |         let myChart = echarts.init(dayChartDom); | 
 |  |  |         let dateList = [] | 
 |  |  |         let numList = [] | 
 |  |  |  | 
 |  |  |         let num = 0 | 
 |  |  |         data.dayDistribution.forEach(item => { | 
 |  |  |             dateList.push(item.date) | 
 |  |  |             numList.push(item.num) | 
 |  |  |             num += item.num | 
 |  |  |         }) | 
 |  |  |         let option; | 
 |  |  |         option = { | 
 |  |  |             title: { | 
 |  |  |                 text: '近七日不良品总数:67', | 
 |  |  |                 text: `近七日不良品总数:${num}`, | 
 |  |  |                 textStyle: { | 
 |  |  |                     color: '#fff', | 
 |  |  |                     fontSize: 12 |