首页样式
This commit is contained in:
108
src/views/home/components/Count.vue
Normal file
108
src/views/home/components/Count.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<ModelBox name='1-3'>
|
||||
<div class='count-box'>
|
||||
<div class='count-tip-box'>
|
||||
<div class='item'>
|
||||
<p class='num'>2,344</p>
|
||||
<p class='title'>本班合计</p>
|
||||
</div>
|
||||
<div class='split'></div>
|
||||
<div class='item'>
|
||||
<p class='num'>2,344</p>
|
||||
<p class='title'>本日合计</p>
|
||||
</div>
|
||||
</div>
|
||||
<dv-scroll-board :config="config" style="width:580px;height:180px;margin-top: 10px;" class='count-table'/>
|
||||
<span class='split-line' style='left: 70px;'></span>
|
||||
<span class='split-line' style='left: 195px;'></span>
|
||||
<span class='split-line' style='left: 320px;'></span>
|
||||
<span class='split-line' style='left: 445px;'></span>
|
||||
</div>
|
||||
</ModelBox>
|
||||
</template>
|
||||
<script>
|
||||
import ModelBox from './ModelBox.vue';
|
||||
export default {
|
||||
name: 'Count',
|
||||
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: 30,
|
||||
headerBGC: '#E8EDF8',
|
||||
oddRowBGC:'#E8EDF8',
|
||||
evenRowBGC:'#fff',
|
||||
rowNum: 5,
|
||||
columnWidth: [70, 125, 125, 125, 130],
|
||||
align : ['center', 'center', 'center', 'center', 'center'],
|
||||
data: [
|
||||
['<span style="color:#000;">1</span>', '<span style="color:#000;">A1</span>', '<span style="color:#000;">23</span>', '<span style="color:#000;">234</span>', '<span style="color:#000;">234</span>'],
|
||||
['<span style="color:#000;">2</span>', '<span style="color:#000;">A2</span>', '<span style="color:#000;">13</span>', '<span style="color:#000;">234</span>','<span style="color:#000;">234</span>'],
|
||||
['<span style="color:#000;">3</span>', '<span style="color:#000;">A3</span>', '<span style="color:#000;">24</span>', '<span style="color:#000;">234</span>', '<span style="color:#000;">234</span>'],
|
||||
['<span style="color:#000;">4</span>', '<span style="color:#000;">A4</span>', '<span style="color:#000;">45</span>', '<span style="color:#000;">234</span>', '<span style="color:#000;">234</span>'],
|
||||
['<span style="color:#000;">5</span>', '<span style="color:#000;">A5</span>', '<span style="color:#000;">55</span>', '<span style="color:#000;">234</span>', '<span style="color:#000;">234</span>']
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.count-box {
|
||||
position: relative;
|
||||
.count-tip-box {
|
||||
margin-bottom: 20px;
|
||||
.split {
|
||||
width: 2px;
|
||||
height: 40px;
|
||||
background: #CDD3DF;
|
||||
display: inline-block;
|
||||
}
|
||||
.item:first-child {
|
||||
padding-right: 55px;
|
||||
text-align: right;
|
||||
}
|
||||
.item:last-child {
|
||||
padding-left: 55px;
|
||||
}
|
||||
.item {
|
||||
display: inline-block;
|
||||
width: 270px;
|
||||
box-sizing: border-box;
|
||||
p{
|
||||
margin: 0;
|
||||
}
|
||||
.num {
|
||||
font-weight: 500;
|
||||
font-size: 28px;
|
||||
color: #155EFF;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.title {
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,0.5);
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.count-table {
|
||||
box-shadow: 0px 2px 4px 0px #D5DAE6;
|
||||
}
|
||||
.split-line {
|
||||
position: absolute;
|
||||
top: 77px;
|
||||
width: 1px;
|
||||
height: 180px;
|
||||
background: #CDD3DF;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
60
src/views/home/components/EqAlarm.vue
Normal file
60
src/views/home/components/EqAlarm.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<ModelBox name='1-2'>
|
||||
<div class='eq-alarm'>
|
||||
<dv-scroll-board :config="config" style="width:580px;height:250px;margin-top: 10px;" />
|
||||
<span class='split-line' style='left: 66px;'></span>
|
||||
<span class='split-line' style='left: 226px;'></span>
|
||||
<span class='split-line' style='left: 366px;'></span>
|
||||
</div>
|
||||
</ModelBox>
|
||||
</template>
|
||||
<script>
|
||||
import ModelBox from './ModelBox.vue';
|
||||
export default {
|
||||
name: 'EqAlarm',
|
||||
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>'],
|
||||
headerHeight: 25,
|
||||
headerBGC: '#E8EDF8',
|
||||
oddRowBGC:'#E8EDF8',
|
||||
evenRowBGC:'#fff',
|
||||
rowNum: 8,
|
||||
columnWidth: [66, 160, 140, 214],
|
||||
align : ['center', 'center', 'center', 'center'],
|
||||
data: [
|
||||
['<span style="color:#000;">1</span>', '<span style="color:#000;">2014/12/28 19:20</span>', '<span style="color:#000;">A-1打孔机</span>', '<span style="color:#000;">各种报警内容</span>'],
|
||||
['<span style="color:#000;">2</span>', '<span style="color:#000;">2014/12/28 19:20</span>', '<span style="color:#000;">A-2打孔机</span>', '<span style="color:#000;">各种报警内容</span>'],
|
||||
['<span style="color:#000;">3</span>', '<span style="color:#000;">2014/12/28 19:20</span>', '<span style="color:#000;">A-2打孔机</span>', '<span style="color:#000;">各种报警内容</span>'],
|
||||
['<span style="color:#000;">4</span>', '<span style="color:#000;">2014/12/28 19:20</span>', '<span style="color:#000;">A-2打孔机</span>', '<span style="color:#000;">各种报警内容</span>'],
|
||||
['<span style="color:#000;">5</span>', '<span style="color:#000;">2014/12/28 19:20</span>', '<span style="color:#000;">A-2打孔机</span>', '<span style="color:#000;">各种报警内容</span>'],
|
||||
['<span style="color:#000;">6</span>', '<span style="color:#000;">2014/12/28 19:20</span>', '<span style="color:#000;">A-2打孔机</span>', '<span style="color:#000;">各种报警内容</span>'],
|
||||
['<span style="color:#000;">7</span>', '<span style="color:#000;">2014/12/28 19:20</span>', '<span style="color:#000;">A-2打孔机</span>', '<span style="color:#000;">各种报警内容</span>'],
|
||||
['<span style="color:#000;">8</span>', '<span style="color:#000;">2014/12/28 19:20</span>', '<span style="color:#000;">A-2打孔机</span>', '<span style="color:#000;">各种报警内容</span>']
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.eq-alarm {
|
||||
position: relative;
|
||||
.split-line {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 1px;
|
||||
height: 250px;
|
||||
background: #CDD3DF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
60
src/views/home/components/HomeHeader.vue
Normal file
60
src/views/home/components/HomeHeader.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div class='header'>
|
||||
<span class='title'>生产驾驶舱</span>
|
||||
<span class='time'>刷新时间：{{time}}</span>
|
||||
<svg-icon icon-class="refresh" class='refresh-btn' @click='refreshData'/>
|
||||
<el-button type="text" class="screen-btn" @click="changeFullScreen">
|
||||
<svg-icon v-if="isFullScreen" icon-class="unFullscreen" />
|
||||
<svg-icon v-else icon-class="fullscreen" />
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import moment from 'moment/moment';
|
||||
export default {
|
||||
props: {
|
||||
isFullScreen: false
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
time: moment().format('HH:mm:ss YYYY.MM.DD')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeFullScreen() {
|
||||
this.$emit('screenfullChange');
|
||||
},
|
||||
refreshData() {
|
||||
this.time = moment().format('HH:mm:ss YYYY.MM.DD')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.header {
|
||||
position: relative;
|
||||
.title {
|
||||
font-size: 28px;
|
||||
color:'#000';
|
||||
letter-spacing: 2px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.time {
|
||||
font-size: 14px;
|
||||
color:'#000';
|
||||
margin-right: 8px;
|
||||
}
|
||||
.refresh-btn {
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.screen-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
130
src/views/home/components/LineInpurAndOutput.vue
Normal file
130
src/views/home/components/LineInpurAndOutput.vue
Normal 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>
|
||||
165
src/views/home/components/LineRate.vue
Normal file
165
src/views/home/components/LineRate.vue
Normal file
@@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<ModelBox name='3-1'>
|
||||
<div class='line-rate'>
|
||||
<div class='legend-box'>
|
||||
<div class='legend-item' v-for='(item, index) in legendArr' :key='index'>
|
||||
<span class='dot' :style='{backgroundColor: item.color,"--dot-color": item.color}'></span>
|
||||
<span class='name'>{{item.name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id='lineRate' style='width: 584px; height: 270px;'></div>
|
||||
</div>
|
||||
</ModelBox>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import ModelBox from './ModelBox.vue';
|
||||
export default {
|
||||
name: 'LineRate',
|
||||
components: {
|
||||
ModelBox
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
legendArr:[
|
||||
{color:'#FFCE6A', name:'A1'},
|
||||
{color:'#21CECD', name:'A2'},
|
||||
{color:'#77B4FD', name:'A3'},
|
||||
{color:'#29BDFA', name:'A4'},
|
||||
{color:'#5A7DDA', name:'A5'},
|
||||
{color:'#FFB49D', name:'A6'},
|
||||
{color:'#C5A6FC', name:'A7'},
|
||||
{color:'#7164FF', name:'A8'},
|
||||
{color:'#98B0C7', name:'A9'},
|
||||
{color:'#5D7092', name:'A10'}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getChart()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
|
||||
},
|
||||
getChart() {
|
||||
var chartDom = document.getElementById('lineRate');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
color: ['#FFCE6A', '#21CECD', '#77B4FD', '#29BDFA', '#5A7DDA', '#FFB49D', '#C5A6FC', '#7164FF', '#98B0C7', '#5D7092'],
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
grid: {
|
||||
top: 32,
|
||||
left: 10,
|
||||
right: 15,
|
||||
bottom: 5,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
show:true,
|
||||
lineStyle:{
|
||||
color: 'rgba(0,0,0,0.45)'
|
||||
}
|
||||
},
|
||||
data: ['6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
formatter: '{value}%'
|
||||
},
|
||||
axisLine: {
|
||||
show:false,
|
||||
lineStyle:{
|
||||
color: 'rgba(0,0,0,0.45)'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'A1',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
data: [82, 13, 10, 33, 90, 23, 71]
|
||||
},
|
||||
{
|
||||
name: 'A2',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
data: [22, 38, 59, 23, 99, 33, 31]
|
||||
},
|
||||
{
|
||||
name: 'A3',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
data: [15, 43, 20, 95, 89, 33, 41]
|
||||
},
|
||||
{
|
||||
name: 'A4',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
data: [32, 33, 30, 33, 39, 33, 32]
|
||||
},
|
||||
{
|
||||
name: 'A5',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
data: [82, 93, 90, 93, 29, 33, 32]
|
||||
}
|
||||
]
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.line-rate {
|
||||
position: relative;
|
||||
.legend-box {
|
||||
width: 280px;
|
||||
height: 35px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top:-20px;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
.legend-item {
|
||||
width: 55px;
|
||||
.dot {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
position: relative;
|
||||
}
|
||||
.dot::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 2px;
|
||||
background-color: var(--dot-color);
|
||||
position: absolute;
|
||||
top:3px;
|
||||
left: -3px;
|
||||
}
|
||||
.name{
|
||||
font-size: 14px;
|
||||
color: #8C8C8C;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
163
src/views/home/components/LossSum.vue
Normal file
163
src/views/home/components/LossSum.vue
Normal file
@@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<ModelBox name='1-1'>
|
||||
<div class='loss-sum'>
|
||||
<SwitchBtn class='switch-btn' @chooseBtn='chooseBtn'/>
|
||||
<div id='lossSum' style='width: 584px; height: 270px;'></div>
|
||||
</div>
|
||||
</ModelBox>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import ModelBox from './ModelBox.vue';
|
||||
import SwitchBtn from './SwitchBtn.vue';
|
||||
export default {
|
||||
name: 'LossSum',
|
||||
components: {
|
||||
ModelBox,
|
||||
SwitchBtn
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getChart()
|
||||
},
|
||||
methods: {
|
||||
getChart() {
|
||||
var chartDom = document.getElementById('lossSum');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
color: ['#FFCE6A', '#96F0B1', '#63BDFF', '#288AFF', '#AC8BFF', '#7164FF', '#3B2BFD'],
|
||||
legend: {
|
||||
top:18,
|
||||
right:5,
|
||||
itemWidth:8,
|
||||
itemHeight:8,
|
||||
textStyle:{
|
||||
color: '#8C8C8C',
|
||||
fontSize: '14px'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 50,
|
||||
left: 10,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
formatter: function(params) {
|
||||
let result = `<span>${params[0].name}</span><br/>`;
|
||||
params.forEach(item => {
|
||||
result += `<div style="display:flex;align-items:center;">
|
||||
<span style="display:inline-block;width:8px;height:8px;background:${item.color};margin-right:5px;"></span>
|
||||
<span style="display:inline-block;margin-right:20px;">${item.seriesName}</span>
|
||||
<span style="font-weight:bold;">${item.value}</span><br/>
|
||||
</div>`;
|
||||
});
|
||||
return result;
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
show:true,
|
||||
lineStyle:{
|
||||
color: 'rgba(0,0,0,0.45)'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show:false
|
||||
},
|
||||
data:['A1', 'A2', 'A3', 'A4', 'A5']
|
||||
},
|
||||
yAxis: {
|
||||
name:'单位/片',
|
||||
nameTextStyle:{
|
||||
color: 'rgba(0,0,0,0.45)',
|
||||
fontSize: '14px'
|
||||
},
|
||||
axisLine: {
|
||||
show:true,
|
||||
lineStyle:{
|
||||
color: 'rgba(0,0,0,0.45)'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '包装',
|
||||
type: 'bar',
|
||||
barGap: '30%',
|
||||
barWidth: 8,
|
||||
data: [433, 858, 937, 926, 928]
|
||||
},
|
||||
{
|
||||
name: '上片',
|
||||
type: 'bar',
|
||||
barGap: '30%',
|
||||
barWidth: 8,
|
||||
data: [831, 734, 551, 864, 810]
|
||||
},
|
||||
{
|
||||
name: '磨边',
|
||||
type: 'bar',
|
||||
barGap: '30%',
|
||||
barWidth: 8,
|
||||
data: [864, 652, 825, 810, 810]
|
||||
},
|
||||
{
|
||||
name: '打孔',
|
||||
type: 'bar',
|
||||
barGap: '30%',
|
||||
barWidth: 8,
|
||||
data: [724, 539, 391, 810, 810]
|
||||
},
|
||||
{
|
||||
name: '丝印',
|
||||
type: 'bar',
|
||||
barGap: '30%',
|
||||
barWidth: 8,
|
||||
data: [831, 734, 551, 864, 810]
|
||||
},
|
||||
{
|
||||
name: '镀膜',
|
||||
type: 'bar',
|
||||
barGap: '30%',
|
||||
barWidth: 8,
|
||||
data: [864, 652, 825, 810, 810]
|
||||
},
|
||||
{
|
||||
name: '钢化',
|
||||
type: 'bar',
|
||||
barGap: '30%',
|
||||
barWidth: 8,
|
||||
data: [433, 858, 937, 926, 928]
|
||||
},
|
||||
]
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
chooseBtn(val) {
|
||||
console.log(val)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.loss-sum {
|
||||
position: relative;
|
||||
.switch-btn {
|
||||
position: absolute;
|
||||
right: -3px;
|
||||
top: -27px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
85
src/views/home/components/ModelBox.vue
Normal file
85
src/views/home/components/ModelBox.vue
Normal file
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div class='model-box' :style='{width: width + "px", height: height + "px"}'>
|
||||
<div>
|
||||
<img :src="icon" alt="" width='24' height='24' class='icon'>
|
||||
<span class='model-title'>{{title}}</span>
|
||||
</div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import img1 from './../assets/img/1-1.png';
|
||||
import img2 from './../assets/img/1-2.png';
|
||||
import img3 from './../assets/img/1-3.png';
|
||||
import img4 from './../assets/img/2-1.png';
|
||||
import img5 from './../assets/img/2-2.png';
|
||||
import img6 from './../assets/img/3-1.png';
|
||||
export default {
|
||||
name: 'ModelBox',
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
title: '',
|
||||
icon:'',
|
||||
width: 618,
|
||||
height: 322
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getTitle()
|
||||
},
|
||||
methods: {
|
||||
getTitle () {
|
||||
switch (this.name) {
|
||||
case '1-1':
|
||||
this.title = '工段损耗汇总'
|
||||
this.icon = img1
|
||||
break;
|
||||
case '1-2':
|
||||
this.title = '设备报警'
|
||||
this.icon = img2
|
||||
break;
|
||||
case '1-3':
|
||||
this.title = '托数统计'
|
||||
this.icon = img3
|
||||
break;
|
||||
case '2-1':
|
||||
this.title = '工段投入和产出'
|
||||
this.icon = img4
|
||||
break;
|
||||
case '3-1':
|
||||
this.title = '产线加工成品率'
|
||||
this.icon = img6
|
||||
break;
|
||||
default:
|
||||
this.title = '产线投入和产出'
|
||||
this.icon = img5
|
||||
this.width = 1253
|
||||
this.height = 660
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.model-box {
|
||||
background: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #FFFFFF;
|
||||
padding: 14px 16px;
|
||||
.icon {
|
||||
vertical-align: bottom;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.model-title{
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
136
src/views/home/components/SectionInputAndOutput.vue
Normal file
136
src/views/home/components/SectionInputAndOutput.vue
Normal file
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<ModelBox name='2-1'>
|
||||
<div class='section-content'>
|
||||
<SwitchBtn class='switch-btn' @chooseBtn='chooseBtn'/>
|
||||
<div class='section-list'>
|
||||
<div
|
||||
v-for='item in sectionArr'
|
||||
:key='item.id'
|
||||
class='section-item'
|
||||
:class='{acvtive: sectionActive === item.id}'
|
||||
@click='sectionActive = item.id'
|
||||
>{{item.name}}</div>
|
||||
</div>
|
||||
<dv-scroll-board :config="config" style="width:583px;height:220px;" class='section-table'/>
|
||||
<span class='split-line' style='left: 66px;'></span>
|
||||
<span class='split-line' style='left: 186px;'></span>
|
||||
<span class='split-line' style='left: 306px;'></span>
|
||||
<span class='split-line' style='left: 426px;'></span>
|
||||
</div>
|
||||
</ModelBox>
|
||||
</template>
|
||||
<script>
|
||||
import ModelBox from './ModelBox.vue';
|
||||
import SwitchBtn from './SwitchBtn.vue';
|
||||
import arrowGreen from '../assets/img/arrow-green.png';
|
||||
import arrowRed from '../assets/img/arrow-red.png';
|
||||
export default {
|
||||
name: 'SectionInputAndOutput',
|
||||
components: {
|
||||
ModelBox,
|
||||
SwitchBtn
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sectionArr:[
|
||||
{id:'1', name:'上片'},
|
||||
{id:'2', name:'磨边'},
|
||||
{id:'3', name:'打孔'},
|
||||
{id:'4', name:'丝印'},
|
||||
{id:'5', name:'镀膜'},
|
||||
{id:'6', name:'钢化'},
|
||||
{id:'7', name:'包装'}
|
||||
],
|
||||
sectionActive: '1',
|
||||
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: 7,
|
||||
columnWidth: [60, 120, 120, 120, 163],
|
||||
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],
|
||||
]
|
||||
for (let i =0; i < data.length; i++) {
|
||||
arr1.push(`<span style="color:#000;">${data[i][0]}</span>`)
|
||||
arr1.push(`<img src=${arrowRed} width=12 style="margin-right:2px" /><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
|
||||
},
|
||||
chooseBtn(val) {
|
||||
console.log(val)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.section-content {
|
||||
position: relative;
|
||||
.switch-btn {
|
||||
position: absolute;
|
||||
right: -3px;
|
||||
top: -27px;
|
||||
}
|
||||
.section-list {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
padding-top: 20px;
|
||||
cursor: pointer;
|
||||
.section-item {
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
width: 81px;
|
||||
text-align: center;
|
||||
letter-spacing: 4px;
|
||||
background-color: #E8EDF8;
|
||||
}
|
||||
.acvtive {
|
||||
background-color: #0B58FF;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.section-table {
|
||||
margin-top: 2px;
|
||||
box-shadow: 0px 2px 4px 0px #D5DAE6;
|
||||
}
|
||||
.split-line {
|
||||
position: absolute;
|
||||
top: 46px;
|
||||
width: 1px;
|
||||
height: 221px;
|
||||
background: #CDD3DF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
57
src/views/home/components/SwitchBtn.vue
Normal file
57
src/views/home/components/SwitchBtn.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div class='button-box'>
|
||||
<span v-for='(item, index) in btnArr' :key='index' style='display: inline-block;'>
|
||||
<span class='split' v-if='index > 0' :class='{ "split-active": activeIndex === index || activeIndex === index - 1}'>|</span>
|
||||
<span class='button-item' @click='chooseBtn(index)' :class='{ "item-active": activeIndex === index}'>{{item}}</span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'SwitchBtn',
|
||||
data() {
|
||||
return {
|
||||
activeIndex: 1,
|
||||
btnArr: ['本班次', '本日', '本周', '本月']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
chooseBtn(index) {
|
||||
this.activeIndex = index
|
||||
this.$emit('chooseBtn', index)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.button-box {
|
||||
display: inline-block;
|
||||
color: #000;
|
||||
background: #F2F4F9;
|
||||
border-radius: 40px;
|
||||
cursor: pointer;
|
||||
.button-item {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
.item-active {
|
||||
color: #fff;
|
||||
background: #0B58FF;
|
||||
border-radius: 40px;
|
||||
}
|
||||
.split {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
vertical-align: top;
|
||||
color: #686868;
|
||||
}
|
||||
.split-active {
|
||||
color: #F2F4F9;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user