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

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>