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

窑炉

Browse Source
This commit is contained in:
朱菊兰
2024-01-03 14:08:49 +08:00
parent 75aa253a29
commit 53f2b242a4
26 changed files with 1357 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/views/databoard/wholePlant/DefectStatistics.vue Normal file
View File

@@ -0,0 +1,34 @@
<template>
<div style="flex: 1;">
<Container name="产线缺陷统计" size="small">
<SelectorBtnGroup class="timeToggle" :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime' />
</Container>
</div>
</template>
<script>
import Container from '../components/Container';
import SelectorBtnGroup from '../components/SelectorBtnGroup';
export default {
name: 'DefectStatistics',
components: { Container, SelectorBtnGroup },
data() {
return {
chartTime:'日'
}
},
methods: {
// 切换时间
toggleDate(val) {
console.log('时间' + val)
this.chartTime = val
}
}
}
</script>
<style lang='scss' scoped>
.timeToggle {
position: absolute;
right: 0;
}
</style>

2
src/views/databoard/wholePlant/LeftTwo.vue
View File

@@ -4,7 +4,7 @@
style="
display: grid;
gap: 16px;
grid-template-rows: 462px 462px;
grid-template-rows: 308px 616px;
">
<OrderStatus />
<YieldRate />

12
src/views/databoard/wholePlant/MiddleTwo.vue
View File

@@ -4,19 +4,19 @@
style="
display: grid;
gap: 16px;
grid-template-rows: 462px 462px;
grid-template-rows: 605px 320px;
">
<OrderStatus />
<YieldRate />
<GasHandle />
<DefectStatistics />
</div>
</template>
<script>
import OrderStatus from './OrderStatus.vue';
import YieldRate from './YieldRate.vue';
import GasHandle from './../kiln/GasHandle';
import DefectStatistics from './DefectStatistics';
export default {
name: 'MiddleFour',
components: { OrderStatus, YieldRate },
components: { GasHandle, DefectStatistics },
props: {},
data() {
return {};

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

@@ -1,14 +1,155 @@
<template>
<div style="flex: 1;">
<Container name="订单完成情况" size="small" style="">
digndna
<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>
</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'
export default {
name: 'OrderStatus',
filters: {
commonFilter: (source, filterType = a => a) => {
return filterType(source)
}
},
components: { Container },
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, 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>
</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>

6
src/views/databoard/wholePlant/RightTwo.vue
View File

@@ -6,17 +6,17 @@
gap: 16px;
grid-template-rows: 462px 462px;
">
<OrderStatus />
<EnergeCost />
<YieldRate />
</div>
</template>
<script>
import OrderStatus from './OrderStatus.vue';
import EnergeCost from './../kiln/EnergeCost.vue';
import YieldRate from './YieldRate.vue';
export default {
name: 'RightFour',
components: { OrderStatus, YieldRate },
components: { EnergeCost, YieldRate },
props: {},
data() {
return {};

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

@@ -1,14 +1,127 @@
<template>
<div style="flex: 1;">
<div style="flex: 2;" class="aaa">
<Container name="本日生产良品率" size="small" style="">
0000987
<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>
</Container>
</div>
</template>
<script>
import Container from '../components/Container.vue';
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'
export default {
name: 'YieldRate',
filters: {
commonFilter: (source, filterType = a => a) => {
return filterType(source)
}
},
components: { Container },
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: '名称名称'}
]
}
},
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>
</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>

8
src/views/databoard/wholePlant/index.vue
View File

@@ -8,8 +8,8 @@
position: absolute;
transform-origin: 16px 8px;
font-size: 16px;
top: -8px;
left: -16px;
top: 0px;
left: 0px;
width: 1920px;
height: 1080px;
display: flex;
@@ -42,7 +42,6 @@ import MiddleTwo from './MiddleTwo';
import RightTwo from './RightTwo';
import screenfull from 'screenfull'
import { debounce } from '@/utils/debounce'
import { getDcsMsg, getMesMsg } from './../utils/wsInterface'
export default {
name: 'wholePlantBoard',
@@ -77,9 +76,6 @@ export default {
window.addEventListener('resize', () => {
this.boxReset()
})
// closeWebsocket()
// getDcsMsg()
// getMesMsg()
console.log('mounted...........')
},
destroyed() {