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

SJG样式

Browse Source
This commit is contained in:
朱菊兰
2024-01-05 11:03:08 +08:00
parent bd1c02b24a
commit d42786e7ed
13 changed files with 256 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/databoard/components/EnergeMonitoringChart.vue
View File

@@ -118,7 +118,7 @@ export default {
{
name: '电耗能',
type: 'bar',
// barWidth: 12,
barWidth: 20,
tooltip: {
valueFormatter: function (value) {
return value + ' ml';

20
src/views/databoard/components/NumRateChart.vue
View File

@@ -47,9 +47,9 @@ export default {
let outputNum = []
let passRate = []
this.productline && this.productline.length > 0 && this.productline.map(item => {
xData.push(itme.productionLineId)
outputNum.push(itme.outputNum)
passRate.push(item.passRate)
xData.push(item.lineName)
outputNum.push(item.outputNum)
passRate.push(item.passRate*100)
})
var option = {
grid: { top: 32, right: 60, bottom: 20, left: 60 },
@@ -70,7 +70,7 @@ export default {
xAxis: [
{
type: 'category',
data: ['Y61', 'Y62', 'Y63', 'Y64', 'Y65', 'Y66', 'Y67'],
data: xData,
axisLabel: {
color: "#fff",
fontSize: 12,
@@ -91,9 +91,6 @@ export default {
{
type: 'value',
name: '产量/片',
// min: 0,
// max: 250,
// interval: 50,
axisLabel: {
color: "#fff",
fontSize: 12,
@@ -114,9 +111,6 @@ export default {
{
type: 'value',
name: '良品率',
min: 0,
max: 25,
interval: 5,
axisLabel: {
color: "#fff",
fontSize: 12,
@@ -151,9 +145,7 @@ export default {
{ offset: 1, color: '#364BFE' }
])
},
data: [
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
]
data: outputNum
},
{
name: '合格率',
@@ -177,7 +169,7 @@ export default {
lineStyle: {
width: 1
},
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
data: passRate
}
]
};

38
src/views/databoard/components/ScrollBoard.vue Normal file
View File

@@ -0,0 +1,38 @@
<template>
<div class="scroll-board-container">
<dv-scroll-board :config="config" :style="{'width':width,'height':height}" />
</div>
</template>
<script>
export default {
name: 'ScrollBoard',
props: {
config: {
type: Object,
default: () => ({})
},
width:{
type: String,
default: '600px'
},
height:{
type: String,
default: '380px'
}
},
data() {
return {
}
}
}
</script>
<style lang='scss'>
.scroll-board-container {
.dv-scroll-board .rows .ceil, .dv-scroll-board .header .header-item {
border-right: 1px solid rgba(13, 23, 40, 1);
}
.dv-scroll-board .rows .ceil:last-child, .dv-scroll-board .header .header-item:last-child {
border-right: none;
}
}
</style>

33
src/views/databoard/deepProcessing/DefectSum.vue
View File

@@ -1,14 +1,43 @@
<template>
<div style="flex: 1;">
<Container name="各工序缺陷汇总" size="small" style="">
设备报警
<div style="padding: 5px 10px;">
<ScrollBoard :config = "config" width='575px' height='380px'/>
</div>
</Container>
</div>
</template>
<script>
import Container from '../components/Container.vue';
import ScrollBoard from '../components/ScrollBoard'
export default {
name: 'DefectSum',
components: { Container },
components: { Container, ScrollBoard },
data() {
return {
config: {
header: ['序号', '产线', '工序','损耗片数','缺陷类型'],
// headerHeight: '17',
headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
columnWidth: [60],
align: ['center'],
data: [
[1, '产线1', '行1列3', '', ''],
[2, '产线2', '行2列3', '', ''],
[3, '产线3', '行3列3', '', ''],
[4, '产线4', '行4列3', '', ''],
[5, '产线5', '行5列3', '', ''],
[6, '产线6', '行6列3', '', ''],
[7, '产线7', '行7列3', '', ''],
[8, '产线8', '行8列3', '', ''],
[9, '产线9', '行9列3', '', ''],
[10, '产线10', '行10列3', '', '']
],
rowNum: 10
}
}
}
}
</script>

33
src/views/databoard/deepProcessing/EqAlarm.vue
View File

@@ -1,14 +1,43 @@
<template>
<div style="flex: 1;">
<Container name="设备报警" size="small" style="">
设备报警
<div style="padding: 5px 10px;">
<ScrollBoard :config = "config" width='575px' height='380px'/>
</div>
</Container>
</div>
</template>
<script>
import Container from '../components/Container.vue';
import ScrollBoard from '../components/ScrollBoard'
export default {
name: 'EqAlarm',
components: { Container },
components: { Container, ScrollBoard },
data() {
return {
config: {
header: ['序号', '设备名称', '设备编码','设备状态','是否故障'],
// headerHeight: '17',
headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
columnWidth: [60],
align: ['center'],
data: [
[1, '设备1', '行1列3', '', ''],
[2, '设备2', '行2列3', '', ''],
[3, '设备3', '行3列3', '', ''],
[4, '设备4', '行4列3', '', ''],
[5, '设备5', '行5列3', '', ''],
[6, '设备6', '行6列3', '', ''],
[7, '设备7', '行7列3', '', ''],
[8, '设备8', '行8列3', '', ''],
[9, '设备9', '行9列3', '', ''],
[10, '设备10', '行10列3', '', '']
],
rowNum: 10
}
}
}
}
</script>

33
src/views/databoard/deepProcessing/WorkOrderMonitoring.vue
View File

@@ -1,14 +1,43 @@
<template>
<div style="flex: 1;">
<Container name="工单监控" size="small" style="">
设备报警111
<div style="padding: 5px 10px;">
<ScrollBoard :config = "config" width='575px' height='380px'/>
</div>
</Container>
</div>
</template>
<script>
import Container from '../components/Container.vue';
import ScrollBoard from '../components/ScrollBoard'
export default {
name: 'WorkOrderMonitoring',
components: { Container },
components: { Container, ScrollBoard },
data() {
return {
config: {
header: ['序号', '工单名称', '规格','产线','工单状态', '计划完成时间', '计划产量', '实际产量'],
// headerHeight: '17',
headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
columnWidth: [60],
align: ['center'],
data: [
[1, '设备1', '行1列3', '', '','','',''],
[2, '设备2', '行2列3', '', '','','',''],
[3, '设备3', '行3列3', '', '','','',''],
[4, '设备4', '行4列3', '', '','','',''],
[5, '设备5', '行5列3', '', '','','',''],
[6, '设备6', '行6列3', '', '','','',''],
[7, '设备7', '行7列3', '', '','','',''],
[8, '设备8', '行8列3', '', '','','',''],
[9, '设备9', '行9列3', '', '','','',''],
[10, '设备10', '行10列3', '', '','','','']
],
rowNum: 10
}
}
}
}
</script>

2
src/views/databoard/deepProcessing/index.vue
View File

@@ -17,7 +17,7 @@
gap: 24px;
"
:style="{transform:'scale('+scaleNum+')'}">
<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='全厂总览驾驶舱'/>
<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='深加工生产运行驾驶舱'/>
<div
class="main-body"
style="

168
src/views/databoard/wholePlant/OrderStatus.vue
View File

@@ -1,155 +1,43 @@
<template>
<div style="flex: 1;">
<Container name="订单完成情况" size="small" class="wholeOrder">
<div style="width: 100%;padding: 10px; 20px">
<el-table
:header-cell-style="{background:'rgba(4, 74, 132, 0.8)',color:'#fff',height: '40px',lineHeight: '40px', padding: 0,fontSize:'16px'}"
:row-style="setRowStyle"
:data="list"
height="225"
border
style="width: 100%; background: transparent"
>
<el-table-column
v-for="item in tableProps"
:key="item.prop"
:show-overflow-tooltip="item.showOverflowtooltip"
v-bind="item"
>
<template slot-scope="scope">
<component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}" @emitData="emitData" />
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
</template>
</el-table-column>
<slot name="content" />
</el-table>
<Container name="订单完成情况" size="small" style="">
<div style="padding: 5px 10px;">
<ScrollBoard :config = "config" width='575px' height='230px'/>
</div>
</Container>
</div>
</template>
<script>
// :header-cell-style="{background:'rgba(79,114,136,0.29)',color:'#fff'}"
const tableProps = [
{
prop: 'time',
label: '添加时间',
filter: parseTime,
minWidth: 140
},
{
prop: 'name',
label: '订单名称',
minWidth: 120,
showOverflowtooltip: true
},
{
prop: 'code',
label: '订单编码',
minWidth: 180
},
{
prop: 'customerId',
label: '客户',
showOverflowtooltip: true
}
]
import Container from '../components/Container.vue';
import { parseTime } from '@/utils/ruoyi'
import Container from '../components/Container'
import ScrollBoard from '../components/ScrollBoard'
export default {
name: 'OrderStatus',
filters: {
commonFilter: (source, filterType = a => a) => {
return filterType(source)
}
},
components: { Container },
components: { Container, ScrollBoard },
data() {
return {
tableProps,
list:[
{time: '2023-12-12', name: '名称名称'},
{time: '2023-12-13', name: '名称名称'},
{time: '2023-12-14', name: '名称名称'},
{time: '2023-12-15', name: '名称名称'},
{time: '2023-12-16', name: '名称名称'},
{time: '2023-12-17', name: '名称名称'},
{time: '2023-12-18', name: '名称名称'},
{time: '2023-12-19', name: '名称名称'},
{time: '2023-12-20', name: '名称名称'},
{time: '2023-12-21', name: '名称名称'}
]
}
},
mounted() {
},
methods:{
setRowStyle(v) {
if (v.rowIndex % 2 === 0) {
return {
background: 'rgba(11, 84, 153, 0.5)',
color: 'rgba(255,255,255,0.8)',
height: '40px',
lineHeight: '40px',
padding: 0,
fontSize: '16px'
}
} else {
return {
background: 'rgba(4, 74, 132, 0.5)',
color: 'rgba(255,255,255,0.8)',
height: '40px',
lineHeight: '40px',
padding: 0,
fontSize: '16px'
}
config: {
header: ['上线时间', '客户名称', '规格','完成度'],
// headerHeight: '17',
headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
// columnWidth: [60],
align: ['center'],
data: [
['2023-12-01', '客户1', '行1列3', ''],
['2023-12-01', '客户2', '行2列3', ''],
['2023-12-01', '客户3', '行3列3', ''],
['2023-12-01', '客户4', '行4列3', ''],
['2023-12-01', '客户5', '行5列3', ''],
['2023-12-01', '客户6', '行6列3', ''],
['2023-12-01', '客户7', '行7列3', ''],
['2023-12-01', '客户8', '行8列3', ''],
['2023-12-01', '客户9', '行9列3', ''],
['2023-12-01', '客户10', '行10列3', '']
],
rowNum: 6
}
}
}
}
</script>
<style lang='scss'>
.wholeOrder {
.el-table {
border: 0;
}
.el-table::before,.el-table--border::after {
background-color: transparent;
}
.el-table th,td{
border-color: #0D1728 !important;
padding: 0;
}
.el-table tr {
background: transparent;
}
.el-table__row:hover > td {
background-color: rgba(79,114,136,0.29) !important;
}
.el-table__row--striped:hover > td {
background-color: rgba(79,114,136,0.29) !important;
}
// .el-table {
// border: 0;
// }
// .el-table::before,.el-table--border::after {
// background-color: transparent;
// }
// .el-table th,td{
// border-color: #0D1728 !important;
// padding: 0;
// }
// .el-table tr {
// background: transparent;
// }
// .el-table__row:hover > td {
// background-color: rgba(79,114,136,0.29) !important;
// }
// .el-table__row--striped:hover > td {
// background-color: rgba(79,114,136,0.29) !important;
// }
}
</style>
</script>

132
src/views/databoard/wholePlant/YieldRate.vue
View File

@@ -1,127 +1,45 @@
<template>
<div style="flex: 2;" class="aaa">
<Container name="本日生产良品率" size="small" style="">
<el-table
:header-cell-style="{background:'rgba(4, 74, 132, 0.8)',color:'#fff',height: '40px',lineHeight: '40px', padding: 0,fontSize:'16px'}"
:row-style="setRowStyle"
:data="list"
border
style="width: 100%; background: transparent"
>
<el-table-column
v-for="item in tableProps"
:key="item.prop"
:show-overflow-tooltip="item.showOverflowtooltip"
v-bind="item"
>
<template slot-scope="scope">
<component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}" @emitData="emitData" />
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
</template>
</el-table-column>
<slot name="content" />
</el-table>
<ScrollBoard :config = "config" width='575px' height='300px'/>
</Container>
</div>
</template>
<script>
const tableProps = [
{
prop: 'time',
label: '添加时间',
filter: parseTime,
minWidth: 140
},
{
prop: 'name',
label: '订单名称',
minWidth: 120,
showOverflowtooltip: true
},
{
prop: 'code',
label: '订单编码',
minWidth: 180
},
{
prop: 'customerId',
label: '客户',
showOverflowtooltip: true
}
]
import Container from '../components/Container';
import { parseTime } from '@/utils/ruoyi'
import ScrollBoard from '../components/ScrollBoard'
export default {
name: 'YieldRate',
filters: {
commonFilter: (source, filterType = a => a) => {
return filterType(source)
}
},
components: { Container },
components: { Container, ScrollBoard },
data() {
return {
tableProps,
list:[
{time: '2023-12-12', name: '名称名称'},
// {time: '2023-12-13', name: '名称名称'},
// {time: '2023-12-14', name: '名称名称'},
// {time: '2023-12-15', name: '名称名称'},
// {time: '2023-12-16', name: '名称名称'},
// {time: '2023-12-17', name: '名称名称'},
// {time: '2023-12-18', name: '名称名称'},
// {time: '2023-12-19', name: '名称名称'},
// {time: '2023-12-20', name: '名称名称'},
// {time: '2023-12-21', name: '名称名称'}
]
config: {
header: ['序号', '设备名称', '设备编码','设备状态','是否故障'],
// headerHeight: '17',
headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
columnWidth: [60],
align: ['center'],
data: [
[1, '设备1', '行1列3', '', ''],
[2, '设备2', '行2列3', '', ''],
[3, '设备3', '行3列3', '', ''],
[4, '设备4', '行4列3', '', ''],
[5, '设备5', '行5列3', '', ''],
[6, '设备6', '行6列3', '', ''],
[7, '设备7', '行7列3', '', ''],
[8, '设备8', '行8列3', '', ''],
[9, '设备9', '行9列3', '', ''],
[10, '设备10', '行10列3', '', '']
],
rowNum: 10
}
}
},
methods: {
setRowStyle(v) {
if (v.rowIndex % 2 === 0) {
return {
background: 'rgba(11, 84, 153, 1)',
color: 'rgba(255,255,255,0.8)',
height: '40px',
lineHeight: '40px',
padding: 0,
fontSize: '16px'
}
} else {
return {
background: 'rgba(4, 74, 132, 1)',
color: 'rgba(255,255,255,0.8)',
height: '40px',
lineHeight: '40px',
padding: 0,
fontSize: '16px'
}
}
}
}
}
</script>
<style lang='scss'>
.aaa {
.el-table {
border: 0;
}
.el-table::before,.el-table--border::after {
background-color: transparent;
}
.el-table th,td{
border-color: #0D1728 !important;
padding: 0;
}
.el-table tr {
background: transparent;
}
.el-table__row:hover > td {
background-color: rgba(79,114,136,0.29) !important;
}
.el-table__row--striped:hover > td {
background-color: rgba(79,114,136,0.29) !important;
}
}
</style>