| | |
| | | <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"> |
| | | <div class="scroll_item_row" style="text-align: left;"> |
| | | <el-tooltip v-for="(child, i) in item.procedureList" :key="i" effect="dark" |
| | | :content="'已报工良品数' + child.doneNum + ';工序计划数' + child.planNum" placement="top"> |
| | | <div class="scroll_item_row_item" @click="jump(child.procedureId, child.procedureName)"> |
| | |
| | | <div v-for="(item, index) in data.log" :key="index" |
| | | :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'"> |
| | | <div class="scroll_item_row">{{ item.userName }}</div> |
| | | <div class="scroll_item_row">{{ item.materialName }}</div> |
| | | <div class="scroll_item_row">{{ item.procedureName }}</div> |
| | | <div class="scroll_item_row">{{ item.materialCode }}</div> |
| | | <div class="scroll_item_row">{{ dateToSub(item.createTime) }}</div> |
| | | <div class="scroll_item_row">{{ item.qualifiedNum || 0 }}</div> |
| | | <div class="scroll_item_row">{{ item.unqualifiedNum || 0 }}</div> |
| | |
| | | <span>近7天不良品分布</span> |
| | | </div> |
| | | <div class="content_right_top_nr"> |
| | | |
| | | |
| | | <div class="content_right_top_nr_top" id="lineChrat"></div> |
| | | <div class="content_right_top_nr_bottom"> |
| | | <div class="content_right_top_nr_bottom_yuan" v-if="data.typeDistribution.length > 0"> |
| | |
| | | </div> |
| | | <div id="pieChart"></div> |
| | | </div> |
| | | |
| | | |
| | | </div> |
| | | </div> |
| | | <!-- 设备巡检记录 --> |
| | | <div class="content_right_bottom"> |
| | | <div class="content_right_bottom" ref="bottom1"> |
| | | <div class="content_right_bottom_head"> |
| | | <span>设备巡检记录</span> |
| | | </div> |
| | |
| | | :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'"> |
| | | <div class="scroll_item_row">{{ dateToSub(item.checkdate) }}</div> |
| | | <div class="scroll_item_row">{{ item.deviceName }}</div> |
| | | <div class="scroll_item_row">{{ item.status == 0 ? '合格' : '不合格' }}</div> |
| | | <div class="scroll_item_row"> |
| | | <span v-if="item.status == 0">正常</span> |
| | | <span v-else style="color: #F84F26">异常</span> |
| | | </div> |
| | | <div class="scroll_item_row">{{ item.userName }}</div> |
| | | </div> |
| | | </div> |
| | |
| | | dayDistribution: [], |
| | | typeDistribution: [], |
| | | num: 0, |
| | | baseNum: 0 |
| | | baseNum: 0, |
| | | bottomAuthHeight: 284 |
| | | }) |
| | | |
| | | let { baseNum } = toRefs(data) |
| | | let { baseNum, bottomAuthHeight } = toRefs(data) |
| | | |
| | | let timer = ref(null) |
| | | let timer1 = ref(null) |
| | |
| | | let scrollContainer2 = ref(null) |
| | | let scrollContainer3 = ref(null) |
| | | let scrollContainer4 = ref(null) |
| | | let bottom1 = ref(null) |
| | | let cate = ref([ |
| | | { |
| | | name: '成品计划进度', |
| | |
| | | start1() |
| | | |
| | | const init = () => { |
| | | setBottomHeight(); |
| | | // 当日员工产量TOP10 |
| | | getTop(companyId.value, departId.value) |
| | | .then(res => { |
| | | if (res.length > 0) { |
| | | data.baseNum = res[0].doneNum |
| | | data.production = res |
| | | start() |
| | | } else { |
| | | data.baseNum = 0 |
| | | } |
| | | data.production = res |
| | | data.fifthScroll = true |
| | | }) |
| | | // 仓库实时余量统计 |
| | | // getStockList(companyId.value, departId.value) |
| | |
| | | } |
| | | } |
| | | }) |
| | | |
| | | |
| | | |
| | | |
| | | // 报工日志 |
| | | getRecordLogPage(companyId.value, departId.value, { |
| | | capacity: 20, |
| | |
| | | enterprise.setNum(res) |
| | | }) |
| | | } |
| | | function setBottomHeight(){ |
| | | const pageHeight = window.innerHeight; |
| | | bottomAuthHeight = pageHeight - 700; |
| | | } |
| | | |
| | | /** |
| | | * 七日折线图 |
| | |
| | | fontSize: 12 |
| | | } |
| | | }, |
| | | grid: { |
| | | top: 40, |
| | | bottom: 30, |
| | | left: 60, |
| | | right: 10 |
| | | }, |
| | | xAxis: { |
| | | type: 'category', |
| | | boundaryGap: false, |
| | |
| | | lineStyle: { |
| | | width: 0.5, |
| | | color: ['#fff'] |
| | | } |
| | | }, |
| | | axisLine: { |
| | | show: true, |
| | | onZero: true, |
| | | lineStyle: { |
| | | width: 0.5, |
| | | color: '#fff', |
| | | opacity: .5 |
| | | } |
| | | }, |
| | | axisLabel: { |
| | |
| | | lineStyle: { |
| | | width: 0.5, |
| | | color: ['#fff'] |
| | | } |
| | | }, |
| | | axisLine: { |
| | | show: true, |
| | | onZero: true, |
| | | lineStyle: { |
| | | width: 1, |
| | | color: '#fff', |
| | | opacity: .5 |
| | | } |
| | | }, |
| | | axisLabel: { |
| | |
| | | } |
| | | 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) |
| | |
| | | if (scrollDom.offsetHeight == 0) { |
| | | scrollDom = scrollContainer.value |
| | | } else { |
| | | let maxLength = scrollDom.clientHeight/34 |
| | | // 如果列表数量过少不进行滚动 |
| | | if (scrollDom.children.length < 6) { |
| | | if (scrollDom.children.length <= maxLength) { |
| | | clearTimeout(timer.value) |
| | | return |
| | | } |
| | | // 组件进行滚动 |
| | | scrollDom.scrollTop += 1 |
| | | scrollDom.scrollTop += 2 |
| | | // 判断是否滚动到底部 |
| | | if (scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight)) { |
| | | if (Math.floor(scrollDom.scrollTop) >= (scrollDom.scrollHeight - scrollDom.clientHeight)) { |
| | | // 获取组件第一个节点 |
| | | let first = scrollDom.children[0] |
| | | // 删除节点 |
| | |
| | | scrollDom = scrollContainer1.value |
| | | } else { |
| | | // 如果列表数量过少不进行滚动 |
| | | if (scrollDom.children.length < 7) { |
| | | if (scrollDom.children.length <= 6) { |
| | | clearTimeout(timer1.value) |
| | | return |
| | | } |
| | | // console.log(data.plannedProgress); |
| | | // 组件进行滚动 |
| | | scrollDom.scrollTop += 1 |
| | | scrollDom.scrollTop += 2 |
| | | // scrollDom.scrollTo(0, scrollDom.scrollTop + 3) |
| | | // console.log('2-----',scrollDom.scrollTop, scrollDom.scrollHeight, scrollDom.clientHeight ); |
| | | // 判断是否滚动到底部 |
| | | if (scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight)) { |
| | | if (scrollDom.scrollTop && scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight)) { |
| | | // 获取组件第一个节点 |
| | | let first = scrollDom.children[0] |
| | | // 删除节点 |
| | |
| | | scrollDom = scrollContainer2.value |
| | | } else { |
| | | // 如果列表数量过少不进行滚动 |
| | | if (scrollDom.children.length < 10) { |
| | | if (scrollDom.children.length <= 10) { |
| | | clearTimeout(timer2.value) |
| | | return |
| | | } |
| | | // 组件进行滚动 |
| | | scrollDom.scrollTop += 1 |
| | | scrollDom.scrollTo(0, scrollDom.scrollTop + 1) // += 1 |
| | | // scrollDom.scrollTop(scrollDom.scrollTop + 1) |
| | | // console.log('scrollDom.scrollTop', scrollDom.scrollTop); |
| | | // console.log('scrollDom.scrollHeight - scrollDom.clientHeight', scrollDom.scrollHeight - scrollDom.clientHeight); |
| | | // 判断是否滚动到底部 |
| | | if (scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight)) { |
| | | if (scrollDom.scrollTop &&scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight)) { |
| | | // 获取组件第一个节点 |
| | | let first = scrollDom.children[0] |
| | | // 删除节点 |
| | |
| | | scrollDom = scrollContainer3.value |
| | | } else { |
| | | // 如果列表数量过少不进行滚动 |
| | | if (scrollDom.children.length <= 5) { |
| | | let num = scrollContainer3.value.offsetHeight / 35; |
| | | // alert(scrollDom.children.length +"---------------"+num) |
| | | // 如果列表数量过少不进行滚动 |
| | | if (scrollDom.children.length <= num) { |
| | | clearTimeout(timer3.value) |
| | | return |
| | | } |
| | | // 组件进行滚动 |
| | | scrollDom.scrollTop += 1 |
| | | scrollDom.scrollTop = scrollDom.scrollTop+2 |
| | | // 判断是否滚动到底部 |
| | | if (scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight)) { |
| | | if (scrollDom.scrollTop && scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight)) { |
| | | // 获取组件第一个节点 |
| | | let first = scrollDom.children[0] |
| | | // 删除节点 |
| | |
| | | let scrollDom = scrollContainer4.value |
| | | if (!scrollDom) return |
| | | // 判读组件是否渲染完成 |
| | | if (scrollDom.offsetHeight == 0) { |
| | | if (scrollDom.scrollTop && scrollDom.offsetHeight == 0) { |
| | | scrollDom = scrollContainer4.value |
| | | } else { |
| | | // 如果列表数量过少不进行滚动 |
| | | if (scrollDom.children.length < 5) { |
| | | // console.log(scrollDom.offsetHeight); |
| | | let num = scrollDom.offsetHeight / 35; |
| | | num = num + (scrollDom.offsetHeight % 35 > 0 ? 1 : 0) |
| | | if (scrollDom.children.length <= num) { |
| | | clearTimeout(timer4.value) |
| | | return |
| | | } |
| | | // 组件进行滚动 |
| | | scrollDom.scrollTop += 1 |
| | | |
| | | // 判断是否滚动到底部 |
| | | if (scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight)) { |
| | | if (scrollDom.scrollTop && scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight)) { |
| | | // if (scrollDom.scrollTop >= 35) { |
| | | |
| | | // 获取组件第一个节点 |
| | | let first = scrollDom.children[0] |
| | | // 删除节点 |
| | |
| | | // }) |
| | | |
| | | onMounted(() => { |
| | | if (!departId.value) return; |
| | | timer5.value = setInterval(init(), 60000) |
| | | if (departId.value) { |
| | | console.log('onMounted'); |
| | | init() |
| | | timer5.value = setInterval(init, 60000) |
| | | // timer.value = setInterval(scrillAction, 100) |
| | | } |
| | | window.addEventListener('resize', () => { |
| | | setTypeChart() |
| | | setDayChart() |
| | | }) |
| | | |
| | | }) |
| | | |
| | | onUnmounted(() => { |
| | | clearTimeout(timer.value) |
| | | clearTimeout(timer5.value) |
| | | |
| | | }) |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | |
| | | $fixed-height: 690px; |
| | | .content1 { |
| | | flex: 1; |
| | | width: 100%; |
| | |
| | | margin-right: 20px; |
| | | .content_left_item1 { |
| | | width: 100%; |
| | | height: 284px; |
| | | height: calc(100vh - 690px); |
| | | // height: 284px; |
| | | margin-bottom: 20px; |
| | | .content_left_item1_head { |
| | | background: url('@/assets/img/home_title_short@2x.png'); |
| | |
| | | |
| | | .content_left_item1_content { |
| | | width: 100%; |
| | | height: 246px; |
| | | height: calc(100% - 36px); |
| | | padding: 20px; |
| | | overflow: hidden; |
| | | box-sizing: border-box; |
| | |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | margin-bottom: 13px; |
| | | // margin-bottom: 13px; |
| | | padding: 7px 0; |
| | | |
| | | &:last-child { |
| | | margin: 0; |
| | |
| | | |
| | | .main_container { |
| | | width: 100%; |
| | | height: calc(100% - 35px); |
| | | height: calc(100% - 38px); |
| | | |
| | | .scroll_container { |
| | | width: 100%; |
| | |
| | | color: #01D9FE; |
| | | |
| | | &:nth-child(5) { |
| | | flex: 2.7; |
| | | |
| | | flex: 3; |
| | | |
| | | } |
| | | } |
| | | } |
| | |
| | | |
| | | &:nth-child(5) { |
| | | flex: 3; |
| | | |
| | | justify-content: start; |
| | | } |
| | | .scroll_item_row_item { |
| | | margin-top: -11px; |
| | |
| | | |
| | | .content_center_bottom { |
| | | width: 100%; |
| | | height: 284px; |
| | | // height: 284px; |
| | | height: calc(100vh - 690px); |
| | | flex: 2; |
| | | .content_center_bottom_head { |
| | | width: 100%; |
| | |
| | | left: 50%; |
| | | transform: translate(-50%, -50%); |
| | | z-index: 999; |
| | | width: 114px; |
| | | height: 114px; |
| | | width: 100px; |
| | | height: 100px; |
| | | border-radius: 50%; |
| | | border: 2px dashed #01D9FE; |
| | | display: flex; |
| | |
| | | |
| | | .content_right_bottom { |
| | | width: 100%; |
| | | height: 284px; |
| | | // height: 284px; |
| | | |
| | | height: calc(100vh - 690px); |
| | | .content_right_bottom_head { |
| | | width: 100%; |
| | | height: 38px; |