update 产量时序图
This commit is contained in:
parent
87f56dd9ac
commit
20808c0975
@ -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({
|
||||
|
@ -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,
|
||||
|
Loading…
Reference in New Issue
Block a user