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

到岗

This commit is contained in:
shijing 2023-11-17 19:20:29 +08:00
parent 21764716dd
commit 22cf49a6b3
16 changed files with 1560 additions and 743 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/glb/photon4.glb Normal file
View File

Binary file not shown.

43
src/api/model/hrm.js
View File

@ -117,5 +117,48 @@ export default {
);
}
}
},
attendance:{
list: {
name: "列表",
req: async function(data){
return await http.get(
`${config.API_URL}/hrm/attendance/`,
data
);
}
},
item: {
name: "到岗记录",
req: async function(id){
return await http.get(
`${config.API_URL}/hrm/attendance/${id}/`,
);
}
},
create: {
name: "新增",
req: async function(data){
return await http.post(
`${config.API_URL}/hrm/attendance/`,
data);
}
},
update: {
name: "更新",
req: async function(id, data){
return await http.put(
`${config.API_URL}/hrm/attendance/${id}/`,
data);
}
},
delete: {
name: "删除",
req: async function(id){
return await http.delete(
`${config.API_URL}/hrm/attendance/${id}/`
);
}
}
}
}

13
src/config/route.js
View File

@ -1611,8 +1611,7 @@ const routes = [
"perms": ["certificate"]
},
"component": "hrm/certificate"
}
,
},
{
"name": "clockRecord",
"path": "/hrm/clock_record",
@ -1623,6 +1622,16 @@ const routes = [
},
"component": "hrm/clock_record"
},
{
"name": "attendance",
"path": "/hrm/attendance",
"meta": {
"title": "到岗记录",
"icon": "el-icon-check",
"perms": ["attendance_record"]
},
"component": "hrm/attendance"
},
{
"name": "certificate",
"path": "/hrm/certificate",

BIN
src/style/youShe.ttf Normal file
View File

Binary file not shown.

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

@ -1,7 +1,7 @@
<template>
<el-container class="dashboard">
<el-header class="header">
<div style="font-weight: bold;">10车间生产数据看板</div>
<div style="font-weight: bold; font-family:'myfont';font-size:32px">10车间生产数据看板</div>
<div style="font-size: 14px;margin-top:18px">2023-11-01 08:00</div>
</el-header>
<el-main>
@ -49,7 +49,6 @@
</el-col>
</el-row>
<div style="height:2%"></div>
<!-- <dv-decoration3 style="width:100%;height:4%;" /> -->
<el-row style="height:60%">
<el-col>
<div class="box">
@ -58,68 +57,37 @@
</div>
</div>
<div style="height: 2px;"></div>
<div class="boxmain">
<dv-scroll-board :config="taskBoard" style="width:100%;height:100%"
@mouseover="mouseoverHandler" @click="clickHandler" />
<!-- <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">
<tbody>
<tr>
<th>序号</th>
<th>产品名称</th>
<th>型号</th>
<th>计划周期</th>
<th>完成进度</th>
<th>产量</th>
<th>状态</th>
<div class="boxmain" id="scrollContainer1">
<div class="wrapper" id="scrollWrapper1" @mouseover="mouseOver1" @mouseout="mouseOut1"
style="overflow: hidden;">
<table class="totall">
<tr class="title">
<th v-for="itemx in liData1" :key="itemx">{{ itemx }}</th>
</tr>
<tr>
<td>1</td>
<th>光纤预制管</th>
<td>8098</td>
<td>19.80%</td>
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="100"
status="green" /></td>
<td>368</td>
<td><el-tag type="" effect="light">已完成</el-tag></td>
</tr>
<tr>
<td>2</td>
<th>光纤预制管</th>
<td>7506</td>
<td>6.70%</td>
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="70"
status="success" /></td>
<td>339</td>
<td><el-tag type="warning" effect="light">生产中</el-tag></td>
</tr>
<tr>
<td>3</td>
<th>光纤预制管</th>
<td>3261</td>
<td>32.30%</td>
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="70"
status="warning" /></td>
<td>325</td>
<td><el-tag type="warning" effect="light">生产中</el-tag></td>
</tr>
<tr>
<td>4</td>
<th>光纤预制管</th>
<td>1993</td>
<td> 201%</td>
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="30"
status="exception" /></td>
<td> 199</td>
<td><el-tag type="warning" effect="light">生产中</el-tag></td>
</tr>
</tbody>
</table> -->
</table>
<div id="scrollBody1" ref="moocBox1" style="overflow:scroll">
<div>
<table :class="{ marquee_top: animate }">
<tr v-for="itemy in listData1" class="rollData" ref="con1" :key="itemy">
<td v-for="(itemz,index2) in itemy" :key="itemz">
<el-progress v-if="index2==5" :text-inside="true" :stroke-width="14" :percentage="itemz"
:status="getStatus(itemz)"/>
<span v-else>{{ itemz }}</span>
</td>
</tr>
</table>
<table :class="{ marquee_top: animate }" v-show="scrollVivible1">
<tr v-for="itemy in listData1" class="rollData" ref="con1" :key="itemy">
<td v-for="(itemz,index2) in itemy" :key="itemz">
<el-progress v-if="index2==5" :text-inside="true" :stroke-width="14" :percentage="itemz"
:status="getStatus(itemz)"/>
<span v-else>{{ itemz }}</span>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</el-col>
@ -131,68 +99,45 @@
<div class="boxlabel">任务进度</div>
</div>
<div style="height: 2px;"></div>
<div class="boxmain">
<dv-scroll-board :config="taskBoard2" style="width:100%;height:100%"
@mouseover="mouseoverHandler" @click="clickHandler" />
<!-- <table border="0" cellspacing="16">
<tbody>
<tr>
<th>序号</th>
<th>产品名称</th>
<th>型号</th>
<th>计划周期</th>
<th>完成进度</th>
<th>产量</th>
<th>状态</th>
<div class="boxmain" id="scrollContainer2">
<div class="wrapper" id="scrollWrapper2" @mouseover="mouseOver2" @mouseout="mouseOut2">
<table class="totall">
<tr class="title">
<th v-for="itemx in liData2" :key="itemx">{{ itemx }}</th>
</tr>
<tr>
<td>1</td>
<th>光纤预制管</th>
<td>8098</td>
<td>19.80%</td>
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="100"
status="green" /></td>
<td>368</td>
<td><el-tag type="" effect="light">已完成</el-tag></td>
</tr>
<tr>
<td>2</td>
<th>光纤预制管</th>
<td>7506</td>
<td>6.70%</td>
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="70"
status="success" /></td>
<td>339</td>
<td><el-tag type="warning" effect="light">生产中</el-tag></td>
</tr>
<tr>
<td>3</td>
<th>光纤预制管</th>
<td>3261</td>
<td>32.30%</td>
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="70"
status="warning" /></td>
<td>325</td>
<td><el-tag type="warning" effect="light">生产中</el-tag></td>
</tr>
<tr>
<td>4</td>
<th>光纤预制管</th>
<td>1993</td>
<td> 201%</td>
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="30"
status="exception" /></td>
<td> 199</td>
<td><el-tag type="warning" effect="light">生产中</el-tag></td>
</tr>
</tbody>
</table> -->
</table>
<div id="scrollBody2" ref="moocBox2" style="overflow:scroll">
<div>
<table :class="{ marquee_top: animate }">
<tr v-for="(itemy,index) in listData2" class="rollData" ref="con1" :key="itemy">
<td>{{ index+1 }}</td>
<td v-for="(itemz,index2) in itemy" :key="itemz">
<el-progress v-if="index2==4" :text-inside="true" :stroke-width="14" :percentage="itemz"
:status="getStatus(itemz)"/>
<el-tag v-else-if="index2==6" :type="getType(itemz)">{{ stateOption[itemz] }}</el-tag>
<span v-else>{{ itemz }}</span>
</td>
</tr>
</table>
<table :class="{ marquee_top: animate }" v-show="scrollVivible1">
<tr v-for="(itemy,index) in listData2" class="rollData" ref="con1" :key="itemy">
<td>{{ index+1 }}</td>
<td v-for="(itemz,index2) in itemy" :key="itemz">
<el-progress v-if="index2==4" :text-inside="true" :stroke-width="14" :percentage="itemz"
:status="getStatus(itemz)"/>
<el-tag v-else-if="index2==6" :type="getType(itemz)">{{ stateOption[itemz] }}</el-tag>
<span v-else>{{ itemz }}</span>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</el-col>
</el-row>
<div style="height: 1%"></div>
<!-- <dv-decoration4 :reverse="true" style="width:100%;height:1%;" :dur="20" :color="['orange']" /> -->
<el-row style="height:39%" :gutter="10">
<el-col :xs="24" :md="9">
<div class="box">
@ -225,104 +170,7 @@
</el-main>
</el-container>
</template>
<style scoped>
.dashboard {
background-image: url("https://cdn-upload.datav.aliyun.com/upload/download/1678758744858-EWBrlDVf.jpg");
/* url("/public/img/bg.jpg"); */
color: #fff;
font-family: "Microsoft Yahei" !important;
}
.header {
background: url("/public/img/photon_header.png");
border-bottom: none;
/* background: url("https://cdn-upload.datav.aliyun.com/upload/download/1675143770257-pNifja_p.webp"); */
background-size: 100% 100%;
font-size: 26px;
display: block;
height: 80px;
color: rgb(149, 255, 255);
font-family: 'Microsoft Yahei';
text-align: center;
padding: 12px 0px;
}
/* .el-header {
font-family: Inter, "-apple-system", BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "noto sans", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
} */
.box {
background: rgba(10, 63, 68, 0.5);
height: 100%;
/* padding: 2px 2px 2px 2px; */
}
.boxtitle {
color: #fff;
font-size: 16px;
display: flex;
height: 36px;
background: linear-gradient(40deg, rgba(11, 101, 140, 0.451), rgba(0, 34, 48, 0.335), rgba(11, 101, 140, 0.451));
}
.bgimg {
background-image: url('https://cdn-upload.datav.aliyun.com/upload/download/1678762309227-E6RP8z2R.png');
background-size: 140% 100%;
}
.boxlabel {
margin-left: 6px;
font-size: 18px;
margin-top: 6px
}
.boxmain {
height: calc(100% - 40px);
}
@media screen and (max-width: 800px) {
.boxmain {
height: 200px;
}
}
.flex_center {
display: flex;
align-items: center;
justify-content: center
}
.border {
border: 1px dashed #49bcf7;
}
.bigdata {
font-size: 24px;
}
table {
width: 100%;
text-align: center;
}
table th {
font-size: 14px;
background: rgba(0, 0, 0, .1);
}
table td {
font-size: 14px;
color: rgba(255, 255, 255, .6);
}
table th,
table td {
border-bottom: 1px solid rgba(255, 255, 255, .3);
padding: .1rem 0;
}
</style>
<script>
import * as echarts from "echarts";
function deepCopy(obj) {
@ -508,54 +356,99 @@ export default {
state: 1
},
],
taskBoard: {
header: ['姓名', '岗位', '班次', '状态'],
headerBGC: '#0a3f44',
data: [
liData1: ['姓名', '岗位', '班次', '状态'],
listData1: [
['小王', '成型人', '白班', '到岗'],
['小李', '成型人', '白班', '到岗'],
['小张', '成型人', '白班', '未到岗'],
],
index: true,
columnWidth: [50],
align: ['center'],
},
],
liData2: ['序号','产品名称', '型号', '计划开始时间', '计划结束时间','完成进度', '产量','状态'],
listData2: [
["光纤预制管", "ZJ2", '2023-11-10', '2023-11-10', 100, "368",40],
["光纤预制管", "ZJ2", '2023-11-10', '2023-11-10', 90, "368",40],
["光纤预制管", "ZJ2", '2023-11-10', '2023-11-10', 80, "368",30],
["光纤预制管", "ZJ2", '2023-11-10', '2023-11-10', 70, "368",30],
["光纤预制管", "ZJ2", '2023-11-10', '2023-11-10', 60, "368",40],
["光纤预制管", "ZJ2", '2023-11-10', '2023-11-10', 50, "368",30],
["光纤预制管", "ZJ2", '2023-11-10', '2023-11-10', 40, "368",30],
["光纤预制管", "ZJ2", '2023-11-10', '2023-11-10', 30, "368",40],
],
tableData: [
['产品名称', '型号', '计划周期', '完成进度', '产量', '状态'],
['ZB2', 'xxx', '2023-11-01至2023-11-11', '70', '5000', '生产中'],
],
taskBoard2: {
header: ['产品名称', '型号', '计划周期', '完成进度', '产量', '状态', 'xx'],
header: ['产品名称', '型号', '计划开始时间','计划结束时间', '完成进度', '产量', '状态'],
headerBGC: '#0a3f44',
waitTime: 3000,
rowNum: 8,
columnWidth: [2, 1, 1, 1, 1, 1],
data: [
['<span style="color:#37a2da;">行1列1</span>', '行1列2', '行1列3', '<el-progress :text-inside="true" :stroke-width="14" :percentage="100" status="green"/>', '行1列3', '行1列3', 'xx'],
['行2列1', '<span style="color:#32c5e9;">行2列2</span>', '行2列3', '行1列3', '行1列3', '行1列3', 'xx'],
['行3列1', '行3列2', '<span style="color:#67e0e3;">行3列3</span>', '行1列3', '行1列3', '行1列3', 'xx'],
['行4列1', '<span style="color:#9fe6b8;">行4列2</span>', '行4列3', '行1列3', '行1列3', '行1列3', 'xx'],
['<span style="color:#ffdb5c;">行5列1</span>', '行5列2', '行5列3', '行1列3', '行1列3', '行1列3', 'xx'],
['行6列1', '<span style="color:#ff9f7f;">行6列2</span>', '行6列3', '行1列3', '行1列3', '行1列3', 'xx'],
['行7列1', '行7列2', '<span style="color:#fb7293;">行7列3</span>', '行1列3', '行1列3', '行1列3', 'xx'],
['行8列1', '<span style="color:#e062ae;">行8列2</span>', '行8列3', '行1列3', '行1列3', '行1列3', 'xx'],
['<span style="color:#e690d1;">行9列1</span>', '行9列2', '行9列3', '行1列3', '行1列3', '行1列3', 'xx'],
['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3', 'xx'],
['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3', 'xx'],
['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3', 'xx'],
['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3', 'xx'],
['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3', 'xx'],
['光纤预制管', 'ZB1', '2023-11-01', '2023-11-10', '50/60', '300','已完成'],
['光纤预制管', 'ZB1', '2023-11-01', '2023-11-10', '50/60', '300','已完成'],
['光纤预制管', 'ZB1', '2023-11-01', '2023-11-10', '50/60', '300','已完成'],
['光纤预制管', 'ZB1', '2023-11-01', '2023-11-10', '50/60', '300','已完成'],
['光纤预制管', 'ZB2', '2023-11-01', '2023-11-10', '50/60', '300','已完成'],
['光纤预制管', 'ZB1', '2023-11-01', '2023-11-10', '50/60', '300','已完成'],
['光纤预制管', 'ZB1', '2023-11-01', '2023-11-10', '50/60', '300','已完成'],
['光纤预制管', 'ZB2', '2023-11-01', '2023-11-10', '50/60', '300','已完成'],
['光纤预制管', 'ZB2', '2023-11-01', '2023-11-10', '50/60', '300','已完成'],
['光纤预制管', 'ZB1', '2023-11-01', '2023-11-10', '50/60', '300','已完成'],
['光纤预制管', 'ZB1', '2023-11-01', '2023-11-10', '50/60', '300','已完成'],
['光纤预制管', 'ZB1', '2023-11-01', '2023-11-10', '50/60', '300','已完成'],
['光纤预制管', 'ZB1', '2023-11-01', '2023-11-10', '50/60', '300','已完成'],
],
index: true,
columnWidth: [50],
align: ['center'],
},
speed: 2000,
myScroll: null,
myScroll1: null,
myScroll2: null,
iliHeight: 30,
time: null,
delay: 20,
start_date:'',
end_date:'',
scrollVivible1:true,
scrollVivible2:true,
chartInterval1: null,
chartInterval2: null,
chartInterval3: null
chartInterval3: null,
stateOption:{
30:'生产中',
40:'已完成'
}
}
},
mounted() {
let Container1 = document.getElementById('scrollContainer1').clientHeight;
let tableHeight1 = Container1-40;
document.getElementById('scrollWrapper1').style.height = Container1+'px';
document.getElementById('scrollBody1').style.height = tableHeight1+'px';
let scrollHeight1 = this.$refs.moocBox1.scrollHeight/2;
if(tableHeight1>scrollHeight1){
this.scrollVivible1 = false;
}else{
this.scrollVivible1 = true;
this.myScroll1 = setInterval(() => {
this.scrollUp1();
}, this.speed);
}
let Container2 = document.getElementById('scrollContainer2').clientHeight;
let tableHeight2 = Container2-40;
document.getElementById('scrollWrapper2').style.height = Container2+'px';
document.getElementById('scrollBody2').style.height = tableHeight2+'px';
let scrollHeight2 = this.$refs.moocBox2.scrollHeight/2;
if(tableHeight2>scrollHeight2){
this.scrollVivible2 = false;
}else{
this.scrollVivible2 = true;
this.myScroll2 = setInterval(() => {
this.scrollUp2();
}, this.speed);
}
let chart1Option = deepCopy(this.basicOption)
let chart1 = this.setChart("chart1", chart1Option);
let chart2Option = deepCopy(this.basicOption);
@ -673,9 +566,26 @@ export default {
]
};
this.setChart("chart3", chart3Option)
},
methods: {
getType(type){
if(type==30){
return "primary"
}else if(type==40){
return "success"
}
},
getStatus(status){
if(status==100){
return "success"
}else if(status>=80){
return "primary"
}else if(status>=60){
return "warning"
}else{
return "exception"
}
},
setChart(name, option = null) {
// 根据name 渲染数据, option需填写，否则option为模拟数据
var myChart = echarts.getInstanceByDom(document.getElementById(name));
@ -693,6 +603,181 @@ export default {
}, 500)
return myChart
},
//任务进度
getMtask(){
let that = this;
let obj ={};
that.$API.pm.mtask.list.req(obj).then((res) => {
console.log('任务进度:',res);
debugger;
});
},
//生产线
getProductLine(){
let that = this;
let obj ={
query: {start_date:that.start_date,end_date:that.end_date,dept_name: "10车间"},
};
//车间生产按月统计 1月1号-----12月1号
that.$API.bi.dataset.exec.req('lineMonth', obj).then((res1) => {
console.log('车间生产按月统计:',res1);
debugger;
});
let obj2 ={
query: {start_date:that.start_date,end_date:that.end_date,dept_name: "10车间"},
};
//生产车间按日统计 本月合格率统计&昨日合格统计 ///11月1号-----11月30号
that.$API.bi.dataset.exec.req('lineDay', obj2).then((res3) => {
console.log('生产车间按日统计:',res3);
debugger;
});
},
scrollUp1(){
let scrollTop = this.$refs.moocBox1.scrollTop;
let scrollHeight = this.$refs.moocBox1.scrollHeight;
if (scrollTop >=scrollHeight/2) {
//判断条件是否达到临界
this.$refs.moocBox1.scrollTop = 0;
} else {
this.$refs.moocBox1.scrollTop=scrollTop+40;
}
},
// 鼠标滑过暂停滚动
mouseOver1() {
clearInterval(this.myScroll1);
},
//鼠标移开重新滚动
mouseOut1() {
this.myScroll1 = setInterval(() => {
this.scrollUp1();
},
this.speed);
},
//滚动
scrollUp2() {
if (this.$refs.moocBox2.scrollTop >= this.$refs.moocBox2.scrollHeight / 2) {
//判断条件是否达到临界
this.$refs.moocBox2.scrollTop = 0;
} else {
this.$refs.moocBox2.scrollTop=this.$refs.moocBox2.scrollTop+40;
}
}, // 鼠标滑过暂停滚动
mouseOver2() {
clearInterval(this.myScroll2);
}, //鼠标移开重新滚动
mouseOut2() {
this.myScroll2 = setInterval(() => {
this.scrollUp2();
},
this.speed);
},
}
}
</script>
</script>
<style scoped>
@font-face {
font-family: 'myfont'; /* 字体名称 */
src: url('../../style/youShe.ttf'); /* 字体文件相对路径 */
}
.dashboard {
background-image: url("https://cdn-upload.datav.aliyun.com/upload/download/1678758744858-EWBrlDVf.jpg");
color: #fff;
font-family: "Microsoft Yahei" !important;
}
.header {
background: url("/public/img/photon_header.png");
border-bottom: none;
background-size: 100% 100%;
font-size: 26px;
display: block;
height: 80px;
color: rgb(149, 255, 255);
font-family: 'Microsoft Yahei';
text-align: center;
padding: 12px 0px;
}
.box {
background: rgba(10, 63, 68, 0.5);
height: 100%;
}
.boxtitle {
color: #fff;
font-size: 16px;
display: flex;
height: 36px;
background: linear-gradient(40deg, rgba(11, 101, 140, 0.451), rgba(0, 34, 48, 0.335), rgba(11, 101, 140, 0.451));
}
.bgimg {
background-image: url('https://cdn-upload.datav.aliyun.com/upload/download/1678762309227-E6RP8z2R.png');
background-size: 140% 100%;
}
.boxlabel {
margin-left: 6px;
font-size: 18px;
margin-top: 6px
}
.boxmain {
height: calc(100% - 40px);
}
@media screen and (max-width: 800px) {
.boxmain {
height: 200px;
}
}
.flex_center {
display: flex;
align-items: center;
justify-content: center
}
.border {
border: 1px dashed #49bcf7;
}
.bigdata {
font-size: 24px;
}
table {
width: 100%;
text-align: center;
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
width: 100%;
}
.title{
height: 40px;
line-height: 40px;
text-align: center;
}
table th {
font-size: 14px;
background: rgba(0, 0, 0, .1);
}
table td {
font-size: 14px;
height: 40px;
text-align: center;
color: rgba(255, 255, 255, .8);
}
table th,table td{
padding: .1rem 0;
border-bottom: none !important;
background:none !important;
}
.marquee_top{
transition: all 0.5s ease-in-out;
margin-top: -26px;
}
.totall{
color: #fff;
background-color: rgb(10, 63, 68);
}
.rollData{
background-color: rgb(10, 39, 50);
}
.rollData:nth-of-type(2n+1){
background-color: rgb(0, 59, 81);
}
</style>

378
src/views/bigScreen/index_6dept.vue
View File

@ -1,7 +1,7 @@
<template>
<el-container class="dashboard">
<el-header class="header">
<div style="font-weight: bold;">6车间生产数据大看板</div>
<div style="font-weight: bold; font-family:'myfont';font-size:32px">6车间生产数据大看板</div>
<div style="font-size: 14px;margin-top:18px">2023-11-14 13:50</div>
</el-header>
<el-main>
@ -47,40 +47,39 @@
<div class="boxlabel">发货情况</div>
</div>
<div style="height: 4px;"></div>
<div class="boxmain">
<div class="wrapper" @mouseover="mouseOver" @mouseout="mouseOut">
<div class="boxmain" id="scrollContainer1">
<div class="wrapper" id="scrollWrapper1" @mouseover="mouseOver1" @mouseout="mouseOut1"
style="overflow: hidden;">
<table class="totall">
<tr class="title">
<th v-for="itemx in liData" :key="itemx">{{ itemx }}</th>
<th v-for="itemx in liData1" :key="itemx">{{ itemx }}</th>
</tr>
</table>
<div ref="moocBox" class="wrapper2">
<table :class="{ marquee_top: animate }">
<tr v-for="(itemy,index) in listData" class="rollData" ref="con1" :key="itemy">
<td>{{ index+1 }}</td>
<td v-for="(itemz,index2) in itemy" :key="itemz">
<el-progress v-if="index2==3" :text-inside="true" :stroke-width="14" :percentage="itemz"
:status="getStatus(itemz)"/>
<span v-else-if="index2==5">
<el-tag type="warning" effect="light">{{ itemz }}</el-tag>
</span>
<span v-else>{{ itemz }}</span>
</td>
</tr>
<tr v-for="(itemy,index) in listData" class="rollData" ref="con2" :key="itemy">
<td>{{ index+1 }}</td>
<td v-for="(itemz,index2) in itemy" :key="itemz">
<el-progress v-if="index2==3" :text-inside="true" :stroke-width="14" :percentage="itemz"
:status="getStatus(itemz)"/>
<span v-else-if="index2==5">
<el-tag type="warning" effect="light">{{ itemz }}</el-tag>
</span>
<span v-else>{{ itemz }}</span>
</td>
</tr>
</table>
</div>
</table>
<div id="scrollBody1" ref="moocBox1" style="overflow:scroll">
<div>
<table :class="{ marquee_top: animate }">
<tr v-for="itemy in listData1" class="rollData" ref="con1" :key="itemy">
<td v-for="(itemz,index2) in itemy" :key="itemz">
<el-progress v-if="index2==5" :text-inside="true" :stroke-width="14" :percentage="itemz"
:status="getStatus(itemz)"/>
<span v-else>{{ itemz }}</span>
</td>
</tr>
</table>
<table :class="{ marquee_top: animate }" v-show="scrollVivible1">
<tr v-for="itemy in listData1" class="rollData" ref="con1" :key="itemy">
<td v-for="(itemz,index2) in itemy" :key="itemz">
<el-progress v-if="index2==5" :text-inside="true" :stroke-width="14" :percentage="itemz"
:status="getStatus(itemz)"/>
<span v-else>{{ itemz }}</span>
</td>
</tr>
</table>
</div>
</div>
</div>
<!-- <dv-scroll-board :config="taskBoard" style="width:100%;height:100%"
@mouseover="mouseoverHandler" @click="clickHandler" /> -->
</div>
</div>
</el-col>
@ -92,60 +91,37 @@
<div class="boxlabel">昨日工序进度</div>
</div>
<div style="height: 4px;"></div>
<div class="boxmain">
<table border="0" cellspacing="16">
<tbody>
<tr>
<th>序号</th>
<th>产品名称</th>
<th>型号</th>
<th>计划周期</th>
<th>完成进度</th>
<th>产量</th>
<th>状态</th>
<div class="boxmain" id="scrollContainer2">
<div class="wrapper" id="scrollWrapper2" @mouseover="mouseOver2" @mouseout="mouseOut2"
style="overflow: hidden;">
<table class="totall">
<tr class="title">
<th v-for="itemx in liData" :key="itemx">{{ itemx }}</th>
</tr>
<tr>
<td>1</td>
<th>光纤预制管</th>
<td>8098</td>
<td>19.80%</td>
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="100"
status="green" /></td>
<td>368</td>
<td><el-tag type="" effect="light">已完成</el-tag></td>
</tr>
<tr>
<td>2</td>
<th>光纤预制管</th>
<td>7506</td>
<td>6.70%</td>
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="70"
status="success" /></td>
<td>339</td>
<td><el-tag type="warning" effect="light">生产中</el-tag></td>
</tr>
<tr>
<td>3</td>
<th>光纤预制管</th>
<td>3261</td>
<td>32.30%</td>
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="70"
status="warning" /></td>
<td>325</td>
<td><el-tag type="warning" effect="light">生产中</el-tag></td>
</tr>
<tr>
<td>4</td>
<th>光纤预制管</th>
<td>1993</td>
<td> 201%</td>
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="30"
status="exception" /></td>
<td> 199</td>
<td><el-tag type="warning" effect="light">生产中</el-tag></td>
</tr>
</tbody>
</table>
</table>
<div id="scrollBody2" ref="moocBox2" style="overflow:scroll">
<div>
<table :class="{ marquee_top: animate }">
<tr v-for="itemy in listData" class="rollData" ref="con1" :key="itemy">
<td v-for="(itemz,index2) in itemy" :key="itemz">
<el-progress v-if="index2==5" :text-inside="true" :stroke-width="14" :percentage="itemz"
:status="getStatus(itemz)"/>
<span v-else>{{ itemz }}</span>
</td>
</tr>
</table>
<table :class="{ marquee_top: animate }" v-show="scrollVivible2">
<tr v-for="itemy in listData" class="rollData" ref="con1" :key="itemy">
<td v-for="(itemz,index2) in itemy" :key="itemz">
<el-progress v-if="index2==5" :text-inside="true" :stroke-width="14" :percentage="itemz"
:status="getStatus(itemz)"/>
<span v-else>{{ itemz }}</span>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</el-col>
@ -370,32 +346,52 @@ export default {
},
]
},
taskBoard: {
header: ['姓名', '岗位', '班次', '状态'],
header: ['日期', '型号', '规格', '发货数量'],
headerBGC: '#0a3f44',
data: [
['小王', '成型人', '白班', '到岗'],
['小李', '成型人', '白班', '到岗'],
['小张', '成型人', '白班', '未到岗'],
['2023-11-15', 'ZB2', '34/450', '1500'],
['2023-11-15', 'ZJ2', '33/500', '500'],
['2023-11-15', 'ZT2', '30/600', '2500'],
],
index: true,
columnWidth: [50],
align: ['center'],
},
liData: ['序号','产品名称', '型号', '计划周期', '完成进度', '产量', '状态'],
liData1: ['日期', '型号', '规格', '发货数量'],
listData1: [
["2023-11-10", "ZJ2",'3/68', 100],
["2023-11-10", "ZJ2",'3/68', 290],
["2023-11-10", "ZJ2",'3/68', 280],
["2023-11-10", "ZJ2",'3/68', 270],
["2023-11-10", "ZJ2",'3/68', 260],
["2023-11-10", "ZJ2",'3/68', 250],
["2023-11-10", "ZJ2",'3/68', 240],
["2023-11-10", "ZJ2",'3/68', 230],
["2023-11-10", "ZJ2",'3/68', 100],
["2023-11-10", "ZJ2",'3/68', 290],
["2023-11-10", "ZJ2",'3/68', 280],
["2023-11-10", "ZJ2",'3/68', 270],
["2023-11-10", "ZJ2",'3/68', 260],
["2023-11-10", "ZJ2",'3/68', 250],
["2023-11-10", "ZJ2",'3/68', 240],
["2023-11-10", "ZJ2",'3/68', 230],
],
liData: ['工序','产品名称', '型号', '计划数量', '合格数量', '完成进度', '合格率','操作人'],
listData: [
["光纤预制管A", "8098", "19.80%", 100,"368",'已完成'],
["光纤预制管B", "8098", "19.80%", 90,"368",'已完成'],
["光纤预制管C", "8098", "19.80%", 80,"368",'已完成'],
["光纤预制管D", "8098", "19.80%", 70,"368",'已完成'],
["光纤预制管E", "8098", "19.80%", 60,"368",'已完成'],
["光纤预制管F", "8098", "19.80%", 50,"368",'已完成'],
["光纤预制管G", "8098", "19.80%", 40,"368",'已完成'],
["光纤预制管H", "8098", "19.80%", 30,"368",'已完成'],
["平头","光纤预制管A", "ZJ2", 368, 100, 90, "99.5%",'李斯'],
["粘头","光纤预制管B", "ZJ2", 368, 90, 90, "99.5%",'王丽丽'],
["粗磨","光纤预制管C", "ZJ2", 368, 80, 90, "99.5%",'杜克'],
["中磨","光纤预制管D", "ZJ2", 368, 70, 90, "99.5%",'钱多多'],
["细磨","光纤预制管E", "ZJ2", 368, 60, 90, "99.5%",'王富利'],
["抛光","光纤预制管F", "ZJ2", 368, 50, 90, "99.5%",'张关荣'],
["开凿","光纤预制管G", "ZJ2", 368, 40, 90, "99.5%",'赵耀国'],
["配管","光纤预制管H", "ZJ2", 368, 30, 90, "99.5%",'李婷婷'],
],
speed: 2000,
myScroll: null,
myScroll1: null,
myScroll2: null,
iliHeight: 30,
time: null,
delay: 20,
@ -403,41 +399,60 @@ export default {
['产品名称', '型号', '计划周期', '完成进度', '产量', '状态'],
['ZB2', 'xxx', '2023-11-01至2023-11-11', '70', '5000', '生产中'],
],
taskBoard2: {
header: ['产品名称', '型号', '计划周期', '完成进度', '产量', '状态', 'xx'],
headerBGC: '#0a3f44',
waitTime: 3000,
rowNum: 8,
columnWidth: [2, 1, 1, 1, 1, 1],
data: [
['<span style="color:#37a2da;">行1列1</span>', '行1列2', '行1列3', '<el-progress :text-inside="true" :stroke-width="14" :percentage="100" status="green"/>', '行1列3', '行1列3', 'xx'],
['行2列1', '<span style="color:#32c5e9;">行2列2</span>', '行2列3', '行1列3', '行1列3', '行1列3', 'xx'],
['行3列1', '行3列2', '<span style="color:#67e0e3;">行3列3</span>', '行1列3', '行1列3', '行1列3', 'xx'],
['行4列1', '<span style="color:#9fe6b8;">行4列2</span>', '行4列3', '行1列3', '行1列3', '行1列3', 'xx'],
['<span style="color:#ffdb5c;">行5列1</span>', '行5列2', '行5列3', '行1列3', '行1列3', '行1列3', 'xx'],
['行6列1', '<span style="color:#ff9f7f;">行6列2</span>', '行6列3', '行1列3', '行1列3', '行1列3', 'xx'],
['行7列1', '行7列2', '<span style="color:#fb7293;">行7列3</span>', '行1列3', '行1列3', '行1列3', 'xx'],
['行8列1', '<span style="color:#e062ae;">行8列2</span>', '行8列3', '行1列3', '行1列3', '行1列3', 'xx'],
['<span style="color:#e690d1;">行9列1</span>', '行9列2', '行9列3', '行1列3', '行1列3', '行1列3', 'xx'],
['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3', 'xx'],
['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3', 'xx'],
['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3', 'xx'],
['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3', 'xx'],
['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3', 'xx'],
],
index: true,
columnWidth: [50],
align: ['center'],
chartInterval1: null,
chartInterval2: null,
chartInterval3: null
},
start_date:'',
end_date:'',
scrollVivible1:true,
scrollVivible2:true,
scrollVivible:true
}
},
mounted() {
this.myScroll = setInterval(() => {
this.scrollUp();
}, this.speed);
let Container1 = document.getElementById('scrollContainer1').clientHeight;
let tableHeight1 = Container1-40;
document.getElementById('scrollWrapper1').style.height = Container1+'px';
document.getElementById('scrollBody1').style.height = tableHeight1+'px';
let scrollHeight1 = this.$refs.moocBox1.scrollHeight/2;
if(tableHeight1>scrollHeight1){
this.scrollVivible1 = false;
}else{
this.scrollVivible1 = true;
this.myScroll1 = setInterval(() => {
this.scrollUp1();
}, this.speed);
}
let Container2 = document.getElementById('scrollContainer2').clientHeight;
let tableHeight2 = Container2-40;
document.getElementById('scrollWrapper2').style.height = Container2+'px';
document.getElementById('scrollBody2').style.height = tableHeight2+'px';
let scrollHeight2 = this.$refs.moocBox2.scrollHeight/2;
if(tableHeight2>scrollHeight2){
this.scrollVivible2 = false;
}else{
this.scrollVivible2 = true;
this.myScroll2 = setInterval(() => {
this.scrollUp2();
}, this.speed);
}
// let domHeight = document.getElementById('process').clientHeight;
// document.getElementById('wrapper').style.height = domHeight+'px';
// document.getElementById('tableBody').style.height = (domHeight-40)+'px';
// let scrollHeight = this.$refs.moocBox.scrollHeight/2;
// if(domHeight>scrollHeight){
// this.scrollVivible = false;
// }else{
// this.scrollVivible = true;
// this.myScroll = setInterval(() => {
// this.scrollUp();
// }, this.speed);
// }
const ondDayTime = 86400000;
let cDate = new Date();
let month = cDate.getMonth()+1;
let start_date = cDate.getFullYear()+'-'+month+'-01';
let lastDay = new Date(cDate.getFullYear(), cDate.getMonth(), 0).getDate();
let end_date = cDate.getFullYear()+'-'+month+'-'+lastDay;
this.start_date = start_date;
this.end_date = end_date;
let chart1Option = deepCopy(this.basicOption)
this.setChart("chart1", chart1Option);
let chart2Option = deepCopy(this.basicOption)
@ -472,7 +487,7 @@ export default {
}
]
};
this.setChart("chart3", chart3Option)
this.setChart("chart3", chart3Option);
},
methods: {
getStatus(status){
@ -501,23 +516,82 @@ export default {
} catch (error) { }
}, 500)
},
//滚动
scrollUp() {
// console.log(this.$refs.moocBox.scrollTop)
// console.log(this.$refs.moocBox.scrollHeight)
if (this.$refs.moocBox.scrollTop >= this.$refs.moocBox.scrollHeight / 2) {
//发货情况
getMioItem(){
let that = this;
let obj ={};
that.$API.inm.mioitem.list.req(obj).then((res) => {
console.log(res);
debugger;
});
},
//昨日工序进展
getMtask(){
let that = this;
let obj ={};
that.$API.pm.mtask.list.req(obj).then((res) => {
console.log(res);
debugger;
});
},
//本月生产统计&本月交付统计
getsaleOut(){
let that = this;
let obj ={
query: {start_date:this.start_date,end_date:this.end_date,dept_name: "6车间"},
};
//生产车间按日统计
that.$API.bi.dataset.exec.req('lineDay', obj).then((doInRes) => {
console.log('生产车间按日统计:',doInRes);
debugger;
});
//本月交付统计
that.$API.bi.dataset.exec.req('saleOutDay', obj).then((saleOutRes) => {
console.log('本月交付统计:',saleOutRes);
debugger;
});
},
scrollUp1(){
let scrollTop = this.$refs.moocBox1.scrollTop;
let scrollHeight = this.$refs.moocBox1.scrollHeight;
if (scrollTop >=scrollHeight/2) {
//判断条件是否达到临界
this.$refs.moocBox.scrollTop = 0;
this.$refs.moocBox1.scrollTop = 0;
} else {
this.$refs.moocBox.scrollTop=this.$refs.moocBox.scrollTop+40;
this.$refs.moocBox1.scrollTop=scrollTop+40;
}
}, // 鼠标滑过暂停滚动
mouseOver() {
clearInterval(this.myScroll);
}, //鼠标移开重新滚动
mouseOut() {
this.myScroll = setInterval(() => {
this.scrollUp();
},
// 鼠标滑过暂停滚动
mouseOver1() {
clearInterval(this.myScroll1);
},
//鼠标移开重新滚动
mouseOut1() {
this.myScroll1 = setInterval(() => {
this.scrollUp1();
},
this.speed);
},
//滚动
scrollUp2() {
let scrollTop = this.$refs.moocBox2.scrollTop;
let scrollHeight = this.$refs.moocBox2.scrollHeight;
if (scrollTop >=scrollHeight/2) {
//判断条件是否达到临界
this.$refs.moocBox2.scrollTop = 0;
} else {
this.$refs.moocBox2.scrollTop=scrollTop+40;
}
},
// 鼠标滑过暂停滚动
mouseOver2() {
clearInterval(this.myScroll2);
},
//鼠标移开重新滚动
mouseOut2() {
this.myScroll2 = setInterval(() => {
this.scrollUp2();
},
this.speed);
},
@ -529,6 +603,10 @@ export default {
}
</script>
<style scoped>
@font-face {
font-family: 'myfont'; /* 字体名称 */
src: url('../../style/youShe.ttf'); /* 字体文件相对路径 */
}
.dashboard {
background-image: url("https://cdn-upload.datav.aliyun.com/upload/download/1678758744858-EWBrlDVf.jpg");
color: #fff;
@ -550,7 +628,6 @@ export default {
background: rgba(10, 63, 68, 0.5);
height: 100%;
}
.boxtitle {
color: #fff;
font-size: 16px;
@ -558,18 +635,15 @@ export default {
height: 36px;
background: linear-gradient(40deg, rgba(11, 101, 140, 0.451), rgba(0, 34, 48, 0.335), rgba(11, 101, 140, 0.451));
}
.bgimg {
background-image: url('https://cdn-upload.datav.aliyun.com/upload/download/1678762309227-E6RP8z2R.png');
background-size: 140% 100%;
}
.boxlabel {
margin-left: 6px;
font-size: 18px;
margin-top: 6px
}
.boxmain {
height: calc(100% - 40px);
}
@ -583,11 +657,9 @@ export default {
align-items: center;
justify-content: center
}
.border{
border: 1px dashed #49bcf7;
}
.bigdata {
font-size: 24px;
}
@ -595,10 +667,6 @@ export default {
overflow: hidden;
height: 220px;
}
.wrapper2{
height: 180px;
overflow: hidden;
}
table{
width: 100%;
text-align: center;

580
src/views/bigScreen/index_7dept.vue
View File

@ -1,7 +1,7 @@
<template>
<el-container class="dashboard">
<el-header class="header">
<div style="font-weight: bold;">7车间生产数据大看板</div>
<div style="font-weight: bold; font-family:'myfont';font-size:32px">7车间生产数据大看板</div>
<div style="font-size: 14px;margin-top:18px">2023-11-14 13:50</div>
</el-header>
<el-main>
@ -27,44 +27,42 @@
<el-col>
<div class="box">
<div class="boxtitle">
<div class="boxlabel">生产进度</div>
<div class="boxlabel">任务进度</div>
</div>
<div style="height: 4px;"></div>
<div class="boxmain">
<div class="boxmain">
<div class="wrapper" @mouseover="mouseOver" @mouseout="mouseOut">
<table class="totall">
<tr class="title">
<th v-for="itemx in liData" :key="itemx">{{ itemx }}</th>
</tr>
</table>
<div ref="moocBox" class="wrapper2">
<div class="boxmain" id="scrollContainer1">
<div class="wrapper" id="scrollWrapper1" @mouseover="mouseOver1" @mouseout="mouseOut1">
<table class="totall">
<tr class="title">
<th v-for="itemx in liData1" :key="itemx">{{ itemx }}</th>
</tr>
</table>
<div id="scrollBody1" ref="moocBox1" style="overflow:scroll">
<div>
<table :class="{ marquee_top: animate }">
<tr v-for="(itemy,index) in listData" class="rollData" ref="con1" :key="itemy">
<td>{{ index+1 }}</td>
<tr v-for="(itemy,index) in listData1" class="rollData" ref="con1" :key="itemy">
<td>{{ index+1 }}</td>
<td v-for="(itemz,index2) in itemy" :key="itemz">
<el-progress v-if="index2==1" :text-inside="true" :stroke-width="14" :percentage="itemz"
:status="getStatus(itemz)"/>
<span v-else-if="index2==3">
<el-tag type="warning" effect="light">{{ itemz }}</el-tag>
</span>
<el-tag v-else-if="index2==3" :type="getType(itemz)">{{ stateOption[itemz] }}</el-tag>
<span v-else>{{ itemz }}</span>
</td>
</tr>
<tr v-for="(itemy,index) in listData" class="rollData" ref="con2" :key="itemy">
<td>{{ index+1 }}</td>
</tr>
</table>
<table :class="{ marquee_top: animate }" v-show="scrollVivible1">
<tr v-for="(itemy,index) in listData1" class="rollData" ref="con1" :key="itemy">
<td>{{ index+1 }}</td>
<td v-for="(itemz,index2) in itemy" :key="itemz">
<el-progress v-if="index2==1" :text-inside="true" :stroke-width="14" :percentage="itemz"
:status="getStatus(itemz)"/>
<span v-else-if="index2==3">
<el-tag type="warning" effect="light">{{ itemz }}</el-tag>
</span>
<el-tag v-else-if="index2==3" :type="getType(itemz)">{{ stateOption[itemz] }}</el-tag>
<span v-else>{{ itemz }}</span>
</td>
</tr>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@ -77,60 +75,35 @@
<div class="boxlabel">生产线</div>
</div>
<div style="height: 4px;"></div>
<div class="boxmain">
<table border="0" cellspacing="16">
<tbody>
<tr>
<th>序号</th>
<th>产品名称</th>
<th>型号</th>
<th>计划周期</th>
<th>完成进度</th>
<th>产量</th>
<th>状态</th>
<div class="boxmain" id="scrollContainer2">
<div class="wrapper" id="scrollWrapper2" @mouseover="mouseOver2" @mouseout="mouseOut2"
style="overflow: hidden;">
<table class="totall">
<tr class="title">
<th v-for="itemx in liData" :key="itemx">{{ itemx }}</th>
</tr>
<tr>
<td>1</td>
<th>光纤预制棒</th>
<td>8098</td>
<td>19.80%</td>
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="100"
status="green" /></td>
<td>368</td>
<td><el-tag type="" effect="light">已完成</el-tag></td>
</tr>
<tr>
<td>2</td>
<th>光纤预制棒</th>
<td>7506</td>
<td>6.70%</td>
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="70"
status="success" /></td>
<td>339</td>
<td><el-tag type="warning" effect="light">生产中</el-tag></td>
</tr>
<tr>
<td>3</td>
<th>光纤预制棒</th>
<td>3261</td>
<td>32.30%</td>
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="70"
status="warning" /></td>
<td>325</td>
<td><el-tag type="warning" effect="light">生产中</el-tag></td>
</tr>
<tr>
<td>4</td>
<th>光纤预制棒</th>
<td>1993</td>
<td> 201%</td>
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="30"
status="exception" /></td>
<td> 199</td>
<td><el-tag type="warning" effect="light">生产中</el-tag></td>
</tr>
</tbody>
</table>
</table>
<div id="scrollBody2" ref="moocBox2" style="overflow:scroll">
<div>
<table :class="{ marquee_top: animate }">
<tr v-for="itemy in listData" class="rollData" ref="con1" :key="itemy">
<td v-for="(itemz,index2) in itemy" :key="itemz">
<el-tag v-if="index2==6" :type="getType(itemz)">{{ stateOption[itemz] }}</el-tag>
<span v-else>{{ itemz }}</span>
</td>
</tr>
</table>
<table :class="{ marquee_top: animate }" v-show="scrollVivible2">
<tr v-for="itemy in listData" class="rollData" ref="con1" :key="itemy">
<td v-for="(itemz,index2) in itemy" :key="itemz">
<el-tag v-if="index2==6" :type="getType(itemz)">{{ stateOption[itemz] }}</el-tag>
<span v-else>{{ itemz }}</span>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</el-col>
@ -140,7 +113,7 @@
<el-col :xs="24" :md="9">
<div class="box">
<div class="boxtitle">
<div style="margin-left: 6px;font-size: 18px; margin-top: 6px">全年生产统计</div>
<div style="margin-left: 6px;font-size: 18px; margin-top: 6px">本月生产统计</div>
</div>
<div class="boxmain" id="chart1">
</div>
@ -289,99 +262,90 @@ export default {
data: [140, 232, 101, 264, 90, 340, 250,140, 232, 101, 264, 90, 340, 250,140, 232, 101, 264, 90, 340, 250,140, 232, 101, 264, 90, 340, 250, 340, 250]
}]
},
workerData: [
{
name: '张三',
team: 'Tom',
post: '岗位1',
state: 1
},
{
name: '张三',
team: 'Tom',
post: '岗位1',
state: 1
},
{
name: '张三',
team: 'Tom',
post: '岗位1',
state: 1
},
{
name: '张三',
team: 'Tom',
post: '岗位1',
state: 1
},
],
taskBoard: {
header: ['姓名', '岗位', '班次', '状态'],
headerBGC: '#0a3f44',
data: [
['小王', '成型人', '白班', '到岗'],
['小李', '成型人', '白班', '到岗'],
['小张', '成型人', '白班', '未到岗'],
],
index: true,
columnWidth: [50],
align: ['center'],
},
tableData: [
['产品名称', '型号', '计划周期', '完成进度', '产量', '状态'],
['ZB2', 'xxx', '2023-11-01至2023-11-11', '70', '5000', '生产中'],
],
taskBoard2: {
header: ['产品名称', '型号', '计划周期', '完成进度', '产量', '状态', 'xx'],
header: ['炉号','产品名称', '型号', '规格', '最近产量','锅数','设备状态'],
headerBGC: '#0a3f44',
waitTime: 3000,
rowNum: 8,
columnWidth: [2, 1, 1, 1, 1, 1],
waitTime: 1000,
rowNum: 7,
columnWidth: [2, 1, 1, 1, 1, 1,1],
data: [
['<span style="color:#37a2da;">行1列1</span>', '行1列2', '行1列3', '<el-progress :text-inside="true" :stroke-width="14" :percentage="100" status="green"/>', '行1列3', '行1列3', 'xx'],
['行2列1', '<span style="color:#32c5e9;">行2列2</span>', '行2列3', '行1列3', '行1列3', '行1列3', 'xx'],
['行3列1', '行3列2', '<span style="color:#67e0e3;">行3列3</span>', '行1列3', '行1列3', '行1列3', 'xx'],
['行4列1', '<span style="color:#9fe6b8;">行4列2</span>', '行4列3', '行1列3', '行1列3', '行1列3', 'xx'],
['<span style="color:#ffdb5c;">行5列1</span>', '行5列2', '行5列3', '行1列3', '行1列3', '行1列3', 'xx'],
['行6列1', '<span style="color:#ff9f7f;">行6列2</span>', '行6列3', '行1列3', '行1列3', '行1列3', 'xx'],
['行7列1', '行7列2', '<span style="color:#fb7293;">行7列3</span>', '行1列3', '行1列3', '行1列3', 'xx'],
['行8列1', '<span style="color:#e062ae;">行8列2</span>', '行8列3', '行1列3', '行1列3', '行1列3', 'xx'],
['<span style="color:#e690d1;">行9列1</span>', '行9列2', '行9列3', '行1列3', '行1列3', '行1列3', 'xx'],
['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3', 'xx'],
['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3', 'xx'],
['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3', 'xx'],
['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3', 'xx'],
['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3', 'xx'],
['1','光纤预制棒', 'JZ2','31/470', '120', '33', '<span style="text-align:center;display:inline-block;padding:0 10px;height:30px;line-height:30px;border:1px solid rgb(250,236,216);background:rgba(253, 246, 236);color:rgb(230, 162, 60);border-radius:5px;margin-top:10px">进行中</span>'],
['2','光纤预制棒', 'JZ2','32/470', '125', '26', '<span style="text-align:center;display:inline-block;padding:0 10px;height:30px;line-height:30px;border:1px solid rgb(250,236,216);background:rgba(253, 246, 236);color:rgb(230, 162, 60);border-radius:5px;margin-top:10px">进行中</span>'],
['3','光纤预制棒', 'JZ2','33/470', '100', '30', '<span style="text-align:center;display:inline-block;padding:0 10px;height:30px;line-height:30px;border:1px solid rgb(250,236,216);background:rgba(253, 246, 236);color:rgb(230, 162, 60);border-radius:5px;margin-top:10px">进行中</span>'],
['4','光纤预制棒', 'JZ2','31/470', '105', '28', '<span style="text-align:center;display:inline-block;padding:0 10px;height:30px;line-height:30px;border:1px solid rgb(250,236,216);background:rgba(253, 246, 236);color:rgb(230, 162, 60);border-radius:5px;margin-top:10px">进行中</span>'],
['5','光纤预制棒', 'JZ2','37/470', '120', '18', '<span style="text-align:center;display:inline-block;padding:0 10px;height:30px;line-height:30px;border:1px solid rgb(250,236,216);background:rgba(253, 246, 236);color:rgb(230, 162, 60);border-radius:5px;margin-top:10px">进行中</span>'],
['6','光纤预制棒', 'JZ2','33/470', '120', '24', '<span style="text-align:center;display:inline-block;padding:0 10px;height:30px;line-height:30px;border:1px solid rgb(250,236,216);background:rgba(253, 246, 236);color:rgb(230, 162, 60);border-radius:5px;margin-top:10px">进行中</span>'],
['7','光纤预制棒', 'JZ2','38/470', '120', '29', '<span style="text-align:center;display:inline-block;padding:0 10px;height:30px;line-height:30px;border:1px solid rgb(250,236,216);background:rgba(253, 246, 236);color:rgb(230, 162, 60);border-radius:5px;margin-top:10px">进行中</span>'],
['8','光纤预制棒', 'JZ2','34/470', '120', '25', '<span style="text-align:center;display:inline-block;padding:0 10px;height:30px;line-height:30px;border:1px solid rgb(250,236,216);background:rgba(253, 246, 236);color:rgb(230, 162, 60);border-radius:5px;margin-top:10px">进行中</span>'],
],
index: true,
// index: true,
columnWidth: [50],
align: ['center'],
chartInterval1: null,
chartInterval2: null,
chartInterval3: null
},
liData: ['序号', '型号', '完成进度', '产量', '状态'],
liData1: ['序号', '型号', '完成进度', '产量', '状态'],
listData1: [
["JZ2", 100, "368",40],
["JZ2", 90, "368",40],
["JZ2", 80, "368",30],
["JZ2", 70, "368",30],
["JZ2", 60, "368",40],
["JZ2", 50, "368",30],
["JZ2", 40, "368",30],
["JZ2", 30, "368",40],
],
liData: ['炉号','产品名称', '型号', '规格', '最近产量','锅数','设备状态'],
listData: [
["光纤预制管A", 100,"368",'已完成'],
["光纤预制管B", 90,"368",'已完成'],
["光纤预制管C", 80,"368",'已完成'],
["光纤预制管D", 70,"368",'已完成'],
["光纤预制管E", 60,"368",'已完成'],
["光纤预制管F", 50,"368",'已完成'],
["光纤预制管G", 40,"368",'已完成'],
["光纤预制管H", 30,"368",'已完成'],
["1","光纤预制管A", "ZJ2", '30/268', 100, 30, 40],
["2","光纤预制管B", "ZJ2", '40/368', 90, 30, 30],
["3","光纤预制管C", "ZJ2", '36/470', 80, 30, 30],
["4","光纤预制管D", "ZJ2", '35/300', 70, 30, 40],
["5","光纤预制管E", "ZJ2", '30/268', 60, 30, 30],
["6","光纤预制管F", "ZJ2", '30/268', 50, 30, 40],
["7","光纤预制管G", "ZJ2", '30/268', 40, 30, 30],
["8","光纤预制管H", "ZJ2", '30/268', 30, 30, 30],
],
speed: 2000,
myScroll: null,
myScroll1: null,
myScroll2: null,
iliHeight: 30,
time: null,
delay: 20,
scrollVivible1:true,
scrollVivible2:true,
stateOption:{
30:'生产中',
40:'已完成'
}
}
},
mounted() {
this.myScroll = setInterval(() => {
this.scrollUp();
}, this.speed);
let Container1 = document.getElementById('scrollContainer1').clientHeight;
let tableHeight1 = Container1-40;
document.getElementById('scrollWrapper1').style.height = Container1+'px';
document.getElementById('scrollBody1').style.height = tableHeight1+'px';
let scrollHeight1 = this.$refs.moocBox1.scrollHeight/2;
if(tableHeight1>scrollHeight1){
this.scrollVivible1 = false;
}else{
this.scrollVivible1 = true;
this.myScroll1 = setInterval(() => {
this.scrollUp1();
}, this.speed);
}
let Container2 = document.getElementById('scrollContainer2').clientHeight;
let tableHeight2 = Container2-40;
document.getElementById('scrollWrapper2').style.height = Container2+'px';
document.getElementById('scrollBody2').style.height = tableHeight2+'px';
let scrollHeight2 = this.$refs.moocBox2.scrollHeight/2;
if(tableHeight2>scrollHeight2){
this.scrollVivible2 = false;
}else{
this.scrollVivible2 = true;
this.myScroll2 = setInterval(() => {
this.scrollUp2();
}, this.speed);
}
let chart1Option = deepCopy(this.basicOption)
this.setChart("chart1", chart1Option);
let chart2Option = deepCopy(this.basicOption)
@ -450,6 +414,13 @@ export default {
this.setChart("chart3", chart3Option)
},
methods: {
getType(type){
if(type==30){
return "primary"
}else if(type==40){
return "success"
}
},
getStatus(status){
if(status==100){
return "success"
@ -476,139 +447,198 @@ export default {
} catch (error) { }
}, 500)
},
//任务进度
getMtask(){
let that = this;
let obj ={};
that.$API.pm.mtask.list.req(obj).then((res) => {
console.log('任务进度:',res);
debugger;
});
},
//生产线
getProductLine(){
let that = this;
let obj ={
query: {start_date:this.start_date,end_date:this.end_date,dept_name: "7车间"},
};
let obj1 ={
query: {start_date:this.start_date,end_date:this.end_date},
};
//7车间生产线
that.$API.bi.dataset.exec.req('linedept7').then((res1) => {
console.log('7车间生产线:',res1);
debugger;
});
//7车间生产按炉统计
that.$API.bi.dataset.exec.req('stoveStatics', obj1).then((res2) => {
console.log('7车间生产按炉统计:',res2);
debugger;
});
//生产车间按日统计 本月合格率统计&昨日合格统计
that.$API.bi.dataset.exec.req('lineDay', obj).then((res3) => {
console.log('生产车间按日统计:',res3);
debugger;
});
},
//滚动
scrollUp() {
// console.log(this.$refs.moocBox.scrollTop)
// console.log(this.$refs.moocBox.scrollHeight)
if (this.$refs.moocBox.scrollTop >= this.$refs.moocBox.scrollHeight / 2) {
scrollUp1() {
let scrollTop = this.$refs.moocBox1.scrollTop;
let scrollHeight = this.$refs.moocBox1.scrollHeight;
if (scrollTop >=scrollHeight/2) {
//判断条件是否达到临界
this.$refs.moocBox.scrollTop = 0;
this.$refs.moocBox1.scrollTop = 0;
} else {
this.$refs.moocBox.scrollTop=this.$refs.moocBox.scrollTop+40;
this.$refs.moocBox1.scrollTop=scrollTop+40;
}
},
// 鼠标滑过暂停滚动
mouseOver1() {
clearInterval(this.myScroll1);
}, //鼠标移开重新滚动
mouseOut1() {
this.myScroll1 = setInterval(() => {
this.scrollUp1();
},
this.speed);
},
//滚动
scrollUp2() {
if (this.$refs.moocBox2.scrollTop >= this.$refs.moocBox2.scrollHeight / 2) {
//判断条件是否达到临界
this.$refs.moocBox2.scrollTop = 0;
} else {
this.$refs.moocBox2.scrollTop=this.$refs.moocBox2.scrollTop+40;
}
}, // 鼠标滑过暂停滚动
mouseOver() {
clearInterval(this.myScroll);
mouseOver2() {
clearInterval(this.myScroll2);
}, //鼠标移开重新滚动
mouseOut() {
this.myScroll = setInterval(() => {
this.scrollUp();
mouseOut2() {
this.myScroll2 = setInterval(() => {
this.scrollUp2();
},
this.speed);
},
},
beforeDestoryed() {
clearInterval(myScroll);
this.myScroll = null;
clearInterval(myScroll1);
clearInterval(myScroll2);
this.myScroll1 = null;
this.myScroll2 = null;
},
}
</script>
<style scoped>
.dashboard {
background-image: url("https://cdn-upload.datav.aliyun.com/upload/download/1678758744858-EWBrlDVf.jpg");
color: #fff;
font-family: "Microsoft Yahei" !important;
}
.header {
background: url("/public/img/photon_header.png");
border-bottom: none;
background-size: 100% 100%;
font-size: 26px;
display: block;
height: 80px;
color: rgb(149, 255, 255);
font-family: 'Microsoft Yahei';
text-align: center;
padding: 12px 0px;
}.box {
background: rgba(10, 63, 68, 0.5);
height: 100%;
}
.boxtitle {
color: #fff;
font-size: 16px;
display: flex;
height: 36px;
background: linear-gradient(40deg, rgba(11, 101, 140, 0.451), rgba(0, 34, 48, 0.335), rgba(11, 101, 140, 0.451));
}
.bgimg {
background-image: url('https://cdn-upload.datav.aliyun.com/upload/download/1678762309227-E6RP8z2R.png');
background-size: 140% 100%;
}
.boxmain {
height: calc(100% - 40px);
}
@media screen and (max-width: 800px) {
.boxmain {
height: 200px;
@font-face {
font-family: 'myfont'; /* 字体名称 */
src: url('../../style/youShe.ttf'); /* 字体文件相对路径 */
}
}
.flex_center {
display: flex;
align-items: center;
justify-content: center
}
.border {
border: 1px dashed #49bcf7;
}
.bigdata {
font-size: 24px;
}
.boxlabel {
margin-left: 6px;
font-size: 18px;
margin-top: 6px
}
.wrapper{
overflow: hidden;
height: 220px;
}
.wrapper2{
height: 180px;
overflow: hidden;
}
table {
width: 100%;
text-align: center;
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
width: 100%;
}
.title{
height: 40px;
line-height: 40px;
text-align: center;
}
table th {
font-size: 14px;
background: rgba(0, 0, 0, .1);
}
table td {
font-size: 14px;
height: 40px;
.dashboard {
background-image: url("https://cdn-upload.datav.aliyun.com/upload/download/1678758744858-EWBrlDVf.jpg");
color: #fff;
font-family: "Microsoft Yahei" !important;
}
.header {
background: url("/public/img/photon_header.png");
border-bottom: none;
background-size: 100% 100%;
font-size: 26px;
display: block;
height: 80px;
color: rgb(149, 255, 255);
font-family: 'Microsoft Yahei';
text-align: center;
color: rgba(255, 255, 255, .8);
}
table th,table td{
padding: .1rem 0;
border-bottom: none !important;
background:none !important;
}
.marquee_top{
transition: all 0.5s ease-in-out;
margin-top: -26px;
}
.totall{
color: #fff;
background-color: rgb(10, 63, 68);
}
.rollData{
background-color: rgb(10, 39, 50);
}
.rollData:nth-of-type(2n+1){
background-color: rgb(0, 59, 81);
}
padding: 12px 0px;
}.box {
background: rgba(10, 63, 68, 0.5);
height: 100%;
}
.boxtitle {
color: #fff;
font-size: 16px;
display: flex;
height: 36px;
background: linear-gradient(40deg, rgba(11, 101, 140, 0.451), rgba(0, 34, 48, 0.335), rgba(11, 101, 140, 0.451));
}
.bgimg {
background-image: url('https://cdn-upload.datav.aliyun.com/upload/download/1678762309227-E6RP8z2R.png');
background-size: 140% 100%;
}
.boxmain {
height: calc(100% - 40px);
}
@media screen and (max-width: 800px) {
.boxmain {
height: 200px;
}
}
.flex_center {
display: flex;
align-items: center;
justify-content: center
}
.border {
border: 1px dashed #49bcf7;
}
.bigdata {
font-size: 24px;
}
.boxlabel {
margin-left: 6px;
font-size: 18px;
margin-top: 6px
}
.wrapper{
overflow: hidden;
height: 220px;
}
.wrapper2{
height: 180px;
overflow: hidden;
}
table {
width: 100%;
text-align: center;
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
width: 100%;
}
.title{
height: 40px;
line-height: 40px;
text-align: center;
}
table th {
font-size: 14px;
background: rgba(0, 0, 0, .1);
}
table td {
font-size: 14px;
height: 40px;
text-align: center;
color: rgba(255, 255, 255, .8);
}
table th,table td{
padding: .1rem 0;
border-bottom: none !important;
background:none !important;
}
.marquee_top{
transition: all 0.5s ease-in-out;
margin-top: -26px;
}
.totall{
color: #fff;
background-color: rgb(10, 63, 68);
}
.rollData{
background-color: rgb(10, 39, 50);
}
.rollData:nth-of-type(2n+1){
background-color: rgb(0, 59, 81);
}
</style>

147
src/views/bigScreen/textIndex.vue
View File

@ -2,17 +2,17 @@
<el-container class="container">
<el-header class="pageHeader">
<span class="top-line top-line-left"></span>
光子科技
中建材光子科技有限公司
<span class="top-line top-line-right"></span>
</el-header>
<el-main style="padding:0" id="mainBlock">
<el-main style="padding:0;overflow: hidden;" id="mainBlock">
<el-row style="height:100%">
<div style="position: absolute;left: 0;width:20%;z-index:10">
<div style="display:flex;flex-direction: column;height:100%;padding:0 10px">
<div class="flexItem" style="flex:1">
<div class="blockTitle">
<div class="blockTitleIcon"></div>
<div>本周交付率</div>
<div>本周交付数</div>
</div>
<div id="line1" style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;"></div>
</div>
@ -93,7 +93,7 @@
<div>库存情况</div>
</div>
<dv-scroll-board id="scrollTable" :config="taskBoard"
:style="{ 'width': '100%', 'height': blockHeight,'margin-top':'5px'}" />
:style="{ 'width': '100%', 'height': blockTableHeight,'margin-top':'5px'}" />
</div>
</div>
</div>
@ -150,7 +150,7 @@ export default {
return {
blockHeight: null,
taskBoard: {
header: ['物料编号', '存放车间', '库存数量'],
header: ['名称', '规格', '数量'],
headerBGC: 'rgb(10,63,68)',
// waitTime: 1000,
columnWidth: [1, 1, 1],
@ -195,13 +195,18 @@ export default {
currentWeek:'',
currentDay:'',
timerTime:null,
start_date:'',
end_date:'',
}
},
mounted() {
let that = this;
let height = document.getElementById('mainBlock').clientHeight;
let height0 = height / 3 - 50;
let height0 = height / 3 - 55;
let height1 = height0- 20;
this.blockHeight = height0 + 'px';
this.blockTableHeight = height1 + 'px';
document.getElementById('scrollTable').style.height = height1 + 'px'
this.showTime();
this.$nextTick(() => {
that.initChart();
@ -211,8 +216,32 @@ export default {
that.showTime();
}, 1000);
})
//一天的毫秒数
const ondDayTime = 86400000
let cDate = new Date();
let week = cDate.getDay();//当前时间的week数
// let time = ' 星期' + '日一二三四五六'.charAt(week);//当前时间周几
let weekFirst = week-1;//第一天对应的天数
let weekLast = 7-week;//最后一天对应的天数
let first = new Date(new Date(cDate.getTime() - (weekFirst * ondDayTime)));//本周周一
let last = new Date(new Date(cDate.getTime() + (weekLast * ondDayTime)));//本周周日
this.start_date = first.getFullYear()+'-'+(first.getMonth()+1)+'-'+first.getDate();
this.end_date = last.getFullYear()+'-'+(last.getMonth()+1)+'-'+last.getDate();
console.log(this.start_date)
console.log(this.end_date);
this.getsaleOut();
},
methods: {
getsaleOut(){
let that = this;
let obj ={
query: {start_date:this.start_date,end_date:this.end_date,dept_name: "6车间"},
};
that.$API.bi.dataset.exec.req('3448456854219546624', obj).then((res) => {
console.log(res);
debugger;
});
},
showTime() {
this.currentTime = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss');
this.currentWeek = this.$TOOL.dateFormat(new Date(), 'week');
@ -254,24 +283,24 @@ export default {
const scene = new BABYLON.Scene(engine);
scene.clearColor = BABYLON.Color3.Black(); //BABYLON.Color3(1, 0, 1);
// 创建材质
var material = new BABYLON.PBRMaterial("groundMaterial", scene);
material.metallic = 1; // 材质金属度
const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 10, height: 10 });
const groundMaterial = new BABYLON_GRID.GridMaterial("groundMaterial", scene);
groundMaterial.majorUnitFrequency = 5;
groundMaterial.minorUnitVisibility = 0.1;
groundMaterial.gridRatio = 0.1;
ground.material = groundMaterial;
ground.position.y = -0.1
// var material = new BABYLON.PBRMaterial("groundMaterial", scene);
// material.metallic = 1; // 材质金属度
// const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 10, height: 10 });
// const groundMaterial = new BABYLON_GRID.GridMaterial("groundMaterial", scene);
// groundMaterial.majorUnitFrequency = 60;
// groundMaterial.minorUnitVisibility = 0.1;
// groundMaterial.gridRatio = 0.1;
// ground.material = groundMaterial;
// ground.position.y = -0.01
// 加载背景图片
const backgroundImage = new BABYLON.Layer('', 'img/photon_bg.png', scene, true);
const camera = new BABYLON.ArcRotateCamera("camera", that.initialAlpha, that.initialBeta, that.initialRadius, new BABYLON.Vector3(0, 0.5, 0.3));
const camera = new BABYLON.ArcRotateCamera("camera", that.initialAlpha, that.initialBeta, that.initialRadius, new BABYLON.Vector3(0, 0.1, 0.3));
that.initialTarget = camera.getTarget();
// camera.lowerBetaLimit = Math.PI / 2.6;
camera.upperBetaLimit = Math.PI / 2.3; //无法移动到地面以下
camera.lowerBetaLimit = Math.PI / 2.6;
camera.upperBetaLimit = Math.PI / 2.6; //无法移动到地面以下
camera.attachControl(canvas, true);
camera.maxZ = 1000; // 调整适当的值
camera.maxZ = 700; // 调整适当的值
camera.wheelDeltaPercentage = 0.02;
// 相机限制
camera.lowerRadiusLimit = 2;
@ -297,6 +326,8 @@ export default {
button_main.color = "white";
button_main.cornerRadius = 20;
button_main.background = "green";
button_main.top='80px';
button_main.left='0px';
control_main.addControl(button_main)
button_main.onPointerClickObservable.add(() => {
if (camera.alpha != that.initialAlpha || camera.beta != that.initialBeta || camera.radius != that.initialRadius) {
@ -325,7 +356,8 @@ export default {
mesh_name.fontSize = '14px';
mesh_rect.addControl(mesh_name);
// var remoteGlbUrl = process.env.VUE_APP_BASEURL + "/media/model/photon3.glb";
BABYLON.SceneLoader.Append('glb/', "photon3.glb", scene, function (scene) {
BABYLON.SceneLoader.Append('glb/', "photon4.glb", scene, function (scene) {
console.log(scene)
//关闭灯光
// scene.lights[1].setEnabled(false);
engine.hideLoadingUI()
@ -383,6 +415,7 @@ export default {
checkbox.isChecked = false;
checkbox.marginLeft = '16px'
checkbox.color = "green";
checkbox.top='80px';
checkbox.onIsCheckedChangedObservable.add(function (value) {
if (value) {
camera.useAutoRotationBehavior = true;
@ -396,6 +429,7 @@ export default {
header.width = "80px";
header.textHorizontalAlignment = BABYLON_GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
header.color = "white";
header.top='80px';
control_main.addControl(header);
// 添加抓取事件
const hl1 = new BABYLON.HighlightLayer("hl1", scene);
@ -439,7 +473,7 @@ export default {
// mesh_rect.isVisible = true;
// that.infoVisibel = true;
// }
if (mesh.name == '单身宿舍.005_primitive3') {
if (mesh.name == '单身宿舍.004_primitive3') {
//单身宿舍.003_primitive3
// 在选中的 mesh 上添加高亮效果
highlightLayer.addMesh(mesh, new BABYLON.Color3(0.1, 0.9, 0.9));
@ -622,7 +656,7 @@ export default {
],
yAxis: [
{
name: "合格率(%)",
name: "交付数",
type: 'value',
nameTextStyle: {
color: '#ffffff'
@ -1173,7 +1207,7 @@ export default {
pieDom.style.height = this.blockHeight;
let pieChart = echarts.init(pieDom);
let pieoption = {
color: ['rgb(155,248,249)', 'rgb(110,181,249)','rgb(3,195,198)','rgb(205,248,248)', 'rgb(248,189,118)'],
color: ['rgb(3,195,198)','rgb(155,248,249)', 'rgb(110,181,249)','rgb(205,248,248)', 'rgb(248,189,118)'],
legend: {
bottom: 10,
// top: 'bottom',
@ -1200,12 +1234,60 @@ export default {
itemStyle: {
borderRadius: 2
},
// label: {
// fontSize: 12,
// alignTo: 'edge',
// formatter: '{b}\n',
// edgeDistance: 10,
// lineHeight: 20,
// rich: {
// title: {
// fontSize: 12,
// color: '#999',
// lineHeight: 50,
// },
// }
// },
// labelLayout: function (params) {
// var isLeft = params.labelRect.x < myChart.getWidth() / 2;
// var points = params.labelLinePoints;
// points[2][0] = isLeft? params.labelRect.x: params.labelRect.x + params.labelRect.width;
// return {
// labelLinePoints: points
// };
// },
label: {
minMargin: 10,
edgeDistance: 10,
fontSize: '12px'
},
labelLine: {
lineStyle: {
// type: [6]
},
length: 2,
length2: 5
},
labelLayout: function (params) {
var isLeft = params.labelRect.x < myChart.getWidth() / 2
var points = params.labelLinePoints;
points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width
return {
labelLinePoints: points,
dy: -10,
dx: 0
}
},
data: [
{ value: 250, name: '合格' },
{ value: 8, name: '椭圆弯曲' },
{ value: 0, name: '大小头' },
{ value: 2, name: '偏壁' },
{ value: 6, name: '结石气线' },
{ value: 150, name: '合格' },
]
}
]
@ -1220,15 +1302,25 @@ export default {
}
</script>
<style>
<style scoped>
/* @font-face {
font-family: 'youShe';
src: url('./youShe.ttf') format('truetype');
font-weight: normal;
font-style: normal;
} */
@font-face {
font-family: 'myfont'; /* 字体名称 */
src: url('../../style/youShe.ttf'); /* 字体文件相对路径 */
}
.container {
background: url('/public/img/photon_bg.png') no-repeat;
background-size: cover;
}
.pageHeader {
height: 70px;
font-size: 28px;
/* height: 70px; */
font-size: 32px;
background: none;
border-bottom: none;
position: relative;
@ -1236,6 +1328,7 @@ export default {
text-align: center;
color: #ffffff;
padding: 1px;
font-family: "myfont";
background: url('/public/img/photon_header.png') no-repeat;
background-size: 100% 100%;
}

16
src/views/home/widgets/index_photon.vue
View File

@ -38,7 +38,7 @@
<p class="countrate">同比前天<span class="redColor"> 8.63%▲</span></p>
</div>
<div class="countItem">
<div class="countname">AVG交付数</div>
<div class="countname">预制棒管交付数</div>
<p class="countnum">6700</p>
<p class="countrate">同比前天<span class="redColor"> 8.63%▲</span></p>
</div>
@ -52,11 +52,11 @@
<div class="countname">本月累积交付数</div>
<div style="display: flex;justify-content: space-around;padding-top: 25px;font-size: 20px;">
<div>
<div>预制棒</div>
<div>预制棒管</div>
<p class="countnum">6700</p>
</div>
<div>
<div>预制棒</div>
<div>AVG</div>
<p class="countnum">6700</p>
</div>
</div>
@ -114,10 +114,12 @@
</div>
<div style="padding: 20px 24px 24px 24px;">
<el-table :data="tableData" style="width: 100%;height: 285px;">
<el-table-column prop="index" label="序号"/>
<el-table-column prop="number" label="设备编号"/>
<el-table-column prop="name" label="设备名称"/>
<el-table-column prop="state" label="设备状态"/>
<el-table-column prop="index" label="序号" width="40"/>
<el-table-column prop="number" label="名称"/>
<el-table-column prop="name" label="规格"/>
<el-table-column prop="state" label="型号"/>
<el-table-column prop="state" label="单位"/>
<el-table-column prop="state" label="库存"/>
</el-table>
</div>
</div>

194
src/views/hrm/attendance.vue Normal file
View File

@ -0,0 +1,194 @@
<template>
<el-container>
<el-header>
<div class="left-panel">
<el-button
type="primary"
:loading = 'dLoading'
icon="el-icon-plus"
@click="addAttendance"
>新增</el-button>
</div>
<div class="right-panel">
<el-select
v-model="query.belong_dept"
clearable>
<el-option v-for="item in deptData"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
<el-date-picker
v-model="monthV"
type="month"
style="margin-left:4px"
placeholder="选择月份"
@change="handleQuery"
/>
<div class="right-panel-search">
<el-input
v-model="query.search"
placeholder="员工姓名/编号/手机号"
clearable
@keyup.enter="handleQuery"
></el-input>
<el-button
type="primary"
icon="el-icon-search"
@click="handleQuery"
></el-button>
</div>
</div>
</el-header>
<el-main class="nopadding">
<scTable
ref="table"
:apiObj="apiObj"
row-key="id"
stripe
>
<el-table-column label="姓名" prop="employee_name">
</el-table-column>
<el-table-column label="班组" prop="shift_name">
</el-table-column>
<el-table-column label="所属部门" prop="belong_dept_name">
</el-table-column>
<el-table-column label="到岗状态">
<template #default="scope">
<el-tag :type="states[scope.row.state].color">{{states[scope.row.state].label}}</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" align="left" width="170">
<template #default="scope">
<el-button
link
type="warning"
size="small"
@click="handleForm(scope.row)"
>删除
</el-button>
</template>
</el-table-column>
</scTable>
</el-main>
<save-dialog
v-if="dialog.save"
ref="saveDialog"
@success="handleSaveSuccess"
@closed="dialog.save = false"
>
</save-dialog>
</el-container>
</template>
<script>
import saveDialog from "./attendance_form.vue";
export default {
name: "clock_record",
components: {
saveDialog
},
data() {
return {
dialog: {
save: false,
},
apiObj: this.$API.hrm.attendance.list,
deptData: [],
tableData:[],
monthV: null,
query: {},
userList:[],
dLoading: false,
cLoading:false,
ElLoading:null,
deptSearch:{},
states:{
'pending': {"label": "待定", "color": "info"},
'normal': {"label": "正常", "color": "success"},
'late': {"label": "迟到", "color": "danger"},
'early_leave': {"label": "早退", "color": "danger"},
'absent': {"label": "未到岗", "color": "danger"},
'leave': {"label": "请假", "color": "warning"},
},
};
},
mounted() {
this.getDept();
this.ElLoading =null;
},
methods: {
async getDept() {
let res = await this.$API.system.dept.list.req({ page: 0, type__in: 'dept' });
this.deptData = res;
},
handleQuery(){
if(this.monthV){
this.query.year = this.monthV.getFullYear();
this.query.month = this.monthV.getMonth() + 1;
}else{
this.query.year = null;
this.query.month = null;
}
this.$refs.table.queryData(this.query)
},
addAttendance(){
this.dialog.save = true
this.$nextTick(() => {
this.$refs.saveDialog.open('add')
})
},
handleForm(row){
this.$confirm(`确定删除吗？`, "提示", {
type: "warning",
}).then(() => {
this.$API.hrm.attendance.delete.req(row.id).then((res) => {
this.$message.success("删除成功");
this.$refs.table.refresh();
}).catch((err) => {
});
}).catch(() => { });
},
handleSaveSuccess(){
this.$refs.table.refresh();
},
},
};
</script>
<style scoped>
.nomalState {
font-size: 12px;
padding: 0 9px;
height: 24px;
line-height: 23px;
border-radius: 5px;
vertical-align: top;
display: inline-block;
}
.nomalState.type1{
color: #F8DD4E;
background-color: #f9f7e6;
border: 1px solid #f3f0d5;
}
.nomalState.type2{
color: #FF0000;
background-color: #f7e7e7;
border: 1px solid #fbe0e0;
}
.nomalState.type3{
color: #FA8435;
background-color: #fef6ed;
border: 1px solid #fde9cc;
}
.nomalState.type4{
color: #44CEF6;
background-color: #f0f9fb;
border: 1px solid #d2f9ff;
}
</style>

273
src/views/hrm/attendance_form.vue Normal file
View File

@ -0,0 +1,273 @@
<template>
<el-drawer
:title="titleMap[mode]"
v-model="visible"
:size="1000"
destroy-on-close
@closed="closeDrawer"
>
<el-container v-loading="loading">
<el-main style="padding: 0 20px 20px 20px">
<el-form
ref="dialogForm"
:model="form"
:rules="rules"
:disabled="mode==='show'"
label-width="120px"
>
<el-row>
<el-col :md="12" :sm="24">
<el-form-item label="所属部门">
<el-select
v-model="belongDept"
clearable
style="width:100%"
@change="getEmployee"
>
<el-option v-for="item in deptOptions"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="班次">
<el-select
v-model="form.shift"
placeholder="班次"
clearable
style="width:100%"
>
<el-option
v-for="item in shiftOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="工作日期">
<el-date-picker
v-model="form.work_date"
type="date"
placeholder="工作日期"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
style="width:100%"
/>
</el-form-item>
</el-col>
<!-- <el-col :md="12" :sm="24">
<el-form-item label="备注">
<el-input v-model="form.note" placeholder="备注"></el-input>
</el-form-item>
</el-col> -->
</el-row>
</el-form>
<sc-form-table
v-model="userList"
:addTemplate="addTemplate"
placeholder="暂无数据"
>
<el-table-column prop="name" label="排序" >
<template #default="scope">
<span>{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column prop="belong_dept_name" label="部门" >
<template #default="scope">
<span>{{ scope.row.belong_dept_name }}</span>
</template>
</el-table-column>
<el-table-column prop="type" label="到岗状态">
<template #default="scope">
<el-select
v-model="scope.row.state"
filterable
placeholder="到岗状态"
>
<el-option
v-for="item in stateOptions"
:key="item.id"
:label="item.label"
:value="item.id"
></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column prop="note" label="备注">
<template #default="scope">
<el-input
v-model="scope.row.note"
placeholder="请输入内容"
></el-input>
</template>
</el-table-column>
<!-- <el-table-column prop="open" label="操作" width="80" align="center">
<template #default="scope">
<el-button
text
type="primary"
size="small"
@click="createUserPost(scope.row)"
>保存</el-button
>
</template>
</el-table-column> -->
</sc-form-table>
</el-main>
<el-footer v-if="mode!=='show'">
<el-button
type="primary"
:loading="isSaveing"
@click="submit"
>
保存
</el-button>
<el-button @click="visible = false">取消</el-button>
</el-footer>
</el-container>
</el-drawer>
</template>
<script>
const defaultForm = {
list:[],
};
export default {
emits: ["success", "closed"],
data() {
return {
belongDept:'',
loading: false,
mode: "add",
titleMap: {
add: '新增记录',
edit: '编辑记录',
show: '查看记录'
},
stateOptions:[
{label: "待定", id: "pending"},
{label: "正常", id: "normal"},
{label: "迟到", id: "late"},
{label: "早退", id: "early_leave"},
{label: "未到岗", id: "absent"},
{label: "请假", id: "leave"},
],
visible: false,
isSaveing: false,
form: defaultForm,
userList:[],
deptOptions: ['6车间','7车间','8车间','10车间'],
shiftOptions:[],
selectionFilters: [],
setFiltersVisible: false,
};
},
mounted() {
this.getShiftOptions();
},
methods: {
getShiftOptions() {
this.$API.system.dept.list.req({ page: 0, type__in: 'dept' }).then((res) => {
this.deptOptions = res;
});
this.$API.mtm.shift.req({page:0}).then(res=>{
this.shiftOptions = res;
})
},
getEmployee(){
this.$API.hrm.employee.list.req({belong_dept:this.belongDept,page:0}).then(res=>{
this.userList = [];
res.forEach(item=>{
let obj ={};
obj.name = item.name;
obj.employee = item.id;
obj.belong_dept_name = item.belong_dept_name;
obj.state = 'normal';
obj.note = '';
this.userList.push(obj)
})
})
},
//显示
open(mode) {
this.mode = mode;
this.visible = true;
return this;
},
closeDrawer() {
this.visible = false;
this.$emit('closed');
},
//表单提交方法
submit() {
this.$refs.dialogForm.validate((valid) => {
if (valid) {
this.isSaveing = true;
let arr = [];
this.userList.forEach(item=>{
let obj = {};
obj.employee = item.employee;
obj.shift = this.form.shift;
obj.state = item.state;
obj.work_date = this.form.work_date;
obj.note = item.note;
arr.push(obj)
})
if (this.mode === 'add') {
this.$API.hrm.attendance.create.req(arr)
.then(res => {
this.isSaveing = false;
this.visible = false;
this.$emit("success");
this.$message.success("操作成功");
return res
}).catch(err => {
this.isSaveing = false;
return err
})
} else {
this.$API.hrm.attendance.update.req(this.form.id, this.form)
.then(res => {
this.isSaveing = false;
this.visible = false;
this.$emit("success", this.form, this.mode);
this.$message.success("操作成功");
return res
}).catch(err => {
this.isSaveing = false;
return err
})
}
}
});
},
//表单注入数据
setData(data) {
//debugger;
// console.log(defaultForm);
// this.form = defaultForm;
this.loading = true;
this.$API.hrm.employee.item.req(data.id).then(res=>{
this.loading = false;
this.form = res
}).catch(e=>{this.loading = false;})
// Object.assign(this.form, data);
},
//设置过滤项
setFilters(filters) {
this.selectionFilters = filters;
this.setFiltersVisible = true;
},
},
};
</script>
<style>
</style>

57
src/views/hrm/employee.vue
View File

@ -7,6 +7,7 @@
placeholder="有无定位卡"
@change="handleQuery"
clearable
v-if="sysName&&sysName!=='photon'"
style="margin-left: 2px; width: 120px"
>
<el-option
@ -21,6 +22,7 @@
placeholder="人员类型"
@change="handleQuery"
clearable
v-if="sysName&&sysName!=='photon'"
style="margin-left: 2px; width: 120px"
>
<el-option
@ -35,6 +37,7 @@
placeholder="人员状态"
@change="handleQuery"
clearable
v-if="sysName&&sysName!=='photon'"
style="margin-left: 2px; width: 120px"
>
<el-option
@ -88,7 +91,7 @@
>
<!-- <el-table-column type="selection" width="50"></el-table-column> -->
<el-table-column label="#" type="index" width="50"></el-table-column>
<el-table-column label="人员类型" prop="type" width="160">
<el-table-column label="人员类型" prop="type" width="160" v-if="sysName&&sysName!=='photon'">
<template #default="scope">
<span
v-if="
@ -113,7 +116,7 @@
</el-table-column>
<el-table-column label="性别" prop="gender" width="60">
</el-table-column>
<el-table-column label="证件照" prop="photo" width="120">
<el-table-column label="证件照" prop="photo" width="120" v-if="sysName&&sysName!=='photon'">
<template #default="scope">
<el-avatar :size="50" :src="scope.row.photo" shape="square" />
</template>
@ -146,7 +149,7 @@
<span v-if="scope.row.user">{{ scope.row.user_.username }}</span>
</template></el-table-column
>
<el-table-column label="定位卡号" prop="blt_" width="180" :show-overflow-tooltip="true">
<el-table-column label="定位卡号" prop="blt_" width="180" :show-overflow-tooltip="true" v-if="sysName&&sysName!=='photon'">
<template #default="scope">
<div v-if="scope.row.blt_">
<div>{{ scope.row.blt_.code }}</div>
@ -190,7 +193,8 @@
@click="handleForm('edit', scope.row)"
>编辑
</el-button>
<el-button
<div v-if="sysName&&sysName =='photon'" style="display:inline-block">
<el-button
v-if="scope.row.blt_"
link
type="danger"
@ -206,6 +210,7 @@
@click="handleBindBlt(10, scope.row)"
>绑卡
</el-button>
</div>
</template>
</el-table-column>
</scTable>
@ -264,6 +269,8 @@ import saveDialog from "./ep_form.vue";
import ScBind from "@/components/scBind/index.vue";
import { genTree } from "@/utils/verificate";
import config from "@/config"
import data from './../../../src/utils/baseJson';
const sysName = data[data.current].base.name;
export default {
name: "employee",
components: {
@ -327,6 +334,8 @@ export default {
mounted() {
// this.getBltList();
this.getDept();
console.log(sysName);
debugger;
},
methods: {
async getDept() {
@ -358,26 +367,26 @@ export default {
},
/*//添加
add(){
this.dialog.save = true
this.$nextTick(() => {
this.$refs.saveDialog.open('add')
})
},
//编辑
table_edit(row){
this.dialog.save = true
this.$nextTick(() => {
this.$refs.saveDialog.open('edit').setData(row)
})
},
//查看
table_show(row){
this.dialog.save = true
this.$nextTick(() => {
this.$refs.saveDialog.open('show').setData(row)
})
},*/
add(){
this.dialog.save = true
this.$nextTick(() => {
this.$refs.saveDialog.open('add')
})
},
//编辑
table_edit(row){
this.dialog.save = true
this.$nextTick(() => {
this.$refs.saveDialog.open('edit').setData(row)
})
},
//查看
table_show(row){
this.dialog.save = true
this.$nextTick(() => {
this.$refs.saveDialog.open('show').setData(row)
})
},*/
//权限设置
permission() {
this.dialog.permission = true;

16
src/views/inm/mio_form.vue
View File

@ -38,11 +38,16 @@
<el-option v-for="item in deptOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="执行人" v-if="form.type == 'do_in' || form.type == 'do_out'">
<el-form-item label="车间执行人" v-if="form.type == 'do_in' || form.type == 'do_out'">
<el-select v-model="form.do_user" clearable style="width: 100%;">
<el-option v-for="item in userOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="仓库执行人" v-if="form.type == 'do_in' || form.type == 'do_out'">
<el-select v-model="form.mio_user" clearable style="width: 100%;">
<el-option v-for="item in userOption" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
</el-form>
<template #footer>
<el-button type="primary" :loading="isSaveing" @click="submit">
@ -84,6 +89,7 @@ export default {
setFiltersVisible: false,
deptOptions: [],
userOptions: [],
userOption:[],
orderOptions: [],
puOrderOptions: [],
supplierOptions: [],
@ -102,7 +108,8 @@ export default {
this.getOrderOptions()
}
else if (type == 'do_in' || type == 'do_out') {
this.getDeptOptions()
this.getDeptOptions();
this.getDeptUser();
}
else if (type == 'other_in') {
this.getSupplierOptions()
@ -141,6 +148,11 @@ export default {
this.userOptions = res
})
},
getDeptUser() {
this.$API.system.user.list.req({ belong_dept__name: '8车间', page: 0 }).then(res => {
this.userOption = res;
})
},
//显示
open(mode = "add", type = "") {
this.mode = mode;

11
src/views/inm/mioitem.vue
View File

@ -14,16 +14,16 @@
<el-descriptions-item label="销售订单" v-if="mioObj.type=='sale_out'">{{ mioObj.pu_order_number }}</el-descriptions-item>
<el-descriptions-item label="客户" v-if="mioObj.type=='sale_out'">{{mioObj.customer_name }}</el-descriptions-item>
</el-descriptions>
<el-button type="primary" @click="mioSubmit" v-auth="'mio.submit'" v-if="mioObj.state == 10">
<!-- <el-button type="primary" @click="mioSubmit" v-auth="'mio.submit'" v-if="mioObj.state == 10">
提交
</el-button>
</el-button> -->
</el-card>
</div>
<div style="height:8px"></div>
<div>
<el-card style="width: 100%" header="物料明细" shadow="hover">
<div>
<el-button type="primary" icon="el-icon-plus" @click="table_add" v-if="mioObj.state == 10"></el-button>
<el-button type="primary" icon="el-icon-plus" @click="table_add" v-if="mioObj.state == 10">新增</el-button>
</div>
<scTable ref="table" :apiObj="apiObj" row-key="id" stripe :params="params" hidePagination hideDo>
<el-table-column type="index" width="50" />
@ -42,11 +42,11 @@
</el-table-column>
<el-table-column label="操作" fixed="right" align="center" width="100px">
<template #default="scope">
<el-link type="primary" @click="table_check(scope.row)" v-if="scope.row.test_user==null">
<el-link type="primary" @click="table_check(scope.row)" v-if="mioObj.state==20&&mioObj.type=='do_in'">
检验
</el-link>
<el-link type="primary" @click="table_Show(scope.row)" v-else>
产看
查看
</el-link>
<el-link type="danger" @click="table_del(scope.row)" v-if="mioObj.state == 10">
删除
@ -60,7 +60,6 @@
<save-dialog v-if="dialog.save" ref="saveDialog" :mioId="mioId" :belongDeptId="belongDeptId" :belongDeptName="mioObj.belong_dept_name" :mioObj="mioObj"
@success="handleSaveSuccess" @closed="dialog.save = false">
</save-dialog>
<check-dialog v-if="dialog.check" ref="checkDialog" :mioitemId="mioitemId"
@success="handleCheckSuccess" @closed="dialog.check = false">
</check-dialog>

2
src/views/inm/mioitem_check.vue
View File

@ -1,6 +1,6 @@
<template>
<el-dialog
title="首件检验"
title="过程检验"
v-model="visible"
:size="1000"
destroy-on-close

2
src/views/mtm/materials.vue
View File

@ -90,7 +90,7 @@ export default {
{ label: "加工工具", name: 50 },
{ label: "辅助工装", name: 60 },
{ label: "办公用品", name: 70 },
{ label: "电/水/气", name: 0 },
// { label: "电/水/气", name: 0 },
],
typeOptions: {
0: '电/水/气',