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