feat:黑化车间数据看板
This commit is contained in:
parent
2a7502d023
commit
1793a41dfb
|
|
@ -0,0 +1,992 @@
|
||||||
|
<template>
|
||||||
|
<el-container class="dashboard">
|
||||||
|
<el-header class="header">
|
||||||
|
<div class="title">黑化车间生产数据看板</div>
|
||||||
|
<div class="timer">{{ currentDay }} {{ currentTime }}</div>
|
||||||
|
</el-header>
|
||||||
|
<el-main>
|
||||||
|
<!-- 黑化 -->
|
||||||
|
<el-row style="height: 30%" :gutter="10">
|
||||||
|
<el-col :xs="7" :md="7" style="height: 100%">
|
||||||
|
<div class="box">
|
||||||
|
<div class="boxtitle bgimg">
|
||||||
|
<div class="boxlabel">昨日黑化合格统计</div>
|
||||||
|
</div>
|
||||||
|
<div style="height: 4px"></div>
|
||||||
|
<div class="boxmain bigdata border">
|
||||||
|
<div v-for="item in yesHeihuaData" :key="item.物料名" class="lineDiv">
|
||||||
|
<span>{{ item.物料名 }}</span>
|
||||||
|
<span class="boxmainItemNumber">{{item.合格数}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :xs="7" :md="7">
|
||||||
|
<div class="box">
|
||||||
|
<div class="boxtitle">
|
||||||
|
<div class="boxlabel">
|
||||||
|
昨日黑化不合格统计
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="boxmain" id="pieChart1"></div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :xs="10" :md="10" style="height: 100%">
|
||||||
|
<div class="box">
|
||||||
|
<div class="boxtitle">
|
||||||
|
<div class="boxlabel">黑化任务进度</div>
|
||||||
|
</div>
|
||||||
|
<div style="height: 2px"></div>
|
||||||
|
<div class="boxmain" id="scrollContainer">
|
||||||
|
<scScrollTavle
|
||||||
|
v-if="table1Visible"
|
||||||
|
:tableHeight="tableHeight"
|
||||||
|
:rowData="processData1"
|
||||||
|
:titleData="liData"
|
||||||
|
:refValue="refValue1"
|
||||||
|
></scScrollTavle>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<div style="height: 0.3%"></div>
|
||||||
|
<!-- 退火 -->
|
||||||
|
<el-row style="height: 30%" :gutter="10">
|
||||||
|
<el-col :xs="7" :md="7" style="height: 100%">
|
||||||
|
<div class="box">
|
||||||
|
<div class="boxtitle bgimg">
|
||||||
|
<div class="boxlabel">昨日退火合格统计</div>
|
||||||
|
</div>
|
||||||
|
<div style="height: 4px"></div>
|
||||||
|
<div class="boxmain bigdata border">
|
||||||
|
<!-- flex_center -->
|
||||||
|
<div v-for="item in yesTuihuoData" :key="item.物料名" class="lineDiv">
|
||||||
|
<span>{{ item.物料名 }}</span>
|
||||||
|
<span class="boxmainItemNumber">{{item.合格数}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :xs="7" :md="7">
|
||||||
|
<div class="box">
|
||||||
|
<div class="boxtitle">
|
||||||
|
<div class="boxlabel">
|
||||||
|
昨日退火不合格统计
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="boxmain" id="pieChart2"></div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :xs="10" :md="10" style="height: 100%">
|
||||||
|
<div class="box">
|
||||||
|
<div class="boxtitle">
|
||||||
|
<div class="boxlabel">退火任务进度</div>
|
||||||
|
</div>
|
||||||
|
<div style="height: 2px"></div>
|
||||||
|
<div class="boxmain" id="scrollContainer">
|
||||||
|
<scScrollTavle
|
||||||
|
v-if="table2Visible"
|
||||||
|
:tableHeight="tableHeight"
|
||||||
|
:rowData="processData2"
|
||||||
|
:titleData="liData"
|
||||||
|
:refValue="refValue2"
|
||||||
|
></scScrollTavle>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<!-- 合格数/合格率 -->
|
||||||
|
<div style="height: 0.3%"></div>
|
||||||
|
<el-row style="height: 39%" :gutter="10">
|
||||||
|
<el-col :xs="24" :md="12">
|
||||||
|
<div class="box">
|
||||||
|
<div class="boxtitle">
|
||||||
|
<div class="boxlabel">黑化车间本月合格数统计</div>
|
||||||
|
</div>
|
||||||
|
<div class="boxmain" id="chart1"></div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :xs="24" :md="12">
|
||||||
|
<div class="box">
|
||||||
|
<div class="boxtitle">
|
||||||
|
<div class="boxlabel">黑化车间本月合格率统计</div>
|
||||||
|
</div>
|
||||||
|
<div class="boxmain" id="chart2"></div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-main>
|
||||||
|
</el-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
import scScrollTavle from "@/components/scScrollTable.vue";
|
||||||
|
function deepCopy(obj) {
|
||||||
|
return JSON.parse(JSON.stringify(obj));
|
||||||
|
}
|
||||||
|
export default {
|
||||||
|
components: { scScrollTavle },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
basicOption: {
|
||||||
|
backgroundColor: "",
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
axisPointer: {
|
||||||
|
type: "cross",
|
||||||
|
label: {
|
||||||
|
backgroundColor: "#6a7985",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
icon: "stack",
|
||||||
|
right: 0,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
backgroundColor: "rgb(1,235,239)",
|
||||||
|
name: "黑化",
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgb(250,205,0)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "rgb(254,129,0)",
|
||||||
|
},
|
||||||
|
]
|
||||||
|
),
|
||||||
|
},
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
feature: {
|
||||||
|
// saveAsImage: {}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: "3%",
|
||||||
|
right: "2%",
|
||||||
|
bottom: "3%",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
boundaryGap: true,
|
||||||
|
data: [],
|
||||||
|
nameTextStyle: {
|
||||||
|
color: "#ffffff",
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: "#ffffff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name: "",
|
||||||
|
type: "value",
|
||||||
|
nameTextStyle: {
|
||||||
|
color: "#ffffff",
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: "#ffffff",
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
type: "dashed", //y轴分割线类型
|
||||||
|
color: "rgba(102,102,102,0.9)",
|
||||||
|
width: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "黑化",
|
||||||
|
type: "bar",
|
||||||
|
// stack: "Ad",
|
||||||
|
barWidth: 10,
|
||||||
|
emphasis: {
|
||||||
|
focus: "series",
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: "top",
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: [5, 5, 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)",
|
||||||
|
},
|
||||||
|
]
|
||||||
|
),
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgb(250,205,0)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "rgb(254,129,0)",
|
||||||
|
},
|
||||||
|
]
|
||||||
|
),
|
||||||
|
},
|
||||||
|
smooth: true,
|
||||||
|
// lineStyle: {
|
||||||
|
// width: 1,
|
||||||
|
// color: "rgb(1,235,239)",
|
||||||
|
// },
|
||||||
|
data: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "退火",
|
||||||
|
type: "bar",
|
||||||
|
// stack: "Ad",
|
||||||
|
barWidth: 10,
|
||||||
|
emphasis: {
|
||||||
|
focus: "series",
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: "top",
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: [5, 5, 0, 0],
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgb(1,235,239)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "rgb(5, 158, 163)",
|
||||||
|
},
|
||||||
|
]
|
||||||
|
),
|
||||||
|
},
|
||||||
|
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)",
|
||||||
|
},
|
||||||
|
]
|
||||||
|
),
|
||||||
|
},
|
||||||
|
smooth: true,
|
||||||
|
// lineStyle: {
|
||||||
|
// width: 1,
|
||||||
|
// color: "rgb(1,235,239)",
|
||||||
|
// },
|
||||||
|
data: [10,50,80,60,65,58,70,80,90,100,110,120],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
pieOption: {
|
||||||
|
backgroundColor: "",
|
||||||
|
tooltip: {
|
||||||
|
trigger: "item",
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
top: "bottom",
|
||||||
|
},
|
||||||
|
series: {
|
||||||
|
name: "不合格统计",
|
||||||
|
type: "pie",
|
||||||
|
radius: "50%",
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 2,
|
||||||
|
},
|
||||||
|
center: ["50%", "45%"],
|
||||||
|
data: [
|
||||||
|
{ value: 0, name: "划伤" },
|
||||||
|
{ value: 0, name: "气泡" },
|
||||||
|
{ value: 0, name: "水纹" },
|
||||||
|
{ value: 0, name: "崩边" },
|
||||||
|
{ value: 0, name: "雾面" },
|
||||||
|
{ value: 0, name: "麻点" },
|
||||||
|
{ value: 0, name: "线痕" },
|
||||||
|
{ value: 0, name: "破损" },
|
||||||
|
{ value: 0, name: "其他" },
|
||||||
|
],
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowColor: "rgba(0, 0, 0, 0.5)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tableHeight: 100,
|
||||||
|
table1Visible: false,
|
||||||
|
table2Visible: false,
|
||||||
|
refValue1: "moocBox1",
|
||||||
|
refValue2: "moocBox2",
|
||||||
|
liData: ["序号","产出名称","规格","型号","开始时间","结束时间","完成进度","产量","状态"],
|
||||||
|
processData1: [],
|
||||||
|
processData2: [],
|
||||||
|
todayMtask: [],
|
||||||
|
speed: 2000,
|
||||||
|
myScroll: null,
|
||||||
|
iliHeight: 30,
|
||||||
|
time: null,
|
||||||
|
delay: 20,
|
||||||
|
start_date: "",
|
||||||
|
end_date: "",
|
||||||
|
yesterday: "",
|
||||||
|
dayInterval: null,
|
||||||
|
chartInterval1: null,
|
||||||
|
chartInterval2: null,
|
||||||
|
chartInterval3: null,
|
||||||
|
stateOption: {
|
||||||
|
30: "生产中",
|
||||||
|
40: "已完成",
|
||||||
|
},
|
||||||
|
currentTime: "",
|
||||||
|
currentDay: "",
|
||||||
|
today: "",
|
||||||
|
yesterdayObjet: {},
|
||||||
|
yesHeihuaData:[
|
||||||
|
{年: 2024, 月: 7, 日: 5, 物料名: "CNC_黑化", 生产数: 260, 合格数: 240, 不合格数: 0, 划伤: 0, 气泡: 0, 水纹: 0, 崩边: 0, 雾面: 0,麻点:0},
|
||||||
|
],
|
||||||
|
yesTuihuoData:[
|
||||||
|
{年: 2024, 月: 7, 日: 5, 物料名: "CNC_退火", 生产数: 250, 合格数: 240, 不合格数: 0, 划伤: 0, 气泡: 0, 水纹: 0, 崩边: 0, 雾面: 0,麻点:0},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
//表格table的高度
|
||||||
|
this.tableHeight = document.getElementById("scrollContainer").clientHeight;
|
||||||
|
this.table1Visible = true;
|
||||||
|
this.table2Visible = true;
|
||||||
|
|
||||||
|
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;
|
||||||
|
month = month < 10 ? "0" + month : month;
|
||||||
|
this.start_date = year + "-" + month + "-01";
|
||||||
|
this.end_date =
|
||||||
|
year + "-" + month + "-" + new Date(year, month, 0).getDate();
|
||||||
|
this.today = year + "-" + month + "-" + day;
|
||||||
|
let yesterday = new Date(date.getTime() - 24 * 60 * 60 * 1000);
|
||||||
|
this.yesterday =
|
||||||
|
yesterday.getFullYear() +
|
||||||
|
"-" +
|
||||||
|
(yesterday.getMonth() + 1) +
|
||||||
|
"-" +
|
||||||
|
yesterday.getDate();
|
||||||
|
this.getProductLine1();
|
||||||
|
// this.getProductLine2();
|
||||||
|
this.getMtask1();
|
||||||
|
this.getMtask2();
|
||||||
|
},
|
||||||
|
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 渲染数据, option需填写，否则option为模拟数据
|
||||||
|
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;
|
||||||
|
},
|
||||||
|
//黑化合格数统计
|
||||||
|
getProductLine1() {
|
||||||
|
let that = this;
|
||||||
|
let obj = {
|
||||||
|
query: {
|
||||||
|
start_date: that.start_date,
|
||||||
|
end_date: that.end_date,
|
||||||
|
mgroup_name: "黑化",
|
||||||
|
"group_bys_material": "",
|
||||||
|
"order_bys_material": "",
|
||||||
|
"select_cols_material": "",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
that.$API.bi.dataset.exec.req("lineDay_m", obj).then((res) => {
|
||||||
|
console.log("本月黑化生产统计:", res);
|
||||||
|
let list2 = res.data2.ds0;
|
||||||
|
let seriesData1 = [],
|
||||||
|
seriesData2 = [],
|
||||||
|
seriesData3 = [];
|
||||||
|
for (let i = 0; i < that.days; i++) {
|
||||||
|
seriesData1[i] = 0;
|
||||||
|
seriesData2[i] = 0;
|
||||||
|
}
|
||||||
|
if (list2.length > 0) {
|
||||||
|
list2.forEach((item2) => {
|
||||||
|
let index2 = item2.日 - 1;
|
||||||
|
//合格率=当天的合格数/当天的总生产数
|
||||||
|
seriesData1[index2] += item2.合格数;
|
||||||
|
seriesData2[index2] += item2.生产数;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
for (let i = 0; i < that.days; i++) {
|
||||||
|
if(seriesData2[i]>0&&seriesData1[i] >=0){
|
||||||
|
seriesData3[i] = Math.round(seriesData1[i]/seriesData2[i])*100 ;
|
||||||
|
}else{
|
||||||
|
seriesData3[i]=0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let chart1Option = deepCopy(this.basicOption);
|
||||||
|
let chart2Option = deepCopy(this.basicOption);
|
||||||
|
|
||||||
|
|
||||||
|
chart1Option.series[0].data = seriesData1;
|
||||||
|
chart2Option.series[0].type = 'line';
|
||||||
|
chart2Option.series[0].data = seriesData3;
|
||||||
|
that.getProductLine2(chart1Option,chart2Option);
|
||||||
|
});
|
||||||
|
|
||||||
|
//黑化生产昨日统计
|
||||||
|
let obj2 = {
|
||||||
|
query: {
|
||||||
|
start_date: that.yesterday,
|
||||||
|
end_date: that.yesterday,
|
||||||
|
mgroup_name: "黑化",
|
||||||
|
"group_bys_material": "",
|
||||||
|
"order_bys_material": "",
|
||||||
|
"select_cols_material": "",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
that.$API.bi.dataset.exec.req("lineDay_m", obj2).then((res2) => {
|
||||||
|
// console.log("黑化生产昨日统计:", res2);
|
||||||
|
that.yesHeihuaData = res2.data2.ds0;
|
||||||
|
let pieOption = deepCopy(that.pieOption);
|
||||||
|
if (res2.data2.ds0.length > 0) {
|
||||||
|
res2.data2.ds0.forEach((item) => {
|
||||||
|
pieOption.series.data[0].value += item.划伤;
|
||||||
|
pieOption.series.data[1].value += item.气泡;
|
||||||
|
pieOption.series.data[2].value = item.水纹;
|
||||||
|
pieOption.series.data[3].value = item.崩边;
|
||||||
|
pieOption.series.data[4].value = item.雾面;
|
||||||
|
pieOption.series.data[5].value = item.麻点;
|
||||||
|
pieOption.series.data[5].value = item.线痕;
|
||||||
|
pieOption.series.data[5].value = item.破损;
|
||||||
|
pieOption.series.data[5].value = item.其他;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
let pieChart1 = this.setChart("pieChart1", pieOption);
|
||||||
|
let index1 = 0;
|
||||||
|
this.chartInterval3 = setInterval(function () {
|
||||||
|
if (index1 < that.pieOption.series.data.length) {
|
||||||
|
pieChart1.dispatchAction({
|
||||||
|
type: "downplay",
|
||||||
|
seriesIndex: 0,
|
||||||
|
});
|
||||||
|
pieChart1.dispatchAction({
|
||||||
|
type: "highlight",
|
||||||
|
seriesIndex: 0,
|
||||||
|
dataIndex: index1,
|
||||||
|
});
|
||||||
|
pieChart1.dispatchAction({
|
||||||
|
type: "showTip",
|
||||||
|
seriesIndex: 0,
|
||||||
|
dataIndex: index1,
|
||||||
|
});
|
||||||
|
index1++;
|
||||||
|
} else {
|
||||||
|
index1 = 0;
|
||||||
|
}
|
||||||
|
}, 3000);
|
||||||
|
debugger;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//退火合格数统计
|
||||||
|
getProductLine2(chart1Option,chart2Option) {
|
||||||
|
let that = this;
|
||||||
|
let obj = {
|
||||||
|
query: {
|
||||||
|
start_date: that.start_date,
|
||||||
|
end_date: that.end_date,
|
||||||
|
mgroup_name: "退火",
|
||||||
|
"group_bys_material": "",
|
||||||
|
"order_bys_material": "",
|
||||||
|
"select_cols_material": "",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
that.$API.bi.dataset.exec.req("lineDay_m", obj).then((res) => {
|
||||||
|
// console.log("本月退火生产统计:", res);
|
||||||
|
let list = res.data2.ds0;
|
||||||
|
let seriesData1 = [],
|
||||||
|
seriesData2 = [],
|
||||||
|
seriesData3 = [],
|
||||||
|
xAxisData = [];
|
||||||
|
for (let i = 0; i < that.days; i++) {
|
||||||
|
let day = i + 1;
|
||||||
|
let text = day + "日";
|
||||||
|
xAxisData[i] = text;
|
||||||
|
seriesData1[i] = 0;
|
||||||
|
seriesData2[i] = 0;
|
||||||
|
}
|
||||||
|
if (list.length > 0) {
|
||||||
|
list.forEach((item2) => {
|
||||||
|
let index2 = item2.日 - 1;
|
||||||
|
seriesData1[index2] += item2.合格数;
|
||||||
|
seriesData2[index2] += item2.生产数;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
for (let i = 0; i < that.days; i++) {
|
||||||
|
if(seriesData2[i]>0&&seriesData1[i] >=0){
|
||||||
|
seriesData3[i] = Math.round(seriesData1[i]/seriesData2[i])*100 ;
|
||||||
|
}else{
|
||||||
|
seriesData3[i]=0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
chart1Option.xAxis.data = xAxisData;
|
||||||
|
chart2Option.xAxis.data = xAxisData;
|
||||||
|
|
||||||
|
|
||||||
|
chart1Option.series[1].data = seriesData1;
|
||||||
|
chart2Option.series[1].type = 'line';
|
||||||
|
chart2Option.series[1].data = seriesData3;
|
||||||
|
|
||||||
|
let chart1 = this.setChart("chart1", chart1Option);
|
||||||
|
let chart2 = this.setChart("chart2", chart2Option);
|
||||||
|
|
||||||
|
let index2 = 0;
|
||||||
|
this.chartInterval2 = setInterval(function () {
|
||||||
|
if (index2 < chart1Option.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,
|
||||||
|
});
|
||||||
|
chart1.dispatchAction({
|
||||||
|
type: "downplay",
|
||||||
|
seriesIndex: 0,
|
||||||
|
});
|
||||||
|
chart1.dispatchAction({
|
||||||
|
type: "highlight",
|
||||||
|
seriesIndex: 0,
|
||||||
|
dataIndex: index2,
|
||||||
|
});
|
||||||
|
chart1.dispatchAction({
|
||||||
|
type: "showTip",
|
||||||
|
seriesIndex: 0,
|
||||||
|
dataIndex: index2,
|
||||||
|
});
|
||||||
|
index2++;
|
||||||
|
} else {
|
||||||
|
index2 = 0;
|
||||||
|
}
|
||||||
|
}, 3000);
|
||||||
|
});
|
||||||
|
|
||||||
|
//车间生产昨日统计
|
||||||
|
let obj2 = {
|
||||||
|
query: {
|
||||||
|
start_date: that.yesterday,
|
||||||
|
end_date: that.yesterday,
|
||||||
|
mgroup_name: "退火",
|
||||||
|
"group_bys_material": "",
|
||||||
|
"order_bys_material": "",
|
||||||
|
"select_cols_material": "",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
that.$API.bi.dataset.exec.req("lineDay_m", obj2).then((res2) => {
|
||||||
|
// console.log("车间生产昨日统计:", res2);
|
||||||
|
that.yesTuihuoData = res2.data2.ds0;
|
||||||
|
let pieOption = deepCopy(that.pieOption);
|
||||||
|
if (res2.data2.ds0.length > 0) {
|
||||||
|
res2.data2.ds0.forEach((item) => {
|
||||||
|
pieOption.series.data[0].value += item.划伤;
|
||||||
|
pieOption.series.data[1].value += item.气泡;
|
||||||
|
pieOption.series.data[2].value = item.水纹;
|
||||||
|
pieOption.series.data[3].value = item.崩边;
|
||||||
|
pieOption.series.data[4].value = item.雾面;
|
||||||
|
pieOption.series.data[5].value = item.麻点;
|
||||||
|
pieOption.series.data[5].value = item.线痕;
|
||||||
|
pieOption.series.data[5].value = item.破损;
|
||||||
|
pieOption.series.data[5].value = item.其他;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
let pieChart2 = this.setChart("pieChart2", pieOption);
|
||||||
|
let index2 = 0;
|
||||||
|
this.chartInterval3 = setInterval(function () {
|
||||||
|
if (index2 < pieOption.series.data.length) {
|
||||||
|
pieChart2.dispatchAction({
|
||||||
|
type: "downplay",
|
||||||
|
seriesIndex: 0,
|
||||||
|
});
|
||||||
|
pieChart2.dispatchAction({
|
||||||
|
type: "highlight",
|
||||||
|
seriesIndex: 0,
|
||||||
|
dataIndex: index2,
|
||||||
|
});
|
||||||
|
pieChart2.dispatchAction({
|
||||||
|
type: "showTip",
|
||||||
|
seriesIndex: 0,
|
||||||
|
dataIndex: index2,
|
||||||
|
});
|
||||||
|
index2++;
|
||||||
|
} else {
|
||||||
|
index2 = 0;
|
||||||
|
}
|
||||||
|
}, 3000);
|
||||||
|
debugger;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//黑化任务进度
|
||||||
|
getMtask1() {
|
||||||
|
let that = this;
|
||||||
|
that.$API.mtm.mgroup.list.req({ page: 0, search: '黑化'})
|
||||||
|
.then((res) => {
|
||||||
|
if(res.length != 1){
|
||||||
|
that.$message.error("获取工段错误");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let mgroup = res[0].id;
|
||||||
|
let obj = {};
|
||||||
|
// obj.start_date__gte = this.start_date;
|
||||||
|
// obj.end_date__lte = this.end_date;
|
||||||
|
obj.mgroup = mgroup;
|
||||||
|
obj.page = 0;
|
||||||
|
that.$API.pm.mtask.list.req(obj).then((res) => {
|
||||||
|
let processData = [];
|
||||||
|
res.forEach((item) => {
|
||||||
|
let arr = [],
|
||||||
|
obj1 = {},
|
||||||
|
obj2 = {},
|
||||||
|
obj3 = {},
|
||||||
|
obj4 = {},
|
||||||
|
obj5 = {},
|
||||||
|
obj6 = {},
|
||||||
|
obj7 = {},
|
||||||
|
obj8 = {};
|
||||||
|
obj1.elType = "primary";
|
||||||
|
obj1.value = item.material_out_.name;
|
||||||
|
obj2.elType = "primary";
|
||||||
|
obj2.value = item.material_out_.specification;
|
||||||
|
obj8.elType = "primary";
|
||||||
|
obj8.value = item.material_out_.model;
|
||||||
|
obj3.elType = "primary";
|
||||||
|
obj3.value = item.start_date;
|
||||||
|
obj4.elType = "primary";
|
||||||
|
obj4.value = item.end_date;
|
||||||
|
obj5.elType = "progress";
|
||||||
|
let process = Math.round(
|
||||||
|
(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(obj8);
|
||||||
|
arr.push(obj3);
|
||||||
|
arr.push(obj4);
|
||||||
|
arr.push(obj5);
|
||||||
|
arr.push(obj6);
|
||||||
|
arr.push(obj7);
|
||||||
|
processData.push(arr);
|
||||||
|
});
|
||||||
|
this.processData1 = processData;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//退火任务进度
|
||||||
|
getMtask2() {
|
||||||
|
let that = this;
|
||||||
|
that.$API.mtm.mgroup.list.req({ page: 0, search: '退火'})
|
||||||
|
.then((res) => {
|
||||||
|
if(res.length != 1){
|
||||||
|
that.$message.error("获取工段错误");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let mgroup = res[0].id;
|
||||||
|
let obj = {};
|
||||||
|
// obj.start_date__gte = this.start_date;
|
||||||
|
// obj.end_date__lte = this.end_date;
|
||||||
|
obj.mgroup = mgroup;
|
||||||
|
obj.page = 0;
|
||||||
|
that.$API.pm.mtask.list.req(obj).then((res) => {
|
||||||
|
let processData = [];
|
||||||
|
res.forEach((item) => {
|
||||||
|
let arr = [],
|
||||||
|
obj1 = {},
|
||||||
|
obj2 = {},
|
||||||
|
obj3 = {},
|
||||||
|
obj4 = {},
|
||||||
|
obj5 = {},
|
||||||
|
obj6 = {},
|
||||||
|
obj7 = {},
|
||||||
|
obj8 = {};
|
||||||
|
obj1.elType = "primary";
|
||||||
|
obj1.value = item.material_out_.name;
|
||||||
|
obj2.elType = "primary";
|
||||||
|
obj2.value = item.material_out_.specification;
|
||||||
|
obj8.elType = "primary";
|
||||||
|
obj8.value = item.material_out_.model;
|
||||||
|
obj3.elType = "primary";
|
||||||
|
obj3.value = item.start_date;
|
||||||
|
obj4.elType = "primary";
|
||||||
|
obj4.value = item.end_date;
|
||||||
|
obj5.elType = "progress";
|
||||||
|
let process = Math.round(
|
||||||
|
(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(obj8);
|
||||||
|
arr.push(obj3);
|
||||||
|
arr.push(obj4);
|
||||||
|
arr.push(obj5);
|
||||||
|
arr.push(obj6);
|
||||||
|
arr.push(obj7);
|
||||||
|
processData.push(arr);
|
||||||
|
});
|
||||||
|
this.processData2 = processData;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
@font-face {
|
||||||
|
font-family: "myfont";
|
||||||
|
/* 字体名称 */
|
||||||
|
src: url("../../utils/youShe.ttf");
|
||||||
|
/* 字体文件相对路径 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard {
|
||||||
|
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");
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
.header > .title {
|
||||||
|
font-weight: bold;
|
||||||
|
font-family: "myfont";
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
.header > .timer {
|
||||||
|
font-size: 14px;
|
||||||
|
margin-top: 18px;
|
||||||
|
}
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
.lineDiv {
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
padding-left: 0.5em;
|
||||||
|
}
|
||||||
|
.boxmainItemNumber {
|
||||||
|
color: rgb(42,234,200);
|
||||||
|
margin-left: 10px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-face:24px;
|
||||||
|
font-family: electronicFont;
|
||||||
|
}
|
||||||
|
@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: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
.halfBox {
|
||||||
|
height: 50%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue