Новый проект "GazTrends"
This commit is contained in:
612
src/components/GazTrends/BofGazTrend.vue
Normal file
612
src/components/GazTrends/BofGazTrend.vue
Normal file
@@ -0,0 +1,612 @@
|
|||||||
|
<template>
|
||||||
|
|
||||||
|
<v-container fluid id="BofGazTrend">
|
||||||
|
|
||||||
|
|
||||||
|
<v-card-text class="text-center headline black--text">Циклограмма производства {{ BofSelect }} в ККЦ за период
|
||||||
|
{{ computedDateFormatted }}</v-card-text>
|
||||||
|
<v-divider class="mx-0"></v-divider>
|
||||||
|
<v-row>
|
||||||
|
<v-col style="min-width:250px; max-width:250px;" cols="12">
|
||||||
|
<v-menu v-model="datePickerMenu" :close-on-content-click="false" :nudge-right="40" :nudge-top="-5"
|
||||||
|
transition="scale-transition" offset-y min-width="290px">
|
||||||
|
<template v-slot:activator="{ on }">
|
||||||
|
<v-text-field id="datePicker" class="datePicker" v-model="computedDateFormatted" prepend-icon="event"
|
||||||
|
readonly v-on="on" single-line :disabled="loading" />
|
||||||
|
</template>
|
||||||
|
<v-date-picker no-title scrollable popover-align="center" v-model="dates"
|
||||||
|
@input="input($event) && datePickerMenu" @change="refreshData()" range></v-date-picker>
|
||||||
|
</v-menu>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<!-- <v-divider class="d-none d-md-flex mx-2 my-7" inset vertical></v-divider>
|
||||||
|
<v-col class="text-center my-4" cols="1" sm="1">
|
||||||
|
<v-btn tile outlined color="success" :disabled="loading || !data.table.length" @click="loader = Excel()">
|
||||||
|
<v-icon left size="35">mdi-file-excel</v-icon>Excel
|
||||||
|
</v-btn>
|
||||||
|
</v-col> -->
|
||||||
|
|
||||||
|
<v-divider class="d-none d-md-flex mx-2 my-7" inset vertical></v-divider>
|
||||||
|
|
||||||
|
<v-col style="min-width:220px; max-width:220px;" cols="12">
|
||||||
|
<v-select v-model="BofSelect" :items="listBof" persistent-hint @change="changeBOFselect()" density="compact"
|
||||||
|
:disabled="loading">
|
||||||
|
<template v-slot:selection="{ index }">
|
||||||
|
<span v-if="index === 0">{{ "№ конвертера: " + BofSelect + "" }}</span>
|
||||||
|
</template>
|
||||||
|
</v-select>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-divider class="d-none d-md-flex mx-2 my-7" inset vertical></v-divider>
|
||||||
|
|
||||||
|
<v-col class="text-center my-4" cols="1" sm="1">
|
||||||
|
<v-btn tile outlined color="success" :disabled="loading || !data.table.length" @click="loader = toImage()">
|
||||||
|
<v-icon left size="35">mdi-file-image</v-icon>PNG
|
||||||
|
</v-btn>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-divider class="d-none d-md-flex mx-2 my-7" inset vertical></v-divider>
|
||||||
|
|
||||||
|
<v-col class="text-center my-4" cols="1" sm="1">
|
||||||
|
<v-btn tile outlined color="success" :disabled="loading || !data.table.length" @click="loader = toPrint()">
|
||||||
|
<v-icon left size="35">mdi-printer</v-icon>Печать
|
||||||
|
</v-btn>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-divider class="d-none d-md-flex mx-2 my-7" inset vertical></v-divider>
|
||||||
|
|
||||||
|
<v-col>
|
||||||
|
<v-checkbox v-model="checkbox" :disabled="loading" label="Автообновление (5 мин)"
|
||||||
|
@click="loader = autoRefresh(checkbox)">
|
||||||
|
</v-checkbox>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
|
||||||
|
<v-divider class="mx-0"></v-divider>
|
||||||
|
|
||||||
|
<v-progress-linear v-if="loading" indeterminate></v-progress-linear>
|
||||||
|
<v-progress-linear v-if="checkbox && !loading" color="orange" rounded :value="progress"
|
||||||
|
reactive></v-progress-linear>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<v-container fluid :style="{ 'height': barHeight + 'px' }">
|
||||||
|
<Bar v-if="chartData.datasets.length" :options="chartOptions" :data="chartData" ref="bar" />
|
||||||
|
</v-container>
|
||||||
|
|
||||||
|
<v-container fluid>
|
||||||
|
<v-expansion-panels v-if="data.table.length" v-show="!loading" :disabled="loading" tile focusable>
|
||||||
|
<v-expansion-panel>
|
||||||
|
<v-expansion-panel-header>
|
||||||
|
<span>
|
||||||
|
<v-icon>info</v-icon>
|
||||||
|
Простои подробнее...
|
||||||
|
</span>
|
||||||
|
</v-expansion-panel-header>
|
||||||
|
<v-expansion-panel-content class="my-5">
|
||||||
|
<v-data-table v-model="selected" @input="prostoiSelect()" :headers="headers" :items="data.table"
|
||||||
|
disable-pagination hide-default-footer :item-class="row_classes" dense fixed-header show-select
|
||||||
|
item-key="id" group-by='Agregat'>
|
||||||
|
<template v-slot:top>
|
||||||
|
<v-progress-linear v-if="loading" indeterminate></v-progress-linear>
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.data-table-select="{ item, isSelected, select }">
|
||||||
|
<v-simple-checkbox v-show="item.Descr == 'Простой'" :value="isSelected" :readonly="item.disabled"
|
||||||
|
@input="select($event)"> </v-simple-checkbox>
|
||||||
|
</template>
|
||||||
|
</v-data-table>
|
||||||
|
</v-expansion-panel-content>
|
||||||
|
</v-expansion-panel>
|
||||||
|
</v-expansion-panels>
|
||||||
|
</v-container>
|
||||||
|
|
||||||
|
</v-container>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
const jsDate = new Date();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
import { mapGetters, mapActions, mapMutations } from "vuex";
|
||||||
|
|
||||||
|
import {
|
||||||
|
Chart as ChartJS,
|
||||||
|
Title,
|
||||||
|
Tooltip,
|
||||||
|
Legend,
|
||||||
|
BarElement,
|
||||||
|
CategoryScale,
|
||||||
|
LinearScale,
|
||||||
|
TimeScale
|
||||||
|
|
||||||
|
} from 'chart.js'
|
||||||
|
import { Bar } from 'vue-chartjs'
|
||||||
|
|
||||||
|
import 'chartjs-adapter-moment';
|
||||||
|
|
||||||
|
import ChartDataLabels from 'chartjs-plugin-datalabels';
|
||||||
|
|
||||||
|
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, ChartDataLabels, TimeScale);
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'BarChart',
|
||||||
|
components: {
|
||||||
|
Bar
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dates: [
|
||||||
|
new Date(jsDate.getFullYear(), jsDate.getMonth(), jsDate.getDate() + 1)
|
||||||
|
.toISOString()
|
||||||
|
.substr(0, 10),
|
||||||
|
new Date(jsDate.getFullYear(), jsDate.getMonth(), jsDate.getDate() + 1)
|
||||||
|
.toISOString()
|
||||||
|
.substr(0, 10),
|
||||||
|
],
|
||||||
|
// dates: [
|
||||||
|
// new Date(jsDate.getFullYear(), jsDate.getMonth(), jsDate.getDate() + 1)
|
||||||
|
// .toISOString()
|
||||||
|
// .substr(0, 10),
|
||||||
|
// new Date(jsDate.getFullYear(), jsDate.getMonth(), jsDate.getDate() + 1)
|
||||||
|
// .toISOString()
|
||||||
|
// .substr(0, 10),
|
||||||
|
// ],
|
||||||
|
BofSelect: 'K1+K2',
|
||||||
|
listBof: ['K1', 'K2', 'K1+K2'],
|
||||||
|
selected: [],
|
||||||
|
checkbox: false,
|
||||||
|
progress: 100,
|
||||||
|
timerDelay: 60,
|
||||||
|
datePickerMenu: false,
|
||||||
|
barHeight: 0,
|
||||||
|
chartData: {
|
||||||
|
// labels: [],
|
||||||
|
datasets: [],
|
||||||
|
},
|
||||||
|
chartOptions: {
|
||||||
|
plugins: {
|
||||||
|
legend: {
|
||||||
|
display: true,
|
||||||
|
//onClick: (e) => e.stopPropagation(),
|
||||||
|
onClick: false,
|
||||||
|
labels: {
|
||||||
|
// filter: function (item) {
|
||||||
|
// //if (item.text != '')
|
||||||
|
// return 'item'
|
||||||
|
// }
|
||||||
|
generateLabels() {
|
||||||
|
return [{
|
||||||
|
text: 'Простой, мин',
|
||||||
|
fillStyle: '#C2CBD1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Конвертер, мин',
|
||||||
|
fillStyle: '#51C27F',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'УПК, мин',
|
||||||
|
fillStyle: '#FF6F4D',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'МНЛЗ - прибытие, мин',
|
||||||
|
fillStyle: '#00eeff',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'МНЛЗ - разливка, мин',
|
||||||
|
fillStyle: '#01d5e4',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'МНЛЗ - порезка, мин',
|
||||||
|
fillStyle: '#03a2ad',
|
||||||
|
}]
|
||||||
|
// const data = chart.data;
|
||||||
|
// if (data.labels.length && data.datasets.length) {
|
||||||
|
// const {labels: {pointStyle}} = chart.legend.options;
|
||||||
|
// return data.labels.map((label, i) => {
|
||||||
|
// const meta = chart.getDatasetMeta(0);
|
||||||
|
// const style = meta.controller.getStyle(i);
|
||||||
|
|
||||||
|
// return {
|
||||||
|
// text: `${label}: ${data['datasets'][0].data[i]}`,
|
||||||
|
// fillStyle: style.backgroundColor,
|
||||||
|
// strokeStyle: style.borderColor,
|
||||||
|
// lineWidth: style.borderWidth,
|
||||||
|
// pointStyle: pointStyle,
|
||||||
|
// hidden: !chart.getDataVisibility(i),
|
||||||
|
|
||||||
|
// // Extra data used for toggling the correct item
|
||||||
|
// index: i
|
||||||
|
// };
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// return [];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: '',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
callbacks: {
|
||||||
|
label: function (context) {
|
||||||
|
let label = '';
|
||||||
|
if (context.parsed.y !== null) {
|
||||||
|
if (context.dataset.aggregate === 'bof') {
|
||||||
|
label += 'Конвертер: ' + context.dataset.date_start + ' - ' + context.dataset.date_end
|
||||||
|
} else if (context.dataset.aggregate === 'prostoy') {
|
||||||
|
label += 'Простой: ' + context.dataset.data[context.dataIndex].prostoi_name + ' (' + context.dataset.p_start + ' - ' + context.dataset.p_end + ')'
|
||||||
|
} else if (context.dataset.aggregate === 'lf') {
|
||||||
|
label += 'УПК: ' + context.dataset.lf_start + ' - ' + context.dataset.lf_end
|
||||||
|
} else if (context.dataset.aggregate === 'ccm_status2') {
|
||||||
|
label += 'МНЛЗ - прибытие: ' + context.dataset.ccm_status2_start + ' - ' + context.dataset.ccm_status2_end
|
||||||
|
} else if (context.dataset.aggregate === 'ccm_status3') {
|
||||||
|
label += 'МНЛЗ - разливка: ' + context.dataset.ccm_status3_start + ' - ' + context.dataset.ccm_status3_end
|
||||||
|
} else if (context.dataset.aggregate === 'ccm_status4') {
|
||||||
|
label += 'МНЛЗ - порезка: ' + context.dataset.ccm_status4_start + ' - ' + context.dataset.ccm_status4_end
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return label
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
datalabels: {
|
||||||
|
|
||||||
|
labels: {
|
||||||
|
name: {
|
||||||
|
//anchor: 'end',
|
||||||
|
//align: 'top',
|
||||||
|
color: 'black',
|
||||||
|
display: true,
|
||||||
|
font: { size: 12 },
|
||||||
|
formatter: function (value,) {
|
||||||
|
return value.PHASE_DURATION
|
||||||
|
}
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
color: 'black',
|
||||||
|
display: false,
|
||||||
|
padding: 2,
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
responsive: true,
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
//aspectRatio: 12,
|
||||||
|
indexAxis: 'y',
|
||||||
|
scales: {
|
||||||
|
x: {
|
||||||
|
type: 'time',
|
||||||
|
//stacked: true,
|
||||||
|
time: {
|
||||||
|
displayFormats: {
|
||||||
|
'millisecond': 'MMM DD',
|
||||||
|
'second': 'MMM DD',
|
||||||
|
'minute': 'MMM DD',
|
||||||
|
'hour': 'HH:mm',
|
||||||
|
'day': 'MMM DD',
|
||||||
|
'week': 'MMM DD',
|
||||||
|
'month': 'MMM DD',
|
||||||
|
'quarter': 'MMM DD',
|
||||||
|
'year': 'MMM DD',
|
||||||
|
},
|
||||||
|
unit: 'hour',
|
||||||
|
//stepSize: '00:30',
|
||||||
|
},
|
||||||
|
// min: this.data.minDate,
|
||||||
|
// max: this.data.maxDate,
|
||||||
|
},
|
||||||
|
y: {
|
||||||
|
stacked: true,
|
||||||
|
ticks: {
|
||||||
|
callback: function () { }
|
||||||
|
}
|
||||||
|
|
||||||
|
// ticks: {
|
||||||
|
|
||||||
|
// callback: function (value, index, ticks) {
|
||||||
|
// console.log(index)
|
||||||
|
// console.log(ticks)
|
||||||
|
// // console.log(a)
|
||||||
|
// // console.log(c)
|
||||||
|
// // if (this.getLabelForValue(value)==='25K10867')
|
||||||
|
// // return this.getLabelForValue(value);
|
||||||
|
|
||||||
|
// if (this.getLabelForValue(value)==='25K10867')
|
||||||
|
// return this.getLabelForValue(value)
|
||||||
|
|
||||||
|
// },
|
||||||
|
// callback:this.myFunction(),
|
||||||
|
// }
|
||||||
|
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters("BOFHeatPhase", {
|
||||||
|
loading: "loading",
|
||||||
|
data: "data"
|
||||||
|
}),
|
||||||
|
computedDateFormatted() {
|
||||||
|
let formatDates = [];
|
||||||
|
formatDates.push(this.formatDate(this.dates[0]));
|
||||||
|
formatDates.push(this.formatDate(this.dates[1]));
|
||||||
|
return formatDates.join(" ~ ");
|
||||||
|
},
|
||||||
|
headers() {
|
||||||
|
var canvas = document.createElement("canvas");
|
||||||
|
var ctx = canvas.getContext("2d");
|
||||||
|
ctx.font = "12px Roboto, sans-serif";
|
||||||
|
this.data.headers.forEach(element => {
|
||||||
|
var metrics = ctx.measureText(element.text);
|
||||||
|
var cellWidth = metrics.width;
|
||||||
|
element.width = cellWidth + 65;
|
||||||
|
element.divider = true;
|
||||||
|
element.align = "center";
|
||||||
|
if (element.value === "id") {
|
||||||
|
element.align = " d-none";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return this.data.headers;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapMutations("BOFHeatPhase", {
|
||||||
|
getExcel: "getExcel",
|
||||||
|
}),
|
||||||
|
...mapActions("BOFHeatPhase", {
|
||||||
|
getData: "getData",
|
||||||
|
refreshChart: "refreshChart",
|
||||||
|
changeAggregate: "changeAggregate"
|
||||||
|
}),
|
||||||
|
toPrint() {
|
||||||
|
var canvasEle = this.$refs.bar.$el;
|
||||||
|
var win = window.open();
|
||||||
|
// win.document.write("<br><img width='99%' height='80%' src='" + canvasEle.toDataURL() + "' />");
|
||||||
|
win.document.write("<br><img width='99%' src='" + canvasEle.toDataURL() + "' />");
|
||||||
|
setTimeout(function () { //giving it 200 milliseconds time to load
|
||||||
|
// win.document.close();
|
||||||
|
// win.focus()
|
||||||
|
win.print();
|
||||||
|
// win.location.reload()
|
||||||
|
}, 0);
|
||||||
|
|
||||||
|
// let url = this.$refs.bar.$el.toDataURL();
|
||||||
|
// let win = window.open();
|
||||||
|
// win.document.write("<img class='a4-container' src='" + url + "'/>");
|
||||||
|
// win.setTimeout(() => win.print(), 0);
|
||||||
|
},
|
||||||
|
toImage() {
|
||||||
|
const context = this.$refs.bar.$el.getContext('2d');
|
||||||
|
context.save();
|
||||||
|
context.globalCompositeOperation = 'destination-over';
|
||||||
|
context.fillStyle = 'white';
|
||||||
|
context.fillRect(0, 0, this.$refs.bar.$el.width, this.$refs.bar.$el.height);
|
||||||
|
context.restore();
|
||||||
|
const link = document.createElement("a");
|
||||||
|
link.download = 'chart.png'
|
||||||
|
link.href = this.$refs.bar.$el.toDataURL('image/png')
|
||||||
|
link.click();
|
||||||
|
},
|
||||||
|
// Excel() {
|
||||||
|
// const context = this.$refs.bar.$el.getContext('2d');
|
||||||
|
// context.save();
|
||||||
|
// context.globalCompositeOperation = 'destination-over';
|
||||||
|
// context.fillStyle = 'white';
|
||||||
|
// context.fillRect(0, 0, this.$refs.bar.$el.width, this.$refs.bar.$el.height);
|
||||||
|
// context.restore();
|
||||||
|
|
||||||
|
// this.getExcel([
|
||||||
|
// this.formatDate(this.dates[0]),
|
||||||
|
// this.formatDate(this.dates[1]),
|
||||||
|
// this.$refs.bar.$el.toDataURL('image/png')
|
||||||
|
// ]);
|
||||||
|
// },
|
||||||
|
input(e) {
|
||||||
|
if (e.length == 2) {
|
||||||
|
this.datePickerMenu = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
formatDate(date) {
|
||||||
|
if (!date) return null;
|
||||||
|
const [year, month, day] = date.split("-");
|
||||||
|
return `${day}.${month}.${year}`;
|
||||||
|
},
|
||||||
|
row_classes(item) {
|
||||||
|
if (item.Descr === 'Простой') {
|
||||||
|
return 'grey lighten-3';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setLabelText(val) {
|
||||||
|
let selected = val
|
||||||
|
this.chartOptions.scales.y.ticks.callback = function (value,) {
|
||||||
|
let labelText = this.getLabelForValue(value);
|
||||||
|
let descrText = '';
|
||||||
|
selected.forEach((element) => {
|
||||||
|
if (this.getLabelForValue(value) == element.heat_number) {
|
||||||
|
descrText = `${element.prostoi_descr}, `;
|
||||||
|
labelText = `${descrText.slice(0, -2)} (${element.phase_duration}) - ${this.getLabelForValue(value)}`;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return labelText
|
||||||
|
}
|
||||||
|
},
|
||||||
|
changeBOFselect() {
|
||||||
|
this.barHeight = 0;
|
||||||
|
this.chartData.labels = [];
|
||||||
|
this.chartData.datasets = [];
|
||||||
|
this.changeAggregate(this.BofSelect).then(() => {
|
||||||
|
this.refreshChart([this.selected, this.BofSelect]).then(() => {
|
||||||
|
this.chartData.datasets = this.data.chart.dataset;
|
||||||
|
this.setLabelText(this.data.prostoiSelected)
|
||||||
|
this.barHeight += 175 + (this.data.chart.label.length * 25);
|
||||||
|
this.chartOptions.plugins.title.text = `Циклограмма производства ${this.BofSelect} в ККЦ за ${this.formatDate(this.dates[0])}`;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
// this.barHeight = 0;
|
||||||
|
// this.chartData.labels = [];
|
||||||
|
// this.chartData.datasets = [];
|
||||||
|
// this.refreshChart([this.selected, this.BofSelect]).then(() => {
|
||||||
|
// this.chartData.datasets = this.data.chart.dataset;
|
||||||
|
// this.setLabelText(this.data.prostoiSelected)
|
||||||
|
// this.barHeight += 175 + (this.data.chart.label.length * 25);
|
||||||
|
// });
|
||||||
|
},
|
||||||
|
prostoiSelect() {
|
||||||
|
this.chartData.datasets = [];
|
||||||
|
this.refreshChart([this.selected, this.BofSelect]).then(() => {
|
||||||
|
this.chartData.datasets = this.data.chart.dataset;
|
||||||
|
this.setLabelText(this.data.prostoiSelected)
|
||||||
|
});
|
||||||
|
},
|
||||||
|
refreshData() {
|
||||||
|
this.chartData.labels = [];
|
||||||
|
this.chartData.datasets = [];
|
||||||
|
this.barHeight = 0;
|
||||||
|
this.getData([
|
||||||
|
this.formatDate(this.dates[0]),
|
||||||
|
this.formatDate(this.dates[1]), this.dates[1]],
|
||||||
|
)
|
||||||
|
.then(() => {
|
||||||
|
let dStart = new Date(new Date(this.dates[0]).getFullYear(),
|
||||||
|
new Date(this.dates[0]).getMonth(),
|
||||||
|
new Date(this.dates[0]).getDate())
|
||||||
|
.toISOString()
|
||||||
|
.substr(0, 10) + ' 23:00:00';
|
||||||
|
let dEnd =
|
||||||
|
new Date(new Date(this.dates[1]).getFullYear(),
|
||||||
|
new Date(this.dates[1]).getMonth(),
|
||||||
|
new Date(this.dates[1]).getDate() + 1)
|
||||||
|
.toISOString()
|
||||||
|
.substr(0, 10) + ' 23:00:00';
|
||||||
|
//this.chartOptions.plugins.title.text = 'Циклограмма производства в ККЦ за ' + this.formatDate(this.dates[0]);
|
||||||
|
this.chartOptions.plugins.title.text = `Циклограмма производства ${this.BofSelect} в ККЦ за ${this.formatDate(this.dates[0])}`;
|
||||||
|
this.chartOptions.scales.x.min = dStart;
|
||||||
|
this.chartOptions.scales.x.max = dEnd;
|
||||||
|
this.selected = this.data.prostoiSelected
|
||||||
|
this.progress = 101;
|
||||||
|
}).then(() => {
|
||||||
|
// this.barHeight += 145 + (this.data.chart.label.length * 20);
|
||||||
|
this.refreshChart([this.selected]).then(() => {
|
||||||
|
this.barHeight += 175 + (this.data.chart.label.length * 25);
|
||||||
|
this.chartData.datasets = this.data.chart.dataset;
|
||||||
|
this.setLabelText(this.data.prostoiSelected);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
},
|
||||||
|
autoRefresh(e) {
|
||||||
|
if (e) {
|
||||||
|
this.progress = 101;
|
||||||
|
this.progressValue();
|
||||||
|
} else {
|
||||||
|
clearInterval(this.timerID);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
progressValue() {
|
||||||
|
this.timerID = setInterval(() => {
|
||||||
|
this.progress = (this.progress - 0.02).toFixed(2);
|
||||||
|
if (this.progress < 0) {
|
||||||
|
this.progress = 101;
|
||||||
|
this.refreshData();
|
||||||
|
}
|
||||||
|
}, this.timerDelay);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.refreshData();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.datePicker input {
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .theme--light.v-data-table tbody tr.v-data-table__selected {
|
||||||
|
background: #ffd296d2 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme--dark.v-data-table tbody tr.v-data-table__selected {
|
||||||
|
background: #ffd296d2 !important;
|
||||||
|
} */
|
||||||
|
|
||||||
|
.a4-container {
|
||||||
|
width: 10mm !important;
|
||||||
|
height: 297mm !important;
|
||||||
|
margin: auto;
|
||||||
|
/* для центровки страницы */
|
||||||
|
page-break-after: always;
|
||||||
|
/* для начала следующего элемента с новой страницы */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#BofGazTrend .v-expansion-panel {
|
||||||
|
border-left: thin solid rgba(0, 0, 0, 0.12) !important;
|
||||||
|
border-right: thin solid rgba(0, 0, 0, 0.12) !important;
|
||||||
|
border-top: thin solid rgba(0, 0, 0, 0.12) !important;
|
||||||
|
border-bottom: thin solid rgba(0, 0, 0, 0.12) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#BofGazTrend .v-expansion-panel::before {
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#BofGazTrend .v-data-table-header {
|
||||||
|
background-color: #fafafa !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#BofGazTrend .spacer {
|
||||||
|
margin-top: 3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#BofGazTrend .divider {
|
||||||
|
border-right: rgba(0, 0, 0, 0.12) solid 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#BofGazTrend .v-data-table {
|
||||||
|
border-left: thin solid rgba(0, 0, 0, 0.12);
|
||||||
|
border-top: thin solid rgba(0, 0, 0, 0.12);
|
||||||
|
border-bottom: thin solid rgba(0, 0, 0, 0.12);
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#BofGazTrend .v-data-table table>tbody>tr>td {
|
||||||
|
border-right: thin solid rgba(0, 0, 0, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
#BofGazTrend #datePicker {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* #BOFHeatPhase .v-item-group.theme--light.v-expansion-panels.v-expansion-panels--focusable.v-expansion-panels--tile>div>div>div>div>div>table>thead>tr>th.text-start>div {
|
||||||
|
display: none;
|
||||||
|
} */
|
||||||
|
|
||||||
|
|
||||||
|
.theme--light.v-data-table tbody tr.v-data-table__selected {
|
||||||
|
background: #f5c17d70 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme--dark.v-data-table tbody tr.v-data-table__selected {
|
||||||
|
background: #a17b4970 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme--dark.v-data-table tbody tr.v-data-table__selected:hover {
|
||||||
|
background: #a17b49c2 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme--light.v-data-table tbody tr.v-data-table__selected:hover {
|
||||||
|
background: #ffd296d2 !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -145,11 +145,23 @@ const routes = [
|
|||||||
component: () => import("./components/PRB_FileControl.vue"),
|
component: () => import("./components/PRB_FileControl.vue"),
|
||||||
},
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
path: "/GazTrends/BofGazTrend",
|
||||||
|
name: "BofGazTrend",
|
||||||
|
component: () => import("./components/GazTrends/BofGazTrend.vue"),
|
||||||
|
beforeEnter(to, from, next) {
|
||||||
|
axios.defaults.headers.post["project"] = "GazTrends";
|
||||||
|
next();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
path: "/stat",
|
path: "/stat",
|
||||||
name: "Stat",
|
name: "Stat",
|
||||||
component: () => import("./components/stat.vue"),
|
component: () => import("./components/stat.vue"),
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
// {
|
// {
|
||||||
// path: "/about",
|
// path: "/about",
|
||||||
// name: "About",
|
// name: "About",
|
||||||
|
|||||||
542
src/store/modules/GazTrends/BofGazTrend.js
Normal file
542
src/store/modules/GazTrends/BofGazTrend.js
Normal file
@@ -0,0 +1,542 @@
|
|||||||
|
import axios from "axios";
|
||||||
|
import * as utils from "../utils.js";
|
||||||
|
import ExcelJS from "../../plugins/exceljs/dist/exceljs.js";
|
||||||
|
import FileSaver from "../../plugins/file-saver/src/FileSaver.js";
|
||||||
|
import { _ } from "vue-underscore";
|
||||||
|
|
||||||
|
|
||||||
|
const initialState = {
|
||||||
|
data: {
|
||||||
|
headers: [],
|
||||||
|
table: [],
|
||||||
|
prostoiSelected: [],
|
||||||
|
items: [],
|
||||||
|
chart: {},
|
||||||
|
label: [],
|
||||||
|
originalDataset: [],
|
||||||
|
originalDataItems: [],
|
||||||
|
originalDataTable: [],
|
||||||
|
minDate: [],
|
||||||
|
maxDate: [],
|
||||||
|
},
|
||||||
|
loading: false,
|
||||||
|
};
|
||||||
|
const state = JSON.parse(JSON.stringify(initialState));
|
||||||
|
|
||||||
|
export default {
|
||||||
|
namespaced: true,
|
||||||
|
state,
|
||||||
|
getters: {
|
||||||
|
data: (state) => {
|
||||||
|
return state.data;
|
||||||
|
},
|
||||||
|
loading: (state) => {
|
||||||
|
return state.loading;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mutations: {
|
||||||
|
getExcel(state, d) {
|
||||||
|
|
||||||
|
var wb = new ExcelJS.Workbook();
|
||||||
|
var ws = wb.addWorksheet(`Документ создан\r\n${new Date(Date.now()).print("%d.%m.%Y")}`, {
|
||||||
|
properties: {
|
||||||
|
showGridLines: false,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
/*-----------------TITLE------------------------------*/
|
||||||
|
ws.mergeCells("A1", "AA");
|
||||||
|
ws.getCell("C1").value = `${"Эксплуатации стальковшей" +
|
||||||
|
" с " +
|
||||||
|
d[0] +
|
||||||
|
" по " +
|
||||||
|
d[1] +
|
||||||
|
"\r\n"}`;
|
||||||
|
|
||||||
|
|
||||||
|
var imgId = wb.addImage({
|
||||||
|
base64: d[2],
|
||||||
|
extension: "png",
|
||||||
|
});
|
||||||
|
//ws.mergeCells("A2", "D16");
|
||||||
|
|
||||||
|
|
||||||
|
ws.addImage(imgId, {
|
||||||
|
// tl: { col: 0, row: 20 },
|
||||||
|
// br: { col: 20, row: 30 },
|
||||||
|
// ext: { width: 1150, height: 1200 },
|
||||||
|
|
||||||
|
// tl: { col: 0, row: 20 },
|
||||||
|
br: { col: 5, row: 60 },
|
||||||
|
ext: { width: 150, height: 100 },
|
||||||
|
editAs: 'oneCell'
|
||||||
|
|
||||||
|
});
|
||||||
|
/*-----------------/TITLE------------------------------*/
|
||||||
|
|
||||||
|
|
||||||
|
wb.xlsx
|
||||||
|
.writeBuffer()
|
||||||
|
.then((buffer) =>
|
||||||
|
FileSaver.saveAs(
|
||||||
|
new Blob([buffer]),
|
||||||
|
`${new Date(Date.now()).print("%d.%m.%Y")}.xlsx`
|
||||||
|
)
|
||||||
|
)
|
||||||
|
.catch((err) => console.log("Error writing excel export", err))
|
||||||
|
.finally(() => { });
|
||||||
|
},
|
||||||
|
changeAggregate(state, aggregate_id) {
|
||||||
|
this.commit("BOFHeatPhase/buildChartDataset", aggregate_id);
|
||||||
|
},
|
||||||
|
refreshChart(state, payload) {
|
||||||
|
|
||||||
|
let filterData = payload[0];
|
||||||
|
|
||||||
|
state.data.chart.dataset = state.data.originalDataset;
|
||||||
|
|
||||||
|
let prostoi = [];
|
||||||
|
|
||||||
|
_.pluck(filterData, 'id').forEach((id) => {
|
||||||
|
prostoi.push(_.where(state.data.table, { id: id }))
|
||||||
|
});
|
||||||
|
|
||||||
|
state.data.prostoiSelected = _.compact(_.uniq(_.flatten(prostoi))).map((items) => {
|
||||||
|
return {
|
||||||
|
...items,
|
||||||
|
heat_number: _.first(_.pluck(_.where(state.data.items, { id: items.id }), 'HEAT_NUMBER')),
|
||||||
|
phase_duration: _.first(_.pluck(_.where(state.data.items, { id: items.id }), 'PROSTOI_DURATION')),
|
||||||
|
prostoi_descr:_.first(_.pluck(_.where(_.where(state.data.items, { id: items.id }), { PROSTOI_DESC: 'Простой' }), 'PP_Descr')),
|
||||||
|
// prostoi_descr:_.uniq(_.pluck(_.where(state.data.prostoiSelected, { id: items.id }), 'DescrPrichin')),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
var arr_temp = [];
|
||||||
|
filterData.forEach((item) => {
|
||||||
|
arr_temp.push(_.first(_.filter(state.data.chart.dataset, function (num) { return num.id == item.id })));
|
||||||
|
});
|
||||||
|
state.data.chart.dataset = _.reject(state.data.chart.dataset, { aggregate: 'prostoy' })
|
||||||
|
_.compact(_.uniq(arr_temp)).forEach((item) => {
|
||||||
|
state.data.chart.dataset.push(item)
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
buildChartDataset(state, aggregate_id) {
|
||||||
|
|
||||||
|
state.data.items = state.data.originalDataItems;
|
||||||
|
state.data.table = state.data.originalDataTable;
|
||||||
|
|
||||||
|
|
||||||
|
switch (aggregate_id) {
|
||||||
|
case "K1":
|
||||||
|
state.data.items = _.where(state.data.items, { AGGREGATE_ID: 1 })
|
||||||
|
state.data.table = _.where(state.data.table, { Agregat: 'К1' })
|
||||||
|
break;
|
||||||
|
case "K2":
|
||||||
|
state.data.items = _.where(state.data.items, { AGGREGATE_ID: 2 })
|
||||||
|
state.data.table = _.where(state.data.table, { Agregat: 'К2' })
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
let prostoiSample = _.reject(_.where(state.data.table, { Descr: 'Простой' }), { DescrPrichin: 'Прочие' });
|
||||||
|
state.data.prostoiSelected = _.reject(prostoiSample, { DescrPrichin: null });
|
||||||
|
|
||||||
|
|
||||||
|
state.data.prostoiSelected = state.data.prostoiSelected.map((items) => {
|
||||||
|
return {
|
||||||
|
...items,
|
||||||
|
heat_number: _.first(_.pluck(_.where(state.data.items, { id: items.id }), 'HEAT_NUMBER')),
|
||||||
|
phase_duration: _.first(_.pluck(_.where(state.data.items, { id: items.id }), 'PROSTOI_DURATION')),
|
||||||
|
prostoi_descr:_.first(_.pluck(_.where(_.where(state.data.items, { id: items.id }), { PROSTOI_DESC: 'Простой' }), 'PP_Descr')),
|
||||||
|
// prostoi_descr:_.uniq(_.pluck(_.where(state.data.prostoiSelected, { id: items.id }), 'DescrPrichin')),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
state.data.chart.label = [];
|
||||||
|
state.data.chart.dataset = [];
|
||||||
|
|
||||||
|
let BOF1_HEATS = _.uniq(_.pluck(_.where(state.data.items, { AGGREGATE_ID: 1 }), 'HEAT_NUMBER'));
|
||||||
|
let BOF2_HEATS = _.uniq(_.pluck(_.where(state.data.items, { AGGREGATE_ID: 2 }), 'HEAT_NUMBER'));
|
||||||
|
if (_.size(BOF1_HEATS) != 0) {
|
||||||
|
state.data.chart.label.push('K1');
|
||||||
|
state.data.chart.label.push(BOF1_HEATS);
|
||||||
|
}
|
||||||
|
if (_.size(BOF2_HEATS) != 0) {
|
||||||
|
state.data.chart.label.push('K2');
|
||||||
|
state.data.chart.label.push(BOF2_HEATS);
|
||||||
|
}
|
||||||
|
state.data.chart.label = _.flatten(state.data.chart.label);
|
||||||
|
|
||||||
|
|
||||||
|
let DiffMin = function (start, end) {
|
||||||
|
let start_ = new Date(start);
|
||||||
|
let end_ = new Date(end);
|
||||||
|
let dif = (end_ - start_);
|
||||||
|
return Math.round((dif / 1000) / 60)
|
||||||
|
};
|
||||||
|
|
||||||
|
// ----------------------------BOF----------------------------------------------------------------------------------------------------------
|
||||||
|
state.data.chart.label.forEach((heatNumber,) => {
|
||||||
|
let start = new Date(_.first(_.pluck(_.where(_.where(state.data.items, { HEAT_NUMBER: heatNumber }), { PHASE_NAME: 'Завалка' }), 'DATE_START')));
|
||||||
|
|
||||||
|
let end = _.first(_.pluck(_.where(_.where(state.data.items, { HEAT_NUMBER: heatNumber }), { PHASE_NAME: 'Слив шлака' }), 'DATE_END')) === null ?
|
||||||
|
new Date(_.first(_.pluck(_.where(_.where(state.data.items, { HEAT_NUMBER: heatNumber }), { PHASE_NAME: 'Слив металла' }), 'DATE_END'))) :
|
||||||
|
new Date(_.first(_.pluck(_.where(_.where(state.data.items, { HEAT_NUMBER: heatNumber }), { PHASE_NAME: 'Слив шлака' }), 'DATE_END')));
|
||||||
|
|
||||||
|
|
||||||
|
// if (_.first(_.pluck(_.where(_.where(state.data.items, { HEAT_NUMBER: heatNumber }), { PHASE_NAME: 'Слив шлака' }), 'DATE_END')) === null) {
|
||||||
|
// end = new Date(_.first(_.pluck(_.where(_.where(state.data.items, { HEAT_NUMBER: heatNumber }), { PHASE_NAME: 'Азотирование' }), 'DATE_END')))
|
||||||
|
// }
|
||||||
|
// else if (_.first(_.pluck(_.where(_.where(state.data.items, { HEAT_NUMBER: heatNumber }), { PHASE_NAME: 'Азотирование' }), 'DATE_END')) === null) {
|
||||||
|
// end = new Date(_.first(_.pluck(_.where(_.where(state.data.items, { HEAT_NUMBER: heatNumber }), { PHASE_NAME: 'Слив металла' }), 'DATE_END')))
|
||||||
|
// } else {
|
||||||
|
// end = new Date(_.first(_.pluck(_.where(_.where(state.data.items, { HEAT_NUMBER: heatNumber }), { PHASE_NAME: 'Слив шлака' }), 'DATE_END')));
|
||||||
|
// }
|
||||||
|
|
||||||
|
// console.log(end)
|
||||||
|
|
||||||
|
|
||||||
|
state.data.chart.dataset.push({
|
||||||
|
aggregate: 'bof',
|
||||||
|
backgroundColor: '#51C27F',
|
||||||
|
// barPercentage: 0.5,
|
||||||
|
// categoryPercentage: 0.7,
|
||||||
|
date_start: _.first(_.pluck(_.where(_.where(state.data.items, { HEAT_NUMBER: heatNumber }), { PHASE_NAME: 'Завалка' }), 'DATE_START')),
|
||||||
|
date_end: _.first(_.pluck(_.where(_.where(state.data.items, { HEAT_NUMBER: heatNumber }), { PHASE_NAME: 'Слив шлака' }), 'DATE_END')) === null ?
|
||||||
|
_.first(_.pluck(_.where(_.where(state.data.items, { HEAT_NUMBER: heatNumber }), { PHASE_NAME: 'Слив металла' }), 'DATE_END')) :
|
||||||
|
_.first(_.pluck(_.where(_.where(state.data.items, { HEAT_NUMBER: heatNumber }), { PHASE_NAME: 'Слив шлака' }), 'DATE_END')),
|
||||||
|
//borderWidth: 1,
|
||||||
|
//borderColor:'red',
|
||||||
|
data:
|
||||||
|
[{
|
||||||
|
x: [
|
||||||
|
start,
|
||||||
|
end
|
||||||
|
],
|
||||||
|
y: heatNumber,
|
||||||
|
// PHASE_DURATION: DiffMin(start, end)
|
||||||
|
PHASE_DURATION: end.getTime() >= new Date(state.data.date_start_hidden).getTime() &&
|
||||||
|
(end.getTime() <= new Date(state.data.date_end_hidden).getTime()) ? DiffMin(start, end) : '',
|
||||||
|
//PHASE_DURATION: (end.getTime() >= new Date(state.data.date_start_hidden).getTime() && end.getTime() <= new Date(state.data.date_end_hidden).getTime()) ? DiffMin(start, end) : '',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
});
|
||||||
|
// ----------------------------Простой----------------------------------------------------------------------------------------------------------
|
||||||
|
// arrLabel = [];
|
||||||
|
state.data.chart.label.forEach((heatNumber,) => {
|
||||||
|
let start = _.first(_.pluck(_.where(_.where(state.data.items, { HEAT_NUMBER: heatNumber }), { PROSTOI_DESC: 'Простой' }), 'P_START'));
|
||||||
|
let end = _.first(_.pluck(_.where(_.where(state.data.items, { HEAT_NUMBER: heatNumber }), { PROSTOI_DESC: 'Простой' }), 'P_END'));
|
||||||
|
// arrLabel.push(index)
|
||||||
|
state.data.chart.dataset.push({
|
||||||
|
aggregate: 'prostoy',
|
||||||
|
id: _.first(_.uniq(_.compact(_.pluck(_.where(state.data.items, { HEAT_NUMBER: heatNumber }), 'id')))),
|
||||||
|
backgroundColor: '#C2CBD1',
|
||||||
|
//label: index == arrLabel ? ProstoylabelName : '',
|
||||||
|
// label: index == 0 ? ProstoylabelName : '',
|
||||||
|
p_start: start,
|
||||||
|
p_end: end,
|
||||||
|
//order:1,
|
||||||
|
//stack: true,
|
||||||
|
data:
|
||||||
|
[{
|
||||||
|
x: [
|
||||||
|
start,
|
||||||
|
end,
|
||||||
|
], y: heatNumber,
|
||||||
|
PHASE_DURATION: _.first(_.pluck(_.where(_.where(state.data.items, { HEAT_NUMBER: heatNumber }), { PROSTOI_DESC: 'Простой' }), 'PROSTOI_DURATION')),
|
||||||
|
prostoi_name: _.first(_.pluck(_.where(_.where(state.data.items, { HEAT_NUMBER: heatNumber }), { PROSTOI_DESC: 'Простой' }), 'PP_Descr')),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/// console.log(state.data.chart.dataset)
|
||||||
|
// ----------------------------LF----------------------------------------------------------------------------------------------------------
|
||||||
|
state.data.chart.label.forEach((heatNumber,) => {
|
||||||
|
let start = _.first(_.pluck(_.where(state.data.items, { HEAT_NUMBER: heatNumber }), 'LF_START'));
|
||||||
|
let end = _.first(_.pluck(_.where(state.data.items, { HEAT_NUMBER: heatNumber }), 'LF_END'));
|
||||||
|
state.data.chart.dataset.push({
|
||||||
|
aggregate: 'lf',
|
||||||
|
backgroundColor: '#FF6F4D',
|
||||||
|
lf_start: start,
|
||||||
|
lf_end: end,
|
||||||
|
//stack: true,
|
||||||
|
data:
|
||||||
|
[{
|
||||||
|
x: [
|
||||||
|
start,
|
||||||
|
_.isNull(end) ? start : end
|
||||||
|
], y: heatNumber,
|
||||||
|
//PHASE_DURATION: _.first(_.pluck(_.where(state.data.items, { HEAT_NUMBER: heatNumber }), 'LF_DURATION')),
|
||||||
|
//PHASE_DURATION: new Date(end).getTime() <= new Date(state.data.date_end_hidden).getTime() ? _.first(_.pluck(_.where(state.data.items, { HEAT_NUMBER: heatNumber }), 'LF_DURATION')) : '',
|
||||||
|
PHASE_DURATION: (new Date(end).getTime() >= new Date(state.data.date_start_hidden).getTime()
|
||||||
|
&& new Date(end).getTime() <= new Date(state.data.date_end_hidden).getTime()) ?
|
||||||
|
_.first(_.pluck(_.where(state.data.items, { HEAT_NUMBER: heatNumber }), 'LF_DURATION')) : '',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
});
|
||||||
|
});
|
||||||
|
// ----------------------------CCM_STATUS2----------------------------------------------------------------------------------------------------------
|
||||||
|
state.data.chart.label.forEach((heatNumber,) => {
|
||||||
|
let start = new Date(_.first(_.pluck(_.where(_.where(state.data.items, { HEAT_NUMBER: heatNumber }), { CCM_STATUS: 1 }), 'CCM_STATUS_TIME')));
|
||||||
|
let end = new Date(_.last(_.pluck(_.where(_.where(state.data.items, { HEAT_NUMBER: heatNumber }), { CCM_STATUS: 2 }), 'CCM_STATUS_TIME')));
|
||||||
|
if (end != 'Invalid Date') {
|
||||||
|
state.data.chart.dataset.push({
|
||||||
|
aggregate: 'ccm_status2',
|
||||||
|
backgroundColor: '#00eeff',
|
||||||
|
ccm_status2_start: _.first(_.pluck(_.where(_.where(state.data.items, { HEAT_NUMBER: heatNumber }), { CCM_STATUS: 1 }), 'CCM_STATUS_TIME')),
|
||||||
|
ccm_status2_end: _.last(_.pluck(_.where(_.where(state.data.items, { HEAT_NUMBER: heatNumber }), { CCM_STATUS: 2 }), 'CCM_STATUS_TIME')),
|
||||||
|
data:
|
||||||
|
[{
|
||||||
|
x: [
|
||||||
|
start,
|
||||||
|
end,
|
||||||
|
], y: heatNumber,
|
||||||
|
PHASE_DURATION: end.getTime() >= new Date(state.data.date_start_hidden).getTime() &&
|
||||||
|
(end.getTime() <= new Date(state.data.date_end_hidden).getTime()) ? DiffMin(start, end) : '',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// ----------------------------CCM_STATUS3----------------------------------------------------------------------------------------------------------
|
||||||
|
state.data.chart.label.forEach((heatNumber,) => {
|
||||||
|
let start = new Date(_.last(_.pluck(_.where(_.where(state.data.items, { HEAT_NUMBER: heatNumber }), { CCM_STATUS: 2 }), 'CCM_STATUS_TIME')));
|
||||||
|
let end = new Date(_.last(_.pluck(_.where(_.where(state.data.items, { HEAT_NUMBER: heatNumber }), { CCM_STATUS: 3 }), 'CCM_STATUS_TIME')));
|
||||||
|
if (end != 'Invalid Date') {
|
||||||
|
state.data.chart.dataset.push({
|
||||||
|
aggregate: 'ccm_status3',
|
||||||
|
backgroundColor: '#01d5e4',
|
||||||
|
ccm_status3_start: _.last(_.pluck(_.where(_.where(state.data.items, { HEAT_NUMBER: heatNumber }), { CCM_STATUS: 2 }), 'CCM_STATUS_TIME')),
|
||||||
|
ccm_status3_end: _.last(_.pluck(_.where(_.where(state.data.items, { HEAT_NUMBER: heatNumber }), { CCM_STATUS: 3 }), 'CCM_STATUS_TIME')),
|
||||||
|
data:
|
||||||
|
[{
|
||||||
|
x: [
|
||||||
|
start,
|
||||||
|
end,
|
||||||
|
], y: heatNumber,
|
||||||
|
//PHASE_DURATION: DiffMin(start, end)
|
||||||
|
//PHASE_DURATION: end.getTime() <= new Date(state.data.date_hidden).getTime() ? DiffMin(start, end) : '',
|
||||||
|
PHASE_DURATION: end.getTime() >= new Date(state.data.date_start_hidden).getTime() &&
|
||||||
|
(end.getTime() <= new Date(state.data.date_end_hidden).getTime()) ? DiffMin(start, end) : '',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
//----------------------------CCM_STATUS4----------------------------------------------------------------------------------------------------------
|
||||||
|
state.data.chart.label.forEach((heatNumber,) => {
|
||||||
|
let start = new Date(_.last(_.pluck(_.where(_.where(state.data.items, { HEAT_NUMBER: heatNumber }), { CCM_STATUS: 3 }), 'CCM_STATUS_TIME')));
|
||||||
|
let end = new Date(_.last(_.pluck(_.where(_.where(state.data.items, { HEAT_NUMBER: heatNumber }), { CCM_STATUS: 7 }), 'CCM_STATUS_TIME')));
|
||||||
|
if (end != 'Invalid Date') {
|
||||||
|
state.data.chart.dataset.push({
|
||||||
|
aggregate: 'ccm_status4',
|
||||||
|
backgroundColor: '#03a2ad',
|
||||||
|
ccm_status4_start: _.last(_.pluck(_.where(_.where(state.data.items, { HEAT_NUMBER: heatNumber }), { CCM_STATUS: 3 }), 'CCM_STATUS_TIME')),
|
||||||
|
ccm_status4_end: _.last(_.pluck(_.where(_.where(state.data.items, { HEAT_NUMBER: heatNumber }), { CCM_STATUS: 7 }), 'CCM_STATUS_TIME')),
|
||||||
|
data:
|
||||||
|
[{
|
||||||
|
x: [
|
||||||
|
start,
|
||||||
|
end,
|
||||||
|
], y: heatNumber,
|
||||||
|
// PHASE_DURATION: DiffMin(start, end)
|
||||||
|
//PHASE_DURATION: end.getTime() <= new Date(state.data.date_hidden).getTime() ? DiffMin(start, end) : '',
|
||||||
|
PHASE_DURATION: end.getTime() >= new Date(state.data.date_start_hidden).getTime() &&
|
||||||
|
(end.getTime() <= new Date(state.data.date_end_hidden).getTime()) ? DiffMin(start, end) : '',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
state.data.originalDataset = state.data.chart.dataset;
|
||||||
|
|
||||||
|
},
|
||||||
|
set_data(state, payload) {
|
||||||
|
state.data.items = payload[0];
|
||||||
|
state.data.originalDataItems = state.data.items;
|
||||||
|
|
||||||
|
state.data.table = payload[1];
|
||||||
|
state.data.originalDataTable = state.data.table;
|
||||||
|
state.data.headers = utils.getHeaders(state.data.table);
|
||||||
|
|
||||||
|
let date = payload[2][2];
|
||||||
|
|
||||||
|
state.data.date_start_hidden = new Date(new Date(date).getFullYear(),
|
||||||
|
new Date(date).getMonth(),
|
||||||
|
new Date(date).getDate())
|
||||||
|
.toISOString()
|
||||||
|
.substr(0, 10) + ' 23:30:00';
|
||||||
|
|
||||||
|
|
||||||
|
state.data.date_end_hidden = new Date(new Date(date).getFullYear(),
|
||||||
|
new Date(date).getMonth(),
|
||||||
|
new Date(date).getDate() + 1)
|
||||||
|
.toISOString()
|
||||||
|
.substr(0, 10) + ' 23:00:00';
|
||||||
|
|
||||||
|
state.data.headers.forEach((element) => {
|
||||||
|
switch (element.text) {
|
||||||
|
case "Agregat":
|
||||||
|
element.text = "Агрегат";
|
||||||
|
break;
|
||||||
|
case "Descr":
|
||||||
|
element.text = "Этапы";
|
||||||
|
break;
|
||||||
|
case "Br":
|
||||||
|
element.text = "Бригада";
|
||||||
|
break;
|
||||||
|
case "DtB":
|
||||||
|
element.text = "Начало";
|
||||||
|
break;
|
||||||
|
case "DtE":
|
||||||
|
element.text = "Конец";
|
||||||
|
break;
|
||||||
|
case "Cikl":
|
||||||
|
element.text = "Длительность";
|
||||||
|
break;
|
||||||
|
case "RashDtB":
|
||||||
|
element.text = "Начало";
|
||||||
|
break;
|
||||||
|
case "RashDtE":
|
||||||
|
element.text = "Конец";
|
||||||
|
break;
|
||||||
|
case "Cikl2":
|
||||||
|
element.text = "Длительность";
|
||||||
|
break;
|
||||||
|
case "DescrGroup":
|
||||||
|
element.text = "Группа";
|
||||||
|
break;
|
||||||
|
case "DescrPrichin":
|
||||||
|
element.text = "Причина";
|
||||||
|
break;
|
||||||
|
case "Prim":
|
||||||
|
element.text = "Примечание";
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// let prostoiSample = _.reject(_.where(state.data.table, { Descr: 'Простой' }), { DescrPrichin: 'Прочие' });
|
||||||
|
// state.data.prostoiSelected = _.reject(prostoiSample, { DescrPrichin: null });
|
||||||
|
// state.data.prostoiSelected = state.data.prostoiSelected.map((items) => {
|
||||||
|
// return {
|
||||||
|
// ...items,
|
||||||
|
// heat_number: _.first(_.pluck(_.where(state.data.items, { id: items.id }), 'HEAT_NUMBER')),
|
||||||
|
// phase_duration: _.first(_.pluck(_.where(state.data.items, { id: items.id }), 'PROSTOI_DURATION')),
|
||||||
|
// };
|
||||||
|
// });
|
||||||
|
this.commit("BOFHeatPhase/buildChartDataset");
|
||||||
|
|
||||||
|
|
||||||
|
// this.commit("BOFHeatPhase/buildChartDataset");
|
||||||
|
|
||||||
|
//...............................................Конвертер по циклам..................//
|
||||||
|
// let PHASE_NO = [30, 92];
|
||||||
|
// let PHASE_NAME = [];
|
||||||
|
// PHASE_NO.forEach((element) => {
|
||||||
|
// PHASE_NAME.push(_.pick(_.findWhere(state.data.items, { PHASE_NO: element }), 'PHASE_NAME'))
|
||||||
|
// });
|
||||||
|
// PHASE_NAME = _.pluck(PHASE_NAME, 'PHASE_NAME');
|
||||||
|
|
||||||
|
// PHASE_NAME.forEach((element) => {
|
||||||
|
// state.data.chart.dataset.push({
|
||||||
|
// label: element,
|
||||||
|
// backgroundColor: _.first(_.pluck(_.where(barColors, { name: element }), 'color')),
|
||||||
|
// data:
|
||||||
|
// [{
|
||||||
|
// x: [
|
||||||
|
// _.pluck(_.where(state.data.items, { PHASE_NAME: element }), 'DATE_START'),
|
||||||
|
// _.pluck(_.where(state.data.items, { PHASE_NAME: element }), 'DATE_END')
|
||||||
|
// ], y: _.pluck(_.where(state.data.items, { PHASE_NAME: element }), 'HEAT_NUMBER')
|
||||||
|
// }]
|
||||||
|
|
||||||
|
|
||||||
|
// // _.pluck(_.where(state.data.items, { PHASE_NAME: element }), 'PHASE_DURATION'),
|
||||||
|
// // date_start: _.pluck(_.where(state.data.items, { PHASE_NAME: element }), 'DATE_START'),
|
||||||
|
// // date_end: _.pluck(_.where(state.data.items, { PHASE_NAME: element }), 'DATE_END'),
|
||||||
|
// })
|
||||||
|
// });
|
||||||
|
|
||||||
|
|
||||||
|
// state.data.chart.dataset.push({
|
||||||
|
// label: 'Простой',
|
||||||
|
// backgroundColor: '#C2CBD1',
|
||||||
|
// data:
|
||||||
|
// _.pluck(_.where(state.data.items, { PROSTOI_DESC: 'Простой' }), 'PROSTOI_DURATION'),
|
||||||
|
// prostoi_name: _.pluck(_.where(state.data.items, { PROSTOI_DESC: 'Простой' }), 'PP_Descr')
|
||||||
|
// })
|
||||||
|
|
||||||
|
// state.data.chart.dataset.forEach((element) => {
|
||||||
|
// if (_.isEmpty(_.compact(element.data))) {
|
||||||
|
// element.label = '';
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
},
|
||||||
|
set_loading(state, payload) {
|
||||||
|
state.loading = payload;
|
||||||
|
},
|
||||||
|
resetState(state) {
|
||||||
|
Object.assign(state, JSON.parse(JSON.stringify(initialState)));
|
||||||
|
},
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
changeAggregate({ commit }, data) {
|
||||||
|
commit("changeAggregate", data);
|
||||||
|
},
|
||||||
|
refreshChart({ commit }, data) {
|
||||||
|
commit("refreshChart", data);
|
||||||
|
},
|
||||||
|
getData({ commit }, date) {
|
||||||
|
commit("set_loading", true);
|
||||||
|
const dataPhase = axios({
|
||||||
|
data: {
|
||||||
|
params: {
|
||||||
|
flag: "getData_BOFHeatPhase",
|
||||||
|
dateStart: date[0],
|
||||||
|
dateEnd: date[1],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const dataProstoi = axios({
|
||||||
|
data: {
|
||||||
|
params: {
|
||||||
|
flag: "getData_BOFHeatPhaseProstoi",
|
||||||
|
dateStart: date[0],
|
||||||
|
dateEnd: date[1],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
return axios
|
||||||
|
.all([
|
||||||
|
dataPhase,
|
||||||
|
dataProstoi
|
||||||
|
])
|
||||||
|
.then(
|
||||||
|
axios.spread((...responses) => {
|
||||||
|
const dataPhase = responses[0].data;
|
||||||
|
const dataProstoi = responses[1].data;
|
||||||
|
if (dataPhase.length) {
|
||||||
|
commit("set_data", [
|
||||||
|
dataPhase, dataProstoi, date
|
||||||
|
]);
|
||||||
|
|
||||||
|
} else {
|
||||||
|
commit("resetState");
|
||||||
|
}
|
||||||
|
})
|
||||||
|
)
|
||||||
|
.catch((error) => {
|
||||||
|
commit("set_loading", false);
|
||||||
|
commit("resetState");
|
||||||
|
console.log(error);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
commit("set_loading", false);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user