fix:光芯大屏调整
This commit is contained in:
parent
6f8d5ba993
commit
a4d904da93
|
|
@ -67,10 +67,10 @@
|
|||
<div class="left_block2">
|
||||
<div class="flexItem">
|
||||
<div class="itemTitle">
|
||||
<div>设备运转状态</div>
|
||||
<div>生产不合格分布统计</div>
|
||||
</div>
|
||||
<div class="itemBody">
|
||||
<div id="eqPieChart" style="width:16vw;height:20vh;"></div>
|
||||
<div id="notokPieChart" style="width:20vw;height:21vh;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -111,7 +111,7 @@
|
|||
<div>质量分析</div>
|
||||
</div>
|
||||
<div class="itemBody3">
|
||||
<scEcharts v-if="visibal0" :height="pieHeight" :width="pieWidth" :option="options"></scEcharts>
|
||||
<scEcharts v-if="visibal0" :height="pieHeight" :width="pieWidth" :option="option0"></scEcharts>
|
||||
<scEcharts v-if="visibal1" :height="pieHeight" :width="pieWidth" :option="option1"></scEcharts>
|
||||
<scEcharts v-if="visibal2" :height="pieHeight" :width="pieWidth" :option="option2"></scEcharts>
|
||||
<scEcharts v-if="visibal3" :height="pieHeight" :width="pieWidth" :option="option3"></scEcharts>
|
||||
|
|
@ -335,6 +335,7 @@ const baseOption={
|
|||
]
|
||||
}
|
||||
const baseOption2= {
|
||||
color: ['rgb(64,158,255)','rgb(255,160,0)'],
|
||||
title: {
|
||||
text: '棒料',
|
||||
left: 'center',
|
||||
|
|
@ -345,6 +346,7 @@ const baseOption2= {
|
|||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
itemWidth: 12,
|
||||
|
|
@ -356,19 +358,28 @@ const baseOption2= {
|
|||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
series: [{
|
||||
series: {
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
radius: ['10%', '60%'],
|
||||
center: ['50%', '50%'],
|
||||
label: false,
|
||||
// label: false,
|
||||
itemStyle: {
|
||||
borderRadius: 5
|
||||
borderRadius: 10
|
||||
},
|
||||
label: {
|
||||
formatter: '{c} ({d}%)',
|
||||
position: 'inside',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
// color: 'rgb(54,256,158)',
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{value: 0, name: '合格'},
|
||||
{value: 0, name: '不合格'},
|
||||
]
|
||||
}]
|
||||
}
|
||||
}
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -408,7 +419,7 @@ export default {
|
|||
'二层地面': "二层",//地面.001
|
||||
},
|
||||
// 质量分析饼状图option
|
||||
options: {},
|
||||
option0: {},
|
||||
option1: {},
|
||||
option2: {},
|
||||
option3: {},
|
||||
|
|
@ -421,32 +432,23 @@ export default {
|
|||
color: ['rgb(145,204,117)', '#ffa500 ', 'rgb(250,200,88)', 'rgb(215,102,97)', 'rgb(185,51,46)' ],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
show:true,
|
||||
selected: {
|
||||
'正常': true,
|
||||
'限用': true,
|
||||
'维修': true,
|
||||
'禁用': true,
|
||||
'报废': true,
|
||||
},
|
||||
data: ['正常', '限用','维修', '禁用', '报废'], // 确保包括所有的系列名
|
||||
// orient: 'vertical',
|
||||
left: 'center',
|
||||
bottom: '0',
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
orient: 'vertical',
|
||||
right: '1%',
|
||||
textStyle:{
|
||||
color:"#ffffff"
|
||||
},
|
||||
formatter: function (name) {
|
||||
return name; // 或者根据需要调整显示内容
|
||||
}
|
||||
},
|
||||
series:{
|
||||
name:'设备状态',
|
||||
name:'不良占比分布',
|
||||
type: 'pie',
|
||||
radius: ['30%', '60%'],
|
||||
center: ['50%', '40%'],
|
||||
center: ['25%', '50%'],
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderWidth: 2
|
||||
|
|
@ -465,13 +467,7 @@ export default {
|
|||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{value: 173, name: '正常'},
|
||||
{value: 0, name: '限用'},
|
||||
{value: 0, name: '维修'},
|
||||
{value: 0, name: '禁用'},
|
||||
{value: 0, name: '报废'},
|
||||
]
|
||||
data: []
|
||||
}
|
||||
},
|
||||
//成品table数据
|
||||
|
|
@ -527,6 +523,15 @@ export default {
|
|||
};
|
||||
},
|
||||
mounted() {
|
||||
let that = this;
|
||||
let nowDate = new Date();
|
||||
let firstDay = new Date(nowDate.getTime()-6*24*60*60*1000);
|
||||
let start_date = that.$TOOL.dateFormat(firstDay, 'yyyy-MM-dd');
|
||||
let end_date = that.$TOOL.dateFormat(nowDate, 'yyyy-MM-dd');
|
||||
that.start_date = start_date;
|
||||
that.end_date = end_date;
|
||||
console.log('that.start_date',that.start_date)
|
||||
console.log('that.end_date',that.end_date)
|
||||
this.bigScreenName = this.$TOOL.data.get("BASE_INFO").base.bigScreen_name;
|
||||
console.log('this.bigScreenName',this.bigScreenName)
|
||||
this.showTime();
|
||||
|
|
@ -544,7 +549,7 @@ export default {
|
|||
var windowHeight = window.innerHeight;
|
||||
var windowWidth = window.innerWidth;
|
||||
that.pieWidth =Math.round((windowWidth/100*33)/4)+'px';
|
||||
that.pieHeight = Math.round((windowHeight/100)*12)+'px';
|
||||
that.pieHeight = Math.round((windowHeight/100)*14)+'px';
|
||||
that.lineWidth = (windowWidth/5-10)+'px';
|
||||
that.lineHeight = (windowHeight/100)*12.5+'px';
|
||||
|
||||
|
|
@ -565,7 +570,7 @@ export default {
|
|||
}
|
||||
that.dayArr = dayArr;
|
||||
|
||||
that.myChart = echarts.init(document.getElementById('eqPieChart'));
|
||||
that.myChart = echarts.init(document.getElementById('notokPieChart'));
|
||||
that.myChart.setOption(that.option_eq);
|
||||
let index2 = 0;
|
||||
that.chartInterval2 = setInterval(function () {
|
||||
|
|
@ -590,12 +595,14 @@ export default {
|
|||
}
|
||||
}, 3000);
|
||||
that.$nextTick(function () {
|
||||
that.getEquipments();
|
||||
// that.getEquipments();
|
||||
that.getCountnotok();
|
||||
that.getMaterials();
|
||||
that.getMgroup();
|
||||
that.getTaskNumber();
|
||||
that.addListener();
|
||||
that.getArticles();
|
||||
that.getpurinrate();
|
||||
that.initFactory();
|
||||
that.addListener();
|
||||
})
|
||||
|
|
@ -720,16 +727,37 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
//设备统计
|
||||
getEquipments(){
|
||||
//不合格分布
|
||||
getCountnotok(){
|
||||
let that = this;
|
||||
that.$API.em.equipment.count_running_state.req().then((res) => {
|
||||
that.option_eq.series.data[0].value = res.count_ok;
|
||||
that.option_eq.series.data[1].value =res.count_limit;
|
||||
that.option_eq.series.data[2].value =res.count_fix;
|
||||
that.option_eq.series.data[3].value =res.count_disable;
|
||||
that.option_eq.series.data[4].value =res.count_scrap;
|
||||
that.myChart.setOption({series:{data:that.option_eq.series.data}});
|
||||
let obj = {query:{start_date:that.start_date,end_date:that.end_date}};
|
||||
that.$API.bi.dataset.exec.req('notok_dis', obj).then((res) => {
|
||||
let seriesData = [];
|
||||
if(res.data2.ds0){
|
||||
res.data2.ds0.forEach((item) => {
|
||||
let obj = {};
|
||||
obj.name = item.不合格项;
|
||||
obj.value = item.数量;
|
||||
seriesData.push(obj);
|
||||
})
|
||||
}
|
||||
that.option_eq.series.data = seriesData;
|
||||
that.myChart.setOption({series:{data:seriesData}});
|
||||
})
|
||||
},
|
||||
getpurinrate(){
|
||||
let that = this;
|
||||
that.visibal0 = true;
|
||||
that.option0 = that.deepCopy(baseOption2);
|
||||
that.option0.title.text = '原料棒';
|
||||
console.log('that.option0',that.option0);
|
||||
let obj = {query:{start_date:that.start_date,end_date:that.end_date}};
|
||||
that.$API.bi.dataset.exec.req('mio_okrate', obj).then((res)=>{
|
||||
if(res.data2.ds0){
|
||||
let obj = res.data2.ds0[0];
|
||||
that.option0.series.data[0].value = obj.总数-obj.不合格数;
|
||||
that.option0.series.data[1].value = obj.不合格数;
|
||||
}
|
||||
})
|
||||
},
|
||||
//库存统计列表(原料30库库存和成品10库库存)
|
||||
|
|
@ -910,10 +938,11 @@ export default {
|
|||
that[optionKey] = that.deepCopy(baseOption);
|
||||
that[optionKey].xAxis.data =that.dayArr;
|
||||
that[visibalKey] = true;
|
||||
let nowDate = new Date();
|
||||
let end_date = that.$TOOL.dateFormat2(nowDate);
|
||||
let start_date = that.$TOOL.dateFormat2(new Date(nowDate.getTime()-6*24*60*60*1000));
|
||||
let obj = {query:{end_date:end_date,start_date:start_date,mgroup_name:name}};
|
||||
if(index==4){
|
||||
that[optionKey].yAxis.pop();
|
||||
that[optionKey].series.pop();
|
||||
}
|
||||
let obj = {query:{end_date:that.end_date,start_date:that.start_date,mgroup_name:name}};
|
||||
that.$API.bi.dataset.exec.req('lineDay_m2', obj).then((res) => {
|
||||
if(res.data2.ds0){
|
||||
let lists = res.data2.ds0;
|
||||
|
|
@ -927,7 +956,6 @@ export default {
|
|||
})
|
||||
that[optionKey].series[0].data = data0;
|
||||
that[optionKey].series[1].data = data1;
|
||||
that[optionKey].series[2].data = data2;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -940,19 +968,13 @@ export default {
|
|||
that[optionKey] = that.deepCopy(baseOption2);
|
||||
that[visibalKey] = true;
|
||||
if(index==1){
|
||||
that.option1 = that.deepCopy(baseOption2);
|
||||
that.option1.title.text = '白片抛';
|
||||
}else if(index==2){
|
||||
that.option2 = that.deepCopy(baseOption2);
|
||||
that.option2.title.text = '一次抛';
|
||||
}else if(index==3){
|
||||
that.option3 = that.deepCopy(baseOption2);
|
||||
that.option3.title.text = '外形抛光';
|
||||
}
|
||||
let nowDate = new Date();
|
||||
let end_date = that.$TOOL.dateFormat2(nowDate);
|
||||
let start_date = that.$TOOL.dateFormat2(new Date(nowDate.getTime()-6*24*60*60*1000));
|
||||
let obj = {query:{end_date:end_date,start_date:start_date,mgroup_name:name}};
|
||||
let obj = {query:{end_date:that.end_date,start_date:that.start_date,mgroup_name:name}};
|
||||
that.$API.bi.dataset.exec.req('lineDay_m2', obj).then((res) => {
|
||||
if(res.data2.ds0){
|
||||
let lists = res.data2.ds0;
|
||||
|
|
@ -962,8 +984,8 @@ export default {
|
|||
count_ok += Number(item.合格数);
|
||||
count_notok += Number(item.不合格数) ;
|
||||
})
|
||||
that[optionKey].series.data[0] = count_ok;
|
||||
that[optionKey].series.data[1] = count_notok;
|
||||
that[optionKey].series.data[0].value = count_ok;
|
||||
that[optionKey].series.data[1].value = count_notok;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -1065,7 +1087,7 @@ export default {
|
|||
overflow:hidden;
|
||||
flex-direction: column;
|
||||
padding: 0 5px;
|
||||
height: 320px;
|
||||
height: 20vh;
|
||||
box-sizing: border-box;
|
||||
background: rgba(9, 31, 43, 0.5);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue