sadmin/app_hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Новый проект "GazTrends"

Browse Source
This commit is contained in:
sadmin
2026-01-13 13:14:45 +03:00
parent e77fb87333
commit 6ed75ba834
3 changed files with 1166 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

612
src/components/GazTrends/BofGazTrend.vue Normal file
View 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>

12
src/routes.js
View File

@@ -145,11 +145,23 @@ const routes = [
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",
name: "Stat",
component: () => import("./components/stat.vue"),
},
// {
// path: "/about",
// name: "About",

542
src/store/modules/GazTrends/BofGazTrend.js Normal file
View 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);
});
},
},
};