update 产量时序图

This commit is contained in:
lb 2023-09-26 17:00:46 +08:00
parent 87f56dd9ac
commit 20808c0975
2 changed files with 132 additions and 45 deletions

View File

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

View File

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