This commit is contained in:
caoqianming 2023-12-22 13:46:22 +08:00
commit 517d10b572
2 changed files with 439 additions and 252 deletions

View File

@ -76,9 +76,13 @@
delay: 20,
scrollVivible:true,
stateOption:{
10: "创建中",
14: "已分解",
20: "已下达",
30:'生产中',
40:'已完成',
'到岗':'到岗',
'normal':'正常',
'late':'迟到',
'未到岗':'未到岗',
},
}
@ -103,12 +107,14 @@
},
methods: {
getTagType(type){
if(type==30){
if(type==30||type==10||type==14||type==20){
return ""
}else if(type==40){
return "success"
}else if(type=='到岗'){
}else if(type=='normal'){
return "success"
}else if(type=='late'){
return "warning"
}else if(type=='未到岗'){
return "danger"
}

View File

@ -27,8 +27,8 @@
</div>
<div style="height: 4px;"></div>
<div class="boxmain flex_center bigdata border">
<span>ZJ2</span>
<span style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">130</span>
<span>{{yesterdayObjet.物料名}}</span>
<span style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">{{yesterdayObjet.合格数}}</span>
</div>
</div>
</el-col>
@ -55,7 +55,7 @@
<div style="height: 2px;"></div>
<div class="boxmain" id="scrollContainer1">
<scScrollTavle v-if="table1Visible" :tableHeight="containerHeight1"
:rowData="listData1test" :titleData="liData1" :refValue="refValue1"
:rowData="attendanceData" :titleData="liData1" :refValue="refValue1"
></scScrollTavle>
</div>
</div>
@ -69,7 +69,7 @@
<div style="height: 2px;"></div>
<div class="boxmain" id="scrollContainer2">
<scScrollTavle v-if="table2Visible" :tableHeight="containerHeight2"
:rowData="listData2test" :titleData="liData2" :refValue="refValue2"></scScrollTavle>
:rowData="processData" :titleData="liData2" :refValue="refValue2"></scScrollTavle>
</div>
</div>
</el-col>
@ -111,6 +111,7 @@
<script>
import * as echarts from "echarts";
import scScrollTavle from '@/components/scScrollTable.vue';
const xAxisData1 = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
function deepCopy(obj) {
return JSON.parse(JSON.stringify(obj));
}
@ -180,22 +181,19 @@ export default {
bottom: '3%',
containLabel: true
},
xAxis: [
{
xAxis: {
type: 'category',
boundaryGap: true,
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
data: [],
nameTextStyle: {
color: '#ffffff'
},
axisLabel: {
color: '#ffffff'
},
}
],
yAxis: [
{
name: "合格率(%)",
},
yAxis: {
name: "生产数",
type: 'value',
nameTextStyle: {
color: '#ffffff'
@ -211,35 +209,8 @@ export default {
width: 1,
},
},
}
],
},
series: [
{
name: '棒',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
label: {
show: true,
position: 'insideTop',
color:'#ffffff',
fontSize:8
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(1,235,239)'
},
{
offset: 1,
color: 'rgb(5, 158, 163)'
}])
},
data: [140, 232, 101, 264, 90, 340, 250, 232, 101, 264, 90, 340]
},
{
name: '管',
type: 'bar',
@ -266,40 +237,53 @@ export default {
}
])
},
data: [120, 282, 111, 234, 220, 340, 310, 282, 111, 234, 220, 340]
data: []
},
]
},
chart3Option:{
backgroundColor: '',
tooltip: {
trigger: 'item'
},
legend: {
top:'bottom',
},
series: {
name: '完成率',
type: 'pie',
radius: '50%',
itemStyle: {
borderRadius: 2
},
center: ['50%', '45%'],
data: [
{ value: 1, name: '椭圆弯曲' },
{ value: 3, name: '大小头' },
{ value: 0, name: '偏壁' },
{ value: 5, name: '结石' },
{ value: 5, name: '气线' },
{ value: 200, name: '合格' },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
},
containerHeight1:100,
containerHeight2:100,
table1Visible:false,
table2Visible:false,
refValue1:'moocBox1',
refValue2:'moocBox2',
liData1: ['姓名', '岗位', '班次', '状态'],
listData1test: [
[{elType:'primary',value:"王丽丽"},{elType:'primary',value:"成型人"},{elType:'primary',value:"白班"},{elType:'tag',value:"到岗"}],
[{elType:'primary',value:"张小飞"},{elType:'primary',value:"成型人"},{elType:'primary',value:"白班"},{elType:'tag',value:"到岗"}],
[{elType:'primary',value:"李青"},{elType:'primary',value:"成型人"},{elType:'primary',value:"白班"},{elType:'tag',value:"到岗"}],
[{elType:'primary',value:"白梦遥"},{elType:'primary',value:"成型人"},{elType:'primary',value:"白班"},{elType:'tag',value:"到岗"}],
[{elType:'primary',value:"于诗曼"},{elType:'primary',value:"成型人"},{elType:'primary',value:"白班"},{elType:'tag',value:"到岗"}],
[{elType:'primary',value:"马亮德"},{elType:'primary',value:"成型人"},{elType:'primary',value:"白班"},{elType:'tag',value:"到岗"}],
[{elType:'primary',value:"赵蒙斯"},{elType:'primary',value:"成型人"},{elType:'primary',value:"白班"},{elType:'tag',value:"到岗"}],
[{elType:'primary',value:"钱广源"},{elType:'primary',value:"成型人"},{elType:'primary',value:"白班"},{elType:'tag',value:"到岗"}],
[{elType:'primary',value:"孙蕾"},{elType:'primary',value:"成型人"},{elType:'primary',value:"白班"},{elType:'tag',value:"未到岗"}],
],
liData1: ['序号','姓名', '岗位', '班次', '状态'],
attendanceData:[],
liData2: ['序号','产品名称', '型号', '计划开始时间', '计划结束时间','完成进度', '产量','状态'],
listData2test: [
[{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"2023-11-10"}, {elType:'progress',value:100},{elType:'primary',value:368},{elType:'tag',value:40}],
[{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"2023-11-10"}, {elType:'progress',value:100},{elType:'primary',value:368},{elType:'tag',value:40}],
[{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"2023-11-10"}, {elType:'progress',value:90},{elType:'primary',value:368},{elType:'tag',value:40}],
[{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"2023-11-10"}, {elType:'progress',value:100},{elType:'primary',value:368},{elType:'tag',value:30}],
[{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"2023-11-10"}, {elType:'progress',value:80},{elType:'primary',value:368},{elType:'tag',value:40}],
[{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"2023-11-10"}, {elType:'progress',value:80},{elType:'primary',value:368},{elType:'tag',value:40}],
[{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"2023-11-10"}, {elType:'progress',value:80},{elType:'primary',value:368},{elType:'tag',value:40}],
[{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"2023-11-10"}, {elType:'progress',value:80},{elType:'primary',value:368},{elType:'tag',value:40}],
[{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"2023-11-10"}, {elType:'progress',value:80},{elType:'primary',value:368},{elType:'tag',value:40}],
],
processData: [],
speed: 2000,
myScroll: null,
iliHeight: 30,
@ -307,7 +291,7 @@ export default {
delay: 20,
start_date:'',
end_date:'',
yesterday:'',
dayInterval:null,
chartInterval1: null,
chartInterval2: null,
@ -318,6 +302,8 @@ export default {
},
currentTime:'',
currentDay:'',
todayObjet:{},
yesterdayObjet:{},
}
},
@ -329,9 +315,250 @@ export default {
this.containerHeight2 = document.getElementById('scrollContainer2').clientHeight;
this.table2Visible = true;
let chart1Option = deepCopy(this.basicOption)
let chart1 = this.setChart("chart1", chart1Option);
// let chart1Option = deepCopy(this.basicOption)
// chart1Option.xAxis.data = xAxisData1;
// let chart1 = this.setChart("chart1", chart1Option);
// let index1 = 0
// this.chartInterval1 = setInterval(function () {
// if (index1 < chart1Option.series[0].data.length) {
// chart1.dispatchAction({ type: 'downplay', seriesIndex: 0 });
// chart1.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index1 });
// chart1.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index1 });
// index1++;
// } else {
// index1 = 0;
// }
// }, 3000);
// let chart2Option = deepCopy(this.basicOption);
// chart2Option.xAxis = {
// type: 'category',
// boundaryGap: true,
// data: ['1','2', '3', '4', '5', '6', '7', '8','9','10', '11', '12', '13', '14', '15', '16', '17', '18','19','20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30'],
// nameTextStyle: {
// color: '#ffffff'
// },
// axisLabel: {
// color: '#ffffff'
// },
// };
// chart2Option.legend = {
// icon: "stack",
// right: 0,
// data: [{
// backgroundColor: 'rgb(250,205,0)',
// name: '',
// itemStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {
// offset: 0,
// color: 'rgb(1,235,239)'
// },
// {
// offset: 1,
// color: 'rgb(5, 158, 163)'
// }
// ])
// },
// textStyle: {
// color: '#fff'
// }
// }],
// };
// chart2Option.series=[{
// name: '',
// type: 'line',
// smooth: true,
// lineStyle: {
// width: 1, color: 'rgb(1,235,239)'
// },
// showSymbol: false,
// areaStyle: {
// opacity: 0.8,
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {
// offset: 0,
// color: 'rgb(1,235,239)'
// },
// {
// offset: 1,
// color: 'rgb(5, 158, 163)'
// }
// ])
// },
// emphasis: {
// focus: 'series'
// },
// label: {
// show: true,
// position: 'top',
// color:'#fff'
// },
// itemStyle: {
// borderRadius: [2, 2, 0, 0],
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {
// offset: 0,
// color: 'rgb(250,205,0)'
// },
// {
// offset: 1,
// color: 'rgb(254,129,0)'
// }
// ])
// },
// data: [40, 60, 52, 64, 70, 53, 50,40, 32, 62, 64, 90, 50, 50,56, 49, 66, 64, 70, 58, 50,40, 59, 60, 64, 90, 40, 50, 70, 50]
// }];
// let chart2 = this.setChart("chart2", chart2Option);
// let index2 = 0
// this.chartInterval2 = setInterval(function () {
// if (index2 < chart2Option.series[0].data.length) {
// chart2.dispatchAction({ type: 'downplay', seriesIndex: 0 });
// chart2.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index2 });
// chart2.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index2 });
// index2++;
// } else {
// index2 = 0;
// }
// }, 3000);
this.showTime()
this.dayInterval = setInterval(()=>{
this.showTime()
},1000)
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth()+1;
let day = date.getDate();
let days = new Date(year, month, 0).getDate();
this.days = days;
this.currentYear = year;
this.currentMonth = month;
this.currentDay = day;
this.start_date =year+'-'+month+'-01';
this.end_date = year+'-'+month+'-'+new Date(year, month, 0).getDate();
let yesterday = new Date(date.getTime()-24*60*60*1000);
this.yesterday = yesterday.getFullYear()+"-" + (yesterday.getMonth()+1) + "-" + yesterday.getDate();
this.getMtask();
this.getAttendance();
this.getProductLine();
},
methods: {
showTime(){
this.currentTime = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss')
this.currentDay = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
},
setChart(name, option = null) {
// name , optionoption
var myChart = echarts.getInstanceByDom(document.getElementById(name));
if (myChart == undefined) {
myChart = echarts.init(document.getElementById(name), 'dark', { renderer: 'svg' });
}
if (option == null) {
option = Object.assign({}, this.basicOption)
}
setTimeout(() => {
try {
myChart.setOption(option);
} catch (error) { }
}, 500)
return myChart
},
//
getAttendance(){
let that = this;
let obj ={};
obj.work_date = this.currentYear+'-'+this.currentMonth+'-'+this.currentDay;
// obj.work_date = '2023-11-24';
obj.page=0;
that.$API.hrm.attendance.list.req(obj).then((res) => {
console.log('到岗记录:',res);
let attendanceData = [];
res.forEach(item => {
let arr = [],obj1 = {},obj2 = {},obj3 = {},obj4 = {};
obj1.elType = 'primary';
obj1.value = item.user_name;
obj2.elType = 'primary';
obj2.value = item.post_name;
obj3.elType = 'primary';
obj3.value = item.shift_name;
obj4.elType = 'tag';
obj4.value = item.state;
arr.push(obj1);
arr.push(obj2);
arr.push(obj3);
arr.push(obj4);
attendanceData.push(arr);
});
this.attendanceData = attendanceData;
debugger;
});
},
//
getMtask(){
let that = this;
let obj ={};
obj.start_date__gte = this.start_date;
obj.end_date__lte = this.end_date;
obj.page=0;
that.$API.pm.utask.list.req(obj).then((res) => {
console.log('任务进度:',res);
let processData = [];
res.forEach(item => {
let arr = [],obj1 = {},obj2 = {},obj3 = {},obj4 = {},obj5 = {},obj6 = {},obj7 = {};
obj1.elType = 'primary';
obj1.value = item.material_.name;
obj2.elType = 'primary';
obj2.value = item.material_.specification;
obj3.elType = 'primary';
obj3.value = item.start_date;
obj4.elType = 'primary';
obj4.value = item.end_date;
obj5.elType = 'progress';
let process = Math.floor((item.count_ok/item.count)*100)
obj5.value = process;
obj6.elType = 'primary';
obj6.value = item.count_ok;
obj7.elType = 'tag';
obj7.value = item.state;
arr.push(obj1);
arr.push(obj2);
arr.push(obj3);
arr.push(obj4);
arr.push(obj5);
arr.push(obj6);
arr.push(obj7);
processData.push(arr);
});
this.processData = processData;
debugger;
});
},
//线
getProductLine(){
let that = this;
// 11-----121
let obj1 ={
query: {start_date:that.currentYear+'-01-01',end_date:that.currentYear+'-12-31',dept_name: "10车间"},
};
that.$API.bi.dataset.exec.req('lineMonth', obj1).then((res1) => {
console.log('全年生产统计:',res1);
let list1 = res1.data2.ds0;
let seriesData1 = [];
if(list1.length>0){
list1.forEach(item1=>{
let index1 = item1.-1;
seriesData1[index1] = item1.生产数;
})
}
let chart1Option = deepCopy(this.basicOption)
chart1Option.xAxis.data = xAxisData1;
chart1Option.series[0].data = seriesData1;
let chart1 = this.setChart("chart1", chart1Option);
let index1 = 0
this.chartInterval1 = setInterval(function () {
if (index1 < chart1Option.series[0].data.length) {
@ -343,18 +570,31 @@ export default {
index1 = 0;
}
}, 3000);
let chart2Option = deepCopy(this.basicOption);
chart2Option.xAxis = {
type: 'category',
boundaryGap: true,
data: ['1日','2日', '3日', '4日', '5日', '6日', '7日', '8日','9日','10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日','19日','20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日'],
nameTextStyle: {
color: '#ffffff'
},
axisLabel: {
color: '#ffffff'
},
});
/////111-----1130
let obj2 ={
query: {start_date:that.start_date,end_date:that.end_date,dept_name: "10车间"},
};
that.$API.bi.dataset.exec.req('lineDay', obj2).then((res2) => {
console.log('本月合格率统计:',res2);
console.log('days',that.days)
let list2 = res2.data2.ds0;
let seriesData2 = [],xAxisData2=[];
for (let i = 0; i < that.days; i++) {
let day = i+1;
let text = day+'日';
xAxisData2[i]=text;
}
if(list2.length>0){
list2.forEach(item2=>{
let index2 = item.-1;
seriesData2[index2] = item2.合格率;
})
}
console.log('xAxisData2',xAxisData2)
let chart2Option = deepCopy(this.basicOption);
chart2Option.xAxis.data = xAxisData2;
chart2Option.legend = {
icon: "stack",
right: 0,
@ -378,7 +618,7 @@ export default {
}
}],
};
chart2Option.series=[{
let series2=[{
name: '合格率',
type: 'line',
smooth: true,
@ -420,8 +660,9 @@ export default {
}
])
},
data: [40, 60, 52, 64, 70, 53, 50,40, 32, 62, 64, 90, 50, 50,56, 49, 66, 64, 70, 58, 50,40, 59, 60, 64, 90, 40, 50, 70, 50]
data: seriesData2
}];
chart2Option.series=series2;
let chart2 = this.setChart("chart2", chart2Option);
let index2 = 0
this.chartInterval2 = setInterval(function () {
@ -434,43 +675,34 @@ export default {
index2 = 0;
}
}, 3000);
});
let chart3Option ={
backgroundColor: '',
tooltip: {
trigger: 'item'
},
legend: {
top:'bottom',
},
series: [
{
name: '完成率',
type: 'pie',
radius: '50%',
itemStyle: {
borderRadius: 2
},
center: ['50%', '45%'],
data: [
{ value: 1, name: '椭圆弯曲' },
{ value: 3, name: '大小头' },
{ value: 0, name: '偏壁' },
{ value: 5, name: '结石' },
{ value: 5, name: '气线' },
{ value: 200, name: '合格' },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
// 121
let obj3 ={
query: {start_date:that.yesterday,end_date:that.yesterday,dept_name: "10车间"},
};
let chart3 = this.setChart("chart3", chart3Option);
that.$API.bi.dataset.exec.req('lineDay', obj3).then((res3) => {
console.log('车间生产昨日统计:',res3);
let seriesData3 = [
{ value: 0, name: '椭圆弯曲' },
{ value: 0, name: '大小头' },
{ value: 0, name: '偏壁' },
{ value: 0, name: '结石' },
{ value: 0, name: '气线' },
{ value: 0, name: '合格' },
]
if(res3.data2.ds0.length>0){
let item3 = res3.data2.ds0[0];
that.yesterdayObjet = item
seriesData3[0].value=item3.弯曲;
seriesData3[1].value=item3.大小头;
seriesData3[2].value=item3.偏壁;
seriesData3[3].value=item3.结石;
seriesData3[4].value=item3.气线;
seriesData3[5].value=item3.合格数;
}
that.chart3Option.series.data = seriesData3;
let chart3 = this.setChart("chart3", that.chart3Option);
let index3 = 0
this.chartInterval3 = setInterval(function () {
if (index3 < chart3Option.series[0].data.length) {
@ -482,61 +714,9 @@ export default {
index3 = 0;
}
}, 3000);
this.showTime()
this.dayInterval = setInterval(()=>{
this.showTime()
},1000)
},
methods: {
showTime(){
this.currentTime = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss')
this.currentDay = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
},
setChart(name, option = null) {
// name , optionoption
var myChart = echarts.getInstanceByDom(document.getElementById(name));
if (myChart == undefined) {
myChart = echarts.init(document.getElementById(name), 'dark', { renderer: 'svg' });
}
if (option == null) {
option = Object.assign({}, this.basicOption)
}
debugger;
});
setTimeout(() => {
try {
myChart.setOption(option);
} catch (error) { }
}, 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车间"},
};
// 11-----121
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车间"},
};
// & ///111-----1130
that.$API.bi.dataset.exec.req('lineDay', obj2).then((res3) => {
console.log('生产车间按日统计:',res3);
debugger;
});
},
}
}
@ -550,6 +730,7 @@ export default {
background-image: url("/public/img/photon_bg.png");
color: #fff;
font-family: "Microsoft Yahei" !important;
background-size: cover;
}
.header {
background: url("/public/img/photon_header.png");