feat: 车间看板调整
This commit is contained in:
parent
f3ece1dd0e
commit
6c4b1f75d1
191
src/App.vue
191
src/App.vue
|
|
@ -5,95 +5,118 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import colorTool from '@/utils/color';
|
||||
export default {
|
||||
name: 'App',
|
||||
data() {
|
||||
return {
|
||||
config: {
|
||||
size: "default",
|
||||
zIndex: 2000,
|
||||
button: {
|
||||
autoInsertSpace: false
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
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){
|
||||
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));
|
||||
}
|
||||
for (let i = 1; i <= 9; i++) {
|
||||
document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, colorTool.darken(app_color,i/10));
|
||||
import colorTool from '@/utils/color';
|
||||
export default {
|
||||
name: 'App',
|
||||
data() {
|
||||
return {
|
||||
config: {
|
||||
size: "default",
|
||||
zIndex: 2000,
|
||||
button: {
|
||||
autoInsertSpace: false
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
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) {
|
||||
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));
|
||||
}
|
||||
for (let i = 1; i <= 9; i++) {
|
||||
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;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.printWrap{
|
||||
width: 100%;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
.printContainer{
|
||||
width: 1075px;
|
||||
}
|
||||
.myTable{
|
||||
table-layout: fixed;
|
||||
border: 1px solid #cccccc;
|
||||
}
|
||||
.myTableHead{
|
||||
background: #008080;
|
||||
color:#ffffff;
|
||||
}
|
||||
.myTable th{
|
||||
height: 40px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.myTable td{
|
||||
height: 32px;
|
||||
padding-left: 5px;
|
||||
border: 1px solid #cccccc;
|
||||
}
|
||||
.numCell{
|
||||
height: 35px;
|
||||
text-align: center;
|
||||
}
|
||||
.numCell{
|
||||
width: 100px;
|
||||
}
|
||||
.chartWrap{
|
||||
width: 1035px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #eeeeee;
|
||||
}
|
||||
.chartTitle{
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.redColor{
|
||||
font-weight: bold;
|
||||
color: #ff0000;
|
||||
}
|
||||
.greenColor{
|
||||
font-weight: bold;
|
||||
color: #008000;
|
||||
}
|
||||
@import '@/style/style.scss';
|
||||
|
||||
.headerSearch {
|
||||
width: 120px !important;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.printWrap {
|
||||
width: 100%;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
.printContainer {
|
||||
width: 1075px;
|
||||
}
|
||||
|
||||
.myTable {
|
||||
table-layout: fixed;
|
||||
border: 1px solid #cccccc;
|
||||
}
|
||||
|
||||
.myTableHead {
|
||||
background: #008080;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.myTable th {
|
||||
height: 40px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.myTable td {
|
||||
height: 32px;
|
||||
padding-left: 5px;
|
||||
border: 1px solid #cccccc;
|
||||
}
|
||||
|
||||
.numCell {
|
||||
height: 35px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.numCell {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.chartWrap {
|
||||
width: 1035px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #eeeeee;
|
||||
}
|
||||
|
||||
.chartTitle {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.redColor {
|
||||
font-weight: bold;
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
Loading…
Reference in New Issue