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

95
src/App.vue
View File

@ -5,8 +5,8 @@
</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 {
@ -20,80 +20,103 @@
} }
}, },
computed: { computed: {
locale(){ locale() {
return this.$i18n.messages[this.$i18n.locale].el return this.$i18n.messages[this.$i18n.locale].el
}, },
}, },
created() { created() {
//设置主题颜色 //设置主题颜色
const app_color = this.$CONFIG.COLOR || this.$TOOL.data.get('APP_COLOR') 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); document.documentElement.style.setProperty('--el-color-primary', app_color);
for (let i = 1; i <= 9; i++) { 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++) { 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> </script>
<style lang="scss"> <style lang="scss">
@import '@/style/style.scss'; @import '@/style/style.scss';
.headerSearch{
width: 120px!important; .headerSearch {
width: 120px !important;
margin-right: 5px; margin-right: 5px;
} }
.printWrap{
.printWrap {
width: 100%; width: 100%;
overflow-x: scroll; overflow-x: scroll;
} }
.printContainer{
.printContainer {
width: 1075px; width: 1075px;
} }
.myTable{
.myTable {
table-layout: fixed; table-layout: fixed;
border: 1px solid #cccccc; border: 1px solid #cccccc;
} }
.myTableHead{
.myTableHead {
background: #008080; background: #008080;
color:#ffffff; color: #ffffff;
} }
.myTable th{
.myTable th {
height: 40px; height: 40px;
font-weight: 500; font-weight: 500;
} }
.myTable td{
.myTable td {
height: 32px; height: 32px;
padding-left: 5px; padding-left: 5px;
border: 1px solid #cccccc; border: 1px solid #cccccc;
} }
.numCell{
.numCell {
height: 35px; height: 35px;
text-align: center; text-align: center;
} }
.numCell{
.numCell {
width: 100px; width: 100px;
} }
.chartWrap{
.chartWrap {
width: 1035px; width: 1035px;
margin-top: 20px; margin-top: 20px;
border: 1px solid #eeeeee; border: 1px solid #eeeeee;
} }
.chartTitle{
.chartTitle {
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
margin-top: 20px; margin-top: 20px;
} }
.redColor{
.redColor {
font-weight: bold; font-weight: bold;
color: #ff0000; color: #ff0000;
} }
.greenColor{
.greenColor {
font-weight: bold; font-weight: bold;
color: #008000; 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";