zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

191
src/App.vue
View File

@ -5,95 +5,118 @@
</template> </template>
<script> <script>
import colorTool from '@/utils/color'; import colorTool from '@/utils/color';
export default { export default {
name: 'App', name: 'App',
data() { data() {
return { return {
config: { config: {
size: "default", size: "default",
zIndex: 2000, zIndex: 2000,
button: { button: {
autoInsertSpace: false 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));
} }
} }
} }
},
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> </script>
<style lang="scss"> <style lang="scss">
@import '@/style/style.scss'; @import '@/style/style.scss';
.headerSearch{
width: 120px!important; .headerSearch {
margin-right: 5px; width: 120px !important;
} margin-right: 5px;
.printWrap{ }
width: 100%;
overflow-x: scroll; .printWrap {
} width: 100%;
.printContainer{ overflow-x: scroll;
width: 1075px; }
}
.myTable{ .printContainer {
table-layout: fixed; width: 1075px;
border: 1px solid #cccccc; }
}
.myTableHead{ .myTable {
background: #008080; table-layout: fixed;
color:#ffffff; border: 1px solid #cccccc;
} }
.myTable th{
height: 40px; .myTableHead {
font-weight: 500; background: #008080;
} color: #ffffff;
.myTable td{ }
height: 32px;
padding-left: 5px; .myTable th {
border: 1px solid #cccccc; height: 40px;
} font-weight: 500;
.numCell{ }
height: 35px;
text-align: center; .myTable td {
} height: 32px;
.numCell{ padding-left: 5px;
width: 100px; border: 1px solid #cccccc;
} }
.chartWrap{
width: 1035px; .numCell {
margin-top: 20px; height: 35px;
border: 1px solid #eeeeee; text-align: center;
} }
.chartTitle{
text-align: center; .numCell {
font-size: 20px; width: 100px;
font-weight: bold; }
margin-top: 20px;
} .chartWrap {
.redColor{ width: 1035px;
font-weight: bold; margin-top: 20px;
color: #ff0000; border: 1px solid #eeeeee;
} }
.greenColor{
font-weight: bold; .chartTitle {
color: #008000; 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> </style>

58
src/views/bigScreen/index_10dept.vue
View File

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