feat: 车间看板调整

This commit is contained in:
caoqianming 2023-11-06 19:16:25 +08:00
parent f3ece1dd0e
commit 6c4b1f75d1
2 changed files with 144 additions and 105 deletions

View File

@ -5,8 +5,8 @@
</template>
<script>
import colorTool from '@/utils/color';
export default {
import colorTool from '@/utils/color';
export default {
name: 'App',
data() {
return {
@ -20,80 +20,103 @@
}
},
computed: {
locale(){
locale() {
return this.$i18n.messages[this.$i18n.locale].el
},
},
created() {
//
const app_color = this.$CONFIG.COLOR || this.$TOOL.data.get('APP_COLOR')
if(app_color){
if (app_color) {
document.documentElement.style.setProperty('--el-color-primary', app_color);
for (let i = 1; i <= 9; i++) {
document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorTool.lighten(app_color,i/10));
document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorTool.lighten(app_color, i / 10));
}
for (let i = 1; i <= 9; i++) {
document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, colorTool.darken(app_color,i/10));
}
document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, colorTool.darken(app_color, i / 10));
}
}
}
}
</script>
<style lang="scss">
@import '@/style/style.scss';
.headerSearch{
width: 120px!important;
@import '@/style/style.scss';
.headerSearch {
width: 120px !important;
margin-right: 5px;
}
.printWrap{
}
.printWrap {
width: 100%;
overflow-x: scroll;
}
.printContainer{
}
.printContainer {
width: 1075px;
}
.myTable{
}
.myTable {
table-layout: fixed;
border: 1px solid #cccccc;
}
.myTableHead{
}
.myTableHead {
background: #008080;
color:#ffffff;
}
.myTable th{
color: #ffffff;
}
.myTable th {
height: 40px;
font-weight: 500;
}
.myTable td{
}
.myTable td {
height: 32px;
padding-left: 5px;
border: 1px solid #cccccc;
}
.numCell{
}
.numCell {
height: 35px;
text-align: center;
}
.numCell{
}
.numCell {
width: 100px;
}
.chartWrap{
}
.chartWrap {
width: 1035px;
margin-top: 20px;
border: 1px solid #eeeeee;
}
.chartTitle{
}
.chartTitle {
text-align: center;
font-size: 20px;
font-weight: bold;
margin-top: 20px;
}
.redColor{
}
.redColor {
font-weight: bold;
color: #ff0000;
}
.greenColor{
}
.greenColor {
font-weight: bold;
color: #008000;
}
}
#table1.el-table,
#table1.el-table tr,
#table1.el-table .el-table__body-wrapper,
#table1.el-table .el-table__header-wrapper .el-table__row,
#table1.el-table .el-table__body-wrapper .el-table__row,
#table1.el-table td.el-table__cell,
#table1.el-table th.el-table__cell.is-leaf {
background: rgba(0, 0, 0, 0);
}
</style>

View File

@ -9,7 +9,7 @@
<el-row style="height: 29%" :gutter="10">
<el-col :xs="8" :md="8">
<div class="box">
<div class="boxtitle">
<div class="boxtitle bgimg">
<div class="boxlabel"></div>
<div>今日任务</div>
</div>
@ -23,7 +23,7 @@
</el-col>
<el-col :xs="8" :md="8">
<div class="box">
<div class="boxtitle">
<div class="boxtitle bgimg">
<div class="boxlabel"></div>
<div>昨日合格</div>
</div>
@ -36,7 +36,7 @@
</el-col>
<el-col :xs="8" :md="8">
<div class="box">
<div class="boxtitle">
<div class="boxtitle bgimg">
<div class="boxlabel"></div>
<div>累计合格</div>
</div>
@ -53,20 +53,17 @@
<el-col>
<div class="box">
<div class="boxtitle">
<div class="boxlabel"></div>
<div>人员到岗</div>
<div style="border-bottom:4px solid green;padding-bottom:5px;display:inline-block;">人员到岗
</div>
</div>
<div style="height: 4px;"></div>
<div class="boxmain">
<!-- <el-table :data="workerData"
:row-style="{ backgroundColor: 'rgba(0,0,0,0)', color: 'white' }"
:header-row-style="{ backgroundColor: 'rgba(0,0,0,0)', fontSize: '14px' }">
<el-table-column prop="name" label="姓名" width="180" />
<el-table-column prop="team" label="班次" width="180" />
<el-table :data="workerData" id="table1">
<el-table-column prop="name" label="姓名" />
<el-table-column prop="team" label="班次" />
<el-table-column prop="post" label="岗位" />
<el-table-column prop="state" label="状态" />
</el-table> -->
<table border="0" cellspacing="16">
</el-table>
<!-- <table border="0" cellspacing="16">
<tbody>
<tr>
<th>序号</th>
@ -118,7 +115,7 @@
<td><el-tag type="warning" effect="light">生产中</el-tag></td>
</tr>
</tbody>
</table>
</table> -->
</div>
</div>
</el-col>
@ -227,14 +224,15 @@
</template>
<style scoped>
.dashboard {
background: #000d4a;
background-image: url("https://cdn-upload.datav.aliyun.com/upload/download/1678758744858-EWBrlDVf.jpg");
/* url("/public/img/bg.jpg"); */
color: #fff;
font-family: "微软雅黑" !important;
}
.header {
background: url("/public/img/head_bg.png");
/* background: url("/public/img/head_bg.png"); */
background: url("https://cdn-upload.datav.aliyun.com/upload/download/1675143770257-pNifja_p.webp");
background-size: 100% 100%;
font-size: 28px;
justify-content: center;
@ -257,18 +255,24 @@
color: #fff;
font-size: 14px;
display: flex;
height: 18px;
height: 25px;
}
.bgimg {
background-image: url('https://cdn-upload.datav.aliyun.com/upload/download/1678762309227-E6RP8z2R.png');
background-size: 100% 100%;
}
.boxlabel {
width: 6px;
background: #49bcf7;
width: 8px;
/* background: #49bcf7;
border-radius: 30%;
margin-right: 4px
margin-right: 4px */
}
.boxmain {
height: calc(100% - 22px);
height: calc(100% - 25px);
margin: 0px 4px 0px 4px;
}
@ -306,6 +310,18 @@ table td {
border-bottom: 1px solid rgba(255, 255, 255, .3);
padding: .1rem 0;
}
.lineDiv {
height: 4px;
border-top: 1px solid #eeeeee;
position: relative;
}
.lineDivBlock {
position: absolute;
width: 10%;
height:
}
</style>
<script>
import * as echarts from "echarts";