lb #36

Merged
g7hoo merged 13 commits from lb into test 2023-09-27 17:00:53 +08:00
2 changed files with 132 additions and 45 deletions
Showing only changes of commit 20808c0975 - Show all commits

View File

@ -8,7 +8,7 @@
<template> <template>
<div <div
class="production-timegraph-container" class="production-timegraph-container"
style="background: #f2f4f9; flex: 1"> style="background: #f2f4f9; flex: 1; display: flex; flex-direction: column">
<el-row <el-row
class="" class=""
style=" style="
@ -30,6 +30,9 @@
<el-row <el-row
class="" class=""
style=" style="
flex: 1;
display: flex;
flex-direction: column;
margin-bottom: 12px; margin-bottom: 12px;
background: #fff; background: #fff;
padding: 16px 16px 24px; padding: 16px 16px 24px;
@ -37,7 +40,7 @@
"> ">
<div class="blue-title">设备产量时序图</div> <div class="blue-title">设备产量时序图</div>
<div class="main-area"> <div class="main-area" style="flex: 1">
<div class="graphs" v-if="graphList.length"> <div class="graphs" v-if="graphList.length">
<LineChart :config="templateConfig" /> <LineChart :config="templateConfig" />
</div> </div>
@ -71,12 +74,24 @@
<script> <script>
import LineChart from './components/lineChart.vue'; import LineChart from './components/lineChart.vue';
import response from './response.json';
export default { export default {
name: 'SGProduction', name: 'SGProduction',
components: { LineChart }, components: { LineChart },
props: {}, props: {},
data() { data() {
return { return {
startTime: new Date(
(() => {
const date = new Date();
date.setHours(0);
date.setMinutes(0);
date.setSeconds(0);
date.setMilliseconds(0);
return date;
})()
).getTime(),
accumulators: new Map(), accumulators: new Map(),
searchBarFormConfig: [ searchBarFormConfig: [
{ {
@ -144,7 +159,7 @@ export default {
top: 48, top: 48,
left: 48, left: 48,
right: 24, right: 24,
bottom: 64, bottom: 24,
}, },
legend: { legend: {
top: 0, top: 0,
@ -162,28 +177,15 @@ export default {
tooltip: { tooltip: {
show: true, show: true,
trigger: 'axis', trigger: 'axis',
}, formatter: function (params) {
xAxis: { // const content = ''
type: 'category', // params.forEach(({ value, seriesName }) => {
boundaryGap: true, // content += `${seriesName}: ${value}\n`;
axisTick: { // });
// show: false, // return content
alignWithLabel: true,
lineStyle: {
color: '#0003',
},
}, },
axisLabel: {
// show: true,
// textStyle: {
// color: '#0007',
// },
},
data: [],
// data: Array(24)
// .fill(1)
// .map((item, index) => `${index}:00`),
}, },
xAxis: null,
yAxis: { yAxis: {
type: 'value', type: 'value',
name: '产量', name: '产量',
@ -192,9 +194,12 @@ export default {
fontSize: 14, fontSize: 14,
align: 'center', align: 'center',
}, },
nameGap: 26, axisLine: {
show: true,
},
max: function (value) { max: function (value) {
return value.max + Math.floor(value.max / 5); return value.max + Math.ceil(value.max / 4);
// return value.max + 50
}, },
}, },
series: [ series: [
@ -229,12 +234,22 @@ export default {
}, },
}; };
}, },
computed: {
timeArr() {
return Array(24)
.fill(this.startTime)
.map((time, index) => time + index * 3600000);
},
},
created() { created() {
this.initProductline(); this.initProductline();
this.initWorksection(); this.initWorksection();
this.initEquipment(); this.initEquipment();
this.getList(); this.getList();
}, },
mounted() {
console.log('this.startTIme', this.startTime);
},
methods: { methods: {
handleSearchBarBtnClick({ btnName, ...payload }) { handleSearchBarBtnClick({ btnName, ...payload }) {
switch (btnName) { switch (btnName) {
@ -275,19 +290,22 @@ export default {
initState() { initState() {
this.accumulators = new Map(); this.accumulators = new Map();
this.templateConfig.series = [] this.templateConfig.series = [];
}, },
async getList() { async getList() {
this.initState(); this.initState();
const { code, data } = await this.$axios({ // const { code, data } = await this.$axios({
url: '/analysis/equipment-analysis/quantity', // url: '/analysis/equipment-analysis/quantity',
method: 'get', // method: 'get',
params: this.queryParams, // params: this.queryParams,
}); // });
const { code, data } = response;
if (code == 0) { if (code == 0) {
this.graphList = this.objectToArray(data); this.graphList = this.objectToArray(data);
console.log('this graphList', this.graphList);
// const eq1 = [ // const eq1 = [
// { totalQuantity: 20, startTime: 1693964578000 }, // { totalQuantity: 20, startTime: 1693964578000 },
// { totalQuantity: 43, startTime: 1693964678000 }, // { totalQuantity: 43, startTime: 1693964678000 },
@ -308,7 +326,7 @@ export default {
// ]; // ];
// eq2.key = 'SS2'; // eq2.key = 'SS2';
// this.graphList = [eq1, eq2]; // this.graphList = [eq1, eq2];
this.setXaxis();
this.graphList.forEach(this.setSeries); this.graphList.forEach(this.setSeries);
} else { } else {
this.graphList = []; this.graphList = [];
@ -316,7 +334,52 @@ export default {
} }
}, },
setSeries(eqArr) { setXaxis() {
const xaxis = {
type: 'category',
// interval: 12,
axisTick: {
alignWithLabel: true,
lineStyle: {
color: '#0003',
},
},
axisLabel: {
formatter: function (value, index) {
console.log('value', value, new Date(value));
return new Date(+value)
.toLocaleTimeString()
.split(':')
.slice(0, 2)
.join(':');
},
},
data: this.timeArr,
};
this.templateConfig.xAxis = xaxis;
},
setYaxis() {},
setSeries(list) {
console.log('set series');
const data = Array(24).fill(null);
list.map((item, index) => {
const idx = this.timeArr.indexOf(item.startTime);
if (idx != -1) {
data[idx] = item.totalQuantity;
}
});
const seriesItem = {
name: list.key,
type: 'line',
symbol: 'circle',
data,
};
this.templateConfig.series.push(seriesItem);
},
setSeriesOld(eqArr) {
if (eqArr.length == 0) { if (eqArr.length == 0) {
this.templateConfig.series = []; this.templateConfig.series = [];
return; return;
@ -343,18 +406,6 @@ export default {
}); });
}, },
/** 获得设备产量 */
getEquipmentQuantity(equipmentArr) {
return equipmentArr.map((item) => item.totalQuantity);
},
/** 获得设备产量的时间 */
getTimeinfo(equipmentArr) {
return equipmentArr.map((item) =>
new Date(item.startTime).toLocaleTimeString()
);
},
/** 准备设备数据 */ /** 准备设备数据 */
async initEquipment() { async initEquipment() {
const { code, data } = await this.$axios({ const { code, data } = await this.$axios({

View File

@ -4,6 +4,7 @@
"上片机": [ "上片机": [
{ {
"inQuantity": 200, "inQuantity": 200,
"totalQuantity": 199,
"outQuantity": 200, "outQuantity": 200,
"okQuantity": 199, "okQuantity": 199,
"nokQuantity": 1, "nokQuantity": 1,
@ -12,6 +13,7 @@
}, },
{ {
"inQuantity": 200, "inQuantity": 200,
"totalQuantity": 189,
"outQuantity": 200, "outQuantity": 200,
"okQuantity": 189, "okQuantity": 189,
"nokQuantity": 11, "nokQuantity": 11,
@ -20,6 +22,7 @@
}, },
{ {
"inQuantity": 200, "inQuantity": 200,
"totalQuantity": 198,
"outQuantity": 200, "outQuantity": 200,
"okQuantity": 198, "okQuantity": 198,
"nokQuantity": 2, "nokQuantity": 2,
@ -28,6 +31,7 @@
}, },
{ {
"inQuantity": 200, "inQuantity": 200,
"totalQuantity": 197,
"outQuantity": 200, "outQuantity": 200,
"okQuantity": 197, "okQuantity": 197,
"nokQuantity": 3, "nokQuantity": 3,
@ -36,6 +40,7 @@
}, },
{ {
"inQuantity": 200, "inQuantity": 200,
"totalQuantity": 200,
"outQuantity": 200, "outQuantity": 200,
"okQuantity": 200, "okQuantity": 200,
"nokQuantity": 0, "nokQuantity": 0,
@ -44,6 +49,7 @@
}, },
{ {
"inQuantity": 200, "inQuantity": 200,
"totalQuantity": 170,
"outQuantity": 200, "outQuantity": 200,
"okQuantity": 170, "okQuantity": 170,
"nokQuantity": 30, "nokQuantity": 30,
@ -52,6 +58,7 @@
}, },
{ {
"inQuantity": 200, "inQuantity": 200,
"totalQuantity": 199,
"outQuantity": 200, "outQuantity": 200,
"okQuantity": 199, "okQuantity": 199,
"nokQuantity": 1, "nokQuantity": 1,
@ -60,6 +67,7 @@
}, },
{ {
"inQuantity": 200, "inQuantity": 200,
"totalQuantity": 199,
"outQuantity": 200, "outQuantity": 200,
"okQuantity": 199, "okQuantity": 199,
"nokQuantity": 1, "nokQuantity": 1,
@ -68,6 +76,7 @@
}, },
{ {
"inQuantity": 200, "inQuantity": 200,
"totalQuantity": 195,
"outQuantity": 200, "outQuantity": 200,
"okQuantity": 195, "okQuantity": 195,
"nokQuantity": 5, "nokQuantity": 5,
@ -76,6 +85,7 @@
}, },
{ {
"inQuantity": 200, "inQuantity": 200,
"totalQuantity": 198,
"outQuantity": 200, "outQuantity": 200,
"okQuantity": 198, "okQuantity": 198,
"nokQuantity": 2, "nokQuantity": 2,
@ -84,6 +94,7 @@
}, },
{ {
"inQuantity": 200, "inQuantity": 200,
"totalQuantity": 199,
"outQuantity": 200, "outQuantity": 200,
"okQuantity": 199, "okQuantity": 199,
"nokQuantity": 1, "nokQuantity": 1,
@ -92,6 +103,7 @@
}, },
{ {
"inQuantity": 200, "inQuantity": 200,
"totalQuantity": 197,
"outQuantity": 200, "outQuantity": 200,
"okQuantity": 197, "okQuantity": 197,
"nokQuantity": 3, "nokQuantity": 3,
@ -100,6 +112,7 @@
}, },
{ {
"inQuantity": 200, "inQuantity": 200,
"totalQuantity": 197,
"outQuantity": 200, "outQuantity": 200,
"okQuantity": 197, "okQuantity": 197,
"nokQuantity": 3, "nokQuantity": 3,
@ -108,6 +121,7 @@
}, },
{ {
"inQuantity": 200, "inQuantity": 200,
"totalQuantity": 196,
"outQuantity": 200, "outQuantity": 200,
"okQuantity": 196, "okQuantity": 196,
"nokQuantity": 4, "nokQuantity": 4,
@ -116,6 +130,7 @@
}, },
{ {
"inQuantity": 200, "inQuantity": 200,
"totalQuantity": 193,
"outQuantity": 200, "outQuantity": 200,
"okQuantity": 193, "okQuantity": 193,
"nokQuantity": 7, "nokQuantity": 7,
@ -124,6 +139,7 @@
}, },
{ {
"inQuantity": 200, "inQuantity": 200,
"totalQuantity": 190,
"outQuantity": 200, "outQuantity": 200,
"okQuantity": 190, "okQuantity": 190,
"nokQuantity": 10, "nokQuantity": 10,
@ -132,6 +148,7 @@
}, },
{ {
"inQuantity": 200, "inQuantity": 200,
"totalQuantity": 199,
"outQuantity": 200, "outQuantity": 200,
"okQuantity": 199, "okQuantity": 199,
"nokQuantity": 1, "nokQuantity": 1,
@ -140,6 +157,7 @@
}, },
{ {
"inQuantity": 200, "inQuantity": 200,
"totalQuantity": 200,
"outQuantity": 200, "outQuantity": 200,
"okQuantity": 200, "okQuantity": 200,
"nokQuantity": 0, "nokQuantity": 0,
@ -148,6 +166,7 @@
}, },
{ {
"inQuantity": 200, "inQuantity": 200,
"totalQuantity": 200,
"outQuantity": 200, "outQuantity": 200,
"okQuantity": 200, "okQuantity": 200,
"nokQuantity": 0, "nokQuantity": 0,
@ -156,6 +175,7 @@
}, },
{ {
"inQuantity": 200, "inQuantity": 200,
"totalQuantity": 198,
"outQuantity": 200, "outQuantity": 200,
"okQuantity": 198, "okQuantity": 198,
"nokQuantity": 2, "nokQuantity": 2,
@ -164,6 +184,7 @@
}, },
{ {
"inQuantity": 200, "inQuantity": 200,
"totalQuantity": 199,
"outQuantity": 200, "outQuantity": 200,
"okQuantity": 199, "okQuantity": 199,
"nokQuantity": 1, "nokQuantity": 1,
@ -172,6 +193,7 @@
}, },
{ {
"inQuantity": 200, "inQuantity": 200,
"totalQuantity": 189,
"outQuantity": 200, "outQuantity": 200,
"okQuantity": 189, "okQuantity": 189,
"nokQuantity": 11, "nokQuantity": 11,
@ -180,6 +202,7 @@
}, },
{ {
"inQuantity": 200, "inQuantity": 200,
"totalQuantity": 179,
"outQuantity": 200, "outQuantity": 200,
"okQuantity": 179, "okQuantity": 179,
"nokQuantity": 21, "nokQuantity": 21,
@ -188,6 +211,7 @@
}, },
{ {
"inQuantity": 200, "inQuantity": 200,
"totalQuantity": 200,
"outQuantity": 200, "outQuantity": 200,
"okQuantity": 200, "okQuantity": 200,
"nokQuantity": 0, "nokQuantity": 0,
@ -198,6 +222,7 @@
"下片机": [ "下片机": [
{ {
"inQuantity": 200, "inQuantity": 200,
"totalQuantity": 190,
"outQuantity": 200, "outQuantity": 200,
"okQuantity": 190, "okQuantity": 190,
"nokQuantity": 10, "nokQuantity": 10,
@ -206,6 +231,7 @@
}, },
{ {
"inQuantity": 200, "inQuantity": 200,
"totalQuantity": 177,
"outQuantity": 200, "outQuantity": 200,
"okQuantity": 177, "okQuantity": 177,
"nokQuantity": 23, "nokQuantity": 23,
@ -214,6 +240,7 @@
}, },
{ {
"inQuantity": 200, "inQuantity": 200,
"totalQuantity": 198,
"outQuantity": 200, "outQuantity": 200,
"okQuantity": 198, "okQuantity": 198,
"nokQuantity": 2, "nokQuantity": 2,
@ -222,6 +249,7 @@
}, },
{ {
"inQuantity": 200, "inQuantity": 200,
"totalQuantity": 200,
"outQuantity": 200, "outQuantity": 200,
"okQuantity": 200, "okQuantity": 200,
"nokQuantity": 0, "nokQuantity": 0,
@ -230,6 +258,7 @@
}, },
{ {
"inQuantity": 200, "inQuantity": 200,
"totalQuantity": 185,
"outQuantity": 200, "outQuantity": 200,
"okQuantity": 185, "okQuantity": 185,
"nokQuantity": 15, "nokQuantity": 15,
@ -238,6 +267,7 @@
}, },
{ {
"inQuantity": 200, "inQuantity": 200,
"totalQuantity": 198,
"outQuantity": 200, "outQuantity": 200,
"okQuantity": 198, "okQuantity": 198,
"nokQuantity": 2, "nokQuantity": 2,
@ -246,6 +276,7 @@
}, },
{ {
"inQuantity": 200, "inQuantity": 200,
"totalQuantity": 200,
"outQuantity": 200, "outQuantity": 200,
"okQuantity": 200, "okQuantity": 200,
"nokQuantity": 0, "nokQuantity": 0,
@ -254,6 +285,7 @@
}, },
{ {
"inQuantity": 200, "inQuantity": 200,
"totalQuantity": 193,
"outQuantity": 200, "outQuantity": 200,
"okQuantity": 193, "okQuantity": 193,
"nokQuantity": 7, "nokQuantity": 7,
@ -262,6 +294,7 @@
}, },
{ {
"inQuantity": 200, "inQuantity": 200,
"totalQuantity": 200,
"outQuantity": 200, "outQuantity": 200,
"okQuantity": 200, "okQuantity": 200,
"nokQuantity": 0, "nokQuantity": 0,
@ -270,6 +303,7 @@
}, },
{ {
"inQuantity": 200, "inQuantity": 200,
"totalQuantity": 200,
"outQuantity": 200, "outQuantity": 200,
"okQuantity": 200, "okQuantity": 200,
"nokQuantity": 0, "nokQuantity": 0,
@ -278,6 +312,7 @@
}, },
{ {
"inQuantity": 200, "inQuantity": 200,
"totalQuantity": 192,
"outQuantity": 200, "outQuantity": 200,
"okQuantity": 192, "okQuantity": 192,
"nokQuantity": 8, "nokQuantity": 8,
@ -286,6 +321,7 @@
}, },
{ {
"inQuantity": 200, "inQuantity": 200,
"totalQuantity": 199,
"outQuantity": 200, "outQuantity": 200,
"okQuantity": 199, "okQuantity": 199,
"nokQuantity": 1, "nokQuantity": 1,