fix:玻纤车间看板75%

This commit is contained in:
shijing 2025-06-12 13:22:25 +08:00
parent 555b342f01
commit 7eff9f3505
1 changed files with 203 additions and 157 deletions

View File

@ -74,13 +74,13 @@
</el-row>
<div style="height: 34vh;position: relative;">
<dv-border-box-1>
<div class="chartBlockTitle">工序统计</div>
<div class="chartBlockTitle">车间各工段生产产品数</div>
<dv-capsule-chart :config="config_left1" class="leftChartBlock1"/>
</dv-border-box-1>
</div>
<div style="height: 34vh;">
<dv-border-box-1>
<div class="chartBlockTitle">工序统计</div>
<div class="chartBlockTitle">产品占比</div>
<dv-active-ring-chart :config="config_left2" class="leftChartBlock2"/>
</dv-border-box-1>
</div>
@ -90,13 +90,13 @@
<div class="middleBlock">
<div style="height: 38vh;">
<dv-border-box-1>
<div class="chartBlockTitle">工序统计</div>
<div class="chartBlockTitle">车间工段任务展示</div>
<dv-scroll-board :config="config_middle_top" class="middleTableBlock1"/>
</dv-border-box-1>
</div>
<div style="height: 41vh;">
<dv-border-box-1>
<div class="chartBlockTitle">工序统计</div>
<div class="chartBlockTitle">设备列表</div>
<dv-scroll-board :config="config_middle_bottom" class="middleTableBlock2"/>
</dv-border-box-1>
</div>
@ -120,13 +120,13 @@
</el-row>
<div style="height: 34vh;">
<dv-border-box-1>
<div class="chartBlockTitle">工序统计</div>
<div class="chartBlockTitle">每个人日产量</div>
<scEcharts :option="chartOption1" style="height: 27.5vh;width: 90%;left: 5%;"/>
</dv-border-box-1>
</div>
<div style="height: 34vh;">
<dv-border-box-1>
<div class="chartBlockTitle">工序统计</div>
<div class="chartBlockTitle">车间整体产品统计</div>
<scEcharts :option="chartOption2" style="height: 27.5vh;width: 90%;left: 5%;"/>
</dv-border-box-1>
</div>
@ -139,6 +139,7 @@
<script>
import * as echarts from "echarts";
import { runningStateEnum } from "@/utils/enum.js";
import scScrollTavle from "@/components/scScrollTable.vue";
function deepCopy(obj) {
return JSON.parse(JSON.stringify(obj));
@ -148,6 +149,7 @@ export default {
components: { scScrollTavle },
data() {
return {
runningStateEnum,
basicOption: {
backgroundColor: "",
tooltip: {
@ -220,54 +222,37 @@ export default {
bottom: "4%",
containLabel: true
},
xAxis: [
{
xAxis: {
type: 'category',
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"], //
data: [], //
axisTick: {
alignWithLabel: true // 线
},
axisLabel: {
color: "rgba(255,255,255,.6)",
color: "rgb(255,255,255)",
fontSize: "8",
},
axisLine: {
show: false
}
}
],
yAxis: [
{
},
yAxis: {
type: 'value',
axisLabel: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
width: 2
}
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
}
}
}
],
//
series: [
{
series: {
name: 'Direct',
type: 'bar',
barWidth: '35%',
data: [200, 300, 300, 900, 1500, 1200, 600],
barWidth: '15',
data: [],
itemStyle: {
barBorderRadius: 5
}
}
]
},
chartOption2: {
grid: {
@ -299,7 +284,7 @@ export default {
},
type: 'category',
inverse: true, //
data: ["成品", "半成品", "返工", "不合格品", "废品"]
data: []
},
{
show: false,
@ -319,7 +304,7 @@ export default {
}
},
inverse: true, //
data: [702, 350, 610, 793, 664],
data: [],
}
],
//
@ -327,7 +312,7 @@ export default {
{
name: '柱状图',
type: 'bar',
data: [70, 34, 60, 78, 69],
data: [],
yAxisIndex: 0,
barCategoryGap: 50,
barWidth: 10,
@ -337,17 +322,17 @@ export default {
color: function (params) {
return myColor[params.dataIndex];
}
}
},
label: {
normal: {
show: true,
// show: true,
position: "outside",
color: "#fff",
formatter: "{c}%"
// formatter: "{a}"
}
}
},
},
{
name: "框",
type: "bar",
@ -365,16 +350,22 @@ export default {
},
yAxisIndex: 1,
data: [100, 100, 100, 100, 100]
data: []
}
]
},
tableHeight: 100,
speed: 2000,
time: null,
deptId: "",
dayInterval: null,
chartInterval2: null,
state_: {
10: '完好',
20: '限用',
30: '在修',
40: '禁用',
},
configData:{
header:['物料名称','批次号','数量'],
headerBGC:'#0a3f44',
@ -390,60 +381,26 @@ export default {
data:[]
},
config_left1:{
data:[
{name: '拉单丝',value: 167},
{ name: '排一次棒', value: 67},
{ name: '切片',value: 123},
{name: '退火', value: 55 },
{name: '检测',value: 98}
]
data:[]
} ,
config_left2:{
data:[
{name: '拉单丝', value: 120},
{name: '排一次棒',value: 80},
{name: '切片',value: 78},
{name: '退火',value: 66},
{name: '检测',value: 80}
]
data:[]
},
config_middle_top:{
rowNum:10,
headerBGC: 'rgba(47,102,107,.34)',
oddRowBGC: 'rgba(0,0,0,0)',
evenRowBGC: 'rgba(0,0,0,0)',
header: ['列1', '列2', '列3'],
data: [
['行1列1', '行1列2', '行1列3'],
['行2列1', '行2列2', '行2列3'],
['行3列1', '行3列2', '行3列3'],
['行4列1', '行4列2', '行4列3'],
['行5列1', '行5列2', '行5列3'],
['行6列1', '行6列2', '行6列3'],
['行7列1', '行7列2', '行7列3'],
['行8列1', '行8列2', '行8列3'],
['行9列1', '行9列2', '行9列3'],
['行10列1', '行10列2', '行10列3']
]
header: ['任务编号', '产出产品', '任务量', '合格数'],
data: []
},
config_middle_bottom:{
rowNum:10,
headerBGC: 'rgba(0,0,0,0)',
oddRowBGC: 'rgba(0,0,0,0)',
evenRowBGC: 'rgba(0,0,0,0)',
header: ['列1', '列2', '列3'],
data: [
['行1列1', '行1列2', '行1列3'],
['行2列1', '行2列2', '行2列3'],
['行3列1', '行3列2', '行3列3'],
['行4列1', '行4列2', '行4列3'],
['行5列1', '行5列2', '行5列3'],
['行6列1', '行6列2', '行6列3'],
['行7列1', '行7列2', '行7列3'],
['行8列1', '行8列2', '行8列3'],
['行9列1', '行9列2', '行9列3'],
['行10列1', '行10列2', '行10列3']
]
header: ['设备名称','设备位号','设备状态','运行状态','所在工段'],
data: []
},
currentTime: "",
currentDay: "",
@ -458,28 +415,37 @@ export default {
this.showTime();
}, 1000);
//
let daysArr = this.getMondayOfCurrentWeek();
this.daysArr = daysArr;
let xAxisData = [];
daysArr.forEach((item)=>{
let dates = item.split('-');
let obj = dates[1]+'-'+dates[2];
xAxisData.push(obj);
})
this.xAxisData = xAxisData;
let startDate = new Date(daysArr[0]).getTime()-(1000*60*60*24);
let endDate = new Date(daysArr[6]).getTime()+(1000*60*60*24);
let start_time = this.$TOOL.dateFormat(new Date(startDate), "yyyy-MM-dd hh:mm:ss");
let end_time = this.$TOOL.dateFormat(new Date(endDate), "yyyy-MM-dd hh:mm:ss");
this.start_time = start_time;
this.end_time = end_time;
// let daysArr = this.getMondayOfCurrentWeek();
// this.daysArr = daysArr;
// let xAxisData = [];
// daysArr.forEach((item)=>{
// let dates = item.split('-');
// let obj = dates[1]+'-'+dates[2];
// xAxisData.push(obj);
// })
// this.xAxisData = xAxisData;
// let startDate = new Date(daysArr[0]).getTime()-(1000*60*60*24);
// let endDate = new Date(daysArr[6]).getTime()+(1000*60*60*24);
// let start_time = this.$TOOL.dateFormat(new Date(startDate), "yyyy-MM-dd hh:mm:ss");
// let end_time = this.$TOOL.dateFormat(new Date(endDate), "yyyy-MM-dd hh:mm:ss");
// this.start_time = start_time;
// this.end_time = end_time;
let userInfo = this.$TOOL.data.get("USER_INFO");
this.deptId = userInfo.belong_dept;
this.deptName = userInfo.belong_dept_name;
this.getMgroups();
this.$nextTick(() => {
//
//
// this.getmgroupMaterial();
//
this.getMtask1();
//
//
this.getEquipment();
//
this.getCount();
//
this.getMaterials();
//
this.getMaterials();
})
},
@ -521,57 +487,137 @@ export default {
},
getMgroups(){
let that = this;
that.$API.mtm.mgroup.list.req({page:0}).then((res) => {
res.forEach((item) => {
});
that.$API.mtm.mgroup.list.req({belong_dept:that.deptId,page:0}).then((res) => {
if(res.length > 0){
res.forEach((item,inde)=>{
that.mgroupsId += item.id + ',';
that.getmgroupMaterial(item);
//
if(inde==res.length-1){
that.getLastmgroupMaterial(item);
}
})
}
});
},
//
//
getMtask1() {
let that = this;
let obj = {};
obj.mgroup__name = that.mgroup_hh;
obj.page = 0;
that.$API.pm.mtask.list.req(obj).then((res) => {
that.configData1.data = [];
res.forEach((item) => {
let arr = [];
arr[0] = item.material_out_.name;
arr[1] = item.material_out_.specification;
arr[2] = item.material_out_.model;
arr[3] = item.start_date;
arr[4] = item.end_date;
let process = Math.round((item.count_ok / item.count) * 100)+'%';
arr[5] = process;
arr[6] = item.count_ok;
if(item.state==20){
arr[7]='<span style="color:rgb(0,163,245);displaydisplay:inline-block;padding:2px 6px;background:rgb(226,241,245);border:1px solid rgb(0,163,245);border-radius:3px">已下达</span>';
}else if(item.state==34){
arr[7]='<span style="color:rgb(222,60,54);displaydisplay:inline-block;padding:2px 6px;background:rgb(247,231,231);border:1px solid rgb(222,60,54);border-radius:3px">已停止</span>';
}else if(item.state==40){
arr[7]='<span style="color:rgb(69,176,118);displaydisplay:inline-block;padding:2px 6px;background:rgb(231,247,232);border:1px solid rgb(69,176,118);border-radius:3px">已提交</span>';
}
that.configData1.data.push(arr);
});
});
},
//
getMaterials() {
let that = this;
that.$API.wpm.wmaterial.list.req({ page: 0,mgroup__name__in:'退火,黑化' }).then((res) => {
that.configData.data = [];
let params = {
state: 20,mgroup__belong_dept: that.deptId,page:0,
query: " { id, material_out_name, number, count, count_ok }"
};
that.config_middle_top.data = [];
that.$API.pm.mtask.list.req(params).then((res) => {
if(res.length>0){
res.forEach((item) => {
let arr = [];
arr[0] = item.material_name;
arr[1] = item.batch;
arr[0] = item.number;
arr[1] = item.material_out_name;
arr[2] = item.count;
that.configData.data .push(arr);
arr[3] = item.count_ok;
// arr[4] = item.count_ok/item.count*100+'%';
that.config_middle_top.data.push(arr);
})
}
});
},
//
getmgroupMaterial(item) {
let that = this;
console.log('item',item);
let params = { tag: 'done',page_size:1,mgroup: item.id };
that.$API.wpm.wmaterial.list.req(params).then((res) => {
let obj = {};
obj.name = item.name;
obj.value = res.count;
that.config_left1.data.push(obj);
})
},
getLastmgroupMaterial(item){
let that = this;
let params = {
tag: 'done',page:0,mgroup: item.id ,
// query: " { id, material_name }"
};
that.$API.wpm.wmaterial.list.req(params).then((res) => {
if(res.length>0){
let namelist = [],valuelist = [],values=[];
res.forEach((item)=>{
let index = namelist.indexOf(item.material_.name);
if(index==-1){
namelist.push(item.material_.name);
valuelist.push(1);
values.push(1);
}else{
valuelist[index] += 1;
values[index] += 1;
}
})
let maxNum = valuelist.sort((a, b) => b - a)[0]+2;
console.log('maxNum',maxNum);
console.log('maxNum',maxNum);
let arr = [];
valuelist.forEach((item)=>{
arr.push(maxNum)
})
console.log('arr',arr);
that.chartOption2.yAxis[0].data = namelist;
that.chartOption2.yAxis[1].data = valuelist;
that.chartOption2.series[0].data = valuelist;
that.chartOption2.series[1].data = arr;
namelist.forEach((item,index)=>{
let obj = {};
obj.name = item;
obj.value = valuelist[index];
that.config_left2.data.push(obj);
})
}
})
},
getEquipment() {
let that = this;
let params = {
page: 0, belong_dept:that.deptId,
query: " { id, name, number, model, state ,mgroup_name }"
};
that.config_middle_bottom.data = [];
that.$API.em.equipment.list.req(params).then((res) => {
if(res.length>0){
res.forEach((item) => {
let arr = [];
let state_ = that.state_[item.state];
let running_state_ = runningStateEnum[scope.row.running_state]?.text;
arr[0] = item.name;
arr[1] = item.number;
arr[2] = state_;
arr[3] = running_state_;
arr[4] = item.mgroup_name;
that.config_middle_bottom.data.push(arr);
})
}
})
},
getCount(){
let that = this;
let date = that.$TOOL.dateFormat(new Date(), "yyyy-MM-dd");
let params = {
// query: {start_date:date,end_date:date,dept_name:that.deptName},
query: {start_date:'2025-06-11',end_date:'2025-06-11',dept_name:that.deptName},
};
let namelist = [],valuelist = [];
this.$API.bi.dataset.exec.req("performance", params).then((res) => {
if(res.data2.ds0.length>0){
res.data2.ds0.forEach((item)=>{
namelist.push(item.操作人);
valuelist.push(item.合格数);
})
}
that.chartOption1.xAxis.data = namelist;
that.chartOption1.series.data = valuelist;
});
},
},
};
</script>