mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests 1 Releases Wiki Activity

首页样式

Browse Source
This commit is contained in:
朱菊兰
2025-07-04 17:02:20 +08:00
parent bbd9972761
commit 0b689b5452
27 changed files with 9962 additions and 8725 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
src/views/home/components/LineInpurAndOutput.vue Normal file
View File

@@ -0,0 +1,130 @@
<template>
<ModelBox name='2-2'>
<div class='line-container'>
<div class='table-box'>
<div class='title'>本班次</div>
<dv-scroll-board :config="config" style="width:600px;height:242px;margin-top: 10px;"/>
<span class='split-line' style='left: 66px;'></span>
<span class='split-line' style='left: 186px;'></span>
<span class='split-line' style='left: 311px;'></span>
<span class='split-line' style='left: 437px;'></span>
</div>
<div class='table-box'>
<div class='title'>本日</div>
<dv-scroll-board :config="config" style="width:600px;height:242px;margin-top: 10px;"/>
<span class='split-line' style='left: 66px;'></span>
<span class='split-line' style='left: 186px;'></span>
<span class='split-line' style='left: 311px;'></span>
<span class='split-line' style='left: 437px;'></span>
</div>
<div class='table-box'>
<div class='title'>本周</div>
<dv-scroll-board :config="config" style="width:600px;height:242px;margin-top: 10px;"/>
<span class='split-line' style='left: 66px;'></span>
<span class='split-line' style='left: 186px;'></span>
<span class='split-line' style='left: 311px;'></span>
<span class='split-line' style='left: 437px;'></span>
</div>
<div class='table-box'>
<div class='title'>本月</div>
<dv-scroll-board :config="config" style="width:600px;height:242px;margin-top: 10px;"/>
<span class='split-line' style='left: 66px;'></span>
<span class='split-line' style='left: 186px;'></span>
<span class='split-line' style='left: 311px;'></span>
<span class='split-line' style='left: 437px;'></span>
</div>
</div>
</ModelBox>
</template>
<script>
import ModelBox from './ModelBox.vue';
export default {
name: 'LineInpurAndOutput',
components: {
ModelBox
},
data() {
return {
config:{
header: ['<span style="color:#000;">序号</span>', '<span style="color:#000;">工段</span>', '<span style="color:#000;">投入数量/片</span>', '<span style="color:#000;">产出数量/片</span>','<span style="color:#000;">产出率/%</span>'],
headerHeight: 25,
headerBGC: '#E8EDF8',
oddRowBGC:'#E8EDF8',
evenRowBGC:'#fff',
rowNum: 8,
columnWidth: [66, 120, 125, 126, 174],
align : ['center', 'center', 'center', 'center', 'center'],
data: []
}
}
},
mounted() {
this.getData()
},
methods: {
getData() {
let arr1 = []
let arr2 = []
let data = [
[1,'A1-磨边',234344,234333,100],
[2,'A1-磨边',234344,234333,10],
[3,'A1-磨边',234344,234333,96],
[4,'A1-磨边',234344,234333,20],
[5,'A1-磨边',234344,234333,40],
[6,'A1-磨边',234344,234333,90],
[7,'A1-磨边',234344,234333,80],
[8,'A1-磨边',234344,234333,80],
]
for (let i =0; i < data.length; i++) {
arr1.push(`<span style="color:#000;">${data[i][0]}</span>`)
arr1.push(`<span style="color:#000;">${data[i][1]}</span>`)
arr1.push(`<span style="color:#000;">${data[i][2]}</span>`)
arr1.push(`<span style="color:#000;">${data[i][3]}</span>`)
arr1.push(`<div style="width:136px; margin:0px;">
<div style="display:inline-block;height:8px; background:#D8DEEB; border-radius:4px; overflow:hidden;text-align:left;width:90px">
<div style="width:${data[i][4]}%; height:100%; background:#0B58FF;border-radius:4px;"></div>
</div>
<span style="display:inline-block;margin-left:10px; color:#000; font-size:14px;">${data[i][4]}%</span>
</div>`)
arr2.push(arr1)
arr1 = []
}
this.config.data = arr2
}
}
}
</script>
<style lang='scss' scoped>
.line-container {
display: flex;
height: 600px;
justify-content: space-between;
align-content: space-between;
flex-wrap: wrap;
.table-box {
width: 601px;
height: 300px;
position: relative;
padding-top: 16px;
.title {
width: 271px;
height: 27px;
line-height: 27px;
font-size: 20px;
color: #000000;
letter-spacing: 4px;
text-align: center;
background-image: url(../assets/img/title-bg.png);
background-size: 100% 100%;
margin: 0 auto;
}
.split-line {
position: absolute;
top: 53px;
width: 1px;
height: 242px;
background: #CDD3DF;
}
}
}
</style>