ruanqi 3 years ago
parent
commit
7cb1c67f20
  1. 2
      index.html
  2. 13
      src/api/production/board.js
  3. BIN
      src/assets/img/factory.jpg
  4. 1
      src/router/index.js
  5. 90
      src/views/modules/board/newTime.vue
  6. 589
      src/views/modules/board/scheduledBoard.vue
  7. 14
      src/views/modules/schedule/generateReport.vue
  8. 14
      src/views/modules/schedule/toolReport.vue
  9. 12
      static/plugins/echarts/echarts.min.js

2
index.html

@ -13,7 +13,7 @@
<link rel="shortcut icon" type="image/x-icon" href="./static/img/favicon.ico">
<script src="./static/config/index.js"></script>
<script src="./static/plugins/mock-1.0.0-beta3/mock-min.js"></script>
<script src="./static/plugins/echarts-3.8.5/echarts.common.min.js"></script>
<script src="./static/plugins/echarts/echarts.min.js"></script>
<script src="./static/plugins/ueditor-1.4.3.3/ueditor.config.js"></script>
<script src="./static/plugins/ueditor-1.4.3.3/ueditor.all.min.js"></script>
<script src="./static/plugins/ueditor-1.4.3.3/lang/zh-cn/zh-cn.js"></script>

13
src/api/production/board.js

@ -3,3 +3,16 @@ import { createAPI } from "@/utils/httpRequest.js";
export const SORoutingBoard=data => createAPI(`board/SORoutingBoard`, 'post', data);
export const abnormalBoardList=data => createAPI(`board/abnormalBoardList`, 'post', data);
export const getStockPrintList= data => createAPI(`board/getStockPrintList`,'post',data)
export const getTime=data => createAPI(`board/getTime`, 'post', data);
export const kanKanYouMeiYouDiaoXian=data => createAPI(`board/kanKanYouMeiYouDiaoXian`, 'post', data);
export const getNewScheduledTableData=data => createAPI(`board/getNewScheduledTableData/${data}`, 'get');
export const getRefreshTime=data => createAPI(`board/getRefreshTime/${data}`, 'get');
export const getScheduledData=data => createAPI(`board/getScheduledData`, 'post', data);

BIN
src/assets/img/factory.jpg

After

Width: 3000  |  Height: 1500  |  Size: 377 KiB

1
src/router/index.js

@ -23,6 +23,7 @@ const globalRoutes = [
{ path: '/SORoutingBoard', component: _import('modules/board/SORoutingBoard'), name: 'SORoutingBoard', meta: { title: '生产看板' } },
{ path: '/AbnormalBoard', component: _import('modules/board/AbnormalBoard'), name: 'AbnormalBoard', meta: { title: '异常反馈看板' } },
{ path: '/autoPrintStock', component: _import('modules/autoPrint/autoPrintStock'), name: 'autoPrintStock', meta: { title: '打印库存标签' } },
{ path: '/scheduledBoard', component: _import('modules/board/scheduledBoard'), name: 'scheduledBoard', meta: { title: '生产状况' } },
]
// 主入口路由(需嵌套上左右整体布局)

90
src/views/modules/board/newTime.vue

@ -0,0 +1,90 @@
<template>
<div style="font-size: 26px;float: right;color: #ffffff;height: 100%" v-html="clock"></div>
</template>
<script>
import {getTime,
kanKanYouMeiYouDiaoXian,
} from '@/api/production/board.js'
export default {
name: 'time',
data() {
return {
clock: null,
status: 1,
stringdate:null,
currentDate:null,
timer:null
}
},
methods: {
getTime() {
getTime().then(({data}) => {
this.stringdate = data.rows
this.timer = window.setInterval(() => {
this.showRealTime()
}, 1000);
})
},
showRealTime() {
if (this.currentDate == null) {
this.currentDate = new Date(this.stringdate);
} else {
this.currentDate = new Date(this.currentDate.getTime() + 1000);
}
var c = this.currentDate;
var year = c.getFullYear();
var month = (c.getMonth() + 1 < 10) ? ("0" + (c.getMonth() + 1)) : c.getMonth() + 1;
var date = (c.getDate() < 10) ? ("0" + c.getDate()) : c.getDate();
var days = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
var day = c.getDay();
var hour = (c.getHours() < 10) ? ("0" + c.getHours()) : c.getHours();
var min = (c.getMinutes() < 10) ? ("0" + c.getMinutes()) : c.getMinutes();
var sec = (c.getSeconds() < 10) ? ("0" + c.getSeconds()) : c.getSeconds();
var now = year + "-" + month + "-" + date + "<br>" + days[day] + "<br>" + hour + ":" + min + ":" + sec;
// if (hour>=10 && hour<12 && this.status==1){
if (localStorage.getItem("status")==null){
localStorage.setItem("status",'1')
}
this.status = localStorage.getItem("status")
if (parseInt(hour) ==23 && this.status=='1'){
kanKanYouMeiYouDiaoXian().then(({data}) => {
if(data.success){
localStorage.setItem("status",'2')
location.reload();
}else {
localStorage.setItem("status",'3')
}
})
}
// if ( hour>=12 && this.status==2){
if ( parseInt(hour) ==1 && this.status=='2'){
localStorage.setItem("status",'1')
}
if(this.status=='3' && parseInt(sec) ==59){
kanKanYouMeiYouDiaoXian().then(({data}) => {
if(data.success){
localStorage.setItem("status",'2')
location.reload();
}
})
}
this.clock = now;
},
},
mounted() {
this.getTime();
},
beforeDestroy() {
},
};
</script>
<style scoped>
</style>

589
src/views/modules/board/scheduledBoard.vue

@ -0,0 +1,589 @@
<template>
<div class="container" >
<div style="width:100%;height: 19%;text-align:center;">
<div style="float: left;width: 25%;height: 100%;text-align:left; ">
<div style="height: 60%;width: 100%;text-align: left;margin-top: 1%">
<label style="font-size: 40px;color: #9c0202;margin-left: 2%">Jtem 江天电子</label>
</div>
</div>
<TimeC></TimeC>
<!-- <div style="font-size: 26px;float: right;color: #ffffff;height: 100%" v-html="clock"></div>-->
<div style="float: left;width: 35%;height: 100%;text-align:center;margin-left: 7% ">
<div style="height: 45%;width: 100%;text-align: center;margin-top: 3%;">
<label style="font-size: 30px;color: #ffffff">生产情况看板<br>Production Board</label>
</div>
</div>
</div>
<div style="width:100%;height: 79%;">
<!-- <div style="float: left;height: 100%;width: 35%; ">-->
<!-- <div style="height: 12%;width: 100%;margin-top: 1%">-->
<!-- <div-->
<!-- style="width: 12%;height: 40%;float: left;margin-left: 18%;border-radius: 10px; background-color: #ec6566;"></div>-->
<!-- <div style="width: 25%;height: 50%;float: left;margin-left: 3%;">-->
<!-- <label style="font-size: 16px;color:#ffffff; ">未完成</label>-->
<!-- </div>-->
<!-- <div-->
<!-- style="width: 12%;height: 40%;float: left;margin-left: 1%;border-radius: 10px; background-color: #90ca75;"></div>-->
<!-- <div style="width: 25%;height: 50%;float: left;margin-left: 3%;">-->
<!-- <label style="font-size: 16px;color:#ffffff; ">已完成</label>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div style="height: 88%;width: 100%;">-->
<!-- <div id="pie" style="float:left;margin-left: 0px; margin-top: 0%; width: 100%; height:80%;"></div>-->
<!-- </div>-->
<!-- </div>-->
<div style="float: left;height: 100%;width: 38%; ">
<div style="height: 28%;width: 100%;margin-top: 0.5%" class="board2">
<el-table
height="150"
:data="tableList2"
:cell-style="board2Function"
style="width: 100%">
<el-table-column
prop="qty1"
header-align="center"
align="center"
min-width="40"
label="派工数/PlanQty"
:render-header="renderHeader"
>
</el-table-column>
<el-table-column
prop="qty2"
header-align="center"
align="center"
min-width="63"
label="合格数/ApproveQty"
:render-header="renderHeader">
</el-table-column>
<el-table-column
prop="qty3"
header-align="center"
align="center"
min-width="60"
label="不合格数/UnApproveQty"
:render-header="renderHeader">
</el-table-column>
<el-table-column
prop="qty4"
header-align="center"
align="center"
min-width="62"
label="未完成/UnReportedQty"
:render-header="renderHeader">
</el-table-column>
</el-table>
</div>
<div style="height: 72%;width: 100%;">
<div id="pie" style="float:left;margin-left: 0px; margin-top: -3%; width: 100%; height:100%;"></div>
</div>
</div>
<div style="float: left;height: 53%;width: 53%;margin-left:3% " class="board">
<el-table
height="250"
:data="tableList"
style="width: 100%">
<el-table-column
prop="resourceDesc"
header-align="center"
align="center"
min-width="72"
label="生产线/ProduceLine"
:render-header="renderHeader"
>
</el-table-column>
<el-table-column
prop="qtyRequired"
header-align="center"
align="center"
min-width="100"
label="派工数量/PlanQty"
:render-header="renderHeader">
</el-table-column>
<el-table-column
prop="qtyReported"
header-align="center"
align="center"
min-width="90"
label="完成数量/ReportedQty"
:render-header="renderHeader">
</el-table-column>
<el-table-column
prop="qtyApprove"
header-align="center"
align="center"
min-width="108"
label="合格数量/ApproveQty"
:render-header="renderHeader">
</el-table-column>
<el-table-column
prop="qtyUnReported"
header-align="center"
align="center"
min-width="100"
label="未完成数量/UnReportedQty"
:render-header="renderHeader">>
</el-table-column>
</el-table>
</div>
<div style="float: left;height: 47%;width: 62%; ">
<div id="main" style="width: 100%;height: 100%;margin-top: 0px"></div>
</div>
</div>
</div>
</template>
<script>
import {getNewScheduledTableData,
getRefreshTime,
getScheduledData
} from '@/api/production/board.js'
import TimeC from "@/views/modules/board/newTime.vue"
export default {
name: "newScheduledBoard",
data() {
return {
myChart: null,
number1:0,
number2:0,
option:null,
chartDom:null,
option2:null,
tableList:null,
pieData:null,
barList:null,
resourceId:'',
height:200,
// ip:'',
refreshTime:5,
tableList2:[],
}
},
components: {
TimeC
},
methods: {
getRefresh(){
getRefreshTime('scheduledBoard').then(({data}) => {
if (data.rows != "" && data.rows != null) {
this.refreshTime = Number(data.rows);
if(this.refreshTime ==0){
this.refreshTime =5;
}
}else {
this.refreshTime =5;
}
})
},
searchData(){
this.getRefresh();
getScheduledData().then(({data}) => {
this.pieData=data.pieData;
this.barList=data.barList;
this.tableList2=[],
this.tableList2.push(this.pieData);
let pieData2={
qty1: '-',
qty2: this.pieData.per2 +'%',
qty3: this.pieData.per3 +'%',
qty4: this.pieData.per4 +'%',
}
this.tableList2.push(pieData2)
this.draw();
this.draw2()
this.getTableData();
// window.setTimeout(() => {
// this.getTableData();
// }, 1000* Number(this.refreshTime));
// window.setTimeout(() => {
// this.getTableData();
// }, 2000*Number(this.refreshTime));
// window.setTimeout(() => {
// this.getTableData();
// }, 3000*Number(this.refreshTime));
})
},
draw(){
// if (data_temp[i].percentage >= 100) {
if (true) {
var color = '#90ca75';
} else {
var color = '#fff300';
}
if (this.myChart!=null) {
this.myChart.clear()
}
this.option = ({
title: [{
text: '总生产情况\nProduction State' ,
// text: '' + data_temp[i + x].itemNo,
// x 'center' ¦ 'left' ¦ 'right' ¦ {number}xpx
x: 'center',
// y 'top' ¦ 'bottom' ¦ 'center' ¦ {number}ypx
y: '264px',
// itemGappx10
backgroundColor: '#EEE',
//
textStyle: {
fontSize: 18,
fontWeight: 'bolder',
color: '#fff300'
}
},
// {
// text: this.pieData.qtyPercent + '%',
// // text: data_temp[i + x].percentage + '%',
// // x 'center' ¦ 'left' ¦ 'right' ¦ {number}xpx
// x: 'center',
// // y 'top' ¦ 'bottom' ¦ 'center' ¦ {number}ypx
// y: 'center',
// // itemGappx10
// backgroundColor: 'rgba(0,0,0,0)',
// //
// textStyle: {
// fontSize: 20,
// fontWeight: 'bolder',
// color: color
// },
// }
],
// legend: {
// orient: 'vertical',
// left: 10,
// data: ['访', ''],
// color: ['#90ca75', '#ec6566'],
// },
series: [
{
name: '报工数量统计',
type: 'pie', //
radius: ['45%', '75%'], // 55%
data: [ // name value
// {value: data_temp[i + x].approveQty, name: ''},
// {value: data_temp[i + x].unapproveQty, name: ''}
{value: this.pieData.qty2, name: ''},
{value: this.pieData.qty3, name: ''},
{value: this.pieData.qty4, name: ''}
],
color: ['#90ca75','#dbd81a', '#ec6566'],
labelLine: {
normal: {
show: false
}
},
label: {
normal: {
position: 'inner', // 'outer' ¦ 'inner'
// formatter: '{a} {b} : {c} ({d}%)' {b}
// {a}series.name {b}series.dataname
// {c}series.datavalue {d}%
// formatter: '{d}'+'%',
formatter:function(data){
return data.percent.toFixed(1)+"%";
}
}
},
}
]
});
this.myChart = echarts.init(document.getElementById('pie'));
this.myChart.setOption(this.option);
},
getTableData() {
getNewScheduledTableData(this.number2).then(({data}) => {
this.tableList=data.rows;
this.number2=data.num;
})
},
draw2(){
if (this.myChart2!=null) {
this.myChart2.clear()
}
let barData=[];
let valueData=[];
let valueApproveData=[];
for (let a = 0; a <this.barList.length ; a++) {
let resourceData={
value: this.barList[a].resourceDesc,
textStyle: {
color: '#EEE'
}
}
barData.push(resourceData);
valueData[a]=this.barList[a].qtyPercent;
valueApproveData[a]=this.barList[a].approvePercent;
}
this.myChart2 = echarts.init(document.getElementById('main'));
// document.getElementById('main').style.height="300px";
// if(this.option2!=null){
// document.getElementById('main').removeAttribute('_echarts_instance_')
// this.option2 = null
// }
this.option2 = {
color:["#90ca75", "#00a7ff"],
legend: {
textStyle: { //
color: '#fff',
// fontSize: 12
},
},
tooltip: {},
xAxis:[
{
type: 'category',
// data: xAxisData
data:barData,
axisLine:{
lineStyle: {
color:'#eee'
}
},
axisTick: {
lineStyle: {
color:'#eee'
}
},
},
],
yAxis:[
{
type: 'value',
min: 0,
max: 100,
axisLabel: {
formatter: '{value} %'
},
axisLine:{
lineStyle: {
color:'#eee'
}
},
axisTick: {
lineStyle: {
color:'#eee'
}
},
// splitLine:{
// show:false,
// }
}
],
series: [
{
'name': '当日完成率',
'type': 'bar',
'emphasis': {
focus: 'series'
},
// data: seriesData1
'data': valueData,
// [this.barList[6].num1, this.barList[5].num1, this.barList[4].num1, this.barList[3].num1, this.barList[2].num1, this.barList[1].num1, this.barList[0].num1],
'label':{
show:true,
position:'top',
textStyle: {
color: '#fff300',
fontSize: 11
}
},
},
{
'name': '当日良品率',
'type': 'bar',
'emphasis': {
focus: 'series'
},
// data: seriesData1
'data': valueApproveData,
// [this.barList[6].num1, this.barList[5].num1, this.barList[4].num1, this.barList[3].num1, this.barList[2].num1, this.barList[1].num1, this.barList[0].num1],
'label':{
show:true,
position:'top',
textStyle: {
color: '#fff300',
fontSize: 11
}
},
},
]
};
this.option2 && this.myChart2.setOption(this.option2);
},
getDate(value) {
var date = value.substring(5, 10);
return date;
},
timeDo(){
let that=this;
getRefreshTime('scheduledBoard').then(({data}) => {
if (data.rows != "" && data.rows != null) {
that.refreshTime = Number(data.rows);
if(that.refreshTime ==0){
that.refreshTime =5;
}
}else {
that.refreshTime =5;
}
window.setInterval(() => {
this.searchData();
// }, 4000*Number(that.refreshTime));
}, 1000*that.refreshTime);
})
// $.ajax({
// url: "/board/getRefreshTime",
// type: "post",
// data: {"boardName": 'newScheduledBoard'},
// dataType: "json",
// success: (data) => {
// if (data.rows != "" && data.rows != null) {
// that.refreshTime = Number(data.rows);
// if(that.refreshTime ==0){
// that.refreshTime =5;
// }
// }else {
// that.refreshTime =5;
// }
// window.setInterval(() => {
// this.searchData();
// }, 4000*Number(that.refreshTime));
// },
// })
},
renderHeader(h, { column, $index }) {
return h("span", {}, [
h("span", {}, column.label.split("/")[0]),
h("br"),
h("span", {}, column.label.split("/")[1])
]);
},
board2Function({row, column, rowIndex, columnIndex}){
if(columnIndex==1){
return 'background-color: #90ca75;'
}
if(columnIndex==2){
return 'background-color: #dbd81a;'
}
if(columnIndex==3){
return 'background-color: #ec6566;'
}
}
},
created(){
this.getRefresh();
},
mounted() {
this.$nextTick(()=>{
this.height = window.innerHeight *0.36;
})
// this.getTableData();
this.timeDo();
this.searchData();
}
}
</script>
<style >
.container {
height: 109%;
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
content: "";
background-image: url(~@/assets/img/factory.jpg);
background-size: cover;
}
.board .el-table .cell {
line-height: 20px;
font-size: 20px;
height: 20px;
padding: 0px;
color: yellow;
}
/* 表格内背景颜色 */
.board .el-table th, .el-table tr,.el-table td{
border: 0;
background-color: transparent;
}
/* 使表格背景透明 */
.board .el-table th, .el-table tr {
background-color: transparent;
}
/* 删除表格下横线 */
.board .el-table::before {
left: 0;
bottom: 0;
width: 100%;
height: 0px;
}
/* 表格表头字体颜色 */
.board .el-table, .el-table__expanded-cell {
background-color: transparent;
}
.el-table thead {
background-color: transparent;
}
.board .el-table th .cell {
line-height: 20px;
font-size: 15px;
height: 40px;
padding: 0px;
color: yellow;
}
.board2 .el-table .cell {
line-height: 18px;
font-size: 18px;
height: 18px;
padding: 0px;
color: white;
}
/* 表格内背景颜色 */
.board2 .el-table th, .el-table tr,.el-table td{
border: 0;
background-color: transparent;
}
/* 使表格背景透明 */
.board2 .el-table th, .el-table tr {
background-color: transparent;
}
/* 删除表格下横线 */
.board2 .el-table::before {
left: 0;
bottom: 0;
width: 100%;
height: 0px;
}
/* 表格表头字体颜色 */
.board2 .el-table, .el-table__expanded-cell {
background-color: transparent;
}
.board2 .el-table th .cell {
line-height: 18px;
font-size: 13px;
height: 36px;
padding: 0px;
color: white;
}
</style>

14
src/views/modules/schedule/generateReport.vue

@ -145,13 +145,13 @@
min-width="80"
label="派工日期">
</el-table-column>
<el-table-column
prop="operatorName"
header-align="center"
align="left"
min-width="80"
label="操作员姓名">
</el-table-column>
<!-- <el-table-column-->
<!-- prop="operatorName"-->
<!-- header-align="center"-->
<!-- align="left"-->
<!-- min-width="80"-->
<!-- label="操作员姓名">-->
<!-- </el-table-column>-->
<el-table-column
prop="partNo"
header-align="center"

14
src/views/modules/schedule/toolReport.vue

@ -145,13 +145,13 @@
min-width="80"
label="派工日期">
</el-table-column>
<el-table-column
prop="operatorName"
header-align="center"
align="left"
min-width="80"
label="操作员姓名">
</el-table-column>
<!-- <el-table-column-->
<!-- prop="operatorName"-->
<!-- header-align="center"-->
<!-- align="left"-->
<!-- min-width="80"-->
<!-- label="操作员姓名">-->
<!-- </el-table-column>-->
<el-table-column
prop="partNo"
header-align="center"

12
static/plugins/echarts/echarts.min.js
File diff suppressed because it is too large
View File

Loading…
Cancel
Save