fix:7车间看板图标数据调整，以及7车间不合格统计去掉合格数
This commit is contained in:
parent
4d2328540f
commit
e6488c51a5
|
|
@ -1,89 +1,154 @@
|
|||
<template>
|
||||
<el-container class="dashboard">
|
||||
<el-header class="header">
|
||||
<div style="font-weight: bold; font-family:'myfont';font-size:32px">7车间生产数据大看板</div>
|
||||
<div style="font-size: 14px;margin-top:18px">{{ currentDay }}{{ currentTime }}</div>
|
||||
<div
|
||||
style="
|
||||
font-weight: bold;
|
||||
font-family: 'myfont';
|
||||
font-size: 32px;
|
||||
"
|
||||
>
|
||||
7车间生产数据大看板
|
||||
</div>
|
||||
<div style="font-size: 14px; margin-top: 18px">
|
||||
{{ currentDay }}{{ currentTime }}
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<el-row style="height: 60%" :gutter="10">
|
||||
<el-col :xs="24" :md="10" style="height: 100%;">
|
||||
<el-col :xs="24" :md="10" style="height: 100%">
|
||||
<div class="box" style="height: 29%">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel">今日任务</div>
|
||||
</div>
|
||||
<div style="height: 4px;"></div>
|
||||
<div class="boxmain bigdata border" style="overflow:scroll;padding:5px;">
|
||||
<div v-for="item in todayMtask" :key="item.id"
|
||||
style="width:50%;display:inline-block;height: 40px;line-height:40px;padding:0 20px;">
|
||||
<div style="height: 4px"></div>
|
||||
<div
|
||||
style="display:flex;justify-content:space-between;border-bottom:1px dashed #eeeeee">
|
||||
<span style="font-size:12px">{{ item.material_out_name }}</span>
|
||||
class="boxmain bigdata border"
|
||||
style="overflow: scroll; padding: 5px"
|
||||
>
|
||||
<div
|
||||
v-for="item in todayMtask"
|
||||
:key="item.id"
|
||||
style="
|
||||
width: 50%;
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 20px;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px dashed #eeeeee;
|
||||
"
|
||||
>
|
||||
<span style="font-size: 12px">{{
|
||||
item.material_out_name
|
||||
}}</span>
|
||||
<span
|
||||
style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">
|
||||
style="
|
||||
color: #fef000;
|
||||
margin-left: 10px;
|
||||
font-weight: bold;
|
||||
font-family: electronicFont;
|
||||
"
|
||||
>
|
||||
{{ item.count }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 1%;"></div>
|
||||
<el-row style="height:70%">
|
||||
<el-col style="height: 100%;">
|
||||
<div style="height: 1%"></div>
|
||||
<el-row style="height: 70%">
|
||||
<el-col style="height: 100%">
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel">任务进度</div>
|
||||
</div>
|
||||
<div style="height: 4px;"></div>
|
||||
<div style="height: 4px"></div>
|
||||
<div class="boxmain" id="scrollContainer1">
|
||||
<scScrollTavle v-if="table1Visible" :tableHeight="containerHeight1"
|
||||
:rowData="processData" :titleData="liData1" :refValue="refValue1">
|
||||
<scScrollTavle
|
||||
v-if="table1Visible"
|
||||
:tableHeight="containerHeight1"
|
||||
:rowData="processData"
|
||||
:titleData="liData1"
|
||||
:refValue="refValue1"
|
||||
>
|
||||
</scScrollTavle>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :xs="24" :md="14" style="height: 100%;">
|
||||
<el-col :xs="24" :md="14" style="height: 100%">
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel">生产线</div>
|
||||
</div>
|
||||
<div style="height: 4px;"></div>
|
||||
<div style="height: 4px"></div>
|
||||
<div class="boxmain" id="scrollContainer2">
|
||||
<scScrollTavle v-if="table2Visible" :tableHeight="containerHeight2" :rowData="lineData"
|
||||
:titleData="liData2" :refValue="refValue2"></scScrollTavle>
|
||||
<scScrollTavle
|
||||
v-if="table2Visible"
|
||||
:tableHeight="containerHeight2"
|
||||
:rowData="lineData"
|
||||
:titleData="liData2"
|
||||
:refValue="refValue2"
|
||||
></scScrollTavle>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="height: 1%"></div>
|
||||
<el-row style="height:39%" :gutter="10">
|
||||
<el-row style="height: 39%" :gutter="10">
|
||||
<el-col :xs="24" :md="9">
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div style="margin-left: 6px;font-size: 18px; margin-top: 6px">本月生产统计</div>
|
||||
<div
|
||||
style="
|
||||
margin-left: 6px;
|
||||
font-size: 18px;
|
||||
margin-top: 6px;
|
||||
"
|
||||
>
|
||||
本月生产统计
|
||||
</div>
|
||||
<div class="boxmain" id="chart1">
|
||||
</div>
|
||||
<div class="boxmain" id="chart1"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :md="9">
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div style="margin-left: 6px; font-size: 18px; margin-top: 6px">本月合格率统计</div>
|
||||
<div
|
||||
style="
|
||||
margin-left: 6px;
|
||||
font-size: 18px;
|
||||
margin-top: 6px;
|
||||
"
|
||||
>
|
||||
本月合格率统计
|
||||
</div>
|
||||
<div class="boxmain" id="chart2">
|
||||
</div>
|
||||
<div class="boxmain" id="chart2"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :md="6">
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div style="margin-left: 6px; font-size: 18px; margin-top: 6px">昨日合格统计</div>
|
||||
<div
|
||||
style="
|
||||
margin-left: 6px;
|
||||
font-size: 18px;
|
||||
margin-top: 6px;
|
||||
"
|
||||
>
|
||||
昨日不合格统计
|
||||
</div>
|
||||
<div class="boxmain" id="chart3">
|
||||
</div>
|
||||
<div class="boxmain" id="chart3"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -93,7 +158,7 @@
|
|||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import scScrollTavle from '@/components/scScrollTable.vue';
|
||||
import scScrollTavle from "@/components/scScrollTable.vue";
|
||||
function deepCopy(obj) {
|
||||
return JSON.parse(JSON.stringify(obj));
|
||||
}
|
||||
|
|
@ -102,183 +167,238 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
basicOption: {
|
||||
backgroundColor: '',
|
||||
backgroundColor: "",
|
||||
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
type: "cross",
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
backgroundColor: "#6a7985",
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
icon: "stack",
|
||||
right: 0,
|
||||
data: [{
|
||||
backgroundColor: 'rgb(1,235,239)',
|
||||
name: '生产数',
|
||||
data: [
|
||||
{
|
||||
backgroundColor: "rgb(1,235,239)",
|
||||
name: "生产数",
|
||||
itemStyle: {
|
||||
// color:'rgb(1,235,239)',
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(250,205,0)'
|
||||
color: "rgb(250,205,0)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(254,129,0)'
|
||||
}])
|
||||
color: "rgb(254,129,0)",
|
||||
},
|
||||
]
|
||||
),
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}],
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
left: "2%",
|
||||
right: "2%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
type: "category",
|
||||
boundaryGap: true,
|
||||
data: ['1号炉', '2号炉', '3号炉', '4号炉', '5号炉', '6号炉', '7号炉', '8号炉'],
|
||||
data: [
|
||||
"1号炉",
|
||||
"2号炉",
|
||||
"3号炉",
|
||||
"4号炉",
|
||||
"5号炉",
|
||||
"6号炉",
|
||||
"7号炉",
|
||||
"8号炉",
|
||||
],
|
||||
nameTextStyle: {
|
||||
color: '#ffffff'
|
||||
color: "#ffffff",
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#ffffff'
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
name: "",
|
||||
type: 'value',
|
||||
type: "value",
|
||||
nameTextStyle: {
|
||||
color: '#ffffff'
|
||||
color: "#ffffff",
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#ffffff'
|
||||
color: "#ffffff",
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
}
|
||||
},
|
||||
],
|
||||
series: [{
|
||||
name: '生产数',
|
||||
type: 'bar',
|
||||
series: [
|
||||
{
|
||||
name: "生产数",
|
||||
type: "bar",
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 1, color: 'rgb(1,235,239)'
|
||||
width: 1,
|
||||
color: "rgb(1,235,239)",
|
||||
},
|
||||
barWidth: 30,
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(1,235,239)'
|
||||
color: "rgb(1,235,239)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(5, 158, 163)'
|
||||
}
|
||||
])
|
||||
color: "rgb(5, 158, 163)",
|
||||
},
|
||||
]
|
||||
),
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
focus: "series",
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#fff'
|
||||
position: "top",
|
||||
color: "#fff",
|
||||
},
|
||||
itemStyle: {
|
||||
borderRadius: [2, 2, 0, 0],
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(250,205,0)'
|
||||
color: "rgb(250,205,0)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(254,129,0)'
|
||||
}
|
||||
])
|
||||
color: "rgb(254,129,0)",
|
||||
},
|
||||
data: [140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 340, 250]
|
||||
}]
|
||||
]
|
||||
),
|
||||
},
|
||||
data: [
|
||||
140, 232, 101, 264, 90, 340, 250, 140, 232, 101,
|
||||
264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250,
|
||||
140, 232, 101, 264, 90, 340, 250, 340, 250,
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
chart3Option: {
|
||||
backgroundColor: '',
|
||||
backgroundColor: "",
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
trigger: "item",
|
||||
},
|
||||
legend: {
|
||||
top: 'bottom',
|
||||
top: "bottom",
|
||||
},
|
||||
series: {
|
||||
name: '完成率',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
name: "不合格统计",
|
||||
type: "pie",
|
||||
radius: "50%",
|
||||
itemStyle: {
|
||||
borderRadius: 2
|
||||
borderRadius: 2,
|
||||
},
|
||||
center: ['50%', '45%'],
|
||||
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: "气泡" },
|
||||
{ value: 0, name: "弯曲" },
|
||||
{ value: 0, name: "其他" },
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
shadowColor: "rgba(0, 0, 0, 0.5)",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
containerHeight1: 100,
|
||||
containerHeight2: 100,
|
||||
table1Visible: false,
|
||||
table2Visible: false,
|
||||
refValue1: 'moocBox1',
|
||||
refValue2: 'moocBox2',
|
||||
liData1: ['序号', '规格', '型号', '完成进度', '产量', '任务时间', '状态'],
|
||||
refValue1: "moocBox1",
|
||||
refValue2: "moocBox2",
|
||||
liData1: [
|
||||
"序号",
|
||||
"规格",
|
||||
"型号",
|
||||
"完成进度",
|
||||
"产量",
|
||||
"任务时间",
|
||||
"状态",
|
||||
],
|
||||
processData: [],
|
||||
liData2: ['序号', '炉号', '产品名称', '型号', '规格', '合格数量', '锅数', '设备状态'],
|
||||
liData2: [
|
||||
"序号",
|
||||
"炉号",
|
||||
"产品名称",
|
||||
"型号",
|
||||
"规格",
|
||||
"合格数量",
|
||||
"锅数",
|
||||
"设备状态",
|
||||
],
|
||||
lineData: [],
|
||||
todayMtask: [],
|
||||
time: null,
|
||||
delay: 20,
|
||||
dayInterval: null,
|
||||
days: 30,
|
||||
today: '',
|
||||
start_date: '',
|
||||
end_date: '',
|
||||
currentTime: '',
|
||||
currentDay: '',
|
||||
yesterday: '',
|
||||
today: "",
|
||||
start_date: "",
|
||||
end_date: "",
|
||||
currentTime: "",
|
||||
currentDay: "",
|
||||
yesterday: "",
|
||||
chartInterval1: null,
|
||||
chartInterval2: null,
|
||||
chartInterval3: null,
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
//表格table1的显示
|
||||
this.containerHeight1 = document.getElementById('scrollContainer1').clientHeight;
|
||||
this.containerHeight1 =
|
||||
document.getElementById("scrollContainer1").clientHeight;
|
||||
this.table1Visible = true;
|
||||
//表格table2的显示
|
||||
this.containerHeight2 = document.getElementById('scrollContainer2').clientHeight;
|
||||
this.containerHeight2 =
|
||||
document.getElementById("scrollContainer2").clientHeight;
|
||||
this.table2Visible = true;
|
||||
let date = new Date();
|
||||
let year = date.getFullYear();
|
||||
|
|
@ -286,43 +406,55 @@ export default {
|
|||
let day = date.getDate();
|
||||
let days = new Date(year, month, 0).getDate();
|
||||
this.days = days;
|
||||
let start_date = year + '-' + month + '-01';
|
||||
let start_date = year + "-" + month + "-01";
|
||||
let lastDay = new Date(year, month, 0).getDate();
|
||||
let end_date = year + '-' + month + '-' + lastDay;
|
||||
let end_date = year + "-" + month + "-" + lastDay;
|
||||
this.start_date = start_date;
|
||||
this.end_date = end_date;
|
||||
this.today = year + '-' + month + '-' + day;
|
||||
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.yesterday =
|
||||
yesterday.getFullYear() +
|
||||
"-" +
|
||||
(yesterday.getMonth() + 1) +
|
||||
"-" +
|
||||
yesterday.getDate();
|
||||
this.getProductLine();
|
||||
this.getUtask();
|
||||
this.getTodayMtask();
|
||||
this.getLineData();
|
||||
//时间
|
||||
this.showTime()
|
||||
this.showTime();
|
||||
this.dayInterval = setInterval(() => {
|
||||
this.showTime()
|
||||
}, 1000)
|
||||
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日')
|
||||
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));
|
||||
var myChart = echarts.getInstanceByDom(
|
||||
document.getElementById(name)
|
||||
);
|
||||
if (myChart == undefined) {
|
||||
myChart = echarts.init(document.getElementById(name), 'dark', { renderer: 'svg' });
|
||||
myChart = echarts.init(document.getElementById(name), "dark", {
|
||||
renderer: "svg",
|
||||
});
|
||||
}
|
||||
if (option == null) {
|
||||
option = Object.assign({}, this.basicOption)
|
||||
option = Object.assign({}, this.basicOption);
|
||||
}
|
||||
setTimeout(() => {
|
||||
try {
|
||||
myChart.setOption(option);
|
||||
} catch (error) { }
|
||||
}, 500)
|
||||
} catch (error) {}
|
||||
}, 500);
|
||||
},
|
||||
//任务进度
|
||||
getUtask() {
|
||||
|
|
@ -330,25 +462,33 @@ export default {
|
|||
let obj = {};
|
||||
obj.start_date__gte = this.start_date;
|
||||
obj.end_date__lte = this.end_date;
|
||||
obj.belong_dept__name = '7车间';
|
||||
obj.belong_dept__name = "7车间";
|
||||
obj.page = 0;
|
||||
that.$API.pm.utask.list.req(obj).then((res) => {
|
||||
console.log('任务进度:', res);
|
||||
console.log("任务进度:", res);
|
||||
let processData = [];
|
||||
res.forEach(item => {
|
||||
let arr = [], obj1 = {}, obj2 = {}, obj3 = {}, obj4 = {}, obj5 = {}, obj6 = {};
|
||||
obj1.elType = 'primary';
|
||||
res.forEach((item) => {
|
||||
let arr = [],
|
||||
obj1 = {},
|
||||
obj2 = {},
|
||||
obj3 = {},
|
||||
obj4 = {},
|
||||
obj5 = {},
|
||||
obj6 = {};
|
||||
obj1.elType = "primary";
|
||||
obj1.value = item.material_.model;
|
||||
obj2.elType = 'primary';
|
||||
obj2.elType = "primary";
|
||||
obj2.value = item.material_.specification;
|
||||
obj3.elType = 'progress';
|
||||
let process = Math.round((item.count_ok / item.count) * 100)
|
||||
obj3.elType = "progress";
|
||||
let process = Math.round(
|
||||
(item.count_ok / item.count) * 100
|
||||
);
|
||||
obj3.value = process;
|
||||
obj4.elType = 'primary';
|
||||
obj4.elType = "primary";
|
||||
obj4.value = item.count_ok;
|
||||
obj5.elType = 'primary';
|
||||
obj5.value = item.start_date + '-' + item.end_date;
|
||||
obj6.elType = 'tag';
|
||||
obj5.elType = "primary";
|
||||
obj5.value = item.start_date + "-" + item.end_date;
|
||||
obj6.elType = "tag";
|
||||
obj6.value = item.state;
|
||||
arr.push(obj1);
|
||||
arr.push(obj2);
|
||||
|
|
@ -364,28 +504,35 @@ export default {
|
|||
//7车间生产按炉进度
|
||||
getLineData() {
|
||||
let that = this;
|
||||
that.$API.bi.dataset.exec.req('linedept7', {}).then((res) => {
|
||||
console.log('7车间生产线:', res);
|
||||
that.$API.bi.dataset.exec.req("linedept7", {}).then((res) => {
|
||||
console.log("7车间生产线:", res);
|
||||
let list = res.data2.ds0;
|
||||
if (list.length > 0) {
|
||||
let lineData = [];
|
||||
list.forEach(item => {
|
||||
let arr = [], obj1 = {}, obj2 = {}, obj3 = {}, obj4 = {}, obj5 = {}, obj6 = {}, obj7 = {};
|
||||
obj1.elType = 'primary';
|
||||
obj1.value = item.equip_number;//炉号
|
||||
obj2.elType = 'primary';
|
||||
list.forEach((item) => {
|
||||
let arr = [],
|
||||
obj1 = {},
|
||||
obj2 = {},
|
||||
obj3 = {},
|
||||
obj4 = {},
|
||||
obj5 = {},
|
||||
obj6 = {},
|
||||
obj7 = {};
|
||||
obj1.elType = "primary";
|
||||
obj1.value = item.equip_number; //炉号
|
||||
obj2.elType = "primary";
|
||||
obj2.value = item.material_name;
|
||||
obj3.elType = 'primary';
|
||||
obj3.elType = "primary";
|
||||
obj3.value = item.material_model;
|
||||
obj4.elType = 'primary';
|
||||
obj4.elType = "primary";
|
||||
obj4.value = item.material_specification;
|
||||
obj5.elType = 'primary';
|
||||
let process = item.count_ok
|
||||
obj5.elType = "primary";
|
||||
let process = item.count_ok;
|
||||
obj5.value = process;
|
||||
obj6.elType = 'primary';
|
||||
obj6.elType = "primary";
|
||||
obj6.value = item.index;
|
||||
obj7.elType = 'tag';
|
||||
obj7.value = 'q' + item.equip_state;
|
||||
obj7.elType = "tag";
|
||||
obj7.value = "q" + item.equip_state;
|
||||
arr.push(obj1);
|
||||
arr.push(obj2);
|
||||
arr.push(obj3);
|
||||
|
|
@ -406,138 +553,172 @@ export default {
|
|||
let obj1 = {
|
||||
query: { start_date: that.start_date, end_date: that.end_date },
|
||||
};
|
||||
that.$API.bi.dataset.exec.req('stoveStatics', obj1).then((res1) => {
|
||||
console.log('本月生产统计:', res1);
|
||||
that.$API.bi.dataset.exec.req("stoveStatics", obj1).then((res1) => {
|
||||
console.log("本月生产统计:", res1);
|
||||
let list1 = res1.data2.ds0;
|
||||
let seriesData1 = [], xAxisData1 = [];
|
||||
let seriesData1 = [],
|
||||
xAxisData1 = [];
|
||||
if (list1.length > 0) {
|
||||
list1.forEach(item1 => {
|
||||
xAxisData1.push(item1.equip_number);
|
||||
list1.forEach((item1) => {
|
||||
xAxisData1.push(item1.equip_name);
|
||||
seriesData1.push(item1.count_real);
|
||||
})
|
||||
});
|
||||
}
|
||||
let chart1Option = deepCopy(this.basicOption)
|
||||
let chart1Option = deepCopy(this.basicOption);
|
||||
chart1Option.xAxis.data = xAxisData1;
|
||||
chart1Option.series[0].data = seriesData1;
|
||||
let chart1 = that.setChart("chart1", chart1Option);
|
||||
});
|
||||
//本月合格率统计
|
||||
let obj2 = {
|
||||
query: { start_date: that.start_date, end_date: that.end_date, dept_name: "7车间" },
|
||||
query: {
|
||||
start_date: that.start_date,
|
||||
end_date: that.end_date,
|
||||
dept_name: "7车间",
|
||||
},
|
||||
};
|
||||
that.$API.bi.dataset.exec.req('lineDay', obj2).then((res2) => {
|
||||
console.log('本月合格率统计:', res2);
|
||||
that.$API.bi.dataset.exec.req("lineDay", obj2).then((res2) => {
|
||||
console.log("本月合格率统计:", res2);
|
||||
let list2 = res2.data2.ds0;
|
||||
let seriesData2 = [], xAxisData2 = [];
|
||||
let seriesData2 = [],
|
||||
xAxisData2 = [];
|
||||
for (let i = 0; i < that.days; i++) {
|
||||
let day = i + 1;
|
||||
let text = day + '日';
|
||||
let text = day + "日";
|
||||
xAxisData2[i] = text;
|
||||
seriesData2[i] = 0;
|
||||
}
|
||||
if (list2.length > 0) {
|
||||
list2.forEach(item2 => {
|
||||
list2.forEach((item2) => {
|
||||
let index2 = item2.日 - 1;
|
||||
seriesData2[index2] = Math.round(item2.合格率);
|
||||
})
|
||||
});
|
||||
}
|
||||
let chart2Option = deepCopy(this.basicOption);
|
||||
chart2Option.xAxis.data = xAxisData2;
|
||||
chart2Option.yAxis.name = '合格率';
|
||||
chart2Option.yAxis.name = "合格率";
|
||||
chart2Option.legend = {
|
||||
icon: "stack",
|
||||
right: 0,
|
||||
data: [{
|
||||
backgroundColor: 'rgb(250,205,0)',
|
||||
name: '合格率',
|
||||
data: [
|
||||
{
|
||||
backgroundColor: "rgb(250,205,0)",
|
||||
name: "合格率",
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(1,235,239)'
|
||||
color: "rgb(1,235,239)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(5, 158, 163)'
|
||||
}
|
||||
])
|
||||
color: "rgb(5, 158, 163)",
|
||||
},
|
||||
]
|
||||
),
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}],
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
let series2 = [{
|
||||
name: '合格率',
|
||||
type: 'line',
|
||||
let series2 = [
|
||||
{
|
||||
name: "合格率",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 1, color: 'rgb(1,235,239)'
|
||||
width: 1,
|
||||
color: "rgb(1,235,239)",
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(1,235,239)'
|
||||
color: "rgb(1,235,239)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(5, 158, 163)'
|
||||
}
|
||||
])
|
||||
color: "rgb(5, 158, 163)",
|
||||
},
|
||||
]
|
||||
),
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
focus: "series",
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#fff'
|
||||
position: "top",
|
||||
color: "#fff",
|
||||
},
|
||||
itemStyle: {
|
||||
borderRadius: [2, 2, 0, 0],
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(250,205,0)'
|
||||
color: "rgb(250,205,0)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(254,129,0)'
|
||||
}
|
||||
])
|
||||
color: "rgb(254,129,0)",
|
||||
},
|
||||
data: seriesData2
|
||||
}];
|
||||
]
|
||||
),
|
||||
},
|
||||
data: seriesData2,
|
||||
},
|
||||
];
|
||||
chart2Option.series = series2;
|
||||
let chart2 = that.setChart("chart2", chart2Option);
|
||||
});
|
||||
|
||||
//车间生产昨日统计 12月1号
|
||||
let obj3 = {
|
||||
query: { start_date: that.yesterday, end_date: that.yesterday, dept_name: "7车间" },
|
||||
query: {
|
||||
start_date: that.yesterday,
|
||||
end_date: that.yesterday,
|
||||
dept_name: "7车间",
|
||||
},
|
||||
};
|
||||
that.$API.bi.dataset.exec.req('lineDay', obj3).then((res3) => {
|
||||
console.log('车间生产昨日统计:', res3);
|
||||
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 = item3;
|
||||
seriesData3[0].value = item3.炸纹;
|
||||
seriesData3[1].value = item3.条纹;
|
||||
seriesData3[2].value = item3.气泡;
|
||||
seriesData3[3].value = item3.弯曲;
|
||||
seriesData3[4].value = item3.其他;
|
||||
seriesData3[5].value = item3.合格数;
|
||||
{ value: 0, name: "炸纹" },
|
||||
{ value: 0, name: "条纹" },
|
||||
{ value: 0, name: "气泡" },
|
||||
{ value: 0, name: "弯曲" },
|
||||
{ value: 0, name: "其他" },
|
||||
];
|
||||
if (res3.data2.ds0) {
|
||||
let list3 = res3.data2.ds0;
|
||||
if (list3.length > 0) {
|
||||
list3.forEach((item3) => {
|
||||
seriesData3[0].value += item3.炸纹;
|
||||
seriesData3[1].value += item3.条纹;
|
||||
seriesData3[2].value += item3.气泡;
|
||||
seriesData3[3].value += item3.弯曲;
|
||||
seriesData3[4].value += item3.其他;
|
||||
});
|
||||
}
|
||||
}
|
||||
that.chart3Option.series.data = seriesData3;
|
||||
let chart3 = that.setChart("chart3", that.chart3Option);
|
||||
|
|
@ -549,22 +730,21 @@ export default {
|
|||
let obj = {};
|
||||
obj.start_date = this.today;
|
||||
obj.end_date = this.today;
|
||||
obj.mgroup__belong_dept__name = '7车间';
|
||||
obj.mgroup__belong_dept__name = "7车间";
|
||||
obj.page = 0;
|
||||
that.$API.pm.mtask.list.req(obj).then((res) => {
|
||||
that.todayMtask = res;
|
||||
console.log('今日任务:', res);
|
||||
console.log("今日任务:", res);
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
@font-face {
|
||||
font-family: 'myfont';
|
||||
font-family: "myfont";
|
||||
/* 字体名称 */
|
||||
src: url('../../utils/youShe.ttf');
|
||||
src: url("../../utils/youShe.ttf");
|
||||
/* 字体文件相对路径 */
|
||||
}
|
||||
|
||||
|
|
@ -583,7 +763,7 @@ export default {
|
|||
display: block;
|
||||
height: 80px;
|
||||
color: rgb(149, 255, 255);
|
||||
font-family: 'Microsoft Yahei';
|
||||
font-family: "Microsoft Yahei";
|
||||
text-align: center;
|
||||
padding: 12px 0px;
|
||||
}
|
||||
|
|
@ -598,11 +778,16 @@ export default {
|
|||
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));
|
||||
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-image: url("https://cdn-upload.datav.aliyun.com/upload/download/1678762309227-E6RP8z2R.png");
|
||||
background-size: 140% 100%;
|
||||
}
|
||||
|
||||
|
|
@ -619,7 +804,7 @@ export default {
|
|||
.flex_center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.border {
|
||||
|
|
@ -634,7 +819,7 @@ export default {
|
|||
.boxlabel {
|
||||
margin-left: 6px;
|
||||
font-size: 18px;
|
||||
margin-top: 6px
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
|
|
@ -667,7 +852,7 @@ export default {
|
|||
background-color: rgb(10, 39, 50);
|
||||
}
|
||||
|
||||
.rollData:nth-of-type(2n+1) {
|
||||
.rollData:nth-of-type(2n + 1) {
|
||||
background-color: rgb(0, 59, 81);
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue