vbuglov/frontend-apps
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(eslint app): prepere eslint --fix

Browse Source
This commit is contained in:
vbuglov 2024-04-02 10:56:36 +03:00
parent 3b44337cb5
commit 053f6ef711
70 changed files with 7375 additions and 6859 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
live_monitor_vue/Makefile
View File

@ -1,9 +1,14 @@
HOOK_NAME=pre-push
HOOK_PATH=../.git/hooks/$(HOOK_NAME)
prehook:
@echo "Setting up pre-push hook..."
clearhook:
@echo "clear hooks"
@rm -f $(HOOK_PATH)
@echo "hooks cleared"
prehook:
make clearhook
@echo '#!/bin/sh' >> $(HOOK_PATH)
@echo 'echo "Running lint for live_monitor_vue"' >> $(HOOK_PATH)
@echo 'cd ./live_monitor_vue' >> $(HOOK_PATH)

12
live_monitor_vue/src/components/1_atoms/DoubleSwitch.vue
View File

@ -1,9 +1,8 @@
<script>
export default {
name: 'DoubleSwitch',
inject: ['isChecked'],
props: {
machine: {
type: Object,
@ -26,13 +25,12 @@ export default {
default: ''
},
},
emits: ['switched'],
computed: {
},
mounted () {
},
inject: ['isChecked'],
emits: ['switched'],
methods: {
buttonClass: function(value) {
return `border border-slate-400 flex items-center justify-center cursor-pointer rounded transition-all text-xs text-center py-[5px] px-2 ${value}`
@ -46,7 +44,6 @@ export default {
</script>
<template>
<label class="relative inline-flex items-center cursor-pointer">
<input
@ -55,11 +52,12 @@ export default {
type="checkbox"
:checked="isChecked"
@change="setChecked"
/>
>
<div
:class="`w-11 h-6 rounded-full peer peer-focus:ring-4 peer-focus:ring-${secondColor}-300 dark:peer-focus:ring-${secondColor}-800 dark:bg-${firstColor}-700 peer-checked/checkbox:after:translate-x-full peer-checked/checkbox:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-${firstColor}-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-${firstColor}-600`"
:style="{background: !isChecked ? firstColor : secondColor}"></div>
:style="{background: !isChecked ? firstColor : secondColor}"
/>
<span class="block peer-checked/checkbox:hidden ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"> {{ firstTitle }}</span>
<span class="hidden peer-checked/checkbox:block ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"> {{ secondTitle }} </span>
</label>

20
live_monitor_vue/src/components/2_molecules/MachinesModal/MachinesModal.vue
View File

@ -1,13 +1,3 @@
<template>
<ButtonModal
text="Выбрать машину"
btnClass="col-span-4"
containerClass="pt-10 px-4 min-w-[80vw]"
>
<Tabulator v-bind="tabulatorOptions" />
</ButtonModal>
</template>
<script>
import ButtonModal from '@molecules/ButtonModal/ButtonModal.vue'
import Tabulator from "@molecules/VTabulator/VTabulator.vue"
@ -49,3 +39,13 @@ export default {
}
</script>
<template>
<ButtonModal
text="Выбрать машину"
btnClass="col-span-4"
containerClass="pt-10 px-4 min-w-[80vw]"
>
<Tabulator v-bind="tabulatorOptions" />
</ButtonModal>
</template>

4
live_monitor_vue/src/components/2_molecules/MapModal/MapModal.vue
View File

@ -37,6 +37,8 @@ export default {
default: ""
}
},
computed: {
},
updated () {
this.$nextTick(function () {
if (this.data && this.id && this.open) {
@ -45,8 +47,6 @@ export default {
}
})
},
computed: {
},
methods: {
}
}

24
live_monitor_vue/src/components/2_molecules/VSpinner/VSpinner.vue
View File

@ -1,15 +1,3 @@
<template>
<div class="w-fit flex items-center">
<RawSpinner
class="mr-2"
/>
<span
v-if="!disableText"
class="text-lg text-slate-700"
>{{ text }}</span>
</div>
</template>
<script>
import RawSpinner from './VSpinnerSvg.vue'
@ -36,3 +24,15 @@ export default {
}
</script>
<template>
<div class="w-fit flex items-center">
<RawSpinner
class="mr-2"
/>
<span
v-if="!disableText"
class="text-lg text-slate-700"
>{{ text }}</span>
</div>
</template>

42
live_monitor_vue/src/components/2_molecules/VSpinner/VSpinnerSvg.vue
View File

@ -1,24 +1,3 @@
<template>
<svg
aria-hidden="true"
:width="size"
:height="size"
class="text-gray-200 animate-spin dark:text-gray-600 fill-blue-600"
viewBox="0 0 100 101"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
fill="currentColor"
/>
<path
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
fill="currentFill"
/>
</svg>
</template>
<script>
export default {
@ -40,3 +19,24 @@ export default {
}
</script>
<template>
<svg
aria-hidden="true"
:width="size"
:height="size"
class="text-gray-200 animate-spin dark:text-gray-600 fill-blue-600"
viewBox="0 0 100 101"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
fill="currentColor"
/>
<path
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
fill="currentFill"
/>
</svg>
</template>

26
live_monitor_vue/src/components/2_molecules/VTabulator/VTabulator.vue
View File

@ -155,23 +155,23 @@ export default {
},
__getGroupCfg() {
if (this.groupByTemplate)
return { groupBy: groupByFunction(this.groupByTemplate) };
return { groupBy: groupByFunction(this.groupByTemplate) };
if (this.groupBy) return { groupBy: this.groupBy };
return {};
},
__getGroupHeaderCfg() {
if (this.groupHeader)
return {
groupHeader: (value, count, data, group) =>
renderGroupHeader({
extra: this.groupExtraValues,
groupHeader: this.groupHeader,
value,
count,
data,
group,
}),
};
return {
groupHeader: (value, count, data, group) =>
renderGroupHeader({
extra: this.groupExtraValues,
groupHeader: this.groupHeader,
value,
count,
data,
group,
}),
};
return {};
},
}
@ -189,6 +189,6 @@ export default {
</div>
</div>
<div v-if="pagination">
<Pagination :params="pagination"/>
<Pagination :params="pagination" />
</div>
</template>

166
live_monitor_vue/src/components/2_molecules/VTabulator/VTabulatorPagination.vue
View File

@ -1,5 +1,3 @@
<script>
import {mapGetters, mapMutations, mapActions, useStore} from "vuex"
import { validation } from './helper'
@ -42,7 +40,7 @@ export default {
const options = selectOption ? selectOption : optionsDefault
const currentOptions = options.filter((el) => {
if(el <= Math.ceil(paginationOptions.total / 10) * 10) {
return el
return el
}
})
if(paginationOptions.show_all) {
@ -93,13 +91,13 @@ export default {
return false
}
if(!error) {
e.target.removeAttribute('disabled')
e.target.classList.remove('opacity-50')
const loader = document.querySelector(`#table_loder_${this.params.id}`)
loader.style.display = 'block'
e.target.focus()
const params = {pageNumber: this.inputValue, pageSize: this.params.paginationOptions.page_size}
return this.params.updatePagination(params)
e.target.removeAttribute('disabled')
e.target.classList.remove('opacity-50')
const loader = document.querySelector(`#table_loder_${this.params.id}`)
loader.style.display = 'block'
e.target.focus()
const params = {pageNumber: this.inputValue, pageSize: this.params.paginationOptions.page_size}
return this.params.updatePagination(params)
} else {
e.target.setAttribute('disabled', 'disabled')
e.target.classList.add('opacity-50')
@ -120,61 +118,145 @@ export default {
</script>
<template>
<div class="pagination w-full flex flex-row items-center justify-between gap-3 mt-2 mb-8 xl:mb-0 pb-8 xl:p-2.5 bg-slate-100 border-2 border-solid border-slate-300 rounded-lg flex-col 2xl:flex-row">
<div class="pagination-left flex flex-row gap-1">
<div class="current-entries flex text-sm font-bold">Показаны {{currentEntries(params?.paginationOptions)}}</div>
<div class="count-entries flex text-sm font-bold">(Всего записей - {{params?.paginationOptions?.total}})</div>
<div class="current-entries flex text-sm font-bold">
Показаны {{ currentEntries(params?.paginationOptions) }}
</div>
<div class="count-entries flex text-sm font-bold">
(Всего записей - {{ params?.paginationOptions?.total }})
</div>
</div>
<div class="pagination-right flex flex-col xl:flex-row items-center gap-3">
<div :id="`table_loder_${params.id}`" class="hidden w-full h-auto bg-light flex items-center justify-center px-2"><div type-node="loader" class="flex my_margin-3 items-center justify-center">
<div role="status">
<svg aria-hidden="true" class="mr-2 w-6 h-6 text-gray-400 animate-spin dark:text-gray-400 fill-white" viewBox="0 0 100 101" fill="none" >
<path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
<path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
</svg>
<div
:id="`table_loder_${params.id}`"
class="hidden w-full h-auto bg-light flex items-center justify-center px-2"
>
<div
type-node="loader"
class="flex my_margin-3 items-center justify-center"
>
<div role="status">
<svg
aria-hidden="true"
class="mr-2 w-6 h-6 text-gray-400 animate-spin dark:text-gray-400 fill-white"
viewBox="0 0 100 101"
fill="none"
>
<path
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
fill="currentColor"
/>
<path
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
fill="currentFill"
/>
</svg>
</div>
</div>
</div></div>
</div>
<div class="buttons flex h-fit gap-1 sm:gap-3 text-sm">
<div class="flex gap-1 sm:gap-3" v-if="params.paginationOptions.page_number > 1">
<div
v-if="params.paginationOptions.page_number > 1"
class="flex gap-1 sm:gap-3"
>
<div v-if="params.paginationOptions.page_number - 1 !== 1">
<button :table_btn="`${params.id}`" class="previous flex items-center text-white font-bold bg-slate-600 hover:bg-slate-700 py-1 px-3 gap-2 rounded" @click="setPagination({pageNumber: 1, pageSize: params.paginationOptions.page_size})">
<button
:table_btn="`${params.id}`"
class="previous flex items-center text-white font-bold bg-slate-600 hover:bg-slate-700 py-1 px-3 gap-2 rounded"
@click="setPagination({pageNumber: 1, pageSize: params.paginationOptions.page_size})"
>
<span>1</span>
</button>
</div>
<button :table_btn="`${params.id}`" class="previous flex items-center text-white font-bold bg-slate-600 hover:bg-slate-700 py-1 px-3 gap-2 rounded" @click="setPagination({pageNumber: params.paginationOptions.page_number - 1, pageSize: params.paginationOptions.page_size})">
<span class="hidden sm:flex">Назад</span><i class="ri-arrow-left-line sm:hidden"></i>
<button
:table_btn="`${params.id}`"
class="previous flex items-center text-white font-bold bg-slate-600 hover:bg-slate-700 py-1 px-3 gap-2 rounded"
@click="setPagination({pageNumber: params.paginationOptions.page_number - 1, pageSize: params.paginationOptions.page_size})"
>
<span class="hidden sm:flex">Назад</span><i class="ri-arrow-left-line sm:hidden" />
</button>
<button :table_btn="`${params.id}`" class="previous flex items-center text-white font-bold bg-slate-600 hover:bg-slate-700 py-1 px-3 gap-2 rounded" @click="setPagination({pageNumber: params.paginationOptions.page_number - 1, pageSize: params.paginationOptions.page_size})">
<span>{{params.paginationOptions.page_number - 1}}</span>
<button
:table_btn="`${params.id}`"
class="previous flex items-center text-white font-bold bg-slate-600 hover:bg-slate-700 py-1 px-3 gap-2 rounded"
@click="setPagination({pageNumber: params.paginationOptions.page_number - 1, pageSize: params.paginationOptions.page_size})"
>
<span>{{ params.paginationOptions.page_number - 1 }}</span>
</button>
</div>
<button :table_btn="`${params.id}`" class="active flex items-center text-blue-700 font-bold bg-white py-1 px-3 gap-2 rounded cursor-default">
<span>{{params.paginationOptions.page_number}}</span>
<button
:table_btn="`${params.id}`"
class="active flex items-center text-blue-700 font-bold bg-white py-1 px-3 gap-2 rounded cursor-default"
>
<span>{{ params.paginationOptions.page_number }}</span>
</button>
<div class="flex gap-1 sm:gap-3" v-if="params.paginationOptions.page_number < params.paginationOptions.total_pages">
<button :table_btn="`${params.id}`" class="next flex items-center text-white font-bold bg-slate-600 hover:bg-slate-700 py-1 px-3 gap-2 rounded" @click="setPagination({pageNumber: params.paginationOptions.page_number + 1, pageSize: params.paginationOptions.page_size})">
<span>{{params.paginationOptions.page_number + 1}}</span>
<div
v-if="params.paginationOptions.page_number < params.paginationOptions.total_pages"
class="flex gap-1 sm:gap-3"
>
<button
:table_btn="`${params.id}`"
class="next flex items-center text-white font-bold bg-slate-600 hover:bg-slate-700 py-1 px-3 gap-2 rounded"
@click="setPagination({pageNumber: params.paginationOptions.page_number + 1, pageSize: params.paginationOptions.page_size})"
>
<span>{{ params.paginationOptions.page_number + 1 }}</span>
</button>
<button :table_btn="`${params.id}`" class="next flex items-center text-white font-bold bg-slate-600 hover:bg-slate-700 py-1 px-3 gap-2 rounded" @click="setPagination({pageNumber: params.paginationOptions.page_number + 1, pageSize: params.paginationOptions.page_size})">
<span class="hidden sm:flex">Вперёд</span><i class="ri-arrow-right-line sm:hidden"></i>
<button
:table_btn="`${params.id}`"
class="next flex items-center text-white font-bold bg-slate-600 hover:bg-slate-700 py-1 px-3 gap-2 rounded"
@click="setPagination({pageNumber: params.paginationOptions.page_number + 1, pageSize: params.paginationOptions.page_size})"
>
<span class="hidden sm:flex">Вперёд</span><i class="ri-arrow-right-line sm:hidden" />
</button>
<div v-if="params.paginationOptions.page_number + 1 !== params.paginationOptions.total_pages">
<button :table_btn="`${params.id}`" class="next flex items-center text-white font-bold bg-slate-600 hover:bg-slate-700 py-1 px-3 gap-2 rounded" @click="setPagination({pageNumber: params.paginationOptions.total_pages, pageSize: params.paginationOptions.page_size})">
<span>{{params.paginationOptions.total_pages}}</span>
<button
:table_btn="`${params.id}`"
class="next flex items-center text-white font-bold bg-slate-600 hover:bg-slate-700 py-1 px-3 gap-2 rounded"
@click="setPagination({pageNumber: params.paginationOptions.total_pages, pageSize: params.paginationOptions.page_size})"
>
<span>{{ params.paginationOptions.total_pages }}</span>
</button>
</div>
</div>
</div>
<div class="flex flex-row items-center justify-center gap-2"><input v-on:input="updateInputValue" :class="`page-input-${params.id}`" class="flex max-w-[80px] items-center text-slate-700 text-sm font-bold focus-visible:outline-blue-300 bg-white py-1 px-2 gap-2 rounded" value="" placeholder="Страница"/><button @click="setPaginationButton" disabled :class="`page-button-${params.id}`" class="opacity-50 flex items-center text-white font-bold bg-slate-600 hover:bg-slate-700 py-1 px-1 rounded">Перейти</button></div>
<div id="select-on-page" class="select-on-page flex items-center justify-center gap-3 p-1 text-sm text-slate-700 font-bold">
<div class="flex flex-row items-center justify-center gap-2">
<input
:class="`page-input-${params.id}`"
class="flex max-w-[80px] items-center text-slate-700 text-sm font-bold focus-visible:outline-blue-300 bg-white py-1 px-2 gap-2 rounded"
value=""
placeholder="Страница"
@input="updateInputValue"
><button
disabled
:class="`page-button-${params.id}`"
class="opacity-50 flex items-center text-white font-bold bg-slate-600 hover:bg-slate-700 py-1 px-1 rounded"
@click="setPaginationButton"
>
Перейти
</button>
</div>
<div
id="select-on-page"
class="select-on-page flex items-center justify-center gap-3 p-1 text-sm text-slate-700 font-bold"
>
Показать
<select name="on_page" v-bind:value="params.paginationOptions.page_size" v-on:change="updateSelectedValue" :table_option="`${params.id}`" class="flex text-gray-700 pl-3 pr-9 py-0.5 rounded cursor-pointer border-none" style="--tw-ring-color:focus: none" >
<option :key={idx} v-for="(el, idx) in selectOptions(params.selectOption, params.paginationOptions)" :value="`${el === 'Все' ? params.paginationOptions.total : el}`">
{{ el }}
</option>`
</select>
<select
name="on_page"
:value="params.paginationOptions.page_size"
:table_option="`${params.id}`"
class="flex text-gray-700 pl-3 pr-9 py-0.5 rounded cursor-pointer border-none"
style="--tw-ring-color:focus: none"
@change="updateSelectedValue"
>
<option
v-for="(el, idx) in selectOptions(params.selectOption, params.paginationOptions)"
:key="{idx}"
:value="`${el === 'Все' ? params.paginationOptions.total : el}`"
>
{{ el }}
</option>`
</select>
</div>
</div>
</div>

42
live_monitor_vue/src/components/2_molecules/VTabulator/helper.js
View File

@ -25,18 +25,18 @@ const math = (value, operator, operand, options) => {
var right = parseFloat(operand);
switch(operator) {
case "+":
return left + right;
case "-":
return left - right;
case "*":
return left * right;
case "/":
return left / right;
case "%":
return left % right;
default:
return "";
case "+":
return left + right;
case "-":
return left - right;
case "*":
return left * right;
case "/":
return left / right;
case "%":
return left % right;
default:
return "";
}
}
@ -204,7 +204,7 @@ const render = (col) => ({
if(col.onCell && !record.status) {
console.log('onCell', col.onCell)
cell.getElement().style.backgroundColor = parseFunc(col.onCell)(record)?.style?.backgroundColor
}
}
if (`${col.render}`.includes("{{") && `${col.render}`.includes("}}")) {
let record = cell.getRow().getData();
cell.getElement().innerHTML = Handlebars.compile(col.render)(
@ -278,21 +278,21 @@ const makedFiltering = (id, filterParams, selectedFilter, clearFilters) => {
const table = document.querySelector(`#${id}`)
const isFiltering = document.querySelector(`${id}-filters`)
if(id && filterParams) {
filterParams.unshift([])
const filtersContainer = document.createElement('div')
filtersContainer.setAttribute("id", `${id}-filters`)
filtersContainer.classList.add("col-span-12")
filtersContainer.innerHTML = `
if(id && filterParams) {
filterParams.unshift([])
const filtersContainer = document.createElement('div')
filtersContainer.setAttribute("id", `${id}-filters`)
filtersContainer.classList.add("col-span-12")
filtersContainer.innerHTML = `
<div id="${id}-filtersContainer" class="filters flex flex-row items-center justify-start gap-3 mb-0 pt-2.5 bg-slate-100 rounded-t-md flex-row 2xl:flex-row">
<div id="${id}-selectFilters" class="flex items-center justify-start gap-3 p-1 ml-2 text-base text-slate-700 font-bold">
Фильтр по статусу
<select name="selectFilter" id="${id}-selectFilter" class="flex text-gray-700 pl-3 pr-9 py-0.5 rounded cursor-pointer border-none" style="--tw-ring-color:focus: none" >
${filterParams.map((el) => {
return (`<option value='${el}'>
return (`<option value='${el}'>
${el}
</option>`)
})}
})}
</select>
</div>
<button id="${id}-filtersClear"class="w-fit h-fit flex items-center text-white text-sm font-bold bg-slate-600 hover:bg-slate-700 py-1 px-3 gap-1 rounded">Очистить фильтр</button>

32
live_monitor_vue/src/components/2_molecules/VTabulator/localization.js
View File

@ -6,22 +6,22 @@ const localization = () => ({
},
"pagination":{
"page_size":"Размер таблицы", //label for the page size select element
"page_title":"Показать страницу",//tooltip text for the numeric page button, appears in front of the page number (eg. "Show Page" will result in a tool tip of "Show Page 1" on the page 1 button)
"first":"К первой", //text for the first page button
"first_title":"Показать страницу", //tooltip text for the first page button
"last":"К последней",
"last_title":"Последняя страница",
"prev":"<<",
"prev_title":"<<",
"next":">>",
"next_title":">>",
"all":"Все",
"counter":{
"showing": "Показать",
"of": "из",
"rows": "строки",
"pages": "страницы",
}
"page_title":"Показать страницу",//tooltip text for the numeric page button, appears in front of the page number (eg. "Show Page" will result in a tool tip of "Show Page 1" on the page 1 button)
"first":"К первой", //text for the first page button
"first_title":"Показать страницу", //tooltip text for the first page button
"last":"К последней",
"last_title":"Последняя страница",
"prev":"<<",
"prev_title":"<<",
"next":">>",
"next_title":">>",
"all":"Все",
"counter":{
"showing": "Показать",
"of": "из",
"rows": "строки",
"pages": "страницы",
}
},
},
});

2
live_monitor_vue/src/components/2_molecules/VTabulator/stringFunction.js
View File

@ -401,6 +401,6 @@ let parseFunc2 = (string) => {
const parseFunc3 = (string) => {
const f = new Function(`return (${string})`)
return f()
}
}
export {parseFunc, parseFunc2, parseFunc3}

74
live_monitor_vue/src/components/2_molecules/VTabulator/time_funcs.js
View File

@ -21,7 +21,7 @@ const monthNames = [
];
export const reformateDateString = (date, format = "full") =>
!!date ? reformate(date, format) : null;
date ? reformate(date, format) : null;
const reformate = (date, format) =>
cond([
@ -116,42 +116,42 @@ export const parseSepareteDate = (
if (dateBits[key] < 10) dateBits[key] = `0${dateBits[key]}`;
});
switch (mode) {
case "DateDMY":
return dateBits.day + symbol + dateBits.month + symbol + dateBits.year;
case "DateDM":
return dateBits.day + symbol + dateBits.month;
case "DateYMD":
return dateBits.year + symbol + dateBits.month + symbol + dateBits.day;
case "DateDMYHM":
return `${
dateBits.day + symbol + dateBits.month + symbol + dateBits.year
} ${dateBits.hours}:${dateBits.minutes}`;
case "DateDMYHMS":
return `${
dateBits.day + symbol + dateBits.month + symbol + dateBits.year
} ${dateBits.hours}:${dateBits.minutes}:${dateBits.seconds}`;
case "DateYMDHM":
return `${
dateBits.year + symbol + dateBits.month + symbol + dateBits.day
} ${dateBits.hours}:${dateBits.minutes}`;
case "DateYMDHMS":
return `${
dateBits.year + symbol + dateBits.month + symbol + dateBits.day
} ${dateBits.hours}:${dateBits.minutes}:${dateBits.seconds}`;
case "DateHM":
return `${dateBits.hours}:${dateBits.minutes}`;
case "DateHMDM":
return `${dateBits.hours}:${dateBits.minutes} ${dateBits.day}${symbol}${dateBits.month}`;
case "DateDataBase":
return `${
dateBits.year + symbol + dateBits.month + symbol + dateBits.day
}T${dateBits.hours}:${dateBits.minutes}:${dateBits.seconds}`;
case "DateDataBaseSpace":
return `${
dateBits.year + symbol + dateBits.month + symbol + dateBits.day
} ${dateBits.hours}:${dateBits.minutes}:${dateBits.seconds}`;
default:
return dateBits.day + symbol + dateBits.month + symbol + dateBits.year;
case "DateDMY":
return dateBits.day + symbol + dateBits.month + symbol + dateBits.year;
case "DateDM":
return dateBits.day + symbol + dateBits.month;
case "DateYMD":
return dateBits.year + symbol + dateBits.month + symbol + dateBits.day;
case "DateDMYHM":
return `${
dateBits.day + symbol + dateBits.month + symbol + dateBits.year
} ${dateBits.hours}:${dateBits.minutes}`;
case "DateDMYHMS":
return `${
dateBits.day + symbol + dateBits.month + symbol + dateBits.year
} ${dateBits.hours}:${dateBits.minutes}:${dateBits.seconds}`;
case "DateYMDHM":
return `${
dateBits.year + symbol + dateBits.month + symbol + dateBits.day
} ${dateBits.hours}:${dateBits.minutes}`;
case "DateYMDHMS":
return `${
dateBits.year + symbol + dateBits.month + symbol + dateBits.day
} ${dateBits.hours}:${dateBits.minutes}:${dateBits.seconds}`;
case "DateHM":
return `${dateBits.hours}:${dateBits.minutes}`;
case "DateHMDM":
return `${dateBits.hours}:${dateBits.minutes} ${dateBits.day}${symbol}${dateBits.month}`;
case "DateDataBase":
return `${
dateBits.year + symbol + dateBits.month + symbol + dateBits.day
}T${dateBits.hours}:${dateBits.minutes}:${dateBits.seconds}`;
case "DateDataBaseSpace":
return `${
dateBits.year + symbol + dateBits.month + symbol + dateBits.day
} ${dateBits.hours}:${dateBits.minutes}:${dateBits.seconds}`;
default:
return dateBits.day + symbol + dateBits.month + symbol + dateBits.year;
}
};

270
live_monitor_vue/src/components/3_organisms/PackColumns.js
View File

@ -3,13 +3,13 @@ import { cond, T, isEmpty } from "ramda";
const setPackColumns = (name) => {
switch(name) {
case 'КолонкиПакетов':
return [
{
title: "Пакет на проде",
field: "switch ",
width: 150,
render: `
case 'КолонкиПакетов':
return [
{
title: "Пакет на проде",
field: "switch ",
width: 150,
render: `
<form x-data='{ isProd: {{ isProd }} }' phx-change='update_pack_struct_online:{{ id }}'>
<div class='flex justify-center'>
<div class='form-check form-switch'>
@ -20,17 +20,17 @@ const setPackColumns = (name) => {
</div>
</form>
`
},
{
title: "Название",
field: "name",
width: 180
},
{
title: "Действия",
field: "actions",
width: 100,
render: `
},
{
title: "Название",
field: "name",
width: 180
},
{
title: "Действия",
field: "actions",
width: 100,
render: `
<div class='flex gap-2 py-1'>
<button style='width: 25px; height: 25px;' class='italic border border-solid transition-all duration-300 rounded-full cursor-pointer hover:text-gray-500 linear-loader card-btn-action pt-[2px] text-primary' phx-click='select_struct:{{ id }}' >
<i class='ri-eye-fill'></i>
@ -50,105 +50,105 @@ const setPackColumns = (name) => {
</button>
</div>
`
}
]
case 'Сырые':
return [
{
title: "Время пакета",
field: "pack_dt",
width: 180
},
{
title: "Архивная дата",
field: "arhiv_date",
width: 90
},
{
title: "Номер пакета",
field: "pack_number",
width: 70
},
{
title: "Длинна пакета",
field: "pack_len",
width: 70
},
{
title: "Репл",
field: "id_repl",
width: 70
},
{
title: "IMEI",
field: "imei",
width: 120
},
{
title: "ДАННЫЕ",
field: "data",
width: 600
},
{
title: "Дата начала передачи",
field: "connect_dt",
width: 180
},
{
title: "Дата завершения передачи",
field: "disconnect_dt",
width: 180
}
]
case 'Нераспознанные':
return [
{
title: "Время пакета",
field: "pack_dt",
width: 180
},
{
title: "Архивная дата",
field: "arhiv_date",
width: 90
},
{
title: "Номер пакета",
field: "pack_number",
width: 70
},
{
title: "Длинна пакета",
field: "pack_len",
width: 70
},
{
title: "Репл",
field: "id_repl",
width: 70
},
{
title: "IMEI",
field: "imei",
width: 120
},
{
title: "ДАННЫЕ",
field: "data",
width: 600
},
{
title: "Дата начала передачи",
field: "connect_dt",
width: 180
},
{
title: "Дата завершения передачи",
field: "disconnect_dt",
width: 180
}
]
default: return []
}
]
case 'Сырые':
return [
{
title: "Время пакета",
field: "pack_dt",
width: 180
},
{
title: "Архивная дата",
field: "arhiv_date",
width: 90
},
{
title: "Номер пакета",
field: "pack_number",
width: 70
},
{
title: "Длинна пакета",
field: "pack_len",
width: 70
},
{
title: "Репл",
field: "id_repl",
width: 70
},
{
title: "IMEI",
field: "imei",
width: 120
},
{
title: "ДАННЫЕ",
field: "data",
width: 600
},
{
title: "Дата начала передачи",
field: "connect_dt",
width: 180
},
{
title: "Дата завершения передачи",
field: "disconnect_dt",
width: 180
}
]
case 'Нераспознанные':
return [
{
title: "Время пакета",
field: "pack_dt",
width: 180
},
{
title: "Архивная дата",
field: "arhiv_date",
width: 90
},
{
title: "Номер пакета",
field: "pack_number",
width: 70
},
{
title: "Длинна пакета",
field: "pack_len",
width: 70
},
{
title: "Репл",
field: "id_repl",
width: 70
},
{
title: "IMEI",
field: "imei",
width: 120
},
{
title: "ДАННЫЕ",
field: "data",
width: 600
},
{
title: "Дата начала передачи",
field: "connect_dt",
width: 180
},
{
title: "Дата завершения передачи",
field: "disconnect_dt",
width: 180
}
]
default: return []
}
}
@ -156,18 +156,18 @@ const prepareSetPackColumns = (name, data) => {
console.log('prepareSetPackColumns data', data);
console.log('prepareSetPackColumns name', name);
switch(name) {
case 'askr_logs':
if (data.length > 0) {
return data[0].map((el) => ({title: Object.keys(el)[0], field: Object.keys(el)[0], width: 150}))
}
if (data.length === 0) {
return []
}
case 'raw':
return setPackColumns('Сырые')
case 'unrecognized':
return setPackColumns('Нераспознанные')
default: return []
case 'askr_logs':
if (data.length > 0) {
return data[0].map((el) => ({title: Object.keys(el)[0], field: Object.keys(el)[0], width: 150}))
}
if (data.length === 0) {
return []
}
case 'raw':
return setPackColumns('Сырые')
case 'unrecognized':
return setPackColumns('Нераспознанные')
default: return []
}
}
@ -206,12 +206,12 @@ const parseCols = (packStructure, report) => {
const fetchColumn = (packStructure, report, id = null) => {
console.log('packStructure', packStructure)
console.log('id', id)
const getCurrentPackColls = (packStructure, id) => {
const currentPackStructure = packStructure.find((el) => el.id === id)
console.log('currentPackStructure', currentPackStructure)
const currColumns = currentPackStructure.columns ? currentPackStructure.columns : []
return parseCols(currColumns, null)
}
const getCurrentPackColls = (packStructure, id) => {
const currentPackStructure = packStructure.find((el) => el.id === id)
console.log('currentPackStructure', currentPackStructure)
const currColumns = currentPackStructure.columns ? currentPackStructure.columns : []
return parseCols(currColumns, null)
}
return cond([
[(packStructure) => !packStructure === true, () => parseCols(null, report)],
[(packStructure) => (packStructure?.length >= 1) && (id && typeof id === 'number'), () => getCurrentPackColls(packStructure, id)],

30
live_monitor_vue/src/components/3_organisms/PackView/Button.vue
View File

@ -1,5 +1,3 @@
<script>
import {mapGetters, mapMutations, mapActions, useStore} from "vuex"
@ -44,14 +42,30 @@ export default {
</script>
<template>
{{ console.log('selectedPackMode', selectedPackMode)
}}
<button @click="updateModePack(mode)" v-bind:key="idx" type="button" class="w-full">
<input name="switchTableMode" type="radio" :id="name" :value="name" :checked="active" class="hidden peer" required="">
<label :for="name" :class="labelClass" class="transition-all w-full border-slate-600 w-full block cursor-pointer py-1 text-ssm sm:text-sm hover:bg-slate-700 hover:text-white text-slate-600 border-slate-600
peer-checked:bg-slate-600 peer-checked:text-white">
}}
<button
:key="idx"
type="button"
class="w-full"
@click="updateModePack(mode)"
>
<input
:id="name"
name="switchTableMode"
type="radio"
:value="name"
:checked="active"
class="hidden peer"
required=""
>
<label
:for="name"
:class="labelClass"
class="transition-all w-full border-slate-600 w-full block cursor-pointer py-1 text-ssm sm:text-sm hover:bg-slate-700 hover:text-white text-slate-600 border-slate-600
peer-checked:bg-slate-600 peer-checked:text-white"
>
{{ inner }}
</label>
</button>

93
live_monitor_vue/src/components/3_organisms/PackView/index.vue
View File

@ -1,5 +1,3 @@
<script>
import {mapGetters, mapMutations, mapActions, useStore} from "vuex"
import PackViewButton from './Button.vue'
@ -24,11 +22,6 @@ export default {
default: ""
},
},
data () {
return {
hasData: false
}
},
setup (props, {slots}) {
const hasDescription = slots.description != undefined
const hasError = slots.error != undefined
@ -38,6 +31,11 @@ export default {
hasError
}
},
data () {
return {
hasData: false
}
},
updated () {
this.$nextTick(function () {
if (!isEmpty(this.packData)) {
@ -66,26 +64,42 @@ export default {
</script>
<template>
<div class="w-full relative">
{{
console.log('packData', packData)
}}
<div v-if="!hasData" class="w-full h-[50px] rounded-xl bg-slate-200 hidden" :id="`${id}_loader`">
<Spinner/>
console.log('packData', packData)
}}
<div
v-if="!hasData"
:id="`${id}_loader`"
class="w-full h-[50px] rounded-xl bg-slate-200 hidden"
>
<Spinner />
</div>
<div v-if="hasData" :id="id" class="w-full rounded-md bg-light border-rounded p-4">
<div
v-if="hasData"
:id="id"
class="w-full rounded-md bg-light border-rounded p-4"
>
<div class="grid grid-cols-12 mb-6">
<div class="flex flex-col gap-1 col-span-12 sm:col-span-4 md:col-span-5 lg:col-span-5 2xl:col-span-7 sm:mb-0">
<h2 :id="`${id}_pack_name`" class=" text-lg">Пакет: <span v-if="selectPackStructs" >{{selectPackStructs[0]?.packNumber}}</span></h2>
<div v-if="hasDescription" class="text-xs text-slate-500">
<slot name="description" />
<h2
:id="`${id}_pack_name`"
class=" text-lg"
>
Пакет: <span v-if="selectPackStructs">{{ selectPackStructs[0]?.packNumber }}</span>
</h2>
<div
v-if="hasDescription"
class="text-xs text-slate-500"
>
<slot name="description" />
</div>
</div>
<!-- <form phx-change="c_packs_mode:on_click" :id="`${id}_table_active`" class="col-span-12 sm:col-span-8 md:col-span-7 lg:col-span-7 2xl:col-span-5 flex justify-center hidden"> -->
<div class="col-span-12 sm:col-span-8 md:col-span-7 lg:col-span-7 2xl:col-span-5 flex justify-center">
<PackViewButton v-for="(button, idx) in buttonsData"
<PackViewButton
v-for="(button, idx) in buttonsData"
:idx="idx"
:mode="button.mode"
:name="button.name"
@ -96,24 +110,53 @@ export default {
</div>
<!-- </form> -->
</div>
<div class="relative" :id="id">
<div id="selectStructContainer" class="flex gap-2 items-center mb-2">
<div
:id="id"
class="relative"
>
<div
id="selectStructContainer"
class="flex gap-2 items-center mb-2"
>
<span>Выберите структуру:</span>
<select v-if="selectPackStructs" id="selectStruct" name="struct" v-bind:value="selectedPackStruct.id" v-on:change="updateSelectedValue" class=" w-fit bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block py-1 pl-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" style="--tw-ring-color:focus: none" >
<option :key={idx} v-for="(el, idx) in selectPackStructs" :value="el.id">
<select
v-if="selectPackStructs"
id="selectStruct"
name="struct"
:value="selectedPackStruct.id"
class=" w-fit bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block py-1 pl-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
style="--tw-ring-color:focus: none"
@change="updateSelectedValue"
>
<option
v-for="(el, idx) in selectPackStructs"
:key="{idx}"
:value="el.id"
>
{{ el.name }}
</option>
</select>
</div>
<div :id="`${id}_report`" class="tab-pane active bg-light relative shadow text-center min-h-[300px] relative rounded-md w-full relative">
<div
:id="`${id}_report`"
class="tab-pane active bg-light relative shadow text-center min-h-[300px] relative rounded-md w-full relative"
>
<Tabulator v-bind="packData" />
<div v-if="isLoader" class="w-full h-[50px] rounded-xl bg-slate-200 hidden" :id="`${id}_loader`">
<Spinner/>
<div
v-if="isLoader"
:id="`${id}_loader`"
class="w-full h-[50px] rounded-xl bg-slate-200 hidden"
>
<Spinner />
</div>
</div>
</div>
</div>
<div v-if="hasError" :id="`${id}_error`" class="w-full rounded-md bg-light border-rounded p-4 flex flex-col gap-5 items-center justify-center hidden">
<div
v-if="hasError"
:id="`${id}_error`"
class="w-full rounded-md bg-light border-rounded p-4 flex flex-col gap-5 items-center justify-center hidden"
>
<slot name="error" />
</div>
</div>

30
live_monitor_vue/src/components/5_pages/404/Car.vue
View File

@ -1,3 +1,18 @@
<script>
export default {
name: 'App',
components: {},
data() {
},
computed: {
},
methods: {
}
}
</script>
<template>
<svg
width="1008"
@ -965,18 +980,3 @@
</defs>
</svg>
</template>
<script>
export default {
name: 'App',
components: {},
data() {
},
computed: {
},
methods: {
}
}
</script>

30
live_monitor_vue/src/components/5_pages/404/index.vue
View File

@ -1,3 +1,18 @@
<script>
export default {
name: 'App',
components: {},
data() {
},
computed: {
},
methods: {
}
}
</script>
<template>
<div class="hidden 2xl:flex w-full h-[100vh] overflow-hidden bg-white">
<div class="h-full overflow-hidden flex flex-col justify-between translate-y-1">
@ -32,21 +47,6 @@
</div>
</template>
<script>
export default {
name: 'App',
components: {},
data() {
},
computed: {
},
methods: {
}
}
</script>
<style scoped>

12
live_monitor_vue/src/components/5_pages/Communication/index.vue
View File

@ -1,9 +1,3 @@
<template>
<div>
123
</div>
</template>
<script>
export default {
@ -18,3 +12,9 @@ export default {
}
</script>
<template>
<div>
123
</div>
</template>

54
live_monitor_vue/src/components/5_pages/Cron/Task.vue
View File

@ -1,3 +1,30 @@
<script>
import TaskModal from './TaskModal.vue'
import TaskHistory from './TaskHistory.vue'
import ButtonModal from '@molecules/ButtonModal/ButtonModal.vue'
export default {
name: 'Task',
components: {
TaskModal,
TaskHistory
},
props: {
index: {
default: 0,
type: Number
}
},
data() {
},
computed: {
},
methods: {
}
}
</script>
<template>
<div class="flex justify-between w-full border border-slate-300 p-1 flex-col md:flex-row hover:bg-slate-300 hover:border-slate-600 transition-all">
<div class="flex gap-1 items-center">
@ -67,30 +94,3 @@
</div>
</div>
</template>
<script>
import TaskModal from './TaskModal.vue'
import TaskHistory from './TaskHistory.vue'
import ButtonModal from '@molecules/ButtonModal/ButtonModal.vue'
export default {
name: 'Task',
components: {
TaskModal,
TaskHistory
},
props: {
index: {
default: 0,
type: Number
}
},
data() {
},
computed: {
},
methods: {
}
}
</script>

66
live_monitor_vue/src/components/5_pages/Cron/TaskHistory.vue
View File

@ -1,3 +1,36 @@
<script>
import ButtonModal from '@molecules/ButtonModal/ButtonModal.vue'
import {data} from './historyData'
export default {
name: 'TaskHistory',
components: {
ButtonModal,
},
props: {
taskId: {
default: "",
type: String
}
},
data() {
return {
task: "",
task_description: "",
task_name: ""
}
},
computed: {
},
methods: {
onToggle: ({isOpen}) => {
console.log(isOpen)
}
}
}
</script>
<template>
<ButtonModal
forcedBtnClass=" "
@ -12,36 +45,3 @@
1234
</ButtonModal>
</template>
<script>
import ButtonModal from '@molecules/ButtonModal/ButtonModal.vue'
import {data} from './historyData'
export default {
name: 'TaskHistory',
components: {
ButtonModal,
},
props: {
taskId: {
default: "",
type: String
}
},
data() {
return {
task: "",
task_description: "",
task_name: ""
}
},
computed: {
},
methods: {
onToggle: ({isOpen}) => {
console.log(isOpen)
}
}
}
</script>

72
live_monitor_vue/src/components/5_pages/Cron/TaskModal.vue
View File

@ -1,3 +1,39 @@
<script>
import ButtonModal from '@molecules/ButtonModal/ButtonModal.vue'
import Datepicker from "@molecules/VDatepicker/VDatepicker.vue"
import { FwbTextarea } from 'flowbite-vue'
export default {
name: 'TaskModal',
components: {
Datepicker,
ButtonModal,
FwbTextarea
},
props: {
taskId: {
default: "",
type: String
}
},
data() {
return {
task: "",
task_description: "",
task_name: ""
}
},
computed: {
},
methods: {
onToggle: ({isOpen}) => {
console.log(isOpen)
}
}
}
</script>
<template>
<ButtonModal
forcedBtnClass=" "
@ -218,39 +254,3 @@
</form>
</ButtonModal>
</template>
<script>
import ButtonModal from '@molecules/ButtonModal/ButtonModal.vue'
import Datepicker from "@molecules/VDatepicker/VDatepicker.vue"
import { FwbTextarea } from 'flowbite-vue'
export default {
name: 'TaskModal',
components: {
Datepicker,
ButtonModal,
FwbTextarea
},
props: {
taskId: {
default: "",
type: String
}
},
data() {
return {
task: "",
task_description: "",
task_name: ""
}
},
computed: {
},
methods: {
onToggle: ({isOpen}) => {
console.log(isOpen)
}
}
}
</script>

4248
live_monitor_vue/src/components/5_pages/Cron/historyData.js
View File

File diff suppressed because it is too large Load Diff

48
live_monitor_vue/src/components/5_pages/Cron/index.vue
View File

@ -1,3 +1,27 @@
<script>
import { defineAsyncComponent } from 'vue'
import Task from './Task.vue'
import TaskModal from './TaskModal.vue'
export default {
name: 'Cron',
components: {
Task,
TaskModal,
},
data() {
},
computed: {
tasks () {
return [1,2,3,4]
}
},
methods: {
}
}
</script>
<template>
<div class="flex flex-col gap-3 bg-light h-full w-full col-span-12 rounded-xl p-2">
<TaskModal taskId="new">
@ -135,27 +159,3 @@
</div>
</div>
</template>
<script>
import { defineAsyncComponent } from 'vue'
import Task from './Task.vue'
import TaskModal from './TaskModal.vue'
export default {
name: 'Cron',
components: {
Task,
TaskModal,
},
data() {
},
computed: {
tasks () {
return [1,2,3,4]
}
},
methods: {
}
}
</script>

12
live_monitor_vue/src/components/5_pages/Devices/index.vue
View File

@ -1,9 +1,3 @@
<template>
<div>
123
</div>
</template>
<script>
export default {
@ -18,3 +12,9 @@ export default {
}
</script>
<template>
<div>
123
</div>
</template>

12
live_monitor_vue/src/components/5_pages/FileLogs/index.vue
View File

@ -1,9 +1,3 @@
<template>
<div>
123
</div>
</template>
<script>
export default {
@ -18,3 +12,9 @@ export default {
}
</script>
<template>
<div>
123
</div>
</template>

12
live_monitor_vue/src/components/5_pages/FileViewer/index.vue
View File

@ -1,9 +1,3 @@
<template>
<div>
123
</div>
</template>
<script>
export default {
@ -18,3 +12,9 @@ export default {
}
</script>
<template>
<div>
123
</div>
</template>

12
live_monitor_vue/src/components/5_pages/FilesLogs/index.vue
View File

@ -1,9 +1,3 @@
<template>
<div>
123
</div>
</template>
<script>
export default {
@ -18,3 +12,9 @@ export default {
}
</script>
<template>
<div>
123
</div>
</template>

12
live_monitor_vue/src/components/5_pages/FreePacks/index.vue
View File

@ -1,9 +1,3 @@
<template>
<div>
123
</div>
</template>
<script>
export default {
@ -18,3 +12,9 @@ export default {
}
</script>
<template>
<div>
123
</div>
</template>

12
live_monitor_vue/src/components/5_pages/Fuel/index.vue
View File

@ -1,9 +1,3 @@
<template>
<div>
123
</div>
</template>
<script>
export default {
@ -18,3 +12,9 @@ export default {
}
</script>
<template>
<div>
123
</div>
</template>

12
live_monitor_vue/src/components/5_pages/ICCID/index.vue
View File

@ -1,9 +1,3 @@
<template>
<div>
123
</div>
</template>
<script>
export default {
@ -18,3 +12,9 @@ export default {
}
</script>
<template>
<div>
123
</div>
</template>

156
live_monitor_vue/src/components/5_pages/LastPacksNum/index.vue
View File

@ -1,81 +1,3 @@
<template>
<div class="grid grid-cols-12 gap-6 col-span-12 h-full">
<form
class="rounded-md bg-light px-4 pt-4 pb-6 gap-2 shadow lg:col-span-4 xl:col-span-3 2xl:col-span-2 col-span-12"
autocomplete="off"
>
<h1 class="font-medium leading-tight text-xl mb-4 text-slate-600">
Последние пакеты
</h1>
<div class="grid gap-3 mb-3 ">
<div class="relative ">
<label
for="imei"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300 text-left "
>
Номер пакета
</label>
<input
id="selected_imei"
required=""
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full py-1 pl-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 "
placeholder="Номер пакета"
name="imei"
type="text"
autocomplete="off"
:value="imei"
@input="(e) => setImei(e.target.value)"
>
</div>
</div>
<div class="grid gap-3 grid-cols-4">
<button
type="button"
class="col-span-4 lg:col-span-4 cursor-pointer text-white bg-primary hover:brightness-90 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-ssm w-full sm:w-auto px-5 py-1 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 transition_up"
@click="uploadData"
>
Выгрузить
</button>
<ButtonModal btnClass="cursor-pointer col-span-4 bg-transparent hover:bg-primary text-primary font-semibold hover:text-white py-1 text-ssm px-4 border border-primary hover:border-transparent rounded-lg text-center transition_up">
<template #button>
<div id="question">
<i class="ri-question-mark" />
</div>
</template>
<div class="overflow-auto min-w-[70vw] h-[70vh] pt-10 px-4">
<div style="display: flex; flex-direction: column; gap: 1rem;">
<span style="font-size: 1.1em; font-weight: bold;">Страница предназначена для получения сведений о последних полученных пакетах, в результате выдающая список машин, которые имели данный пакет за 3х месячный период (иначе запрос становится слишком долгим)<br></span><span style="border-left: 5px solid rgba(0, 0, 0, 0.45); padding: 10px 5px;"><span style="font-weight: bold;">Работа со страницей</span><br><span>Поля выбора находятся на странице. Чтобы загразить данные необходимо -<ol style="font-size: 0.9em; margin-bottom: 0px;"><li>1. ввести номер пакета</li><li>2. нажать на кнопку 'загрузить' и дождаться загрузки</li></ol></span></span>
</div>
</div>
</ButtonModal>
</div>
</form>
<div class="lg:col-span-8 xl:col-span-9 2xl:col-span-10 col-span-12 bg-light shadow">
<div
v-if="pageState == 'await'"
id="report_packs"
class="tab-pane active relative text-center min-h-[300px] relative rounded-md "
>
<span> Выберите машину и нажмите выгрузить</span>
</div>
<div
v-if="pageState == 'loading'"
id="report_packs"
class="tab-pane active relative text-center min-h-[300px] relative rounded-md w-full h-full flex items-center justify-center"
>
<Spinner />
</div>
<div
v-if="pageState == 'isLoaded'"
id="report_packs"
class="tab-pane active relative text-center min-h-[300px] relative rounded-md "
>
<Tabulator v-bind="tabulatorOtps" />
</div>
</div>
</div>
</template>
<script>
import ButtonModal from '@molecules/ButtonModal/ButtonModal.vue'
import {mapGetters, mapMutations, mapActions} from 'vuex'
@ -168,3 +90,81 @@ export default {
}
}
</script>
<template>
<div class="grid grid-cols-12 gap-6 col-span-12 h-full">
<form
class="rounded-md bg-light px-4 pt-4 pb-6 gap-2 shadow lg:col-span-4 xl:col-span-3 2xl:col-span-2 col-span-12"
autocomplete="off"
>
<h1 class="font-medium leading-tight text-xl mb-4 text-slate-600">
Последние пакеты
</h1>
<div class="grid gap-3 mb-3 ">
<div class="relative ">
<label
for="imei"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300 text-left "
>
Номер пакета
</label>
<input
id="selected_imei"
required=""
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full py-1 pl-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 "
placeholder="Номер пакета"
name="imei"
type="text"
autocomplete="off"
:value="imei"
@input="(e) => setImei(e.target.value)"
>
</div>
</div>
<div class="grid gap-3 grid-cols-4">
<button
type="button"
class="col-span-4 lg:col-span-4 cursor-pointer text-white bg-primary hover:brightness-90 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-ssm w-full sm:w-auto px-5 py-1 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 transition_up"
@click="uploadData"
>
Выгрузить
</button>
<ButtonModal btnClass="cursor-pointer col-span-4 bg-transparent hover:bg-primary text-primary font-semibold hover:text-white py-1 text-ssm px-4 border border-primary hover:border-transparent rounded-lg text-center transition_up">
<template #button>
<div id="question">
<i class="ri-question-mark" />
</div>
</template>
<div class="overflow-auto min-w-[70vw] h-[70vh] pt-10 px-4">
<div style="display: flex; flex-direction: column; gap: 1rem;">
<span style="font-size: 1.1em; font-weight: bold;">Страница предназначена для получения сведений о последних полученных пакетах, в результате выдающая список машин, которые имели данный пакет за 3х месячный период (иначе запрос становится слишком долгим)<br></span><span style="border-left: 5px solid rgba(0, 0, 0, 0.45); padding: 10px 5px;"><span style="font-weight: bold;">Работа со страницей</span><br><span>Поля выбора находятся на странице. Чтобы загразить данные необходимо -<ol style="font-size: 0.9em; margin-bottom: 0px;"><li>1. ввести номер пакета</li><li>2. нажать на кнопку 'загрузить' и дождаться загрузки</li></ol></span></span>
</div>
</div>
</ButtonModal>
</div>
</form>
<div class="lg:col-span-8 xl:col-span-9 2xl:col-span-10 col-span-12 bg-light shadow">
<div
v-if="pageState == 'await'"
id="report_packs"
class="tab-pane active relative text-center min-h-[300px] relative rounded-md "
>
<span> Выберите машину и нажмите выгрузить</span>
</div>
<div
v-if="pageState == 'loading'"
id="report_packs"
class="tab-pane active relative text-center min-h-[300px] relative rounded-md w-full h-full flex items-center justify-center"
>
<Spinner />
</div>
<div
v-if="pageState == 'isLoaded'"
id="report_packs"
class="tab-pane active relative text-center min-h-[300px] relative rounded-md "
>
<Tabulator v-bind="tabulatorOtps" />
</div>
</div>
</div>
</template>

13
live_monitor_vue/src/components/5_pages/Main/AddUsers/AddUsers.vue
View File

@ -32,17 +32,22 @@ export default {
</script>
<template>
{{ console.log('adminData', adminData)
}}
}}
<div class="rounded w-full pt-4 pb-1 bg-light cursor-pointer transition-all">
<div class="mx-2 mb-3">
<a :href="`/html/admin/manage/new?prev_page=/\?page_display_mode=users`">
<Button title="Создать" classBtn="cursor-pointer text-white bg-primary hover:brightness-90 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-ssm w-full px-5 py-1 text-center transition-all " />
<Button
title="Создать"
classBtn="cursor-pointer text-white bg-primary hover:brightness-90 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-ssm w-full px-5 py-1 text-center transition-all "
/>
</a>
</div>
<div id="admin_list" class="tab-pane m-4 active bg-light relative col-span-12 text-center min-h-[300px] rounded-md tabulator">
<div
id="admin_list"
class="tab-pane m-4 active bg-light relative col-span-12 text-center min-h-[300px] rounded-md tabulator"
>
<Tabulator v-bind="adminData" />
</div>
</div>

89
live_monitor_vue/src/components/5_pages/Main/FinderPacks/FinderPacks.vue
View File

@ -42,54 +42,103 @@ export default {
</script>
<template>
<div class="rounded w-full transition-all min-h-[500px] relative">
<div v-if="!packsGroups" id="dataLoader" class="h-full absolute inset-0 flex flex-row items-center grow transition items-center justify-center bg-light appear_from_opacity-3 z-30 rounded p-2">
<Spinner style="padding: 0"/>
<div
v-if="!packsGroups"
id="dataLoader"
class="h-full absolute inset-0 flex flex-row items-center grow transition items-center justify-center bg-light appear_from_opacity-3 z-30 rounded p-2"
>
<Spinner style="padding: 0" />
</div>
<div v-if="packsGroups" phx-change="update_pack_filter" class="p-5 flex flex-col gap-4 bg-light relative items-center">
<div id="searchInput" class="w-full flex flex-col gap-2" >
<div class="font-bold">Поиск (название и номер): </div>
<input v-bind:value="searchValue" v-on:change="updateSearchValue" :status="status" class="pl-2 py-1 rounded-r-md w-full max-h-[29px] text-sm border-none focus-visible:outline-blue-300" placeholder="Название и номер через пробел"/>
<div
v-if="packsGroups"
phx-change="update_pack_filter"
class="p-5 flex flex-col gap-4 bg-light relative items-center"
>
<div
id="searchInput"
class="w-full flex flex-col gap-2"
>
<div class="font-bold">
Поиск (название и номер):
</div>
<input
:value="searchValue"
:status="status"
class="pl-2 py-1 rounded-r-md w-full max-h-[29px] text-sm border-none focus-visible:outline-blue-300"
placeholder="Название и номер через пробел"
@change="updateSearchValue"
>
</div>
<div class="border-2 rounded-lg w-full bottom-0"></div>
<div class="border-2 rounded-lg w-full bottom-0" />
</div>
<div v-if="packsGroups?.length === 0" id="no_data" class="w-full min-h-[80vh] bg-light dark:bg-slate-900 dark:text-slate-300 relative">
<div class="flex items-center justify-center text-lg font-bold pt-5">Пакеты не найдены</div>
<div
v-if="packsGroups?.length === 0"
id="no_data"
class="w-full min-h-[80vh] bg-light dark:bg-slate-900 dark:text-slate-300 relative"
>
<div class="flex items-center justify-center text-lg font-bold pt-5">
Пакеты не найдены
</div>
</div>
<div class="bg-light">
<div v-if="packsGroups?.length > 0" class="grid grid-cols-12 gap-3 p-4">
<div :key="idx" v-for="(group, idx) in packsGroups" class="col-span-12 sm:col-span-6 lg:col-span-4">
<Accordion :isOpen="isOpen" :id="`pack_group_${group.pack_group_id}`">
<div
v-if="packsGroups?.length > 0"
class="grid grid-cols-12 gap-3 p-4"
>
<div
v-for="(group, idx) in packsGroups"
:key="idx"
class="col-span-12 sm:col-span-6 lg:col-span-4"
>
<Accordion
:id="`pack_group_${group.pack_group_id}`"
:isOpen="isOpen"
>
<template #header>
<div v-if="group.order_index" id="packsInfoTitle" class="font-bold text-sm">
<div
v-if="group.order_index"
id="packsInfoTitle"
class="font-bold text-sm"
>
<span class="text-slate-500 font-bold">
{{ group.order_index }}.
</span>
<span class="font-bold">
{{ group.title }}
</span></div>
</span>
</div>
</template>
<template #body>
<div class="flex flex-col gap-2">
<table >
<table>
<thead>
<tr>
<th class="items-center justify-center pb-2">Название</th>
<th class="items-center justify-center pb-2">
Название
</th>
</tr>
</thead>
<tbody>
<tr v-for="struct in group.pack_structs" >
<tr v-for="struct in group.pack_structs">
<td class="items-center justify-center py-2">
<div class="flex gap-2 w-full">
<div class="w-full text-left decoration-dashed cursor-pointer hover:text-slate-800 transition-all">
{{ struct.name }}
</div>
<a class="bg-slate-500 hover:bg-slate-700 text-white text-xs font-bold py-1 px-3 rounded transition-all h-fit" target="_blank" :href="`/html/packs/${group.link}?pack=${struct.name}`">
<a
class="bg-slate-500 hover:bg-slate-700 text-white text-xs font-bold py-1 px-3 rounded transition-all h-fit"
target="_blank"
:href="`/html/packs/${group.link}?pack=${struct.name}`"
>
таблица
</a>
<a class="bg-slate-500 hover:bg-slate-700 text-white text-xs font-bold py-1 px-3 rounded transition-all h-fit" target="_blank" :href="`/admin_panel/packs/${group.pack_group_id}/${struct.id}`">карточка</a>
<a
class="bg-slate-500 hover:bg-slate-700 text-white text-xs font-bold py-1 px-3 rounded transition-all h-fit"
target="_blank"
:href="`/admin_panel/packs/${group.pack_group_id}/${struct.id}`"
>карточка</a>
</div>
</td>
</tr>

80
live_monitor_vue/src/components/5_pages/Main/Machines/Charts.vue
View File

@ -1,5 +1,3 @@
<script>
import {ref, toRaw, computed} from 'vue'
import {mapGetters, mapMutations, mapActions, useStore} from "vuex";
@ -16,6 +14,11 @@ export default {
Chart,
DoubleSwitch
},
provide() {
return {
isChecked: computed(() => this.isChartTypes),
}
},
setup() {
const route = useRoute()
const path = computed(() => route.path)
@ -31,11 +34,6 @@ export default {
isChartTypes: this.isChartTypesUrl,
}
},
provide() {
return {
isChecked: computed(() => this.isChartTypes),
}
},
watch: {
activeChartData: {
handler(newValue, oldValue) {
@ -90,13 +88,13 @@ export default {
},
setTypeFunc: function(type, chart, data) {
switch(type) {
case 'pie': return chart.makePieCharts({...data, type: type})
case 'mount': return chart.makeBarMountCharts({...data, type: type, height: this.height})
case 'mainMl': return chart.makeBarCharts({...data, type: type})
case 'default': return chart.makeBarTypesCharts({...data, type: type})
case 'types': return chart.makeBarTypesCharts({...data, type: type})
case 'without_first_layout': return chart.makeBarTypesCharts({...data, type: type})
case 'ml': return chart.makeBarTypesCharts({...data, type: type})
case 'pie': return chart.makePieCharts({...data, type: type})
case 'mount': return chart.makeBarMountCharts({...data, type: type, height: this.height})
case 'mainMl': return chart.makeBarCharts({...data, type: type})
case 'default': return chart.makeBarTypesCharts({...data, type: type})
case 'types': return chart.makeBarTypesCharts({...data, type: type})
case 'without_first_layout': return chart.makeBarTypesCharts({...data, type: type})
case 'ml': return chart.makeBarTypesCharts({...data, type: type})
}
}
}
@ -105,25 +103,53 @@ export default {
</script>
<template>
<div class="px-2 sm:px-5 pt-1 bg-light">
<div class="relative">
<div class="doubleSwitch flex justify-end mt-3 mb-2">
<DoubleSwitch name="chartsView" @switched="onToggleCharts" firstColor="#8b5cf6" secondColor="#2563eb" firstTitle="Общий вид" secondTitle="По типам" />
<div class="relative">
<div class="doubleSwitch flex justify-end mt-3 mb-2">
<DoubleSwitch
name="chartsView"
firstColor="#8b5cf6"
secondColor="#2563eb"
firstTitle="Общий вид"
secondTitle="По типам"
@switched="onToggleCharts"
/>
</div>
<div
v-if="!isChartTypes"
id="main"
class="relative flex flex-wrap justify-center w-full h-full mb-3"
>
<div v-for="(chart, idx) in chartsData.main">
<Chart
:id="chart.id"
:idx="idx"
:type="chart.type"
:height="chart.height"
:maxHeight="chart.maxHeight"
:data="chart.data"
/>
</div>
<div v-if="!isChartTypes" id="main" class="relative flex flex-wrap justify-center w-full h-full mb-3" >
<div v-for="(chart, idx) in chartsData.main">
<Chart :idx="idx" :id="chart.id" :type="chart.type" :height="chart.height" :maxHeight="chart.maxHeight" :data="chart.data"/>
</div>
</div>
<div v-if="isChartTypes" id="types" class="relative flex flex-wrap justify-center w-full h-full mb-3" >
<div v-for="(chart, idx) in chartsData.types">
<Chart :idx="idx" :id="chart.id" :type="chart.type" :height="chart.height" :maxHeight="chart.maxHeight" :data="chart.data"/>
</div>
</div>
<div
v-if="isChartTypes"
id="types"
class="relative flex flex-wrap justify-center w-full h-full mb-3"
>
<div v-for="(chart, idx) in chartsData.types">
<Chart
:id="chart.id"
:idx="idx"
:type="chart.type"
:height="chart.height"
:maxHeight="chart.maxHeight"
:data="chart.data"
/>
</div>
</div>
</div>
</div>
</template>
<style src="vue-multiselect/dist/vue-multiselect.css"></style>

131
live_monitor_vue/src/components/5_pages/Main/Machines/DataModal/DataModal.vue
View File

@ -1,5 +1,3 @@
<script>
import {mapGetters, mapMutations, mapActions, useStore} from "vuex"
import Modal from '@molecules/VModal/VModal.vue'
@ -70,7 +68,6 @@ export default {
</script>
<template>
<Modal
v-if="open"
@ -81,38 +78,87 @@ export default {
Последние данные
</div>
{{ console.log('reportPacks', reportPacks)
}}
<div :id="id" class="w-[95vw] h-[85vh] m-auto p-5">
<div v-if="!machineInfo" id="dataLoader" class=" h-full flex justify-center items-center">
<Spinner style="padding: 0"/>
}}
<div
:id="id"
class="w-[95vw] h-[85vh] m-auto p-5"
>
<div
v-if="!machineInfo"
id="dataLoader"
class=" h-full flex justify-center items-center"
>
<Spinner style="padding: 0" />
</div>
<div v-if="machineInfo" class="w-full flex flex-col gap-5">
<div
v-if="machineInfo"
class="w-full flex flex-col gap-5"
>
<div class="w-full">
<Accordion id="machineInfo">
<template #header>
<div v-if="machineInfo?.machine_name" id="machineInfoTitle" class="font-bold text-xl">{{ machineInfo.machine_name }}</div>
<div
v-if="machineInfo?.machine_name"
id="machineInfoTitle"
class="font-bold text-xl"
>
{{ machineInfo.machine_name }}
</div>
</template>
<template #body>
<div v-if="machineInfo.machine_info?.length > 0" id="machineInfoBody" class="flex w-full justify-start 2xl:justify-between gap-3 flex-wrap">
<div
v-if="machineInfo.machine_info?.length > 0"
id="machineInfoBody"
class="flex w-full justify-start 2xl:justify-between gap-3 flex-wrap"
>
<div class="flex p-4">
<div class="flex mr-8 flex-col bg-slate-200 p-3 rounded">
<h2 clas="font-bold flex items-center"><i class="ri-flashlight-line mr-1" /> Основная информация</h2>
<h2 clas="font-bold flex items-center">
<i class="ri-flashlight-line mr-1" /> Основная информация
</h2>
<div class="mt-2 p-2 rounded-md flex flex-col bg-slate-300">
<div v-if="machineMainInfo?.length > 0" class="flex flex-col gap-2">
<div :key="idx" v-for="(info, idx) in machineMainInfo" class="flex items-center items-center bg-slate-200 px-3 py-2 rounded-md">
<div class="text-slate-700 font-bold mr-2">{{ info.title }}</div>
<div class="text-slate-500">{{ info.val }}</div>
<div
v-if="machineMainInfo?.length > 0"
class="flex flex-col gap-2"
>
<div
v-for="(info, idx) in machineMainInfo"
:key="idx"
class="flex items-center items-center bg-slate-200 px-3 py-2 rounded-md"
>
<div class="text-slate-700 font-bold mr-2">
{{ info.title }}
</div>
<div class="text-slate-500">
{{ info.val }}
</div>
</div>
</div>
</div>
</div>
<div style="min-width: 300px;" class="flex flex-col bg-slate-200 p-3 rounded">
<h2 clas="font-bold flex items-center"><i class="ri-git-pull-request-line mr-1"></i> Дополнительно</h2>
<div
style="min-width: 300px;"
class="flex flex-col bg-slate-200 p-3 rounded"
>
<h2 clas="font-bold flex items-center">
<i class="ri-git-pull-request-line mr-1" /> Дополнительно
</h2>
<div class="mt-2 p-2 rounded-md flex flex-col bg-slate-300">
<div v-if="machineOverInfo?.length > 0" class="flex flex-col gap-2">
<div :key="idx" v-for="(info, idx) in machineOverInfo" class="flex items-center items-center bg-slate-200 px-3 py-2 rounded-md">
<div class="text-slate-700 font-bold mr-2">{{ info.title }}</div>
<div class="text-slate-500">{{ info.val }}</div>
<div
v-if="machineOverInfo?.length > 0"
class="flex flex-col gap-2"
>
<div
v-for="(info, idx) in machineOverInfo"
:key="idx"
class="flex items-center items-center bg-slate-200 px-3 py-2 rounded-md"
>
<div class="text-slate-700 font-bold mr-2">
{{ info.title }}
</div>
<div class="text-slate-500">
{{ info.val }}
</div>
</div>
</div>
</div>
@ -122,38 +168,61 @@ export default {
</template>
</Accordion>
</div>
<Accordion :isOpen="true" id="machine_packs">
<Accordion
id="machine_packs"
:isOpen="true"
>
<template #header>
<div class="font-bold text-xl">Пакеты</div>
<div class="font-bold text-xl">
Пакеты
</div>
</template>
<template #body>
<div class="flex flex-col gap-4">
<div id="packReportButtons">
<div class="flex flex-col gap-5">
<div class="grid grid-cols-12 gap-3">
<div v-if="reportPacks.length === 0" class="flex items-center justify-center text-slate-700 text-2xl font-bold col-span-12">
<div
v-if="reportPacks.length === 0"
class="flex items-center justify-center text-slate-700 text-2xl font-bold col-span-12"
>
<h2>Нет данных по машине</h2>
</div>
<div :key="idx" v-if="reportPacks.length > 0" v-for="(pack, idx) in reportPacks" class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2 flex items-start flex gap-1 justify-center rounded-md bg-slate-300">
<div
v-for="(pack, idx) in reportPacks"
v-if="reportPacks.length > 0"
:key="idx"
class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2 flex items-start flex gap-1 justify-center rounded-md bg-slate-300"
>
<div class="flex-col flex-grow flex py-1">
<div class="flex text-slate-700 font-medium px-3 text-slate-700">
<div class="mr-1">Номер</div>
<div class="mr-1">
Номер
</div>
<div>{{ pack.pack_number }}</div>
</div>
<div class="text-slate-600 flex px-3 text-slate-600">
<div class="mr-1">Количество</div>
<div class="mr-1">
Количество
</div>
<div>{{ pack.count }}</div>
</div>
</div>
<div @click="loadPack(pack.pack_number)" class="h-full flex items-center justify-center text-white rounded-md px-3 text-center cursor-pointer transitiona-all bg-slate-400 hover:bg-slate-600">
<i class="ri-eye-line"></i>
<div
class="h-full flex items-center justify-center text-white rounded-md px-3 text-center cursor-pointer transitiona-all bg-slate-400 hover:bg-slate-600"
@click="loadPack(pack.pack_number)"
>
<i class="ri-eye-line" />
</div>
</div>
</div>
</div>
</div>
<div class="w-full h-[1px] bg-slate-300"></div>
<PackView :isLoader="false" id="machineReport">
<div class="w-full h-[1px] bg-slate-300" />
<PackView
id="machineReport"
:isLoader="false"
>
<template #description>
<span class="text-slate-400 text-sm">последние 30</span>
</template>

32
live_monitor_vue/src/components/5_pages/Main/Machines/Filters.vue
View File

@ -1,5 +1,3 @@
<script>
import {ref, toRaw, computed} from 'vue'
import {mapGetters, mapMutations, mapActions, useStore} from "vuex";
@ -44,25 +42,37 @@ export default {
</script>
<template>
<div id="ignore:2Qxwqz" class="pb-1">
<div
id="ignore:2Qxwqz"
class="pb-1"
>
{{ console.log('selectedData' ,selectedData)
}}
<div v-if="toggleFilter" wrapper_class="grid grid-cols-12 gap-2" selects_class="col-span-12 sm:col-span-6 lg:col-span-3" class="grid grid-cols-12 gap-2 mb-3 border-t border-slate-300 pt-3" fields={@filters_fields} id="SelectFilters" phx-hook="SelectFilters">
<div v-for="selectData in selectsData" class="col-span-12 sm:col-span-6 lg:col-span-3">
}}
<div
v-if="toggleFilter"
id="SelectFilters"
wrapper_class="grid grid-cols-12 gap-2"
selects_class="col-span-12 sm:col-span-6 lg:col-span-3"
class="grid grid-cols-12 gap-2 mb-3 border-t border-slate-300 pt-3"
fields="{@filters_fields}"
phx-hook="SelectFilters"
>
<div
v-for="selectData in selectsData"
class="col-span-12 sm:col-span-6 lg:col-span-3"
>
<VueMultiselect
:multiple="true"
v-model="selectedSelects[selectData.key]"
:multiple="true"
label="name"
track-by="name"
:options="selectData.data"
:placeholder="selectData.title"
:showLabels="false"
@update:model-value="updateSelectedSelects"
@remove="removedOption"
:showLabels="false"
>
</VueMultiselect>
/>
</div>
</div>
</div>

87
live_monitor_vue/src/components/5_pages/Main/Machines/Machine.vue
View File

@ -1,5 +1,3 @@
<script>
import {mapGetters, mapMutations, mapActions, useStore} from "vuex"
import Button from "@atoms/VButton.vue"
@ -77,41 +75,94 @@ export default {
</script>
<template>
<div id="card" class="pt-3 border w-[23%] min-w-[310px] border-slate-300 rounded transition-all bg-slate-300}">
<div
id="card"
class="pt-3 border w-[23%] min-w-[310px] border-slate-300 rounded transition-all bg-slate-300}"
>
<div class="h-full flex flex-col gap-5 relative text-left justify-between">
<div class="flex flex-col items-end absolute text-white top-[-0.75rem] right-0 h-full min-w-[173px] p-2" style="backdrop-filter: blur(10px);">
<div class="mb-2 text-right drop-shadow" search-mode="machine_id">ID: {{ machine?.machine_id }}</div>
<div class="flex flex-row">
<span>{{ machine.railway_name }}</span><i class="ri-route-line ml-2" title="Дорога:"/>
<div
class="flex flex-col items-end absolute text-white top-[-0.75rem] right-0 h-full min-w-[173px] p-2"
style="backdrop-filter: blur(10px);"
>
<div
class="mb-2 text-right drop-shadow"
search-mode="machine_id"
>
ID: {{ machine?.machine_id }}
</div>
<div class="flex flex-row">
<span>{{ machine.org_name }}</span><i class="ri-building-2-line ml-2" title="Компания:"/>
<span>{{ machine.railway_name }}</span><i
class="ri-route-line ml-2"
title="Дорога:"
/>
</div>
<div class="flex flex-row">
<span>{{ machine.nomer_zn8 }}</span><i class="ri-number-8 ml-2" title="8зн номер:"/>
<span>{{ machine.org_name }}</span><i
class="ri-building-2-line ml-2"
title="Компания:"
/>
</div>
<div class="flex flex-row" search-mode="device_number">
<span>{{ machine.device_number }}</span><i class="ri-rss-line ml-2" title="Устройство:"/>
<div class="flex flex-row">
<span>{{ machine.nomer_zn8 }}</span><i
class="ri-number-8 ml-2"
title="8зн номер:"
/>
</div>
<div
class="flex flex-row"
search-mode="device_number"
>
<span>{{ machine.device_number }}</span><i
class="ri-rss-line ml-2"
title="Устройство:"
/>
</div>
</div>
<div class="flex flex-col w-full mt-4 mb-2 pl-4 mt-1 z-[1]">
<div class="text-slate-800 font-bold m-0" search-mode="machine_type">{{ machine.machine_type }}</div>
<div :machine_id="machine.machine_id" history_click="/html/askr_devices/analyze_comm/#{@machine?.imei}" class="text-slate-500 text-xs underline-offset-4" search-mode="imei">{{ machine.imei }}</div>
<div
class="text-slate-800 font-bold m-0"
search-mode="machine_type"
>
{{ machine.machine_type }}
</div>
<div
:machine_id="machine.machine_id"
history_click="/html/askr_devices/analyze_comm/#{@machine?.imei}"
class="text-slate-500 text-xs underline-offset-4"
search-mode="imei"
>
{{ machine.imei }}
</div>
</div>
<div class="flex lg:flex-row flex-col gap-1 my-2 px-2 z-[1]">
<div class="flex">
<a :href="`/html/askr_devices/analyze_device/${machine.device_number}`" id="to_card_machine" no-init="false" @click="cardFunc(machine)" target="_blank" :class="buttonClass('bg-primary text-white')">Карточка</a>
<a
id="to_card_machine"
:href="`/html/askr_devices/analyze_device/${machine.device_number}`"
no-init="false"
target="_blank"
:class="buttonClass('bg-primary text-white')"
@click="cardFunc(machine)"
>Карточка</a>
</div>
<div class="flex gap-1">
<div @click="mapFunc(machine)" :class="buttonClass('bg-white/25 hover:bg-slate-400 hover:text-white')"><i class="ri-map-pin-line"/></div>
<div @click="dataFunc(machine)" :class="buttonClass('bg-white/25 hover:bg-slate-400 hover:text-white')">30</div>
<div
:class="buttonClass('bg-white/25 hover:bg-slate-400 hover:text-white')"
@click="mapFunc(machine)"
>
<i class="ri-map-pin-line" />
</div>
<div
:class="buttonClass('bg-white/25 hover:bg-slate-400 hover:text-white')"
@click="dataFunc(machine)"
>
30
</div>
</div>
</div>
</div>
</div>
</template>
<style scoped>

193
live_monitor_vue/src/components/5_pages/Main/Machines/Machines.vue
View File

@ -1,5 +1,3 @@
<script>
import {computed} from 'vue'
import {mapGetters, mapMutations, mapActions, useStore} from "vuex"
@ -37,12 +35,6 @@ export default {
default: 'static',
},
},
data () {
return {
openMap: false,
openData: false,
}
},
setup () {
const initLocalStorage = new EventStore()
const store = useStore()
@ -60,10 +52,24 @@ export default {
store.commit('layoutMachines/setHistoryData', updatedData)
store.dispatch('layoutMachines/uploadData', externalParams)
},
data () {
return {
openMap: false,
openData: false,
}
},
computed: {
...mapGetters('layoutMachines', ['searchModes', 'searchValue', 'selectedSearchMode', 'leftTopButtons', 'rightTopButtons', 'selectedMode', 'toggleFilter', 'activeFilterBtn', 'mapData', 'machinesData']),
...mapGetters('layout', ['isOpenMenu']),
},
watch: {
isSuccessSearch: {
handler(newValue, oldValue) {
console.log('isSuccessSearch', newValue, oldValue)
},
deep: true
},
},
mounted () {
},
@ -83,14 +89,6 @@ export default {
const store = useStore();
store.dispatch('layoutMachines/resetStore')
},
watch: {
isSuccessSearch: {
handler(newValue, oldValue) {
console.log('isSuccessSearch', newValue, oldValue)
},
deep: true
},
},
methods: {
...mapMutations('layoutMachines', ['setSearchMode', 'setSelectedMode', 'setToggleFilter', 'setActiveFilterBtn']),
...mapActions('layoutMachines', ['updateSearch', 'clearFilters']),
@ -141,13 +139,15 @@ export default {
</script>
<template>
<div class="px-2 sm:px-5 pt-1 bg-light">
<div class="relative">
<div class="grid grid-cols-12 gap-4 md:gap-3 lg:gap-4 pb-3">
<div class="flex items-center col-span-12 sm:col-span-8 lg:col-span-5 xl:col-span-4 2xl:col-span-3">
<div id="search" class="relative w-full max-w-[150px] h-[31px] pl-1 py-1 bg-white border border-primary rounded-l-md z-30">
<div
id="search"
class="relative w-full max-w-[150px] h-[31px] pl-1 py-1 bg-white border border-primary rounded-l-md z-30"
>
<VueMultiselect
v-model="selectedSearchMode"
label="name"
@ -156,50 +156,125 @@ export default {
placeholder=""
:showLabels="false"
@update:model-value="updateSearchMode"
>
</VueMultiselect>
/>
</div>
<div id="searchInput" class="relative w-full border-r border-t border-b border-primary rounded-r-md">
<input v-bind:value="searchValue" v-on:change="updateSearchValue" :status="status" class="pl-1 py-1 rounded-r-md w-full max-h-[29px] border-none focus-visible:outline-blue-300"/>
<div
id="searchInput"
class="relative w-full border-r border-t border-b border-primary rounded-r-md"
>
<input
:value="searchValue"
:status="status"
class="pl-1 py-1 rounded-r-md w-full max-h-[29px] border-none focus-visible:outline-blue-300"
@change="updateSearchValue"
>
</div>
</div>
<!-- {{ console.log('machinesData', machinesData) }} -->
<ul id="machinesMode" class="flex col-span-6 sm:col-span-4 md:col-span-4 lg:col-span-3 xl:col-span-2 justify-center">
<li v-bind:key="idx" v-for="(mode, idx) in leftTopButtons">
<Button :onClick="updateMode" :selected="mode.key" :classIcon="mode.class" :classBtn="[mode.key === 'cards' ? 'rounded-r-none' : 'rounded-l-none', selectedMode === mode.key ? 'text-white bg-primary focus:ring-4 focus:outline-none focus:ring-blue-300' : 'bg-transparent', 'w-full min-w-[88px] h-[30px] border border-primary rounded-md']" />
<ul
id="machinesMode"
class="flex col-span-6 sm:col-span-4 md:col-span-4 lg:col-span-3 xl:col-span-2 justify-center"
>
<li
v-for="(mode, idx) in leftTopButtons"
:key="idx"
>
<Button
:onClick="updateMode"
:selected="mode.key"
:classIcon="mode.class"
:classBtn="[mode.key === 'cards' ? 'rounded-r-none' : 'rounded-l-none', selectedMode === mode.key ? 'text-white bg-primary focus:ring-4 focus:outline-none focus:ring-blue-300' : 'bg-transparent', 'w-full min-w-[88px] h-[30px] border border-primary rounded-md']"
/>
</li>
</ul>
<div id="historyMode" class="flex col-span-6 sm:col-span-4 md:col-span-4 lg:col-span-3 xl:col-span-2 justify-center">
<Button :onClick="updateMode" selected="history" title="Просмотры" :classBtn="[selectedMode === 'history' ? 'focus:ring-4 focus:outline-none focus:ring-blue-300' : '', 'w-full min-w-[88px] h-[30px] bg-primary text-white border border-primary rounded-md']" />
<div
id="historyMode"
class="flex col-span-6 sm:col-span-4 md:col-span-4 lg:col-span-3 xl:col-span-2 justify-center"
>
<Button
:onClick="updateMode"
selected="history"
title="Просмотры"
:classBtn="[selectedMode === 'history' ? 'focus:ring-4 focus:outline-none focus:ring-blue-300' : '', 'w-full min-w-[88px] h-[30px] bg-primary text-white border border-primary rounded-md']"
/>
</div>
<div id="chartsMode" class="flex col-span-6 sm:col-span-4 md:col-span-4 lg:col-span-3 xl:col-span-2 justify-center">
<Button :onClick="updateMode" selected="charts" classIcon="ri-pie-chart-2-line" :classBtn="[selectedMode === 'charts' ? 'focus:ring-4 focus:outline-none focus:ring-blue-300' : '', 'w-full min-w-[88px] h-[30px] bg-primary text-white border border-primary rounded-md']" />
<div
id="chartsMode"
class="flex col-span-6 sm:col-span-4 md:col-span-4 lg:col-span-3 xl:col-span-2 justify-center"
>
<Button
:onClick="updateMode"
selected="charts"
classIcon="ri-pie-chart-2-line"
:classBtn="[selectedMode === 'charts' ? 'focus:ring-4 focus:outline-none focus:ring-blue-300' : '', 'w-full min-w-[88px] h-[30px] bg-primary text-white border border-primary rounded-md']"
/>
</div>
<ul id="filtersButtons" class="flex col-span-6 sm:col-span-4 md:col-span-4 lg:col-span-3 xl:col-span-2 justify-center">
<li v-bind:key="idx" v-for="(mode, idx) in rightTopButtons">
<Button :onClick="setFilteredAction" :selected="mode.key" :title="mode.name" :classIcon="mode.iconClass" :classBtn="[activeFilterBtn === mode.key ? 'focus:ring-4 focus:outline-none focus:ring-blue-300' : '', mode.key === 'filter' ? 'rounded-r-none' : 'rounded-l-none', mode.classBtn, 'w-full min-w-[88px] h-[30px] border border-primary rounded-md']" />
<ul
id="filtersButtons"
class="flex col-span-6 sm:col-span-4 md:col-span-4 lg:col-span-3 xl:col-span-2 justify-center"
>
<li
v-for="(mode, idx) in rightTopButtons"
:key="idx"
>
<Button
:onClick="setFilteredAction"
:selected="mode.key"
:title="mode.name"
:classIcon="mode.iconClass"
:classBtn="[activeFilterBtn === mode.key ? 'focus:ring-4 focus:outline-none focus:ring-blue-300' : '', mode.key === 'filter' ? 'rounded-r-none' : 'rounded-l-none', mode.classBtn, 'w-full min-w-[88px] h-[30px] border border-primary rounded-md']"
/>
</li>
</ul>
</div>
<div id="filters" v-if="toggleFilter">
<div
v-if="toggleFilter"
id="filters"
>
<Filters />
</div>
<div class="border-2 rounded-lg w-full bottom-0"></div>
<div id="listMachines" v-if="selectedMode === 'cards'" class="w-full min-h-[80vh] p-4 bg-light dark:bg-slate-900 dark:text-slate-300 relative">
<ul v-if="selectedMode === 'cards'" class="flex flex-wrap gap-4 w-full justify-center align-center">
<div class="border-2 rounded-lg w-full bottom-0" />
<div
v-if="selectedMode === 'cards'"
id="listMachines"
class="w-full min-h-[80vh] p-4 bg-light dark:bg-slate-900 dark:text-slate-300 relative"
>
<ul
v-if="selectedMode === 'cards'"
class="flex flex-wrap gap-4 w-full justify-center align-center"
>
<!-- <li v-for="machine in machinesData" class="w-full sm:w-1/2 md:w-1/2 lg:w-1/2 xl:w-1/2 p-2 border-2 border-primary rounded-md"> -->
<li v-for="machine in machinesData" class="">
<Machine :machine="machine" :openMap="toggleMap" :openData="toggleData" />
<li
v-for="machine in machinesData"
class=""
>
<Machine
:machine="machine"
:openMap="toggleMap"
:openData="toggleData"
/>
</li>
</ul>
</div>
<div id="tableMachines" v-if="selectedMode === 'table'" class="tab-pane bg-light relative py-4 text-center min-h-[300px] relative rounded-md w-full">
<div
v-if="selectedMode === 'table'"
id="tableMachines"
class="tab-pane bg-light relative py-4 text-center min-h-[300px] relative rounded-md w-full"
>
<Table />
</div>
<div id="historyViews" v-if="selectedMode === 'history'" class="tab-pane bg-light relative shadow text-center min-h-[300px] relative w-full p-4">
<div
v-if="selectedMode === 'history'"
id="historyViews"
class="tab-pane bg-light relative shadow text-center min-h-[300px] relative w-full p-4"
>
<HistoryViews />
</div>
<div id="charts" v-if="selectedMode === 'charts'" class="w-full min-h-[80vh] pb-5 bg-light dark:bg-slate-900 dark:text-slate-300 relative">
<div
v-if="selectedMode === 'charts'"
id="charts"
class="w-full min-h-[80vh] pb-5 bg-light dark:bg-slate-900 dark:text-slate-300 relative"
>
<!-- <.loader :if={@display_config.is_loading_charts} /> -->
<div>
<Charts />
@ -210,10 +285,10 @@ export default {
<div class="flex items-center justify-center text-lg font-bold pt-5">Нет данных</div>
</div> -->
<MapModal
id="mapModal"
:open="openMap"
:close="closeMap"
:data="mapData"
id="mapModal"
headerClass="border-b p-4 font-bold"
>
<template #header>
@ -221,18 +296,38 @@ export default {
Карта
</div>
</template>
<div v-if="!mapData" id="map_loader" class="flex justify-center" style="width: 95vw; height: 82vh;">
<div
v-if="!mapData"
id="map_loader"
class="flex justify-center"
style="width: 95vw; height: 82vh;"
>
<Spinner />
</div>
<div v-if="mapData" id="mapModal" style="width: 95vw; height: 82vh;"></div>
<div id="popup" class="ol-popup hidden transition-all">
<a href="#" id="popup-closer" class="ol-popup-closer hover:no-underline top-2 right-2 ">
<i class="ri-close-fill"></i>
<div
v-if="mapData"
id="mapModal"
style="width: 95vw; height: 82vh;"
/>
<div
id="popup"
class="ol-popup hidden transition-all"
>
<a
id="popup-closer"
href="#"
class="ol-popup-closer hover:no-underline top-2 right-2 "
>
<i class="ri-close-fill" />
</a>
<div id="popup-content"></div>
<div id="popup-content" />
</div>
</MapModal>
<DataModal id="dataModal" :open="openData" :close="closeData" />
<DataModal
id="dataModal"
:open="openData"
:close="closeData"
/>
</div>
</div>
</template>

21
live_monitor_vue/src/components/5_pages/Main/index.vue
View File

@ -1,5 +1,3 @@
<script>
import {computed} from 'vue'
import {mapGetters, mapMutations, mapActions, useStore} from "vuex";
@ -66,17 +64,26 @@ export default {
</script>
<template>
<div class="col-span-12">
<div class="p-2 sm:px-5 pt-1 bg-light rounded-t-xl">
<div class="relative">
<div class="flex gap-3 sm:gap-7 w-full lg:w-[50%]">
<router-link :to="{name: page.link}" @click="setPage(page)" v-for="(page, idx) in pages" class="flex w-full">
<Button v-bind:key="idx" type="button" :title="page.name" :classBtn="[selectedPage.key !== page.key ? 'border-transparent': 'border-slate-500', 'flex border-b-4']" />
<router-link
v-for="(page, idx) in pages"
:to="{name: page.link}"
class="flex w-full"
@click="setPage(page)"
>
<Button
:key="idx"
type="button"
:title="page.name"
:classBtn="[selectedPage.key !== page.key ? 'border-transparent': 'border-slate-500', 'flex border-b-4']"
/>
</router-link>
</div>
<div class="border-2 rounded-lg w-full bottom-0 absolute"/>
</div>
<div class="border-2 rounded-lg w-full bottom-0 absolute" />
</div>
</div>
<router-view />

12
live_monitor_vue/src/components/5_pages/News/index.vue
View File

@ -1,9 +1,3 @@
<template>
<div>
123
</div>
</template>
<script>
export default {
@ -18,3 +12,9 @@ export default {
}
</script>
<template>
<div>
123
</div>
</template>

25
live_monitor_vue/src/components/5_pages/Packs/Chart/Chart.vue
View File

@ -1,5 +1,3 @@
<script>
import Chart from "@molecules/VChart/VChart.vue";
import moment from 'moment'
@ -45,9 +43,9 @@ export default {
})
console.log('yAxisAata', yAxisAata)
const xAxisData = params.dataSource.map((el) => {
const dt = moment(el.pack_dt).format('DD.MM.YYYY HH:mm')
return dt
})
const dt = moment(el.pack_dt).format('DD.MM.YYYY HH:mm')
return dt
})
return {charts: yAxisAata, names: {yAxis: ' ', xAxis: 'Дата и время'}, xAxisData, title: 'График'}
},
}
@ -56,10 +54,21 @@ export default {
</script>
<template>
{{ console.log('currentSizes.heigth', maxHeight) }}
<div v-if="displayView === 'chart'" id="packChartWrapper" class="relative flex flex-wrap justify-center w-full h-full mb-3" >
<Chart id="packChart" type="packLines" height="800" :data="chartData(curerentTableData)" :sizes="currentSizes" :maxWidth="`${maxWidth}px`" :maxHeight="`${maxHeight}px`" />
<div
v-if="displayView === 'chart'"
id="packChartWrapper"
class="relative flex flex-wrap justify-center w-full h-full mb-3"
>
<Chart
id="packChart"
type="packLines"
height="800"
:data="chartData(curerentTableData)"
:sizes="currentSizes"
:maxWidth="`${maxWidth}px`"
:maxHeight="`${maxHeight}px`"
/>
</div>
</template>

148
live_monitor_vue/src/components/5_pages/Packs/index.vue
View File

@ -64,28 +64,28 @@ export default {
console.log('value', value)
console.log('key', key)
switch (key) {
case 'date':
this.updatePackSettings({dates: {...this.packsSettings.dates, selectedDate: value}})
break
case 'imei':
this.updatePackSettings({imei: value})
break
case 'selectedPack':
this.updatePackSettings({selectedPack: value})
break
case 'date':
this.updatePackSettings({dates: {...this.packsSettings.dates, selectedDate: value}})
break
case 'imei':
this.updatePackSettings({imei: value})
break
case 'selectedPack':
this.updatePackSettings({selectedPack: value})
break
}
},
setDate: function(value) {
console.log('value', value)
this.updatePackSettings({dates: {...this.packsSettings.dates, selectedDate: value}})
this.updatePackSettings({dates: {...this.packsSettings.dates, selectedDate: value}})
},
setImei: function(e) {
console.log('value', e.target.value)
this.updatePackSettings({imei: e.target.value})
this.updatePackSettings({imei: e.target.value})
},
setPack: function(value) {
console.log('value', value)
this.updatePackSettings({selectedPack: value})
this.updatePackSettings({selectedPack: value})
},
fetchPack: function(params) {
console.log('params', params)
@ -125,55 +125,70 @@ export default {
</script>
<template>
<div class="grid grid-cols-12 gap-6 col-span-12 h-full">
{{
// console.log('tableData', tableData)
console.log('packsSettings', packsSettings)
}}
// console.log('tableData', tableData)
console.log('packsSettings', packsSettings)
}}
<div class="rounded-md bg-light px-4 pt-4 pb-6 gap-2 shadow lg:col-span-4 xl:col-span-3 2xl:col-span-2 col-span-12">
<h1 class="font-medium leading-tight text-xl mb-4 text-slate-600">
Первый пакет
</h1>
<div class="grid gap-3 mb-3 ">
<div class="grid grid-cols-1">
<label for="date" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
<label
for="date"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>
Дата
</label>
<Datepicker id="date" :onchange="setDate" />
<Datepicker
id="date"
:onchange="setDate"
/>
</div>
<div phx-feedback-for="imei">
<label for="selectedImei" class="block text-sm leading-6 text-zinc-800 dark:text-white">
<label
for="selectedImei"
class="block text-sm leading-6 text-zinc-800 dark:text-white"
>
imei
</label>
<input
id="selectedImei"
type="text"
name="imei"
v-bind:value="packsSettings.imei"
v-on:change="setImei"
:value="packsSettings.imei"
class="block w-full rounded-lg border-zinc-300 py-[1px] px-[11px] text-zinc-900 focus:outline-none focus:ring-4 text-sm sm:leading-6 phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400 phx-no-feedback:focus:ring-zinc-800/5 border-zinc-300 focus:border-zinc-400 focus:ring-zinc-800/5 "
placeholder="imei"
required=""
@change="setImei"
>
</div>
<div>
<label for="selectedPack" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
<label
for="selectedPack"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
>Выбрать пакет</label>
<div id="selected_settings_name_wrapper" class="w-full">
<div id="packsOptions" class="col-span-12 sm:col-span-6 lg:col-span-3 rounded-lg">
<VueMultiselect
name="selectedPack"
v-model="packsSettings.selectedPack"
label="name"
track-by="name"
:options="packsSettings.selectedPackGroup"
:placeholder="packsSettings.selectedPack?.name"
@update:model-value="setPack"
:showLabels="false"
>
</VueMultiselect>
<div
id="selected_settings_name_wrapper"
class="w-full"
>
<div
id="packsOptions"
class="col-span-12 sm:col-span-6 lg:col-span-3 rounded-lg"
>
<VueMultiselect
v-model="packsSettings.selectedPack"
name="selectedPack"
label="name"
track-by="name"
:options="packsSettings.selectedPackGroup"
:placeholder="packsSettings.selectedPack?.name"
:showLabels="false"
@update:model-value="setPack"
/>
</div>
</div>
</div>
@ -181,9 +196,9 @@ export default {
<div class="grid gap-3 grid-cols-4">
<input
type="submit"
@click="fetchPack(packsSettings)"
class="col-span-4 lg:col-span-4 cursor-pointer text-white bg-primary hover:brightness-90 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-ssm w-full sm:w-auto px-5 py-1 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 transition_up"
value="Выгрузить"
@click="fetchPack(packsSettings)"
>
<div
phx-click="load_pack_settings"
@ -206,15 +221,22 @@ export default {
</div>
</div>
</div>
<div id="packageDisplay" class="relative lg:col-span-8 xl:col-span-9 2xl:col-span-10 col-span-12 bg-light shadow">
<div v-if="!isLoading && curerentTableData.dataSource" id="tableButtons" class="w-full">
<div
id="packageDisplay"
class="relative lg:col-span-8 xl:col-span-9 2xl:col-span-10 col-span-12 bg-light shadow"
>
<div
v-if="!isLoading && curerentTableData.dataSource"
id="tableButtons"
class="w-full"
>
<div class="w-full flex justify-end">
<div class="flex gap-3 pt-4 pb-2 pr-4">
<div class="">
<button
type="button"
@click="setOpenColumnSelect"
class="flex items-center transition-all justify-center py-2 px-3 bg-light text-sm font-medium text-slate-700 focus:outline-none rounded-lg border border-dashed border-slate-400 hover:text-blue-800 hover:border-blue-900 hover:shadow focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
@click="setOpenColumnSelect"
>
<i class="ri-settings-3-line" />
</button>
@ -225,9 +247,9 @@ export default {
>
<button
type="button"
@click="toggleDisplayView"
class="flex items-center transition-all justify-center py-2 px-3 bg-light text-sm font-medium text-slate-700 focus:outline-none rounded-lg border border-dashed border-slate-400 hover:text-blue-800 hover:border-blue-900 hover:shadow focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#graphic_btn_inactive&quot;}],[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#graphic_btn_active&quot;}],[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#pack_table_warapper&quot;}],[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#pack_graphic_wrapper&quot;}],[&quot;push&quot;,{&quot;event&quot;:&quot;toggle_display_data&quot;}]]"
@click="toggleDisplayView"
>
<i class="ri-bar-chart-grouped-line" />
</button>
@ -277,33 +299,55 @@ export default {
</div>
</div>
</div>
<div v-if="columnSelector" id="colums_select_wrapper" class="w-full">
<div
v-if="columnSelector"
id="colums_select_wrapper"
class="w-full"
>
<VueMultiselect
name="selectedPack"
v-model="selectedColumnsSelect"
name="selectedPack"
label="name"
track-by="name"
:options="columnsSelect"
:placeholder="null"
@select="addedOption"
@remove="removedOption"
:showLabels="false"
:multiple="true"
:group-select="true"
>
</VueMultiselect>
@select="addedOption"
@remove="removedOption"
/>
</div>
<div v-if="displayView === 'table'" id="packTableWarapper">
<div
v-if="displayView === 'table'"
id="packTableWarapper"
>
{{ console.log('getters.isLoading', isLoading) }}
<div id="reportPacks" class="tab-pane active text-center min-h-[300px] rounded-md ">
<Tabulator v-if="!isLoading && curerentTableData.dataSource" v-bind="curerentTableData" />
<span v-if="!isLoading && !curerentTableData.dataSource" class="absolute flex w-full justify-center items-center mt-2"> Выберите пакет и нажмите выгрузить</span>
<div v-if="isLoading && !curerentTableData.dataSource" class="absolute flex w-full h-full justify-center items-center bg-slate-50" id="packLoader">
<div
id="reportPacks"
class="tab-pane active text-center min-h-[300px] rounded-md "
>
<Tabulator
v-if="!isLoading && curerentTableData.dataSource"
v-bind="curerentTableData"
/>
<span
v-if="!isLoading && !curerentTableData.dataSource"
class="absolute flex w-full justify-center items-center mt-2"
> Выберите пакет и нажмите выгрузить</span>
<div
v-if="isLoading && !curerentTableData.dataSource"
id="packLoader"
class="absolute flex w-full h-full justify-center items-center bg-slate-50"
>
<Spinner />
</div>
</div>
</div>
<PackChart :displayView="displayView" :curerentTableData="curerentTableData" />
<PackChart
:displayView="displayView"
:curerentTableData="curerentTableData"
/>
</div>
<div>
<button

38
live_monitor_vue/src/components/6_admin_pages/Services/Services.vue
View File

@ -1,5 +1,3 @@
<script>
import {mapGetters, useStore} from "vuex"
import Service from './ServicesServiceItem.vue'
@ -15,16 +13,16 @@ export default {
},
props: {
},
setup (props, {slots}) {
const store = useStore()
store.dispatch('services/uploadData')
},
data () {
return {
isOpenServices: false,
titleServicesButton: 'Показать больше'
}
},
setup (props, {slots}) {
const store = useStore()
store.dispatch('services/uploadData')
},
computed: {
...mapGetters('services', ['services']),
},
@ -42,25 +40,39 @@ export default {
</script>
<template>
<div class="col-span-12">
<div class="flex flex-col mt-4 shadow-md mb-1 mx-5 bg-white" style="max-width: calc(100vw - 40px); margin-bottom: 30px;">
<div
class="flex flex-col mt-4 shadow-md mb-1 mx-5 bg-white"
style="max-width: calc(100vw - 40px); margin-bottom: 30px;"
>
<div class="flex flex-col flex-wrap justify-between px-4 pb-2 pt-8 w-full">
<div class="text-lg font-bold text-center text-gray-600">Информация о сети (кэш)</div>
<div class="text-lg font-bold text-center text-gray-600">
Информация о сети (кэш)
</div>
<div class="flex flex-col max-w-full">
<div>
Сервисы, записывающие данные в кэш
</div>
<div id="serviceList" :class="`flex flex-wrap h-auto flex-row mt-4 overflow-x-auto w-full gap-4 transition-all pb-4 ${isOpenServices ? 'max-h-full' : 'max-h-[220px]'}`">
<div
id="serviceList"
:class="`flex flex-wrap h-auto flex-row mt-4 overflow-x-auto w-full gap-4 transition-all pb-4 ${isOpenServices ? 'max-h-full' : 'max-h-[220px]'}`"
>
<div v-for="(service, idx) in sortingServices(services)">
<Service :idx="idx" :name="service.service || service.name" :service="service" />
<Service
:idx="idx"
:name="service.service || service.name"
:service="service"
/>
</div>
</div>
</div>
</div>
<button @click="toggleServices(isOpenServices)" class="w-full max-h-[90px] py-2.5 px-5 text-sm font-medium text-gray-900 bg-gray-100 border-t border-gray-200 hover:bg-gray-100 hover:text-slate-700 dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
{{titleServicesButton}}
<button
class="w-full max-h-[90px] py-2.5 px-5 text-sm font-medium text-gray-900 bg-gray-100 border-t border-gray-200 hover:bg-gray-100 hover:text-slate-700 dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
@click="toggleServices(isOpenServices)"
>
{{ titleServicesButton }}
</button>
</div>
</div>

12
live_monitor_vue/src/helpers/examle.vue
View File

@ -1,9 +1,3 @@
<template>
<div>
123
</div>
</template>
<script>
export default {
@ -18,3 +12,9 @@ export default {
}
</script>
<template>
<div>
123
</div>
</template>

4
live_monitor_vue/src/router/index.js
View File

@ -120,8 +120,8 @@ const routes = [
const routerHistory = createWebHistory();
const router = createRouter({
history: routerHistory,
routes
history: routerHistory,
routes
});
const logout = (from, next) => {

1
live_monitor_vue/src/services/ServiceOfMachines.js
View File

@ -1,4 +1,3 @@
class ServiceOfMachines {
constructor(adapter, store) {
this.adapter = adapter

72
live_monitor_vue/src/store/hooks/Echarts/graphicElements.js
View File

@ -64,45 +64,45 @@ const viewGraphicsTypesBar = (chartId, title, groupByKey, prevGroupByData, filte
if(groupByKey !== groupByKeys.firstLayout && !isEqualKeyValue(prevGroupByData, groupByKeys.firstLayout, null)) {
const buttonPrevious = {id: `${filterKey}`, info: {typeEl: 'buttonPrevious', prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters, type: type, groupByValue: groupByValue}, type: 'image', right: windowConfig?.bar?.graphic?.back?.right, top: windowConfig?.bar?.graphic?.back?.top, z: 999, style: {image: '/images/arrow-go-back-line.svg', width: 17, height: 17}}
const buttonPrevious = {id: `${filterKey}`, info: {typeEl: 'buttonPrevious', prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters, type: type, groupByValue: groupByValue}, type: 'image', right: windowConfig?.bar?.graphic?.back?.right, top: windowConfig?.bar?.graphic?.back?.top, z: 999, style: {image: '/images/arrow-go-back-line.svg', width: 17, height: 17}}
elements.push(buttonPrevious)
elements.push(buttonPrevious)
}
const elMain = {id: '', info: {typeEl: 'link', filterKey: filterKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters, type: type, groupByValue: groupByValue}, type: 'text', left: windowConfig?.bar?.graphic?.link?.left, top: windowConfig?.bar?.graphic?.link?.top, z: 999, style: {text: 'Главная', fontSize: 10}}
const notFirstLayout = !Object.keys(prevGroupByFilters).includes(groupByKeys.firstLayout)
const elMain = {id: '', info: {typeEl: 'link', filterKey: filterKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters, type: type, groupByValue: groupByValue}, type: 'text', left: windowConfig?.bar?.graphic?.link?.left, top: windowConfig?.bar?.graphic?.link?.top, z: 999, style: {text: 'Главная', fontSize: 10}}
const notFirstLayout = !Object.keys(prevGroupByFilters).includes(groupByKeys.firstLayout)
for (const groupByFilter in prevGroupByFilters) {
if (groupByFilter === groupByKeys.firstLayout) {
const linkTitle = `/ ${prevGroupByFilters[groupByKeys.firstLayout]}`
const leftPos = getTextWidth('Главная ', 10)
elMain.id = `0:link_${groupByFilter}-${linkTitle}`
elements.push(elMain)
const paramsFirst = {id: `1:link_${groupByFilter}-${linkTitle}`, info: {typeEl: 'link', filterKey: filterKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters, type: type, groupByValue: groupByValue}, type: 'text', left: leftPos + windowConfig?.bar?.graphic?.link?.left, top: windowConfig?.bar?.graphic?.link?.top, z: 999, style: {text: linkTitle, fontSize: 10}}
elements.push(paramsFirst)
}
if (groupByFilter === groupByKeys.secondLayout) {
const linkTitle = ` / ${prevGroupByFilters[groupByKeys.secondLayout]}`
const leftPos = getTextWidth(notFirstLayout ? 'Главная ' : `Главная / ${prevGroupByFilters[groupByKeys.firstLayout]}`, 10)
if(notFirstLayout) {
elMain.id = `0:link_${groupByFilter}-${linkTitle}`
elements.push(elMain)
}
const paramsSecond = {id: `2:link_${groupByFilter}-${linkTitle}`, info: {typeEl: 'link', filterKey: filterKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters, type: type, groupByValue: groupByValue}, type: 'text', left: leftPos + windowConfig?.bar?.graphic?.link?.left, top: windowConfig?.bar?.graphic?.link?.top, z: 999, style: {text: linkTitle, fontSize: 10}}
elements.push(paramsSecond)
}
if (groupByFilter === groupByKeys.thirdLayout) {
const linkTitle = ` / ${prevGroupByFilters[groupByKeys.thirdLayout]}`
const leftPos = getTextWidth(notFirstLayout ? `Главная / ${prevGroupByFilters[groupByKeys.secondLayout]} ` : `Главная / ${prevGroupByFilters[groupByKeys.firstLayout]} / ${prevGroupByFilters[groupByKeys.secondLayout]}`, 10)
const paramsThird = {id: `3:link_${groupByFilter}-${linkTitle}`, info: {typeEl: 'link', filterKey: filterKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters, type: type, groupByValue: groupByValue}, type: 'text', left: leftPos + windowConfig?.bar?.graphic?.link?.left, top: windowConfig?.bar?.graphic?.link?.top, z: 999, style: {text: linkTitle, fontSize: 10}}
elements.push(paramsThird)
}
if (groupByFilter === groupByKeys.fourthLayout) {
const linkTitle = ` / ${prevGroupByFilters[groupByKeys.fourthLayout]}`
const leftPos = getTextWidth(notFirstLayout ? `Главная / ${prevGroupByFilters[groupByKeys.secondLayout]} / ${prevGroupByFilters[groupByKeys.thirdLayout]} ` : `Главная / ${prevGroupByFilters[groupByKeys.firstLayout]} / ${prevGroupByFilters[groupByKeys.secondLayout]} / ${prevGroupByFilters[groupByKeys.thirdLayout]}`, 10)
const paramsFourth = {id: `4:link_${groupByFilter}-${linkTitle}`, info: {typeEl: 'link', filterKey: filterKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters, type: type, groupByValue: groupByValue}, type: 'text', left: leftPos + windowConfig?.bar?.graphic?.link?.left, top: windowConfig?.bar?.graphic?.link?.top, z: 999, style: {text: linkTitle, fontSize: 10}}
elements.push(paramsFourth)
}
}
for (const groupByFilter in prevGroupByFilters) {
if (groupByFilter === groupByKeys.firstLayout) {
const linkTitle = `/ ${prevGroupByFilters[groupByKeys.firstLayout]}`
const leftPos = getTextWidth('Главная ', 10)
elMain.id = `0:link_${groupByFilter}-${linkTitle}`
elements.push(elMain)
const paramsFirst = {id: `1:link_${groupByFilter}-${linkTitle}`, info: {typeEl: 'link', filterKey: filterKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters, type: type, groupByValue: groupByValue}, type: 'text', left: leftPos + windowConfig?.bar?.graphic?.link?.left, top: windowConfig?.bar?.graphic?.link?.top, z: 999, style: {text: linkTitle, fontSize: 10}}
elements.push(paramsFirst)
}
if (groupByFilter === groupByKeys.secondLayout) {
const linkTitle = ` / ${prevGroupByFilters[groupByKeys.secondLayout]}`
const leftPos = getTextWidth(notFirstLayout ? 'Главная ' : `Главная / ${prevGroupByFilters[groupByKeys.firstLayout]}`, 10)
if(notFirstLayout) {
elMain.id = `0:link_${groupByFilter}-${linkTitle}`
elements.push(elMain)
}
const paramsSecond = {id: `2:link_${groupByFilter}-${linkTitle}`, info: {typeEl: 'link', filterKey: filterKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters, type: type, groupByValue: groupByValue}, type: 'text', left: leftPos + windowConfig?.bar?.graphic?.link?.left, top: windowConfig?.bar?.graphic?.link?.top, z: 999, style: {text: linkTitle, fontSize: 10}}
elements.push(paramsSecond)
}
if (groupByFilter === groupByKeys.thirdLayout) {
const linkTitle = ` / ${prevGroupByFilters[groupByKeys.thirdLayout]}`
const leftPos = getTextWidth(notFirstLayout ? `Главная / ${prevGroupByFilters[groupByKeys.secondLayout]} ` : `Главная / ${prevGroupByFilters[groupByKeys.firstLayout]} / ${prevGroupByFilters[groupByKeys.secondLayout]}`, 10)
const paramsThird = {id: `3:link_${groupByFilter}-${linkTitle}`, info: {typeEl: 'link', filterKey: filterKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters, type: type, groupByValue: groupByValue}, type: 'text', left: leftPos + windowConfig?.bar?.graphic?.link?.left, top: windowConfig?.bar?.graphic?.link?.top, z: 999, style: {text: linkTitle, fontSize: 10}}
elements.push(paramsThird)
}
if (groupByFilter === groupByKeys.fourthLayout) {
const linkTitle = ` / ${prevGroupByFilters[groupByKeys.fourthLayout]}`
const leftPos = getTextWidth(notFirstLayout ? `Главная / ${prevGroupByFilters[groupByKeys.secondLayout]} / ${prevGroupByFilters[groupByKeys.thirdLayout]} ` : `Главная / ${prevGroupByFilters[groupByKeys.firstLayout]} / ${prevGroupByFilters[groupByKeys.secondLayout]} / ${prevGroupByFilters[groupByKeys.thirdLayout]}`, 10)
const paramsFourth = {id: `4:link_${groupByFilter}-${linkTitle}`, info: {typeEl: 'link', filterKey: filterKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters, type: type, groupByValue: groupByValue}, type: 'text', left: leftPos + windowConfig?.bar?.graphic?.link?.left, top: windowConfig?.bar?.graphic?.link?.top, z: 999, style: {text: linkTitle, fontSize: 10}}
elements.push(paramsFourth)
}
}
return elements
}

236
live_monitor_vue/src/store/hooks/Echarts/helpers.js
View File

@ -1,157 +1,157 @@
import {groupByKeys} from './staticData'
const getTextWidth = (text, font) => {
const canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement('canvas'));
const context = canvas.getContext('2d');
context.font = font;
const metrics = context.measureText(text);
return metrics.width;
const canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement('canvas'));
const context = canvas.getContext('2d');
context.font = font;
const metrics = context.measureText(text);
return metrics.width;
}
const isEqualKeyValue = (obj, key, value) => {
if(Object.keys(obj).length > 0) {
if(Object.keys(obj).includes(key) && Object.values(obj).includes(value)) return true
else return false
} else return true
if(Object.keys(obj).length > 0) {
if(Object.keys(obj).includes(key) && Object.values(obj).includes(value)) return true
else return false
} else return true
}
const chartsFiltersNames = (data) => [...new Set(data.map((el) => el.charts.map((item) => item.name)).flat())]
const chartsFiltersNamesMl = (data) => [...new Set(data.map((el) => el.map((item) => item.charts.name)).flat().filter(el => el !== undefined))]
const updateBarChartsData = (data, key) => data.map((el) => {
return el.filter((item) => {
if(item.name === key) {
return el
}
})
return el.filter((item) => {
if(item.name === key) {
return el
}
})
}).flat()
const dataFilterTitle = (data, title) => data.map((el) => {
return el.reduce((acc, item) => {
if(item.name === title || acc !== undefined && acc?.name === title) {
if(acc === 0) {
return {name: item.name, count: Number(item.value)}
}
if(acc?.count >= 0) {
return {name: item.name, count: acc.count + Number(item.value)}
}
}
}, 0)
return el.reduce((acc, item) => {
if(item.name === title || acc !== undefined && acc?.name === title) {
if(acc === 0) {
return {name: item.name, count: Number(item.value)}
}
if(acc?.count >= 0) {
return {name: item.name, count: acc.count + Number(item.value)}
}
}
}, 0)
}).filter((el) => el !== undefined)
const prepareBarTypesData = (data, xAxisData, params) => {
if(data.charts.length < chartsFiltersNames(xAxisData).length) {
// Если нет фильтруемых данных, то добавляем столбец графика с нулевым значением для каждого элемента el
const zeroData = chartsFiltersNames(xAxisData).filter((name) => !data.charts.some(({name: name2}) => name === name2)).map((name) => {
return {filterKey: params.filterKey, name: name, value: 0}
})
const withoutZeroData = data.charts.map((item) => {
item.type = params.type
item.filterKey = params.filterKey
item.groupByKey = params.groupByKey
item.groupByValue = params.groupByValue ? params.groupByValue : params.typeId // Для графика типа "types" params.typeId
item.groupByData = {[params.groupByKey]: data.yAxisData}
item.prevGroupByData = params.prevGroupByFilters
return item})
return [withoutZeroData, zeroData].flat()
} else {
return data.charts.map((item) => {
item.type = params.type
item.filterKey = params.filterKey
item.groupByKey = params.groupByKey
item.groupByValue = params.groupByValue ? params.groupByValue : params.typeId
item.groupByData = {[params.groupByKey]: data.yAxisData}
item.prevGroupByData = params.prevGroupByFilters
return item
})
}
if(data.charts.length < chartsFiltersNames(xAxisData).length) {
// Если нет фильтруемых данных, то добавляем столбец графика с нулевым значением для каждого элемента el
const zeroData = chartsFiltersNames(xAxisData).filter((name) => !data.charts.some(({name: name2}) => name === name2)).map((name) => {
return {filterKey: params.filterKey, name: name, value: 0}
})
const withoutZeroData = data.charts.map((item) => {
item.type = params.type
item.filterKey = params.filterKey
item.groupByKey = params.groupByKey
item.groupByValue = params.groupByValue ? params.groupByValue : params.typeId // Для графика типа "types" params.typeId
item.groupByData = {[params.groupByKey]: data.yAxisData}
item.prevGroupByData = params.prevGroupByFilters
return item})
return [withoutZeroData, zeroData].flat()
} else {
return data.charts.map((item) => {
item.type = params.type
item.filterKey = params.filterKey
item.groupByKey = params.groupByKey
item.groupByValue = params.groupByValue ? params.groupByValue : params.typeId
item.groupByData = {[params.groupByKey]: data.yAxisData}
item.prevGroupByData = params.prevGroupByFilters
return item
})
}
}
const prepareBarTypesMlData = (data, params) => {
return data.map((item) => {
// console.log('item', item)
item.charts.type = params.type
item.charts.groupByKey = params.groupByKey
item.charts.groupByValue = params.groupByValue ? params.groupByValue : params.typeId
item.charts.groupByData = {[params.groupByKey]: item.yAxisData}
item.charts.prevGroupByData = params.prevGroupByFilters
return item.charts
})
return data.map((item) => {
// console.log('item', item)
item.charts.type = params.type
item.charts.groupByKey = params.groupByKey
item.charts.groupByValue = params.groupByValue ? params.groupByValue : params.typeId
item.charts.groupByData = {[params.groupByKey]: item.yAxisData}
item.charts.prevGroupByData = params.prevGroupByFilters
return item.charts
})
}
const groupByBarTypesData = (data, xAxisData, func) => {
const dataGroupBy = []
const dataCustomTitle = []
const dataGroupBy = []
const dataCustomTitle = []
for(let i = 0; i < (func(xAxisData).length); i++) {
dataGroupBy.push(updateBarChartsData(data, func(xAxisData)[i]))
dataCustomTitle.push(dataFilterTitle(dataGroupBy, func(xAxisData)[i]))
}
for(let i = 0; i < (func(xAxisData).length); i++) {
dataGroupBy.push(updateBarChartsData(data, func(xAxisData)[i]))
dataCustomTitle.push(dataFilterTitle(dataGroupBy, func(xAxisData)[i]))
}
return {dataGroupBy: dataGroupBy, dataCustomTitle: dataCustomTitle}
return {dataGroupBy: dataGroupBy, dataCustomTitle: dataCustomTitle}
}
const updatedGroupByData = (idx, prevGroupByFilters, groupByKey, groupByValue) => {
switch(idx) {
case '0': return {[groupByKey]: groupByValue}
case '1':
for (const prevGroupByFilter in prevGroupByFilters) {
if(prevGroupByFilter === groupByKeys.secondLayout) {
delete prevGroupByFilters[prevGroupByFilter]
}
if(prevGroupByFilter === groupByKeys.thirdLayout) {
delete prevGroupByFilters[prevGroupByFilter]
}
if(prevGroupByFilter === groupByKeys.fourthLayout) {
delete prevGroupByFilters[prevGroupByFilter]
}
}
return prevGroupByFilters
case '2':
for (const prevGroupByFilter in prevGroupByFilters) {
if(prevGroupByFilter === groupByKeys.thirdLayout) {
delete prevGroupByFilters[prevGroupByFilter]
}
if(prevGroupByFilter === groupByKeys.fourthLayout) {
delete prevGroupByFilters[prevGroupByFilter]
}
}
return prevGroupByFilters
case '3':
for (const prevGroupByFilter in prevGroupByFilters) {
if(prevGroupByFilter === groupByKeys.fourthLayout) {
delete prevGroupByFilters[prevGroupByFilter]
}
}
return prevGroupByFilters
}
switch(idx) {
case '0': return {[groupByKey]: groupByValue}
case '1':
for (const prevGroupByFilter in prevGroupByFilters) {
if(prevGroupByFilter === groupByKeys.secondLayout) {
delete prevGroupByFilters[prevGroupByFilter]
}
if(prevGroupByFilter === groupByKeys.thirdLayout) {
delete prevGroupByFilters[prevGroupByFilter]
}
if(prevGroupByFilter === groupByKeys.fourthLayout) {
delete prevGroupByFilters[prevGroupByFilter]
}
}
return prevGroupByFilters
case '2':
for (const prevGroupByFilter in prevGroupByFilters) {
if(prevGroupByFilter === groupByKeys.thirdLayout) {
delete prevGroupByFilters[prevGroupByFilter]
}
if(prevGroupByFilter === groupByKeys.fourthLayout) {
delete prevGroupByFilters[prevGroupByFilter]
}
}
return prevGroupByFilters
case '3':
for (const prevGroupByFilter in prevGroupByFilters) {
if(prevGroupByFilter === groupByKeys.fourthLayout) {
delete prevGroupByFilters[prevGroupByFilter]
}
}
return prevGroupByFilters
}
}
const choiceTypeBarTypesCharts = (params) => {
switch(params.type) {
case 'ml':
const yAxisMlData = params.yAxisData.sort().map((el) => {
return `${el.key !== null ? el.key : 'Нет данных'} ${el.val}`
}).sort((a, b) => a - b).reverse()
const xAxisMlData = params.xAxisData.map((item) => item.map((el) => el))
const mlData = xAxisMlData.sort().map((el) => prepareBarTypesMlData(el, params))
return {axisData: yAxisMlData, updatedData: groupByBarTypesData(mlData, xAxisMlData, chartsFiltersNamesMl)}
switch(params.type) {
case 'ml':
const yAxisMlData = params.yAxisData.sort().map((el) => {
return `${el.key !== null ? el.key : 'Нет данных'} ${el.val}`
}).sort((a, b) => a - b).reverse()
const xAxisMlData = params.xAxisData.map((item) => item.map((el) => el))
const mlData = xAxisMlData.sort().map((el) => prepareBarTypesMlData(el, params))
return {axisData: yAxisMlData, updatedData: groupByBarTypesData(mlData, xAxisMlData, chartsFiltersNamesMl)}
case 'mount':
const xAxisMountData = params.yAxisData.sort((a, b) => a.key - b.key).map((el) => {
return `${el.key !== null ? el.key : 'Нет данных'} \n ${el.val}`})
const mountData = params.xAxisData.sort().map((el) => prepareBarTypesData(el, params.xAxisData, params))
return {axisData: xAxisMountData, updatedData: groupByBarTypesData(mountData, params.xAxisData, chartsFiltersNames)}
case 'mount':
const xAxisMountData = params.yAxisData.sort((a, b) => a.key - b.key).map((el) => {
return `${el.key !== null ? el.key : 'Нет данных'} \n ${el.val}`})
const mountData = params.xAxisData.sort().map((el) => prepareBarTypesData(el, params.xAxisData, params))
return {axisData: xAxisMountData, updatedData: groupByBarTypesData(mountData, params.xAxisData, chartsFiltersNames)}
default :
const yAxisDefaultData = params.yAxisData.sort().map((el) => {
return `${el.key !== null ? el.key : 'Нет данных'} ${el.val}`
}).sort((a, b) => a - b).reverse()
const defaultData = params.xAxisData.sort().map((el) => prepareBarTypesData(el, params.xAxisData, params))
return {axisData: yAxisDefaultData, updatedData: groupByBarTypesData(defaultData, params.xAxisData, chartsFiltersNames)}
}
default :
const yAxisDefaultData = params.yAxisData.sort().map((el) => {
return `${el.key !== null ? el.key : 'Нет данных'} ${el.val}`
}).sort((a, b) => a - b).reverse()
const defaultData = params.xAxisData.sort().map((el) => prepareBarTypesData(el, params.xAxisData, params))
return {axisData: yAxisDefaultData, updatedData: groupByBarTypesData(defaultData, params.xAxisData, chartsFiltersNames)}
}
}
export {isEqualKeyValue, getTextWidth, updatedGroupByData, choiceTypeBarTypesCharts}

1626
live_monitor_vue/src/store/hooks/Echarts/index.js
View File

File diff suppressed because it is too large Load Diff

186
live_monitor_vue/src/store/hooks/Echarts/staticData.js
View File

@ -1,118 +1,118 @@
const chartsSetup = {
main: [
{id: 'commun_pie', type: 'pie', maxHeight: '400px', order: 1},
{id: 'commun_pie_cdim', type: 'pie', maxHeight: '400px', order: 2},
{id: 'commun_pie_cdrp', type: 'pie', maxHeight: '400px', order: 3},
{id: 'commun_pie_mpt_types', type: 'pie', maxHeight: '400px', order: 4},
{id: 'commun_pie_gdsm_types', type: 'pie', maxHeight: '400px', order: 5},
{id: 'commun_pie_sm_pss_types', type: 'pie', maxHeight: '400px', order: 6},
{id: 'routes_pie', type: 'pie', maxHeight: '400px', order: 7},
{id: 'rors_pie', type: 'pie', maxHeight: '400px', order: 8},
{id: 'routes_bar', type: 'mainMl', maxHeight: '400px', order: 9},
{id: 'mount_client_type_bar', type: 'mount', height: '350', maxHeight: '400px', order: 10},
{id: 'mount_mounter_type_bar', type: 'mount', height: '500', maxHeight: '600px', order: 11},
],
types: [
{id: 'commun_types_bar', type: 'default', maxHeight: '400px', order: 1},
{id: 'commun_types_bar_cdim', type: 'without_first_layout', maxHeight: '400px', order: 2},
{id: 'commun_types_bar_cdrp', type: 'without_first_layout', maxHeight: '400px', order: 3},
{id: 'commun_types_bar_mpt_types', type: 'types', maxHeight: '400px', order: 4},
{id: 'commun_types_bar_gdsm_types', type: 'types', maxHeight: '400px', order: 5},
{id: 'commun_types_bar_sm_pss_types', type: 'types', maxHeight: '400px', order: 6},
{id: 'routes_types_bar', type: 'default', maxHeight: '400px', order: 7},
{id: 'rors_types_bar', type: 'default', maxHeight: '400px', order: 8},
{id: 'routes_types_bar_ml', type: 'ml', maxHeight: '380px', order: 9},
]
main: [
{id: 'commun_pie', type: 'pie', maxHeight: '400px', order: 1},
{id: 'commun_pie_cdim', type: 'pie', maxHeight: '400px', order: 2},
{id: 'commun_pie_cdrp', type: 'pie', maxHeight: '400px', order: 3},
{id: 'commun_pie_mpt_types', type: 'pie', maxHeight: '400px', order: 4},
{id: 'commun_pie_gdsm_types', type: 'pie', maxHeight: '400px', order: 5},
{id: 'commun_pie_sm_pss_types', type: 'pie', maxHeight: '400px', order: 6},
{id: 'routes_pie', type: 'pie', maxHeight: '400px', order: 7},
{id: 'rors_pie', type: 'pie', maxHeight: '400px', order: 8},
{id: 'routes_bar', type: 'mainMl', maxHeight: '400px', order: 9},
{id: 'mount_client_type_bar', type: 'mount', height: '350', maxHeight: '400px', order: 10},
{id: 'mount_mounter_type_bar', type: 'mount', height: '500', maxHeight: '600px', order: 11},
],
types: [
{id: 'commun_types_bar', type: 'default', maxHeight: '400px', order: 1},
{id: 'commun_types_bar_cdim', type: 'without_first_layout', maxHeight: '400px', order: 2},
{id: 'commun_types_bar_cdrp', type: 'without_first_layout', maxHeight: '400px', order: 3},
{id: 'commun_types_bar_mpt_types', type: 'types', maxHeight: '400px', order: 4},
{id: 'commun_types_bar_gdsm_types', type: 'types', maxHeight: '400px', order: 5},
{id: 'commun_types_bar_sm_pss_types', type: 'types', maxHeight: '400px', order: 6},
{id: 'routes_types_bar', type: 'default', maxHeight: '400px', order: 7},
{id: 'rors_types_bar', type: 'default', maxHeight: '400px', order: 8},
{id: 'routes_types_bar_ml', type: 'ml', maxHeight: '380px', order: 9},
]
}
const colorList = (name) => {
switch(name) {
case 'На связи': return 'rgb(134, 212, 131, 1)'
case 'Есть МЛ, выходил на связь': return 'rgb(134, 212, 131, 1)'
case 'РОРС': return 'rgb(134, 212, 131, 1)'
case 'Не на связи': return 'rgb(255, 114, 114, 1)'
case 'Нет МЛ, нет связи': return 'rgb(165, 165, 165, 1)'
case 'Не РОРС': return 'rgb(255, 114, 114, 1)'
case 'Нет данных': return 'rgb(165, 165, 165, 1)'
case 'Есть МЛ, нет связи': return 'rgb(255, 114, 114, 1)'
case 'Нет МЛ, выходил на связь': return 'rgb(243, 161, 30, 1)'
}
switch(name) {
case 'На связи': return 'rgb(134, 212, 131, 1)'
case 'Есть МЛ, выходил на связь': return 'rgb(134, 212, 131, 1)'
case 'РОРС': return 'rgb(134, 212, 131, 1)'
case 'Не на связи': return 'rgb(255, 114, 114, 1)'
case 'Нет МЛ, нет связи': return 'rgb(165, 165, 165, 1)'
case 'Не РОРС': return 'rgb(255, 114, 114, 1)'
case 'Нет данных': return 'rgb(165, 165, 165, 1)'
case 'Есть МЛ, нет связи': return 'rgb(255, 114, 114, 1)'
case 'Нет МЛ, выходил на связь': return 'rgb(243, 161, 30, 1)'
}
}
const colorListBar = (type, name) => {
if(type === typesCharts.mainMl || typesCharts.typesMl) {
switch(name) {
case 'Обычные': return 'rgb(134, 212, 131, 1)'
case 'Аварийные': return 'rgb(255, 114, 114, 1)'
case 'Прочие': return 'rgb(196, 161, 201, 1)'
case 'Ремонтные': return 'rgb(228, 202, 163, 1)'
case 'Без выезда': return 'rgb(243, 161, 30, 1)'
case 'СПС без МЛ': return 'rgb(165, 165, 165, 1)'
}
}
if(type === typesCharts.mainMl || typesCharts.typesMl) {
switch(name) {
case 'Обычные': return 'rgb(134, 212, 131, 1)'
case 'Аварийные': return 'rgb(255, 114, 114, 1)'
case 'Прочие': return 'rgb(196, 161, 201, 1)'
case 'Ремонтные': return 'rgb(228, 202, 163, 1)'
case 'Без выезда': return 'rgb(243, 161, 30, 1)'
case 'СПС без МЛ': return 'rgb(165, 165, 165, 1)'
}
}
}
const orderCharts = (name) => {
switch(name) {
case 'На связи': return 1
case 'Есть МЛ, выходил на связь': return 1
case 'РОРС': return 1
case 'Не на связи': return 2
case 'Не РОРС': return 2
case 'Есть МЛ, нет связи': return 2
case 'Нет МЛ, выходил на связь': return 3
case 'Нет МЛ, нет связи': return 5
case 'Нет данных': return 5
}
switch(name) {
case 'На связи': return 1
case 'Есть МЛ, выходил на связь': return 1
case 'РОРС': return 1
case 'Не на связи': return 2
case 'Не РОРС': return 2
case 'Есть МЛ, нет связи': return 2
case 'Нет МЛ, выходил на связь': return 3
case 'Нет МЛ, нет связи': return 5
case 'Нет данных': return 5
}
}
const title = (id, count, countWithoutMl = '') => {
switch(id) {
case 'commun_pie': return `Связь с СПС`
case 'commun_pie_cdim': return `Связь с СПС, ЦДИМ`
case 'commun_pie_cdrp': return `Связь с СПС, ЦДРП`
case 'commun_types_bar': return `Связь с СПС`
case 'commun_types_bar_cdim': return `Связь с СПС, ЦДИМ`
case 'commun_types_bar_cdrp': return `Связь с СПС, ЦДРП`
case 'commun_pie_mpt_types': return `Наличие связи с МРТ`
case 'commun_pie_gdsm_types': return `Наличие связи с ЖДСМ`
case 'commun_pie_sm_pss_types': return `Наличие связи с СМ`
case 'commun_types_bar_mpt_types': return `Наличие связи с МРТ`
case 'commun_types_bar_gdsm_types': return `Наличие связи с ЖДСМ`
case 'commun_types_bar_sm_pss_types': return `Наличие связи с СМ`
case 'rors_pie': return `РОРС`
case 'rors_types_bar': return `РОРС`
case 'routes_pie': return `Связь с СПС, МЛ`
case 'routes_types_bar': return `Связь с СПС, МЛ`
case 'routes_bar': return `Выданные МЛ`
case 'routes_types_bar_ml': return `Выданные МЛ`
case 'mount_client_type_bar': return `Кол-во монтажей по заказчикам и КР`
case 'mount_mounter_type_bar': return `Кол-во монтажей по исполнителям и КР`
default: return ''
}
switch(id) {
case 'commun_pie': return `Связь с СПС`
case 'commun_pie_cdim': return `Связь с СПС, ЦДИМ`
case 'commun_pie_cdrp': return `Связь с СПС, ЦДРП`
case 'commun_types_bar': return `Связь с СПС`
case 'commun_types_bar_cdim': return `Связь с СПС, ЦДИМ`
case 'commun_types_bar_cdrp': return `Связь с СПС, ЦДРП`
case 'commun_pie_mpt_types': return `Наличие связи с МРТ`
case 'commun_pie_gdsm_types': return `Наличие связи с ЖДСМ`
case 'commun_pie_sm_pss_types': return `Наличие связи с СМ`
case 'commun_types_bar_mpt_types': return `Наличие связи с МРТ`
case 'commun_types_bar_gdsm_types': return `Наличие связи с ЖДСМ`
case 'commun_types_bar_sm_pss_types': return `Наличие связи с СМ`
case 'rors_pie': return `РОРС`
case 'rors_types_bar': return `РОРС`
case 'routes_pie': return `Связь с СПС, МЛ`
case 'routes_types_bar': return `Связь с СПС, МЛ`
case 'routes_bar': return `Выданные МЛ`
case 'routes_types_bar_ml': return `Выданные МЛ`
case 'mount_client_type_bar': return `Кол-во монтажей по заказчикам и КР`
case 'mount_mounter_type_bar': return `Кол-во монтажей по исполнителям и КР`
default: return ''
}
}
const openMachine = (data) => {
const [currentEl] = data?.linkData?.filter((el) => el?.machine_type === data?.groupByData[data?.groupByKey])
window.open(`/html/askr_devices/analyze_device/${currentEl.device_number}`, '_blank')
const [currentEl] = data?.linkData?.filter((el) => el?.machine_type === data?.groupByData[data?.groupByKey])
window.open(`/html/askr_devices/analyze_device/${currentEl.device_number}`, '_blank')
}
const groupByKeys = {
firstLayout: 'org_type_name',
secondLayout: 'railway_name',
thirdLayout: 'org_name',
fourthLayout: 'type',
fiveLayout: 'machine_type',
firstLayout: 'org_type_name',
secondLayout: 'railway_name',
thirdLayout: 'org_name',
fourthLayout: 'type',
fiveLayout: 'machine_type',
}
const typesCharts = {
default: 'default',
without_first_layout: 'without_first_layout',
mpt: 'mpt_types',
gdsm: 'gdsm_types',
sm: 'sm_pss_types',
mainMl: 'mainMl',
typesMl: 'ml',
default: 'default',
without_first_layout: 'without_first_layout',
mpt: 'mpt_types',
gdsm: 'gdsm_types',
sm: 'sm_pss_types',
mainMl: 'mainMl',
typesMl: 'ml',
}
export {colorList, colorListBar, orderCharts, title, openMachine, groupByKeys, typesCharts, chartsSetup}

736
live_monitor_vue/src/store/hooks/Echarts/windowConfigs.js
View File

@ -1,381 +1,381 @@
const axisBarConfig = (typeChart, axisData, windowConfig, names = {}) => {
return typeChart === 'mount' || typeChart === 'mainMl' || typeChart === 'states' || typeChart === 'packLines' ? {
xAxis: {
type: 'category',
name: names.xAxis ? names.xAxis : '',
nameLocation: 'end',
nameGap: 35,
nameTextStyle: {
verticalAlign: 'top',
align: 'right',
padding: typeChart === 'packLines' ? windowConfig?.linesPack.nameXAxis.padding : [25, 40, 0, 0]
},
splitLine: {show: true},
axisLabel: {
show: true,
color: 'black',
fontSize: windowConfig?.bar?.xAxis?.label?.fontSize,
fontWeight: windowConfig?.bar?.xAxis?.label?.fontWeight,
interval: windowConfig?.bar?.xAxis?.label?.interval,
align: windowConfig?.bar?.xAxis?.label?.align,
hideOverlap: true,
},
axisTick: {
show: true,
interval: windowConfig?.bar?.xAxis?.axisTick?.interval,
lineStyle: {
color: 'black',
}
},
data: axisData
},
yAxis: {
type: 'value',
name: names.xAxis ? names.xAxis : '',
// nameLocation: 'end',
// nameGap: 35,
// nameTextStyle: {
// // verticalAlign: 'top',
// // align: 'right',
// padding: [125, 0, 0, 150]
// },
splitLine: {show: true},
axisLine: {
show: true,
lineStyle: {
// dashOffset: 10,
width: 1,
color: 'white',
shadowColor: 'black',
shadowOffsetX: -2
},
},
axisLabel: {
show: true,
color: 'black',
},
axisTick: {
show: true,
lineStyle: {
color: 'black'
}
},
},
} : {
xAxis: {
type: 'value',
name: names.xAxis ? names.xAxis : '',
splitLine: {show: true},
axisLabel: {
show: true,
color: 'black',
fontSize: windowConfig?.bar?.xAxis?.label?.fontSize,
fontWeight: windowConfig?.bar?.xAxis?.label?.fontWeight,
interval: windowConfig?.bar?.xAxis?.label?.interval,
align: windowConfig?.bar?.xAxis?.label?.align,
hideOverlap: true,
},
axisLine: {
show: true,
lineStyle: {
color: 'black',
}
},
axisTick: {
show: true,
interval: windowConfig?.bar?.xAxis?.axisTick?.interval,
lineStyle: {
color: 'black'
}
},
minInterval: 1,
},
yAxis: {
type: 'category',
name: names.yAxis ? names.yAxis : '',
axisLine: {
show: true,
lineStyle: {
// dashOffset: 10,
width: 1,
color: 'white',
shadowColor: 'black',
shadowOffsetX: -2
},
},
// axisLabel: {
// formatter: (yAxisData) => {
// // return yAxisData.map((el) => {
// // return `${el?.name} ${el?.value}`
// // })
// }
// },
axisLabel: {
show: true,
width: windowConfig?.bar?.yAxis?.label?.width,
color: 'black',
fontSize: windowConfig?.bar?.yAxis?.label?.fontSize,
fontWeight: windowConfig?.bar?.yAxis?.label?.fontWeight,
overflow: 'break',
},
axisTick: {
show: true,
lineStyle: {
color: 'black'
}
},
// fontSize: 10,
// offset: -7,
data: axisData,
splitLine: {
show: true
},
// position: windowConfig?.bar?.yAxis?.label?.position,
// offset: windowConfig?.bar?.yAxis?.label?.offset,
zLevel: 3,
// z: 99
},
}
return typeChart === 'mount' || typeChart === 'mainMl' || typeChart === 'states' || typeChart === 'packLines' ? {
xAxis: {
type: 'category',
name: names.xAxis ? names.xAxis : '',
nameLocation: 'end',
nameGap: 35,
nameTextStyle: {
verticalAlign: 'top',
align: 'right',
padding: typeChart === 'packLines' ? windowConfig?.linesPack.nameXAxis.padding : [25, 40, 0, 0]
},
splitLine: {show: true},
axisLabel: {
show: true,
color: 'black',
fontSize: windowConfig?.bar?.xAxis?.label?.fontSize,
fontWeight: windowConfig?.bar?.xAxis?.label?.fontWeight,
interval: windowConfig?.bar?.xAxis?.label?.interval,
align: windowConfig?.bar?.xAxis?.label?.align,
hideOverlap: true,
},
axisTick: {
show: true,
interval: windowConfig?.bar?.xAxis?.axisTick?.interval,
lineStyle: {
color: 'black',
}
},
data: axisData
},
yAxis: {
type: 'value',
name: names.xAxis ? names.xAxis : '',
// nameLocation: 'end',
// nameGap: 35,
// nameTextStyle: {
// // verticalAlign: 'top',
// // align: 'right',
// padding: [125, 0, 0, 150]
// },
splitLine: {show: true},
axisLine: {
show: true,
lineStyle: {
// dashOffset: 10,
width: 1,
color: 'white',
shadowColor: 'black',
shadowOffsetX: -2
},
},
axisLabel: {
show: true,
color: 'black',
},
axisTick: {
show: true,
lineStyle: {
color: 'black'
}
},
},
} : {
xAxis: {
type: 'value',
name: names.xAxis ? names.xAxis : '',
splitLine: {show: true},
axisLabel: {
show: true,
color: 'black',
fontSize: windowConfig?.bar?.xAxis?.label?.fontSize,
fontWeight: windowConfig?.bar?.xAxis?.label?.fontWeight,
interval: windowConfig?.bar?.xAxis?.label?.interval,
align: windowConfig?.bar?.xAxis?.label?.align,
hideOverlap: true,
},
axisLine: {
show: true,
lineStyle: {
color: 'black',
}
},
axisTick: {
show: true,
interval: windowConfig?.bar?.xAxis?.axisTick?.interval,
lineStyle: {
color: 'black'
}
},
minInterval: 1,
},
yAxis: {
type: 'category',
name: names.yAxis ? names.yAxis : '',
axisLine: {
show: true,
lineStyle: {
// dashOffset: 10,
width: 1,
color: 'white',
shadowColor: 'black',
shadowOffsetX: -2
},
},
// axisLabel: {
// formatter: (yAxisData) => {
// // return yAxisData.map((el) => {
// // return `${el?.name} ${el?.value}`
// // })
// }
// },
axisLabel: {
show: true,
width: windowConfig?.bar?.yAxis?.label?.width,
color: 'black',
fontSize: windowConfig?.bar?.yAxis?.label?.fontSize,
fontWeight: windowConfig?.bar?.yAxis?.label?.fontWeight,
overflow: 'break',
},
axisTick: {
show: true,
lineStyle: {
color: 'black'
}
},
// fontSize: 10,
// offset: -7,
data: axisData,
splitLine: {
show: true
},
// position: windowConfig?.bar?.yAxis?.label?.position,
// offset: windowConfig?.bar?.yAxis?.label?.offset,
zLevel: 3,
// z: 99
},
}
}
const windowConfig = (isMobile, currentWidth, countCharts) => {
const scrollbarParams = (countCharts) => {
if(15 < countCharts && countCharts < 40) return {
start: 85, minSpan: 5
}
if(40 < countCharts && countCharts < 70) return {
start: 90, minSpan: 5
}
if(70 < countCharts && countCharts < 100) return {
start: 95, minSpan: 5
}
if(100 < countCharts) return {
start: 99, minSpan: 3
}
return {start: 70, minSpan: 5}
const scrollbarParams = (countCharts) => {
if(15 < countCharts && countCharts < 40) return {
start: 85, minSpan: 5
}
if(40 < countCharts && countCharts < 70) return {
start: 90, minSpan: 5
}
if(70 < countCharts && countCharts < 100) return {
start: 95, minSpan: 5
}
if(100 < countCharts) return {
start: 99, minSpan: 3
}
return {start: 70, minSpan: 5}
}
}
if(isMobile) return {
title: {
width: currentWidth - 90,
top: 3,
left: 'left',
fontSize: 11,
},
backgroundColor: '#FFF',
pie: {
legend: {
itemWidth: 15,
itemHeight: 15,
itemGap: 5,
fontSize: 10
},
graphic: {
period: {
top: 10,
right: 40,
fontSize: 10
},
count: {
top: 'center',
left: 'center',
fontSize: 20
},
}
},
linesPack: {
legend: {
bottom: 0,
itemWidth: 25,
itemHeight: 14,
itemGap: 7,
fontSize: 11
},
nameXAxis: {
padding: [110, 40, 0, 0],
}
},
bar: {
legend: {
bottom: 0,
itemWidth: 10,
itemHeight: 10,
itemGap: 5,
fontSize: 10
},
grid: {
width: '85%',
top: 40
},
yAxis: {
label: {width: 40, fontWeight: 'bold', fontSize: 9, position: 'left', offset: -20}
},
xAxis: {
label: {fontSize: 10, fontWeight: 'bold', interval: 1, align: 'center'},
axisTick: {interval: 1}
},
dataZoom: {
top: 40,
start: scrollbarParams(countCharts).start,
minSpan: scrollbarParams(countCharts).minSpan,
},
graphic: {
period: {
top: 8,
right: 50,
fontSize: 10
},
menu: {
top: 5,
right: 0
},
container: {
top: 27,
right: 0
},
rect: {
top: 8,
right: 10
},
download: {
top: 18,
right: 70
},
downloadTitle: {
top: 23,
right: 20
},
back: {
top: 5,
right: 20,
},
link: {
top: 23,
left: 7,
}
}
}
}
if(!isMobile) return {
title: {
width: 'auto',
top: 3,
left: 'left',
fontSize: 16,
},
backgroundColor: '#FFF',
line: {
legend: {
bottom: 0,
itemWidth: 25,
itemHeight: 14,
itemGap: 7,
fontSize: 11
},
},
linesPack: {
legend: {
bottom: 0,
itemWidth: 25,
itemHeight: 14,
itemGap: 7,
fontSize: 11
},
nameXAxis: {
padding: [110, 40, 0, 0],
}
},
pie: {
legend: {
itemWidth: 15,
itemHeight: 15,
itemGap: 10,
fontSize: 12
},
graphic: {
period: {
top: 10,
right: 30,
fontSize: 12
},
count: {
top: 'center',
left: 'center',
fontSize: 27
},
}
},
bar: {
legend: {
bottom: 10,
itemWidth: 25,
itemHeight: 14,
itemGap: 10,
fontSize: 12
},
grid: {
width: '90%',
top: 50
},
yAxis: {
label: {fontSize: 13, width: 110, fontWeight: 'normal', position: 'left', offset: 0}
if(isMobile) return {
title: {
width: currentWidth - 90,
top: 3,
left: 'left',
fontSize: 11,
},
backgroundColor: '#FFF',
pie: {
legend: {
itemWidth: 15,
itemHeight: 15,
itemGap: 5,
fontSize: 10
},
graphic: {
period: {
top: 10,
right: 40,
fontSize: 10
},
count: {
top: 'center',
left: 'center',
fontSize: 20
},
}
},
linesPack: {
legend: {
bottom: 0,
itemWidth: 25,
itemHeight: 14,
itemGap: 7,
fontSize: 11
},
nameXAxis: {
padding: [110, 40, 0, 0],
}
},
bar: {
legend: {
bottom: 0,
itemWidth: 10,
itemHeight: 10,
itemGap: 5,
fontSize: 10
},
grid: {
width: '85%',
top: 40
},
yAxis: {
label: {width: 40, fontWeight: 'bold', fontSize: 9, position: 'left', offset: -20}
},
xAxis: {
label: {fontSize: 10, fontWeight: 'bold', interval: 1, align: 'center'},
axisTick: {interval: 1}
},
dataZoom: {
top: 40,
start: scrollbarParams(countCharts).start,
minSpan: scrollbarParams(countCharts).minSpan,
},
graphic: {
period: {
top: 8,
right: 50,
fontSize: 10
},
menu: {
top: 5,
right: 0
},
container: {
top: 27,
right: 0
},
rect: {
top: 8,
right: 10
},
download: {
top: 18,
right: 70
},
downloadTitle: {
top: 23,
right: 20
},
back: {
top: 5,
right: 20,
},
link: {
top: 23,
left: 7,
}
}
}
}
if(!isMobile) return {
title: {
width: 'auto',
top: 3,
left: 'left',
fontSize: 16,
},
backgroundColor: '#FFF',
line: {
legend: {
bottom: 0,
itemWidth: 25,
itemHeight: 14,
itemGap: 7,
fontSize: 11
},
},
linesPack: {
legend: {
bottom: 0,
itemWidth: 25,
itemHeight: 14,
itemGap: 7,
fontSize: 11
},
nameXAxis: {
padding: [110, 40, 0, 0],
}
},
pie: {
legend: {
itemWidth: 15,
itemHeight: 15,
itemGap: 10,
fontSize: 12
},
graphic: {
period: {
top: 10,
right: 30,
fontSize: 12
},
count: {
top: 'center',
left: 'center',
fontSize: 27
},
}
},
bar: {
legend: {
bottom: 10,
itemWidth: 25,
itemHeight: 14,
itemGap: 10,
fontSize: 12
},
grid: {
width: '90%',
top: 50
},
yAxis: {
label: {fontSize: 13, width: 110, fontWeight: 'normal', position: 'left', offset: 0}
},
xAxis: {
label: {fontSize: 10, fontWeight: 'normal', interval: 1, align: 'center'},
axisTick: {interval: 0}
},
dataZoom: {
top: 50,
start: scrollbarParams(countCharts).start,
minSpan: scrollbarParams(countCharts).minSpan,
},
graphic: {
period: {
top: 10,
right: 60,
fontSize: 12
},
menu: {
top: 7,
right: 5
},
container: {
top: 27,
right: 0
},
rect: {
top: 8,
right: 10
},
download: {
top: 18,
right: 70
},
downloadTitle: {
top: 23,
right: 20
},
back: {
top: 7,
right: 30,
},
link: {
top: 28,
left: 7,
}
}
}
}
},
xAxis: {
label: {fontSize: 10, fontWeight: 'normal', interval: 1, align: 'center'},
axisTick: {interval: 0}
},
dataZoom: {
top: 50,
start: scrollbarParams(countCharts).start,
minSpan: scrollbarParams(countCharts).minSpan,
},
graphic: {
period: {
top: 10,
right: 60,
fontSize: 12
},
menu: {
top: 7,
right: 5
},
container: {
top: 27,
right: 0
},
rect: {
top: 8,
right: 10
},
download: {
top: 18,
right: 70
},
downloadTitle: {
top: 23,
right: 20
},
back: {
top: 7,
right: 30,
},
link: {
top: 28,
left: 7,
}
}
}
}
}
const sizeOptions = (width = 600, height = 400) => {
return {
width: width,
height: height
}
}
return {
width: width,
height: height
}
}
export {axisBarConfig, windowConfig, sizeOptions}

1114
live_monitor_vue/src/store/modules/add_users/StaticData.js
View File

File diff suppressed because it is too large Load Diff

18
live_monitor_vue/src/store/modules/apiHelpers.js
View File

@ -21,21 +21,21 @@ const post = async (path, data, onError) => {
Authorization: `Bearer ${token}`
}
})
.then(r => r.data)
.catch(error => {
onError && onError(error)
console.error('Error post request:', error)
authViewer(error)
})
.then(r => r.data)
.catch(error => {
onError && onError(error)
console.error('Error post request:', error)
authViewer(error)
})
}
const get = async (path, success_callback) => {
return await axios.get(`${import.meta.env.VITE_API_ADDR}${path}`)
.then(success_callback)
.catch(error => {
.then(success_callback)
.catch(error => {
console.error('Error post request:', error)
authViewer(error)
})
})
}

1
live_monitor_vue/src/store/modules/auth/menuList.js
View File

@ -1,4 +1,3 @@
const orisMenu = [
{
type: "simple_link",

12
live_monitor_vue/src/store/modules/example/index.js
View File

@ -4,7 +4,7 @@ const initState = {
}
const state = {
...initState
...initState
}
const getters = {
@ -18,9 +18,9 @@ const actions = {
}
export const store = {
namespaced: true,
state,
getters,
mutations,
actions,
namespaced: true,
state,
getters,
mutations,
actions,
}

1
live_monitor_vue/src/store/modules/finder_packs/StaticData.js
View File

@ -793,5 +793,4 @@ const packsGroups = [
]
export { packsGroups }

12
live_monitor_vue/src/store/modules/last_packs/index.js
View File

@ -13,7 +13,7 @@ const initState = {
}
const state = {
...initState
...initState
}
const getters = {
@ -46,9 +46,9 @@ const actions = {
}
export const store = {
namespaced: true,
state,
getters,
mutations,
actions,
namespaced: true,
state,
getters,
mutations,
actions,
}

12
live_monitor_vue/src/store/modules/last_packs_num/index.js
View File

@ -20,7 +20,7 @@ const initState = {
}
const state = {
...initState
...initState
}
const getters = {
@ -49,9 +49,9 @@ const actions = {
}
export const store = {
namespaced: true,
state,
getters,
mutations,
actions,
namespaced: true,
state,
getters,
mutations,
actions,
}

942
live_monitor_vue/src/store/modules/layoutMachines/StaticData.js
View File

@ -32,39 +32,39 @@ const pagination = {
const selectors = {
org_name: ["ПЧМ Воронеж", "ПЧМ Фаянсовая",
"ПЧМ Топки", "ПЧМ Кочетовка", "ПЧР КЛНГ",
"ПЧМ Нижний Новгород", "ПЧМ Новосибирск",
"ПЧМ Екатеринбург", "ПЧМ Омск", "ПЧМ Алтай",
"ПЧМ Тосно", "ПЧМ Вязьма", "ПМС-46", "ПМС-183",
"ПЧМ Тихорецк", "ПЧМ Сызрань",
"ПЧМ Хабаровск", null, "ПЧМ Северобайкальск",
"ПЧМ Смолино", "ПЧМ Вологда", "ПЧМ Пермь",
"ПЧМ Астрахань", "ПЧМ Нигозеро",
"ПЧМ Челябинск", "ПЧМ Завитая", "ПМС-217",
"ПМС-199", "ПМС-31", "ТрансЭнерго", "ПМС-340",
"ОПМС-99", "ПМС-11", "ПМС-77", "ПМС-208", "ПМС-172",
"ПМС-12", "ПМС-22",
"Экспулуатация БУ прекращена", "ОПМС-68",
"ПМС-170", "ОПМС-103", "ПМС-205", "ПМС-152", "ПМС-20",
"ПЧМ Тында", "КалугаПутьМаш",
"ПЧМ Санкт-Петербург", "ПЧМ Красноярск"],
"ПЧМ Топки", "ПЧМ Кочетовка", "ПЧР КЛНГ",
"ПЧМ Нижний Новгород", "ПЧМ Новосибирск",
"ПЧМ Екатеринбург", "ПЧМ Омск", "ПЧМ Алтай",
"ПЧМ Тосно", "ПЧМ Вязьма", "ПМС-46", "ПМС-183",
"ПЧМ Тихорецк", "ПЧМ Сызрань",
"ПЧМ Хабаровск", null, "ПЧМ Северобайкальск",
"ПЧМ Смолино", "ПЧМ Вологда", "ПЧМ Пермь",
"ПЧМ Астрахань", "ПЧМ Нигозеро",
"ПЧМ Челябинск", "ПЧМ Завитая", "ПМС-217",
"ПМС-199", "ПМС-31", "ТрансЭнерго", "ПМС-340",
"ОПМС-99", "ПМС-11", "ПМС-77", "ПМС-208", "ПМС-172",
"ПМС-12", "ПМС-22",
"Экспулуатация БУ прекращена", "ОПМС-68",
"ПМС-170", "ОПМС-103", "ПМС-205", "ПМС-152", "ПМС-20",
"ПЧМ Тында", "КалугаПутьМаш",
"ПЧМ Санкт-Петербург", "ПЧМ Красноярск"],
org_type_name: ["ЦДИМ", "Другие", "ЦДРП"],
railway_name: ["Ю-Вост", "Моск", "З-Сиб", "Клг", "Горьк",
"Сверд", "Окт", "Заб", "В-Сиб", "С-Кав", "Кбш",
"Д-Вост", null, "Ю-Ур", "Сев", "Прив", "РЖД", "Крас"],
"Сверд", "Окт", "Заб", "В-Сиб", "С-Кав", "Кбш",
"Д-Вост", null, "Ю-Ур", "Сев", "Прив", "РЖД", "Крас"],
type: ["УТМ", "РПБ", "ПРЛ УПК", "ПУМА", "МДС", "МПТ",
"ТЭС", "СПП", "ДСП", "СЧ", "ЩОМ", "RM", "АСГ", "ВПО",
"без типа", "ПМГ", "МТГ", "АС", "СМ", "ВПР", "ПСС",
"МПК", "АДМ", "АГД", "УК", "АМ", "ПРЛ", "АДЭ",
"Унимат", "ВПРС", "ПБ", "Дуоматик", "МВУ",
"АВФ-1М.2", "Динамик", "АГС", "ПМА", "ССГ-1", "СЧУ",
"АГП", "Унимат компакт", "ДГКу", "СЗ", "ТЭУ",
"РБ", "ФАТРА",],
"ТЭС", "СПП", "ДСП", "СЧ", "ЩОМ", "RM", "АСГ", "ВПО",
"без типа", "ПМГ", "МТГ", "АС", "СМ", "ВПР", "ПСС",
"МПК", "АДМ", "АГД", "УК", "АМ", "ПРЛ", "АДЭ",
"Унимат", "ВПРС", "ПБ", "Дуоматик", "МВУ",
"АВФ-1М.2", "Динамик", "АГС", "ПМА", "ССГ-1", "СЧУ",
"АГП", "Унимат компакт", "ДГКу", "СЗ", "ТЭУ",
"РБ", "ФАТРА",],
zav_nomer: ["84", "49", "15", "90", "27", "9", "5", "105", "005", "656",
"001", "39", "38", "57", "03", "003", "593", "235", "1453", "1307", "766",
"528", "485", "02", "752", "704", "584", "669", "261", "482", "762", "985",
"605", "016", "1258", "729", "963", "927", "319", "1154", "1163", "825",
"1276", "1062", "1025",]
"001", "39", "38", "57", "03", "003", "593", "235", "1453", "1307", "766",
"528", "485", "02", "752", "704", "584", "669", "261", "482", "762", "985",
"605", "016", "1258", "729", "963", "927", "319", "1154", "1163", "825",
"1276", "1062", "1025",]
}
@ -245,163 +245,163 @@ const chartsBarTypesWithoutLayoutParams = [{groupByKey: 'railway_name', filterKe
const charts = {
pie: {
countMachines: 4790,
period: 'две недели',
machines: [
{ name: "Есть МЛ, выходил на связь", value: 1048, color: "rgb(134, 212, 131, 1)", order: 1 },
{ name: "Есть МЛ, нет связи", value: 1048, color: "rgb(134, 212, 131, 1)", order: 2 },
{ name: "Нет МЛ, выходил на связь", value: 1048, color: "rgb(134, 212, 131, 1)", order: 3 },
{ name: "Нет МЛ, нет связи", value: 1048, color: "rgb(134, 212, 131, 1)", order: 4 },
]},
countMachines: 4790,
period: 'две недели',
machines: [
{ name: "Есть МЛ, выходил на связь", value: 1048, color: "rgb(134, 212, 131, 1)", order: 1 },
{ name: "Есть МЛ, нет связи", value: 1048, color: "rgb(134, 212, 131, 1)", order: 2 },
{ name: "Нет МЛ, выходил на связь", value: 1048, color: "rgb(134, 212, 131, 1)", order: 3 },
{ name: "Нет МЛ, нет связи", value: 1048, color: "rgb(134, 212, 131, 1)", order: 4 },
]},
mainMl: {
countMachinesWithMl: 2916,
period: 'две недели',
machines: [
{ key: "routes_common", name: "Обычные", value: 2182, itemStyle: {color: "rgb(134, 212, 131, 1)"}, order: 1 },
{ key: "routes_emergency", name: "Аварийные", value: 64, itemStyle: {color: "rgb(255, 114, 114, 1)"}, order: 2 },
{ key: "routes_other", name: "Прочие", value: 259, itemStyle: {color: "rgb(196, 161, 201, 1)"}, order: 3 },
{ key: "routes_repair", name: "Ремонтные", value: 338, itemStyle: {color: "rgb(228, 202, 163, 1)"}, order: 4 },
{ key: "routes_without_leaving", name: "Без выезда", value: 73, itemStyle: {color: "rgb(243, 161, 30, 1)"}, order: 5 },
{ key: "routes_without_ml", name: "СПС без МЛ", value: 3073, itemStyle: {color: "rgb(165, 165, 165, 1)"}, order: 6 },
]},
mount_mounter_type_bar: {
chartId: "mount_mounter_type_bar",
countMounts: 5436,
filterKey: "mounter_type",
height: 500,
type: "mount",
xAxisData: [
[
{
charts: [
{name: "ВНИИЖТ", value: 92},
{name: "Калугапутьмаш", value: 1}
],
totalCount: 3,
yAxisData: "2016 г."
},
{
charts: [
{name: "ВНИИЖТ", value: 349},
{name: "КалугаРПМ", value: 9},
{name: "Калугапутьмаш", value: 92},
{name: "Свердловский РПМ", value: 23},
{
name: "Тихорецкий завод им Воровского",
value: 26
},
{name: "Тулажелдормаш", value: 8}
],
totalCount: 9,
yAxisData: "2017 г."
},
{
charts: [
{name: "ВНИИЖТ", value: 590},
{name: "КалугаРПМ", value: 7},
{name: "Калугапутьмаш", value: 73},
{name: "Свердловский РПМ", value: 30},
{
name: "Тихорецкий завод им Воровского",
value: 23
},
{name: "Тулажелдормаш", value: 32}
],
totalCount: 11,
yAxisData: "2018 г."
},
{
charts: [
{name: "ВНИИЖТ", value: 719},
{name: "КалугаРПМ", value: 16},
{name: "Калугапутьмаш", value: 88},
{name: "Свердловский РПМ", value: 20},
{
name: "Тихорецкий завод им Воровского",
value: 33
},
{name: "Тулажелдормаш", value: 24}
],
totalCount: 12,
yAxisData: "2019 г."
},
{
charts: [
{name: "ВНИИЖТ", value: 594},
{name: "КалугаРПМ", value: 18},
{name: "Калугапутьмаш", value: 100},
{name: "Свердловский РПМ", value: 19},
{
name: "Тихорецкий завод им Воровского",
value: 36
},
{name: "Тулажелдормаш", value: 31}
],
totalCount: 9,
yAxisData: "2020 г."
},
{
charts: [
{name: "ВНИИЖТ", value: 777},
{name: "Инжиниринг Сервис-Путьмаш", value: 10},
{name: "КалугаРПМ", value: 5},
{name: "Калугапутьмаш", value: 84},
{name: "Пермский РПМ", value: 5},
{name: "Свердловский РПМ", value: 4},
{
name: "Тихорецкий завод им Воровского",
value: 14
},
{name: "Тулажелдормаш", value: 28}
],
totalCount: 12,
yAxisData: "2021 г."
},
{
charts: [
{name: "ВНИИЖТ", value: 746},
{name: "Инжиниринг Сервис-Путьмаш", value: 10},
{name: "КалугаРПМ", value: 4},
{name: "Калугапутьмаш", value: 36},
{name: "Свердловский РПМ", value: 1},
{
name: "Тихорецкий завод им Воровского",
value: 5
},
{name: "Тулажелдормаш", value: 20}
],
totalCount: 15,
yAxisData: "2022 г."
},
{
charts: [
{name: "ВНИИЖТ", value: 612},
{name: "Инжиниринг Сервис-Путьмаш", value: 4},
{name: "КалугаРПМ", value: 3},
{name: "Калугапутьмаш", value: 2},
{name: "Кировский машзавод", value: 3},
{
name: "Тихорецкий завод им Воровского",
value: 7
},
{name: "Тулажелдормаш", value: 6}
],
totalCount: 10,
yAxisData: "2023 г."
}
]
countMachinesWithMl: 2916,
period: 'две недели',
machines: [
{ key: "routes_common", name: "Обычные", value: 2182, itemStyle: {color: "rgb(134, 212, 131, 1)"}, order: 1 },
{ key: "routes_emergency", name: "Аварийные", value: 64, itemStyle: {color: "rgb(255, 114, 114, 1)"}, order: 2 },
{ key: "routes_other", name: "Прочие", value: 259, itemStyle: {color: "rgb(196, 161, 201, 1)"}, order: 3 },
{ key: "routes_repair", name: "Ремонтные", value: 338, itemStyle: {color: "rgb(228, 202, 163, 1)"}, order: 4 },
{ key: "routes_without_leaving", name: "Без выезда", value: 73, itemStyle: {color: "rgb(243, 161, 30, 1)"}, order: 5 },
{ key: "routes_without_ml", name: "СПС без МЛ", value: 3073, itemStyle: {color: "rgb(165, 165, 165, 1)"}, order: 6 },
]},
mount_mounter_type_bar: {
chartId: "mount_mounter_type_bar",
countMounts: 5436,
filterKey: "mounter_type",
height: 500,
type: "mount",
xAxisData: [
[
{
charts: [
{name: "ВНИИЖТ", value: 92},
{name: "Калугапутьмаш", value: 1}
],
totalCount: 3,
yAxisData: "2016 г."
},
{
charts: [
{name: "ВНИИЖТ", value: 349},
{name: "КалугаРПМ", value: 9},
{name: "Калугапутьмаш", value: 92},
{name: "Свердловский РПМ", value: 23},
{
name: "Тихорецкий завод им Воровского",
value: 26
},
{name: "Тулажелдормаш", value: 8}
],
totalCount: 9,
yAxisData: "2017 г."
},
{
charts: [
{name: "ВНИИЖТ", value: 590},
{name: "КалугаРПМ", value: 7},
{name: "Калугапутьмаш", value: 73},
{name: "Свердловский РПМ", value: 30},
{
name: "Тихорецкий завод им Воровского",
value: 23
},
{name: "Тулажелдормаш", value: 32}
],
totalCount: 11,
yAxisData: "2018 г."
},
{
charts: [
{name: "ВНИИЖТ", value: 719},
{name: "КалугаРПМ", value: 16},
{name: "Калугапутьмаш", value: 88},
{name: "Свердловский РПМ", value: 20},
{
name: "Тихорецкий завод им Воровского",
value: 33
},
{name: "Тулажелдормаш", value: 24}
],
totalCount: 12,
yAxisData: "2019 г."
},
{
charts: [
{name: "ВНИИЖТ", value: 594},
{name: "КалугаРПМ", value: 18},
{name: "Калугапутьмаш", value: 100},
{name: "Свердловский РПМ", value: 19},
{
name: "Тихорецкий завод им Воровского",
value: 36
},
{name: "Тулажелдормаш", value: 31}
],
totalCount: 9,
yAxisData: "2020 г."
},
{
charts: [
{name: "ВНИИЖТ", value: 777},
{name: "Инжиниринг Сервис-Путьмаш", value: 10},
{name: "КалугаРПМ", value: 5},
{name: "Калугапутьмаш", value: 84},
{name: "Пермский РПМ", value: 5},
{name: "Свердловский РПМ", value: 4},
{
name: "Тихорецкий завод им Воровского",
value: 14
},
{name: "Тулажелдормаш", value: 28}
],
totalCount: 12,
yAxisData: "2021 г."
},
{
charts: [
{name: "ВНИИЖТ", value: 746},
{name: "Инжиниринг Сервис-Путьмаш", value: 10},
{name: "КалугаРПМ", value: 4},
{name: "Калугапутьмаш", value: 36},
{name: "Свердловский РПМ", value: 1},
{
name: "Тихорецкий завод им Воровского",
value: 5
},
{name: "Тулажелдормаш", value: 20}
],
totalCount: 15,
yAxisData: "2022 г."
},
{
charts: [
{name: "ВНИИЖТ", value: 612},
{name: "Инжиниринг Сервис-Путьмаш", value: 4},
{name: "КалугаРПМ", value: 3},
{name: "Калугапутьмаш", value: 2},
{name: "Кировский машзавод", value: 3},
{
name: "Тихорецкий завод им Воровского",
value: 7
},
{name: "Тулажелдормаш", value: 6}
],
totalCount: 10,
yAxisData: "2023 г."
}
]
],
yAxisData: [
{key: "2016 г.", val: 93},
{key: "2017 г.", val: 507},
{key: "2018 г.", val: 755},
{key: "2019 г.", val: 900},
{key: "2020 г.", val: 797},
{key: "2021 г.", val: 927},
{key: "2022 г.", val: 818},
{key: "2023 г.", val: 637}
]}
],
yAxisData: [
{key: "2016 г.", val: 93},
{key: "2017 г.", val: 507},
{key: "2018 г.", val: 755},
{key: "2019 г.", val: 900},
{key: "2020 г.", val: 797},
{key: "2021 г.", val: 927},
{key: "2022 г.", val: 818},
{key: "2023 г.", val: 637}
]}
}
const dataMachines = [
@ -1305,282 +1305,282 @@ const dataMachines = [
]
const dataMount = [
{
client_type: "ЦДИМ",
device_count: 6,
mounter_type: "Тулажелдормаш",
year: "2023 г."
},
{
client_type: "Трансэнерго",
device_count: 1,
mounter_type: "ВНИИЖТ",
year: "2018 г."
},
{
client_type: "ЦДРП",
device_count: 86,
mounter_type: "Калугапутьмаш",
year: "2019 г."
},
{
client_type: "ЦДИМ",
device_count: 593,
mounter_type: "ВНИИЖТ",
year: "2020 г."
},
{
client_type: "ЦДИМ",
device_count: 589,
mounter_type: "ВНИИЖТ",
year: "2018 г."
},
{
client_type: "ЦДИМ",
device_count: 12,
mounter_type: "Тулажелдормаш",
year: "2022 г."
},
{
client_type: "ЦДРП",
device_count: 8,
mounter_type: "Тулажелдормаш",
year: "2022 г."
},
{
client_type: "ЦДИМ",
device_count: 3,
mounter_type: "Калугапутьмаш",
year: "2018 г."
},
{
client_type: "ЦДИМ",
device_count: 347,
mounter_type: "ВНИИЖТ",
year: "2017 г."
},
{
client_type: "ЦДИМ",
device_count: 8,
mounter_type: "Тулажелдормаш",
year: "2017 г."
},
{
client_type: "ЦДРП",
device_count: 1,
mounter_type: "КалугаРПМ",
year: "2021 г."
},
{
client_type: "ЦДИМ",
device_count: 7,
mounter_type: "КалугаРПМ",
year: "2018 г."
},
{
client_type: "ЦДИМ",
device_count: 27,
mounter_type: "Тихорецкий завод им Воровского",
year: "2019 г."
},
{
client_type: "ЦДИМ",
device_count: 1,
mounter_type: "Свердловский РПМ",
year: "2022 г."
},
{
client_type: "Иные",
device_count: 6,
mounter_type: "Тихорецкий завод им Воровского",
year: "2019 г."
},
{
client_type: "Иные",
device_count: 4,
mounter_type: "Тихорецкий завод им Воровского",
year: "2023 г."
},
{
client_type: "Трансэнерго",
device_count: 16,
mounter_type: "ВНИИЖТ",
year: "2016 г."
},
{
client_type: "ЦДИМ",
device_count: 5,
mounter_type: "Пермский РПМ",
year: "2021 г."
},
{
client_type: null,
device_count: 1,
mounter_type: "Инжиниринг Сервис-Путьмаш",
year: "2022 г."
},
{
client_type: "ЦДИМ",
device_count: 2,
mounter_type: "КалугаРПМ",
year: "2022 г."
},
{
client_type: "ЦДИМ",
device_count: 4,
mounter_type: "КалугаРПМ",
year: "2021 г."
},
{
client_type: "ЦДРП",
device_count: 2,
mounter_type: "Калугапутьмаш",
year: "2023 г."
},
{
client_type: "ЦДРП",
device_count: 80,
mounter_type: "Калугапутьмаш",
year: "2021 г."
},
{
client_type: "ЦДИМ",
device_count: 2,
mounter_type: "КалугаРПМ",
year: "2023 г."
},
{
client_type: "ЦДРП",
device_count: 8,
mounter_type: "Тулажелдормаш",
year: "2021 г."
},
{
client_type: "ЦДИМ",
device_count: 20,
mounter_type: "Свердловский РПМ",
year: "2019 г."
},
{
client_type: "ЦДИМ",
device_count: 4,
mounter_type: "Тихорецкий завод им Воровского",
year: "2022 г."
},
{
client_type: "Трансэнерго",
device_count: 1,
mounter_type: "ВНИИЖТ",
year: "2022 г."
},
{
client_type: "Иные",
device_count: 2,
mounter_type: "ВНИИЖТ",
year: "2017 г."
},
{
client_type: "ЦДРП",
device_count: 1,
mounter_type: "Калугапутьмаш",
year: "2016 г."
},
{
client_type: "ЦДРП",
device_count: 181,
mounter_type: "ВНИИЖТ",
year: "2023 г."
},
{
client_type: "ЦДРП",
device_count: 100,
mounter_type: "Калугапутьмаш",
year: "2020 г."
},
{
client_type: "ЦДИМ",
device_count: 76,
mounter_type: "ВНИИЖТ",
year: "2016 г."
},
{
client_type: "ЦДИМ",
device_count: 29,
mounter_type: "Свердловский РПМ",
year: "2018 г."
},
{
client_type: "ЦДИМ",
device_count: 4,
mounter_type: "Калугапутьмаш",
year: "2021 г."
},
{
client_type: null,
device_count: 1,
mounter_type: "ВНИИЖТ",
year: "2020 г."
},
{
client_type: "ЦДИМ",
device_count: 5,
mounter_type: "Тихорецкий завод им Воровского",
year: "2021 г."
},
{
client_type: "Иные",
device_count: 25,
mounter_type: "Тихорецкий завод им Воровского",
year: "2020 г."
},
{
client_type: "ЦДРП",
device_count: 15,
mounter_type: "Тулажелдормаш",
year: "2019 г."
},
{
client_type: "ЦДИМ",
device_count: 4,
mounter_type: "Инжиниринг Сервис-Путьмаш",
year: "2023 г."
},
{
client_type: "ЦДИМ",
device_count: 2,
mounter_type: "Калугапутьмаш",
year: "2019 г."
},
{
client_type: "ЦДРП",
device_count: 1,
mounter_type: "ВНИИЖТ",
year: "2022 г."
},
{
client_type: "ЦДРП",
device_count: 3,
mounter_type: "Кировский машзавод",
year: "2023 г."
},
{
client_type: "ЦДРП",
device_count: 26,
mounter_type: "Тулажелдормаш",
year: "2020 г."
},
{
client_type: "ЦДИМ",
device_count: 3,
mounter_type: "Тихорецкий завод им Воровского",
year: "2023 г."
},
{
client_type: "ЦДИМ",
device_count: 16,
mounter_type: "КалугаРПМ",
year: "2019 г."
},
{
client_type: "ЦДИМ",
device_count: 6,
mounter_type: "Тулажелдормаш",
year: "2023 г."
},
{
client_type: "Трансэнерго",
device_count: 1,
mounter_type: "ВНИИЖТ",
year: "2018 г."
},
{
client_type: "ЦДРП",
device_count: 86,
mounter_type: "Калугапутьмаш",
year: "2019 г."
},
{
client_type: "ЦДИМ",
device_count: 593,
mounter_type: "ВНИИЖТ",
year: "2020 г."
},
{
client_type: "ЦДИМ",
device_count: 589,
mounter_type: "ВНИИЖТ",
year: "2018 г."
},
{
client_type: "ЦДИМ",
device_count: 12,
mounter_type: "Тулажелдормаш",
year: "2022 г."
},
{
client_type: "ЦДРП",
device_count: 8,
mounter_type: "Тулажелдормаш",
year: "2022 г."
},
{
client_type: "ЦДИМ",
device_count: 3,
mounter_type: "Калугапутьмаш",
year: "2018 г."
},
{
client_type: "ЦДИМ",
device_count: 347,
mounter_type: "ВНИИЖТ",
year: "2017 г."
},
{
client_type: "ЦДИМ",
device_count: 8,
mounter_type: "Тулажелдормаш",
year: "2017 г."
},
{
client_type: "ЦДРП",
device_count: 1,
mounter_type: "КалугаРПМ",
year: "2021 г."
},
{
client_type: "ЦДИМ",
device_count: 7,
mounter_type: "КалугаРПМ",
year: "2018 г."
},
{
client_type: "ЦДИМ",
device_count: 27,
mounter_type: "Тихорецкий завод им Воровского",
year: "2019 г."
},
{
client_type: "ЦДИМ",
device_count: 1,
mounter_type: "Свердловский РПМ",
year: "2022 г."
},
{
client_type: "Иные",
device_count: 6,
mounter_type: "Тихорецкий завод им Воровского",
year: "2019 г."
},
{
client_type: "Иные",
device_count: 4,
mounter_type: "Тихорецкий завод им Воровского",
year: "2023 г."
},
{
client_type: "Трансэнерго",
device_count: 16,
mounter_type: "ВНИИЖТ",
year: "2016 г."
},
{
client_type: "ЦДИМ",
device_count: 5,
mounter_type: "Пермский РПМ",
year: "2021 г."
},
{
client_type: null,
device_count: 1,
mounter_type: "Инжиниринг Сервис-Путьмаш",
year: "2022 г."
},
{
client_type: "ЦДИМ",
device_count: 2,
mounter_type: "КалугаРПМ",
year: "2022 г."
},
{
client_type: "ЦДИМ",
device_count: 4,
mounter_type: "КалугаРПМ",
year: "2021 г."
},
{
client_type: "ЦДРП",
device_count: 2,
mounter_type: "Калугапутьмаш",
year: "2023 г."
},
{
client_type: "ЦДРП",
device_count: 80,
mounter_type: "Калугапутьмаш",
year: "2021 г."
},
{
client_type: "ЦДИМ",
device_count: 2,
mounter_type: "КалугаРПМ",
year: "2023 г."
},
{
client_type: "ЦДРП",
device_count: 8,
mounter_type: "Тулажелдормаш",
year: "2021 г."
},
{
client_type: "ЦДИМ",
device_count: 20,
mounter_type: "Свердловский РПМ",
year: "2019 г."
},
{
client_type: "ЦДИМ",
device_count: 4,
mounter_type: "Тихорецкий завод им Воровского",
year: "2022 г."
},
{
client_type: "Трансэнерго",
device_count: 1,
mounter_type: "ВНИИЖТ",
year: "2022 г."
},
{
client_type: "Иные",
device_count: 2,
mounter_type: "ВНИИЖТ",
year: "2017 г."
},
{
client_type: "ЦДРП",
device_count: 1,
mounter_type: "Калугапутьмаш",
year: "2016 г."
},
{
client_type: "ЦДРП",
device_count: 181,
mounter_type: "ВНИИЖТ",
year: "2023 г."
},
{
client_type: "ЦДРП",
device_count: 100,
mounter_type: "Калугапутьмаш",
year: "2020 г."
},
{
client_type: "ЦДИМ",
device_count: 76,
mounter_type: "ВНИИЖТ",
year: "2016 г."
},
{
client_type: "ЦДИМ",
device_count: 29,
mounter_type: "Свердловский РПМ",
year: "2018 г."
},
{
client_type: "ЦДИМ",
device_count: 4,
mounter_type: "Калугапутьмаш",
year: "2021 г."
},
{
client_type: null,
device_count: 1,
mounter_type: "ВНИИЖТ",
year: "2020 г."
},
{
client_type: "ЦДИМ",
device_count: 5,
mounter_type: "Тихорецкий завод им Воровского",
year: "2021 г."
},
{
client_type: "Иные",
device_count: 25,
mounter_type: "Тихорецкий завод им Воровского",
year: "2020 г."
},
{
client_type: "ЦДРП",
device_count: 15,
mounter_type: "Тулажелдормаш",
year: "2019 г."
},
{
client_type: "ЦДИМ",
device_count: 4,
mounter_type: "Инжиниринг Сервис-Путьмаш",
year: "2023 г."
},
{
client_type: "ЦДИМ",
device_count: 2,
mounter_type: "Калугапутьмаш",
year: "2019 г."
},
{
client_type: "ЦДРП",
device_count: 1,
mounter_type: "ВНИИЖТ",
year: "2022 г."
},
{
client_type: "ЦДРП",
device_count: 3,
mounter_type: "Кировский машзавод",
year: "2023 г."
},
{
client_type: "ЦДРП",
device_count: 26,
mounter_type: "Тулажелдормаш",
year: "2020 г."
},
{
client_type: "ЦДИМ",
device_count: 3,
mounter_type: "Тихорецкий завод им Воровского",
year: "2023 г."
},
{
client_type: "ЦДИМ",
device_count: 16,
mounter_type: "КалугаРПМ",
year: "2019 г."
},
]
@ -2366,11 +2366,11 @@ const multiReport = {
}
],
diagExcludeSps: [993, 1062, 3078, 1136, 1109, 1618, 1085, 2936, 1669, 1045,
1739, 1525, 1869, 1461, 1843, 928, 1940, 1907, 1482, 1870, 1813, 1131,
1133, 1515, 1800, 2151, 1833, 1068, 1110, 1000, 2904, 926, 2964, 917, 2903,
1743, 1738, 1469, 2902, 1478, 999, 1801, 1742, 1139, 1141, 1842, ],
1739, 1525, 1869, 1461, 1843, 928, 1940, 1907, 1482, 1870, 1813, 1131,
1133, 1515, 1800, 2151, 1833, 1068, 1110, 1000, 2904, 926, 2964, 917, 2903,
1743, 1738, 1469, 2902, 1478, 999, 1801, 1742, 1139, 1141, 1842, ],
diagTables: ["as", "dsp", "dyn", "mpt", "pmg", "rpb", "rs", "schom", "sm",
"uk", "uni", "utm", "vpo", ""],
"uk", "uni", "utm", "vpo", ""],
id: 197,
insertedAt: "2023-03-15 06:27:41",
isProd: true,
@ -2423,7 +2423,7 @@ const multiReport = {
const multiPackStructure = [
// %LiveMonitor.Packages.Models.PackStruct{
// __meta__: #Ecto.Schema.Metadata<:loaded, "pack_struct">,
// __meta__: #Ecto.Schema.Metadata<:loaded, "pack_struct">,
{
id: 197,
description: null,
@ -2523,7 +2523,7 @@ const multiPackStructure = [
}
],
diag_tables: ["as", "dsp", "dyn", "mpt", "pmg", "rpb", "rs", "schom", "sm",
"uk", "uni", "utm", "vpo", ""],
"uk", "uni", "utm", "vpo", ""],
diag_exclude_tables: null,
diag_classifications: null,
diag_types: null,
@ -2531,9 +2531,9 @@ const multiPackStructure = [
diag_exclude_classifications: null,
diag_exclude_types: null,
diag_exclude_sps: [993, 1062, 3078, 1136, 1109, 1618, 1085, 2936, 1669,
1045, 1739, 1525, 1869, 1461, 1843, 928, 1940, 1907, 1482, 1870, 1813,
1131, 1133, 1515, 1800, 2151, 1833, 1068, 1110, 1000, 2904, 926, 2964,
],
1045, 1739, 1525, 1869, 1461, 1843, 928, 1940, 1907, 1482, 1870, 1813,
1131, 1133, 1515, 1800, 2151, 1833, 1068, 1110, 1000, 2904, 926, 2964,
],
pack_group_id: 28,
// pack_group: #Ecto.Association.NotLoaded<association :pack_group is not loaded>,
inserted_at: "2023-03-15 06:27:41",
@ -2838,8 +2838,8 @@ const multiPackStructure = [
diag_classifications: null,
diag_types: null,
diag_sps: [993, 1062, 3078, 1136, 1109, 1618, 1085, 2936, 1669, 1045, 1739,
1525, 1869, 1461, 1843, 928, 1940, 1907, 1482, 1870, 1813, 1131, 1133,
1515, 1800, 2151, 1833, 1068, 1110, 1000, 2904, 926, 2964, 917, ],
1525, 1869, 1461, 1843, 928, 1940, 1907, 1482, 1870, 1813, 1131, 1133,
1515, 1800, 2151, 1833, 1068, 1110, 1000, 2904, 926, 2964, 917, ],
diag_exclude_classifications: null,
diag_exclude_types: null,
diag_exclude_sps: null,

16
live_monitor_vue/src/store/modules/layoutMachines/helpers.js
View File

@ -14,14 +14,14 @@ const prepareSelects = (selects, selectors) => {
// console.log('updSelects', updatedSelects)
const filteredSelects = updatedSelects.map((el) => ({...el, data: el.data.reduce((acc, select) => {
if (select) {
const newSelect = {name: select}
acc = [...acc, newSelect]
} else {
acc
}
return acc
}, [])
if (select) {
const newSelect = {name: select}
acc = [...acc, newSelect]
} else {
acc
}
return acc
}, [])
})).sort((a, b) => a.order - b.order)
// console.log('filteredSelects', filteredSelects)
return filteredSelects

738
live_monitor_vue/src/store/modules/layoutMachines/helpersCharts.js
View File

@ -1,431 +1,431 @@
import { chartsFilterParams, chartsGroupByParams, chartsGroupByParams2, chartsFilterKeysMl, chartsMountParams, chartsBarTypesParams, chartsBarTypesGroupByParams, chartsBarTypesWithoutLayoutParams } from "./StaticData"
import {cond, uniq, has, T} from 'ramda'
const setPeriodCharts = (filterKeys) => {
if (typeof filterKeys === 'array') return {period: 'dayly', title: '24 часа'}
switch(filterKeys) {
case 'commun': return {period: 'yearly', title: "год"}
case 'rors': return {period: 'dayly', title: "на данный момент"}
case 'routes': return {period: 'weekly', title: "две недели"}
default: return {period: 'dayly', title: "на данный момент"}
const setPeriodCharts = (filterKeys) => {
if (typeof filterKeys === 'array') return {period: 'dayly', title: '24 часа'}
switch(filterKeys) {
case 'commun': return {period: 'yearly', title: "год"}
case 'rors': return {period: 'dayly', title: "на данный момент"}
case 'routes': return {period: 'weekly', title: "две недели"}
default: return {period: 'dayly', title: "на данный момент"}
}
}
const setNamesMl = (filterKey) => {
if (!filterKey) return null
switch(filterKey) {
case 'routes_common': return 'Обычные'
case 'routes_emergency': return 'Аварийные'
case 'routes_other': return 'Прочие'
case 'routes_repair': return 'Ремонтные'
case 'routes_without_leaving': return 'Без выезда'
case 'routes_without_ml': return 'СПС без МЛ'
default: return ''
}
}
const setMachinesClass = (typeId) => {
if (typeId) {
switch(typeId) {
case 'mpt_types': return 'МРТ'
case 'gdsm_types': return 'ЖДСМ'
case 'sm_pss_types': return 'СМ'
default: return ''
}
}
}
const setNamesMl = (filterKey) => {
if (!filterKey) return null
switch(filterKey) {
case 'routes_common': return 'Обычные'
case 'routes_emergency': return 'Аварийные'
case 'routes_other': return 'Прочие'
case 'routes_repair': return 'Ремонтные'
case 'routes_without_leaving': return 'Без выезда'
case 'routes_without_ml': return 'СПС без МЛ'
default: return ''
}
const setFilterValues = (machineValue, filterParams) => {
if(filterParams.values.includes(machineValue.toLowerCase())) {
return {name: machineValue}
}
}
const setMachinesClass = (typeId) => {
if (typeId) {
switch(typeId) {
case 'mpt_types': return 'МРТ'
case 'gdsm_types': return 'ЖДСМ'
case 'sm_pss_types': return 'СМ'
default: return ''
}
}
}
const setFilterValues = (machineValue, filterParams) => {
if(filterParams.values.includes(machineValue.toLowerCase())) {
return {name: machineValue}
}
}
const setCountMachinesMl = (arr, counter = 0) => {
return arr.reduce((acc, item) => {
if (item && item.length > 0) {
return setCountMachinesMl(item, acc)
} else {
if (item.charts?.value) {
acc = acc + item.charts?.value
} else {
acc
}
}
return acc
}, counter)
}
/* Charts updated data */
const chartsPie = (data, filterParams) => {
// {list, _resp} = Agents.MachineList.get_machines(set_period_loading_charts(filterKey).period, params) apiHelpers
const countMachines = data?.length
const machines = data.reduce((acc, machine) => {
if (machine[filterParams.filterKey]) {
acc.push(setFilterValues(machine[filterParams.filterKey], filterParams))
const setCountMachinesMl = (arr, counter = 0) => {
return arr.reduce((acc, item) => {
if (item && item.length > 0) {
return setCountMachinesMl(item, acc)
} else {
if (item.charts?.value) {
acc = acc + item.charts?.value
} else {
acc
}
return acc
}, [])
}
return acc
}, counter)
}
// const isFilteredMachine = machines.find((el) => filterParams.values.includes(el.name.toLowerCase()))
const groupByfiltered = machines.reduce((acc, machine) => {
if (filterParams.values.includes(machine.name.toLowerCase())) {
const count = machines.filter((el) => el.name === machine.name).length
const filteredMachines = {name: machine.name, value: count}
acc = uniq([...acc, filteredMachines])
} else {
acc
}
return acc
}, [])
return {countMachines: countMachines, period: setPeriodCharts(filterParams.filterKey).title, machines: groupByfiltered}
}
/* Charts updated data */
const chartsPieGroupedBy = (data, groupByParams, filterParams) => {
const chartsPie = (data, filterParams) => {
// {list, _resp} = Agents.MachineList.get_machines(set_period_loading_charts(filterKey).period, params) apiHelpers
const filteredGroupByParams = data.filter((machine) => machine[groupByParams.groupByKey] && machine[groupByParams.groupByKey].toLowerCase() === groupByParams.value)
const countMachines = filteredGroupByParams?.length
const countMachines = data?.length
const machines = data.reduce((acc, machine) => {
if (machine[filterParams.filterKey]) {
acc.push(setFilterValues(machine[filterParams.filterKey], filterParams))
} else {
acc
}
return acc
}, [])
const machines = filteredGroupByParams.reduce((acc, machine) => {
// const isFilteredMachine = machines.find((el) => filterParams.values.includes(el.name.toLowerCase()))
const groupByfiltered = machines.reduce((acc, machine) => {
if (filterParams.values.includes(machine.name.toLowerCase())) {
const count = machines.filter((el) => el.name === machine.name).length
const filteredMachines = {name: machine.name, value: count}
acc = uniq([...acc, filteredMachines])
} else {
acc
}
return acc
}, [])
return {countMachines: countMachines, period: setPeriodCharts(filterParams.filterKey).title, machines: groupByfiltered}
}
const chartsPieGroupedBy = (data, groupByParams, filterParams) => {
const filteredGroupByParams = data.filter((machine) => machine[groupByParams.groupByKey] && machine[groupByParams.groupByKey].toLowerCase() === groupByParams.value)
const countMachines = filteredGroupByParams?.length
const machines = filteredGroupByParams.reduce((acc, machine) => {
if (machine[filterParams.filterKey]) {
acc.push(setFilterValues(machine[filterParams.filterKey], filterParams))
} else {
acc
}
return acc
}, [])
if (machine[filterParams.filterKey]) {
acc.push(setFilterValues(machine[filterParams.filterKey], filterParams))
} else {
acc
}
return acc
}, [])
const filteredMachines = machines.reduce((acc, machine) => {
if (filterParams.values.includes(machine.name.toLowerCase())) {
const count = machines.filter((el) => el.name === machine.name).length
const filteredMachines = {name: machine.name, value: count}
acc = uniq([...acc, filteredMachines])
const filteredMachines = machines.reduce((acc, machine) => {
if (filterParams.values.includes(machine.name.toLowerCase())) {
const count = machines.filter((el) => el.name === machine.name).length
const filteredMachines = {name: machine.name, value: count}
acc = uniq([...acc, filteredMachines])
} else {
acc
}
return acc
}, [])
return {countMachines: countMachines, period: setPeriodCharts(filterParams.filterKey).title, machines: filteredMachines}
}
const chartsBarGroupedByMl = (data, filterKeysMl) => {
const machinesWithMl = filterKeysMl.map((filterKey) => {
const filteredWithMl = data.reduce((acc, machine) => {
if (machine[filterKey] === 0 || machine[filterKey]) {
acc = [...acc, {[filterKey]: machine[filterKey]}]
} else {
acc
}
return acc
}, [])
return {countMachines: countMachines, period: setPeriodCharts(filterParams.filterKey).title, machines: filteredMachines}
}
const chartsBarGroupedByMl = (data, filterKeysMl) => {
const machinesWithMl = filterKeysMl.map((filterKey) => {
const filteredWithMl = data.reduce((acc, machine) => {
if (machine[filterKey] === 0 || machine[filterKey]) {
acc = [...acc, {[filterKey]: machine[filterKey]}]
} else {
acc
}
return acc
}, [])
const count = filteredWithMl.reduce((acc, machine) => {
acc = acc + parseFloat(machine[filterKey])
return acc
}, 0)
const count = filteredWithMl.reduce((acc, machine) => {
acc = acc + parseFloat(machine[filterKey])
return acc
}, 0)
return {key: filterKey, name: setNamesMl(filterKey), machinesCount: filteredWithMl.length, value: count}
})
return {key: filterKey, name: setNamesMl(filterKey), machinesCount: filteredWithMl.length, value: count}
})
// console.log('machinesWithMl', machinesWithMl)
// console.log('machinesWithMl', machinesWithMl)
const countMachinesWithMl = Math.floor((machinesWithMl.reduce((acc, machine) => {
return acc + machine.machinesCount
}, 0)) / filterKeysMl.length)
const countMachinesWithMl = Math.floor((machinesWithMl.reduce((acc, machine) => {
return acc + machine.machinesCount
}, 0)) / filterKeysMl.length)
const machinesWithoutMl = filterKeysMl.map((filterKey) => {
const countNull = data.reduce((acc, machine) => {
if (machine[filterKey] === null) {
acc = acc + 1
const machinesWithoutMl = filterKeysMl.map((filterKey) => {
const countNull = data.reduce((acc, machine) => {
if (machine[filterKey] === null) {
acc = acc + 1
} else {
acc
}
return acc
}, 0)
return {key: filterKey, value: countNull}
})
// console.log('machinesWithoutMl', machinesWithoutMl)
const countMachinesWithoutMl = Math.floor((machinesWithoutMl.reduce((acc, machine) => {
return acc + machine.value
}, 0)) / filterKeysMl.length // Либо только машины, если без деления тогда все null МЛ суммируются
)
machinesWithMl.push({key: 'routes_without_ml', name: setNamesMl('routes_without_ml'), value: countMachinesWithoutMl})
return {countMachinesWithMl: countMachinesWithMl, period: setPeriodCharts(filterKeysMl).title, machines: machinesWithMl}
}
const chartsBarMount = (data, groupByKey, filterKey, countKey) => {
const groupByData = Object.groupBy(data, (el) => el[groupByKey])
const yAxisData = Object.entries(groupByData).map(([key, val]) => ({key: key, val: val.reduce((acc, val) => acc + val[countKey], 0)}))
const xAxisData = Object.entries(groupByData).map(([key, groupArr]) => {
const groupByFilterData = Object.groupBy(groupArr, (el) => el[filterKey])
const newArr = Object.entries(groupByFilterData).map(([key, val]) => ({name: key, value: val.reduce((acc, val) => acc + val[countKey], 0)}))
return {yAxisData: key, totalCount: groupArr.length, charts: newArr}
})
const countMounts = yAxisData.reduce((acc, year) => (acc + year.val), 0)
return {yAxisData: yAxisData, xAxisData: xAxisData, countMounts: countMounts, filterKey: filterKey}
}
const chartsBarTypes = (data, groupByKey, filterKey, prevGroupByData, prevGroupByFilters) => {
const countMachines = data.length
const groupByData = Object.groupBy(data, (el) => el[groupByKey])
const yAxisData = Object.entries(groupByData).map(([key, val]) => ({key: key, val: val.length}))
const xAxisData = Object.entries(groupByData).map(([key, groupArr]) => {
const groupByFilterData = Object.groupBy(groupArr, (el) => el[filterKey])
const newArr = Object.entries(groupByFilterData).map(([key, val]) => ({name: key, value: val.length, linkData: groupByKey === 'machine_type' ? val.map((el) => ({machine_type: el.machine_type, device_number: el.device_number})) : ''}))
return {yAxisData: key, totalCount: groupArr.length, charts: newArr}
})
return {yAxisData: yAxisData, xAxisData: xAxisData, countMachines: countMachines, period: setPeriodCharts(filterKey).title, filterKey: filterKey, groupByKey: groupByKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters}
}
const chartsBarTypesGroupedBy = (data, groupByKey, filterKey, prevGroupByData, prevGroupByFilters, typeId) => {
const machineClass = setMachinesClass(typeId)
const machinesFilteredClass = data.filter(({machine_class}) => machine_class === machineClass)
const groupByData = Object.groupBy(machinesFilteredClass, (el) => el[groupByKey])
const yAxisData = Object.entries(groupByData).map(([key, val]) => ({key: key, val: val.length}))
const xAxisData = Object.entries(groupByData).map(([key, groupArr]) => {
const groupByFilterData = Object.groupBy(groupArr, (el) => el[filterKey])
const newArr = Object.entries(groupByFilterData).map(([key, val]) => ({name: key, value: val.length, linkData: groupByKey === 'machine_type' ? val.map((el) => ({machine_type: el.machine_type, device_number: el.device_number})) : ''}))
return {yAxisData: key, totalCount: groupArr.length, charts: newArr}
})
const countMachines = yAxisData.reduce((acc, type) => acc + type.val, 0)
return {yAxisData: yAxisData, xAxisData: xAxisData, countMachines: countMachines, period: setPeriodCharts(filterKey).title, filterKey: filterKey, groupByKey: groupByKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters, typeId: typeId}
}
const chartsBarTypesWithoutFirstLayout = (data, groupByKey, filterKey, prevGroupByData, prevGroupByFilters, groupByValue) => {
const groupByData = Object.groupBy(data, (el) => el['org_type_name'])
const filteredGroupByData = Object.entries(groupByData).filter(([key, val]) => key === groupByValue)
if (filteredGroupByData.length === 0) return {yAxisData: [], xAxisData: [], countMachines: 0, period: setPeriodCharts(filterKey).title, filterKey: filterKey, groupByKey: groupByKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters, groupByValue: groupByValue}
const [groupedByGroupByKeyY] = filteredGroupByData.map(([key, groupArr]) => Object.groupBy(groupArr, (el) => el[groupByKey]))
const yAxisData = Object.entries(groupedByGroupByKeyY).map(([key, val]) => ({key: key, val: val.length}))
const [groupedByGroupByKeyX] = filteredGroupByData.map(([key, groupArr]) => Object.groupBy(groupArr, (el) => el[groupByKey]))
const xAxisData = Object.entries(groupedByGroupByKeyX).map(([key, groupArr]) => {
const groupByFilterData = Object.groupBy(groupArr, (el) => el[filterKey])
const newArr = Object.entries(groupByFilterData).map(([key, val]) => ({name: key, value: val.length, linkData: groupByKey === 'machine_type' ? val.map((el) => ({machine_type: el.machine_type, device_number: el.device_number})) : ''}))
return {yAxisData: key, totalCount: groupArr.length, charts: newArr}
})
const countMachines = yAxisData.reduce((acc, type) => acc + type.val, 0)
return {yAxisData: yAxisData, xAxisData: xAxisData, countMachines: countMachines, period: setPeriodCharts(filterKey).title, filterKey: filterKey, groupByKey: groupByKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters, groupByValue: groupByValue}
}
const chartsBarTypesGroupedByMl = (data, groupByKey, filterKeys, prevGroupByData, prevGroupByFilters) => {
const groupByData = Object.groupBy(data, (el) => el[groupByKey])
const yAxisData = Object.entries(groupByData).map(([key, val]) => {
const allValuesArr = filterKeys.map((filterKey) => {
const machinesWithMl = val.reduce((acc, el) => {
if (el[filterKey] || el[filterKey] === 0) {
acc = acc + el[filterKey]
} else {
acc
}
return acc
}, 0)
return {key: filterKey, value: countNull}
const machinesWithoutMl = val.filter((el) => el[filterKey] === null).length
return {machinesWithMl: machinesWithMl, machinesWithoutMl: machinesWithoutMl}
})
// console.log('machinesWithoutMl', machinesWithoutMl)
const countMachinesWithoutMl = Math.floor((machinesWithoutMl.reduce((acc, machine) => {
return acc + machine.value
}, 0)) / filterKeysMl.length // Либо только машины, если без деления тогда все null МЛ суммируются
)
machinesWithMl.push({key: 'routes_without_ml', name: setNamesMl('routes_without_ml'), value: countMachinesWithoutMl})
return {countMachinesWithMl: countMachinesWithMl, period: setPeriodCharts(filterKeysMl).title, machines: machinesWithMl}
}
const chartsBarMount = (data, groupByKey, filterKey, countKey) => {
const groupByData = Object.groupBy(data, (el) => el[groupByKey])
const yAxisData = Object.entries(groupByData).map(([key, val]) => ({key: key, val: val.reduce((acc, val) => acc + val[countKey], 0)}))
const xAxisData = Object.entries(groupByData).map(([key, groupArr]) => {
const groupByFilterData = Object.groupBy(groupArr, (el) => el[filterKey])
const newArr = Object.entries(groupByFilterData).map(([key, val]) => ({name: key, value: val.reduce((acc, val) => acc + val[countKey], 0)}))
return {yAxisData: key, totalCount: groupArr.length, charts: newArr}
})
const countMounts = yAxisData.reduce((acc, year) => (acc + year.val), 0)
return {yAxisData: yAxisData, xAxisData: xAxisData, countMounts: countMounts, filterKey: filterKey}
}
const chartsBarTypes = (data, groupByKey, filterKey, prevGroupByData, prevGroupByFilters) => {
const countMachines = data.length
const groupByData = Object.groupBy(data, (el) => el[groupByKey])
const yAxisData = Object.entries(groupByData).map(([key, val]) => ({key: key, val: val.length}))
const xAxisData = Object.entries(groupByData).map(([key, groupArr]) => {
const groupByFilterData = Object.groupBy(groupArr, (el) => el[filterKey])
const newArr = Object.entries(groupByFilterData).map(([key, val]) => ({name: key, value: val.length, linkData: groupByKey === 'machine_type' ? val.map((el) => ({machine_type: el.machine_type, device_number: el.device_number})) : ''}))
return {yAxisData: key, totalCount: groupArr.length, charts: newArr}
})
return {yAxisData: yAxisData, xAxisData: xAxisData, countMachines: countMachines, period: setPeriodCharts(filterKey).title, filterKey: filterKey, groupByKey: groupByKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters}
}
const chartsBarTypesGroupedBy = (data, groupByKey, filterKey, prevGroupByData, prevGroupByFilters, typeId) => {
const machineClass = setMachinesClass(typeId)
const machinesFilteredClass = data.filter(({machine_class}) => machine_class === machineClass)
const groupByData = Object.groupBy(machinesFilteredClass, (el) => el[groupByKey])
const yAxisData = Object.entries(groupByData).map(([key, val]) => ({key: key, val: val.length}))
const xAxisData = Object.entries(groupByData).map(([key, groupArr]) => {
const groupByFilterData = Object.groupBy(groupArr, (el) => el[filterKey])
const newArr = Object.entries(groupByFilterData).map(([key, val]) => ({name: key, value: val.length, linkData: groupByKey === 'machine_type' ? val.map((el) => ({machine_type: el.machine_type, device_number: el.device_number})) : ''}))
return {yAxisData: key, totalCount: groupArr.length, charts: newArr}
})
const countMachines = yAxisData.reduce((acc, type) => acc + type.val, 0)
return {yAxisData: yAxisData, xAxisData: xAxisData, countMachines: countMachines, period: setPeriodCharts(filterKey).title, filterKey: filterKey, groupByKey: groupByKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters, typeId: typeId}
}
const chartsBarTypesWithoutFirstLayout = (data, groupByKey, filterKey, prevGroupByData, prevGroupByFilters, groupByValue) => {
const groupByData = Object.groupBy(data, (el) => el['org_type_name'])
const filteredGroupByData = Object.entries(groupByData).filter(([key, val]) => key === groupByValue)
if (filteredGroupByData.length === 0) return {yAxisData: [], xAxisData: [], countMachines: 0, period: setPeriodCharts(filterKey).title, filterKey: filterKey, groupByKey: groupByKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters, groupByValue: groupByValue}
const [groupedByGroupByKeyY] = filteredGroupByData.map(([key, groupArr]) => Object.groupBy(groupArr, (el) => el[groupByKey]))
const yAxisData = Object.entries(groupedByGroupByKeyY).map(([key, val]) => ({key: key, val: val.length}))
const [groupedByGroupByKeyX] = filteredGroupByData.map(([key, groupArr]) => Object.groupBy(groupArr, (el) => el[groupByKey]))
const xAxisData = Object.entries(groupedByGroupByKeyX).map(([key, groupArr]) => {
const groupByFilterData = Object.groupBy(groupArr, (el) => el[filterKey])
const newArr = Object.entries(groupByFilterData).map(([key, val]) => ({name: key, value: val.length, linkData: groupByKey === 'machine_type' ? val.map((el) => ({machine_type: el.machine_type, device_number: el.device_number})) : ''}))
return {yAxisData: key, totalCount: groupArr.length, charts: newArr}
})
const countMachines = yAxisData.reduce((acc, type) => acc + type.val, 0)
return {yAxisData: yAxisData, xAxisData: xAxisData, countMachines: countMachines, period: setPeriodCharts(filterKey).title, filterKey: filterKey, groupByKey: groupByKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters, groupByValue: groupByValue}
}
const chartsBarTypesGroupedByMl = (data, groupByKey, filterKeys, prevGroupByData, prevGroupByFilters) => {
const groupByData = Object.groupBy(data, (el) => el[groupByKey])
const yAxisData = Object.entries(groupByData).map(([key, val]) => {
const allValuesArr = filterKeys.map((filterKey) => {
const machinesWithMl = val.reduce((acc, el) => {
if (el[filterKey] || el[filterKey] === 0) {
acc = acc + el[filterKey]
} else {
acc
}
return acc
}, 0)
const machinesWithoutMl = val.filter((el) => el[filterKey] === null).length
return {machinesWithMl: machinesWithMl, machinesWithoutMl: machinesWithoutMl}
})
// console.log('allValuesArr', allValuesArr)
const countMachinesWithMl = allValuesArr.reduce((acc, count) => (acc + count.machinesWithMl), 0)
const countMachinesWithoutMl = allValuesArr.reduce((acc, count) => (acc + count.machinesWithoutMl), 0) / filterKeys.length // Для исключения дублирования делим н а длину filterKeys
// console.log('allValuesArr', allValuesArr)
const countMachinesWithMl = allValuesArr.reduce((acc, count) => (acc + count.machinesWithMl), 0)
const countMachinesWithoutMl = allValuesArr.reduce((acc, count) => (acc + count.machinesWithoutMl), 0) / filterKeys.length // Для исключения дублирования делим н а длину filterKeys
return {key: key, val: countMachinesWithMl + countMachinesWithoutMl}
return {key: key, val: countMachinesWithMl + countMachinesWithoutMl}
})
const xAxisData = Object.entries(groupByData).map(([key, groupArr]) => {
return filterKeys.map((filterKey) => {
const groupByFilterData = Object.groupBy(groupArr, (el) => el[filterKey])
const newArr = Object.entries(groupByFilterData).map(([key, val]) => ({key: filterKey, name: key, value: val.reduce((acc, el) => el[filterKey] ? acc + el[filterKey] : acc, 0), linkData: groupByKey === 'machine_type' ? val.map((el) => ({machine_type: el.machine_type, device_number: el.device_number})) : ''}
))
const machinesWithMl = newArr.reduce((acc, type) => {
if (type.key === filterKey) {
acc = {filterKey: filterKey, name: setNamesMl(filterKey), value: acc?.value + type.value, linkData: type.linkData}
} else {
acc = {filterKey: filterKey, name: setNamesMl(filterKey), value: acc?.value, linkData: type.linkData}
}
return acc
}, {value: 0})
// console.log('machinesWithMl', machinesWithMl)
return {yAxisData: key, charts: machinesWithMl}
})
})
const xAxisData = Object.entries(groupByData).map(([key, groupArr]) => {
return filterKeys.map((filterKey) => {
const groupByFilterData = Object.groupBy(groupArr, (el) => el[filterKey])
const newArr = Object.entries(groupByFilterData).map(([key, val]) => ({key: filterKey, name: key, value: val.reduce((acc, el) => el[filterKey] ? acc + el[filterKey] : acc, 0), linkData: groupByKey === 'machine_type' ? val.map((el) => ({machine_type: el.machine_type, device_number: el.device_number})) : ''}
))
const machinesWithMl = newArr.reduce((acc, type) => {
if (type.key === filterKey) {
acc = {filterKey: filterKey, name: setNamesMl(filterKey), value: acc?.value + type.value, linkData: type.linkData}
} else {
acc = {filterKey: filterKey, name: setNamesMl(filterKey), value: acc?.value, linkData: type.linkData}
}
return acc
}, {value: 0})
// console.log('machinesWithMl', machinesWithMl)
return {yAxisData: key, charts: machinesWithMl}
})
})
const machinesWithoutMl = Object.entries(groupByData).map(([key, val]) => {
const countWithoutMl = val.filter((el) => filterKeys.find((filterKey) => el[filterKey] === null)).length
return {yAxisData: key, charts: {filterKey: 'routes_without_ml', name: setNamesMl('routes_without_ml'), value: countWithoutMl, linkData: groupByKey === 'machine_type' ? val.map((el) => ({machine_type: el.machine_type, device_number: el.device_number})) : ''}}
})
const machinesWithoutMl = Object.entries(groupByData).map(([key, val]) => {
const countWithoutMl = val.filter((el) => filterKeys.find((filterKey) => el[filterKey] === null)).length
return {yAxisData: key, charts: {filterKey: 'routes_without_ml', name: setNamesMl('routes_without_ml'), value: countWithoutMl, linkData: groupByKey === 'machine_type' ? val.map((el) => ({machine_type: el.machine_type, device_number: el.device_number})) : ''}}
})
const countMachinesWithMl = setCountMachinesMl(xAxisData)
const countMachinesWithoutMl = Math.floor(setCountMachinesMl(machinesWithoutMl)) / filterKeys.length
const countMachinesWithMl = setCountMachinesMl(xAxisData)
const countMachinesWithoutMl = Math.floor(setCountMachinesMl(machinesWithoutMl)) / filterKeys.length
const updatedXAxisData = xAxisData.reduce((acc, group) => {
const isFindGroup = machinesWithoutMl.find((machine) => machine.yAxisData === group[0].yAxisData)
if (isFindGroup) {
const updatedGroup = [...group, isFindGroup]
acc.push(updatedGroup)
} else {
acc
}
return acc
}, [])
const updatedXAxisData = xAxisData.reduce((acc, group) => {
const isFindGroup = machinesWithoutMl.find((machine) => machine.yAxisData === group[0].yAxisData)
if (isFindGroup) {
const updatedGroup = [...group, isFindGroup]
acc.push(updatedGroup)
} else {
acc
}
return acc
}, [])
// console.log('updatedXAxisData', updatedXAxisData)
// console.log('updatedXAxisData', updatedXAxisData)
return {yAxisData: yAxisData, xAxisData: updatedXAxisData, countMachinesWithMl: countMachinesWithMl, countMachinesWithoutMl: countMachinesWithoutMl, period: setPeriodCharts(filterKeys).title, groupByKey: groupByKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters}
}
return {yAxisData: yAxisData, xAxisData: updatedXAxisData, countMachinesWithMl: countMachinesWithMl, countMachinesWithoutMl: countMachinesWithoutMl, period: setPeriodCharts(filterKeys).title, groupByKey: groupByKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters}
}
/* Charts updated data end */
/* Charts updated data end */
const loadingChartsData = ({chartsSetup, data, dataMount, prevGroupByData, prevGroupByFilters}) => {
const loadingChartsData = ({chartsSetup, data, dataMount, prevGroupByData, prevGroupByFilters}) => {
// console.log('dataPie', chartsPie(data, chartsFilterParams[0]))
// console.log('dataPieValue', chartsPieGroupByValue(data, chartsGroupByParams[0], chartsFilterParams[0]))
// console.log('dataPieTypes', chartsPieGroupedBy(data, chartsGroupByParams2[0], chartsFilterParams[0]))
// console.log('dataBarMl', chartsBarGroupedByMl(data, chartsFilterKeysMl))
// console.log('dataBarMount', chartsBarMount(dataMount, 'year', 'client_type', 'device_count'))
// console.log('chartsBarTypesGroupedByMl', chartsBarTypesGroupedByMl(data, 'org_type_name', chartsFilterKeysMl, {}, {}))
// console.log('dataPie', chartsPie(data, chartsFilterParams[0]))
// console.log('dataPieValue', chartsPieGroupByValue(data, chartsGroupByParams[0], chartsFilterParams[0]))
// console.log('dataPieTypes', chartsPieGroupedBy(data, chartsGroupByParams2[0], chartsFilterParams[0]))
// console.log('dataBarMl', chartsBarGroupedByMl(data, chartsFilterKeysMl))
// console.log('dataBarMount', chartsBarMount(dataMount, 'year', 'client_type', 'device_count'))
// console.log('chartsBarTypesGroupedByMl', chartsBarTypesGroupedByMl(data, 'org_type_name', chartsFilterKeysMl, {}, {}))
const filteredPie = chartsFilterParams.reduce((acc, param) => {
const idChart = `${param.filterKey}_pie`
return {...acc, [idChart]: chartsPie(data, param)}}, {}) // Далее объединение всех типов графиков
const filteredPie = chartsFilterParams.reduce((acc, param) => {
const idChart = `${param.filterKey}_pie`
return {...acc, [idChart]: chartsPie(data, param)}}, {}) // Далее объединение всех типов графиков
const filteredPieGroupByValue = chartsGroupByParams.reduce((acc, param) => {
const idChart = `${chartsFilterParams[0].filterKey}_pie_${param.valueId}`
return {...acc, [idChart]: chartsPieGroupedBy(data, param, chartsFilterParams[0])}}, {})
const filteredPieGroupByValue = chartsGroupByParams.reduce((acc, param) => {
const idChart = `${chartsFilterParams[0].filterKey}_pie_${param.valueId}`
return {...acc, [idChart]: chartsPieGroupedBy(data, param, chartsFilterParams[0])}}, {})
const filteredPieGroupByTypes = chartsGroupByParams2.reduce((acc, param) => {
const idChart = `${chartsFilterParams[0].filterKey}_pie_${param.valueId}`
return {...acc, [idChart]: chartsPieGroupedBy(data, param, chartsFilterParams[0])}}, {})
const filteredPieGroupByTypes = chartsGroupByParams2.reduce((acc, param) => {
const idChart = `${chartsFilterParams[0].filterKey}_pie_${param.valueId}`
return {...acc, [idChart]: chartsPieGroupedBy(data, param, chartsFilterParams[0])}}, {})
const filteredBarGroupByMl = {[`${chartsFilterParams[1].filterKey}_bar`]: chartsBarGroupedByMl(data, chartsFilterKeysMl)}
const filteredBarGroupByMl = {[`${chartsFilterParams[1].filterKey}_bar`]: chartsBarGroupedByMl(data, chartsFilterKeysMl)}
const filteredBarMount = chartsMountParams.reduce((acc, param) => {
const idChart = `mount_${param.filterKey}_bar`
return {...acc, [idChart]: chartsBarMount(dataMount, param.groupByKey, param.filterKey, param.countKey)}}, {})
const filteredBarMount = chartsMountParams.reduce((acc, param) => {
const idChart = `mount_${param.filterKey}_bar`
return {...acc, [idChart]: chartsBarMount(dataMount, param.groupByKey, param.filterKey, param.countKey)}}, {})
const filteredBarTypes = chartsBarTypesParams.reduce((acc, param) => {
const idChart = `${param.filterKey}_${param.valueId}_bar`
return {...acc, [idChart]: chartsBarTypes(data, param.groupByKey, param.filterKey, prevGroupByData, prevGroupByFilters)}}, {})
const filteredBarTypes = chartsBarTypesParams.reduce((acc, param) => {
const idChart = `${param.filterKey}_${param.valueId}_bar`
return {...acc, [idChart]: chartsBarTypes(data, param.groupByKey, param.filterKey, prevGroupByData, prevGroupByFilters)}}, {})
const filteredBarGroupByTypes = chartsBarTypesGroupByParams.reduce((acc, param) => {
const idChart = `${param.filterKey}_${param.valueId}_bar_${param.typeId}`
return {...acc, [idChart]: chartsBarTypesGroupedBy(data, param.groupByKey, param.filterKey, prevGroupByData, prevGroupByFilters, param.typeId)}}, {})
const filteredBarGroupByTypes = chartsBarTypesGroupByParams.reduce((acc, param) => {
const idChart = `${param.filterKey}_${param.valueId}_bar_${param.typeId}`
return {...acc, [idChart]: chartsBarTypesGroupedBy(data, param.groupByKey, param.filterKey, prevGroupByData, prevGroupByFilters, param.typeId)}}, {})
const filteredBarWithoutLayoutTypes = chartsBarTypesWithoutLayoutParams.reduce((acc, param) => {
const idChart = `${param.filterKey}_types_bar_${param.valueId}`
return {...acc, [idChart]: chartsBarTypesWithoutFirstLayout(data, param.groupByKey, param.filterKey, prevGroupByData, prevGroupByFilters, param.groupByValue)}}, {})
const filteredBarWithoutLayoutTypes = chartsBarTypesWithoutLayoutParams.reduce((acc, param) => {
const idChart = `${param.filterKey}_types_bar_${param.valueId}`
return {...acc, [idChart]: chartsBarTypesWithoutFirstLayout(data, param.groupByKey, param.filterKey, prevGroupByData, prevGroupByFilters, param.groupByValue)}}, {})
const filteredBarGroupByMlTypes = {[`${chartsFilterParams[1].filterKey}_types_bar_ml`]: chartsBarTypesGroupedByMl(data, 'org_type_name', chartsFilterKeysMl, prevGroupByData, prevGroupByFilters)}
const filteredBarGroupByMlTypes = {[`${chartsFilterParams[1].filterKey}_types_bar_ml`]: chartsBarTypesGroupedByMl(data, 'org_type_name', chartsFilterKeysMl, prevGroupByData, prevGroupByFilters)}
const allCharts = {...filteredPie, ...filteredPieGroupByValue, ...filteredPieGroupByTypes, ...filteredBarGroupByMl, ...filteredBarMount, ...filteredBarTypes, ...filteredBarGroupByTypes, ...filteredBarWithoutLayoutTypes, ...filteredBarGroupByMlTypes}
const allCharts = {...filteredPie, ...filteredPieGroupByValue, ...filteredPieGroupByTypes, ...filteredBarGroupByMl, ...filteredBarMount, ...filteredBarTypes, ...filteredBarGroupByTypes, ...filteredBarWithoutLayoutTypes, ...filteredBarGroupByMlTypes}
console.log('allCharts', allCharts)
console.log('allCharts', allCharts)
// console.log('this.charts', data)
const main = chartsSetup.main.reduce((acc, chart) => {
if (allCharts[chart.id]) {
const newChart = {...chart, data: allCharts[chart.id]}
acc = [...acc, newChart]
} else {
acc
}
return acc
}, [])
const types = chartsSetup.types.reduce((acc, chart) => {
if (allCharts[chart.id]) {
const newChart = {...chart, data: allCharts[chart.id]}
acc = [...acc, newChart]
} else {
acc
}
return acc
}, [])
return {...chartsSetup, main: main, types: types}
}
const setBarTypesChart = (activeChartParams, prevGroupByData, prevGroupByFilters, defaultData, currentData) => {
switch (activeChartParams.type) {
case 'default':
const dataDefault = chartsBarTypes(defaultData, activeChartParams.groupByKey, activeChartParams.filterKey, prevGroupByData, prevGroupByFilters)
// const updatedData = currentData.types.reduce((acc, chart) => {
// if (chart.id === activeChartParams.id) {
// const newChart = {...chart, data: data}
// acc = [...acc, newChart]
// } else {
// acc = [...acc, chart]
// }
// return acc
// }, [])
// return {main: currentData.main, types: updatedData}
return dataDefault
case 'without_first_layout':
const dataWithoutFirstLayout = chartsBarTypesWithoutFirstLayout(defaultData, activeChartParams.groupByKey, activeChartParams.filterKey, prevGroupByData, prevGroupByFilters, activeChartParams.groupByValue)
return dataWithoutFirstLayout
case 'types':
const dataGroupBy = chartsBarTypesGroupedBy(defaultData, activeChartParams.groupByKey, activeChartParams.filterKey, prevGroupByData, prevGroupByFilters, activeChartParams.groupByValue)
return dataGroupBy
case 'ml':
const dataMl = chartsBarTypesGroupedByMl(defaultData, activeChartParams.groupByKey, chartsFilterKeysMl, prevGroupByData, prevGroupByFilters)
return dataMl
// console.log('this.charts', data)
const main = chartsSetup.main.reduce((acc, chart) => {
if (allCharts[chart.id]) {
const newChart = {...chart, data: allCharts[chart.id]}
acc = [...acc, newChart]
} else {
acc
}
return acc
}, [])
const types = chartsSetup.types.reduce((acc, chart) => {
if (allCharts[chart.id]) {
const newChart = {...chart, data: allCharts[chart.id]}
acc = [...acc, newChart]
} else {
acc
}
return acc
}, [])
return {...chartsSetup, main: main, types: types}
}
const setBarTypesChart = (activeChartParams, prevGroupByData, prevGroupByFilters, defaultData, currentData) => {
switch (activeChartParams.type) {
case 'default':
const dataDefault = chartsBarTypes(defaultData, activeChartParams.groupByKey, activeChartParams.filterKey, prevGroupByData, prevGroupByFilters)
// const updatedData = currentData.types.reduce((acc, chart) => {
// if (chart.id === activeChartParams.id) {
// const newChart = {...chart, data: data}
// acc = [...acc, newChart]
// } else {
// acc = [...acc, chart]
// }
// return acc
// }, [])
// return {main: currentData.main, types: updatedData}
return dataDefault
case 'without_first_layout':
const dataWithoutFirstLayout = chartsBarTypesWithoutFirstLayout(defaultData, activeChartParams.groupByKey, activeChartParams.filterKey, prevGroupByData, prevGroupByFilters, activeChartParams.groupByValue)
return dataWithoutFirstLayout
case 'types':
const dataGroupBy = chartsBarTypesGroupedBy(defaultData, activeChartParams.groupByKey, activeChartParams.filterKey, prevGroupByData, prevGroupByFilters, activeChartParams.groupByValue)
return dataGroupBy
case 'ml':
const dataMl = chartsBarTypesGroupedByMl(defaultData, activeChartParams.groupByKey, chartsFilterKeysMl, prevGroupByData, prevGroupByFilters)
return dataMl
}
}
const setNextLayoutGroupByKey = (groupByKey, prevGroupByValue) => {
if (prevGroupByValue === 'без типа') return null
switch (groupByKey) {
case 'org_type_name': return 'railway_name'
case 'railway_name': return 'org_name'
case 'org_name': return 'type'
case 'type': return 'machine_type'
case 'zav_nomer': return 'machine_type'
default: return null
}
const setNextLayoutGroupByKey = (groupByKey, prevGroupByValue) => {
if (prevGroupByValue === 'без типа') return null
switch (groupByKey) {
case 'org_type_name': return 'railway_name'
case 'railway_name': return 'org_name'
case 'org_name': return 'type'
case 'type': return 'machine_type'
case 'zav_nomer': return 'machine_type'
default: return null
}
}
const setBeforeLayoutGroupByData = (prevGroupByData, prevGroupByFilters, type) => {
return cond([
[has('type'), () => ({org_name: prevGroupByFilters['org_name']})],
[has('org_name'), () => ({railway_name: prevGroupByFilters['railway_name']})],
[has('railway_name'), () => (type === 'without_first_layout' ? {} : {org_type_name: prevGroupByFilters['org_type_name']})],
[T, () => {}],
])(prevGroupByData)
const setBeforeLayoutGroupByData = (prevGroupByData, prevGroupByFilters, type) => {
return cond([
[has('type'), () => ({org_name: prevGroupByFilters['org_name']})],
[has('org_name'), () => ({railway_name: prevGroupByFilters['railway_name']})],
[has('railway_name'), () => (type === 'without_first_layout' ? {} : {org_type_name: prevGroupByFilters['org_type_name']})],
[T, () => {}],
])(prevGroupByData)
}
const typesCharts = (type) => {
switch (type) {
case 'pie': return true
case 'mount': return true
case 'mainMl': return true
default: return false
}
}
const typesCharts = (type) => {
switch (type) {
case 'pie': return true
case 'mount': return true
case 'mainMl': return true
default: return false
}
}
export { loadingChartsData, setBarTypesChart, setNextLayoutGroupByKey, setBeforeLayoutGroupByData, typesCharts }
export { loadingChartsData, setBarTypesChart, setNextLayoutGroupByKey, setBeforeLayoutGroupByData, typesCharts }

96
live_monitor_vue/src/store/modules/layoutMachines/index.js
View File

@ -210,7 +210,7 @@ const actions = {
break
}
if (updatedSelect.key === 'removed' && newSelected && (selectedSelects[curSelect.key] && selectedSelects[curSelect.key].length > 0)) {
updatedSelects[curSelect.key] = selectedSelects[curSelect.key].filter((el) => el.name !== newSelected.name)
updatedSelects[curSelect.key] = selectedSelects[curSelect.key].filter((el) => el.name !== newSelected.name)
break
}
if (updatedSelect.key === 'set' && newSelected && (selectedSelects[curSelect.key] && selectedSelects[curSelect.key].length > 0)) {
@ -238,53 +238,53 @@ const actions = {
updateCharts: async ({commit, getters, state}, updatedData) => {
try {
switch(updatedData.action) {
case 'nextLayoutChart':
// console.log('updatedDataNext', updatedData)
const prevGroupByFiltersNext = updatedData.prevGroupByFilters
const updatedFiltersNext = {...prevGroupByFiltersNext, ...updatedData.prevGroupByData}
const prevGroupByValue = updatedData.prevGroupByData.type ? updatedData.prevGroupByData.type : null
const groupByKeyNext = setNextLayoutGroupByKey(updatedData.groupByKey, prevGroupByValue)
if (groupByKeyNext) {
const activeChartData = {id: updatedData.id, data: updatedData.data, groupByKey: groupByKeyNext, filterKey: updatedData.filterKey, type: updatedData.type, groupByValue: updatedData.groupByValue}
const newData = setBarTypesChart(activeChartData, updatedData.prevGroupByData, updatedFiltersNext, state.machinesDataDefault, toRaw(state.chartsData))
return commit('setActiveChartData', {...activeChartData, data: newData})
}
break
case 'beforeLayoutChart':
// console.log('updatedDataBefore', updatedData)
const prevGroupByData = updatedData.groupByInfo.prevGroupByData
const prevGroupByFiltersBefore = updatedData.groupByInfo.prevGroupByFilters
const groupByKeyBefore = Object.keys(prevGroupByData)[0] // Получаем уже предыдущее значение ключа
delete prevGroupByFiltersBefore[groupByKeyBefore] // Удаляем значение после вычисления prevGroupByData, так как подымаемся на уровень выше, сохраняя актуальное значение для фильтрации
const isOnlyFiltersParams = equals(prevGroupByData, prevGroupByFiltersBefore)
const updatedPrevGroupByDataBefore = isOnlyFiltersParams ? {} : setBeforeLayoutGroupByData(prevGroupByData, prevGroupByFiltersBefore, updatedData.groupByInfo.type)
if (groupByKeyBefore) {
const activeChartData = {id: updatedData.id, data: updatedData.data, groupByKey: groupByKeyBefore, filterKey: updatedData.filterKey, type: updatedData.groupByInfo.type, groupByValue: updatedData.groupByInfo.groupByValue}
const newData = setBarTypesChart(activeChartData, updatedPrevGroupByDataBefore, prevGroupByFiltersBefore, state.machinesDataDefault, toRaw(state.chartsData))
return commit('setActiveChartData', {...activeChartData, data: newData})
}
break
case 'openMenuChart':
// console.log('updatedDataOpen', updatedData)
const openMenuChart = toRaw(state.activeMenuChartData.openMenuChart)
updatedData.groupByInfo.data[0].type = updatedData.groupByInfo.type
const activeChartDataMenu = {chartId: updatedData.groupByInfo.chartId, data: updatedData.groupByInfo.data, groupByKey: updatedData.groupByInfo.groupByKey, filterKey: updatedData.groupByInfo.filterKey, type: updatedData.groupByInfo.type, groupByValue: updatedData.groupByInfo.groupByValue}
const newDataMenu = setBarTypesChart(activeChartDataMenu, updatedData.groupByInfo.prevGroupByData, updatedData.groupByInfo.prevGroupByFilters, state.machinesDataDefault, toRaw(state.chartsData))
const isNotTypesChartsMenu = typesCharts(updatedData.groupByInfo.type)
const toggleActiveMenuChartData = {openMenuChart: !openMenuChart, groupByInfo: {...activeChartDataMenu, data: isNotTypesChartsMenu ? updatedData.groupByInfo.data[0] : newDataMenu}}
commit('setActiveMenuChartData', toggleActiveMenuChartData)
break
case 'downloadChart':
// console.log('updatedDataDownload', updatedData)
const activeChartDataDownload = {chartId: updatedData.groupByInfo.chartId, isDownloadChart: updatedData.groupByInfo.isDownloadChart, data: updatedData.groupByInfo.data, groupByKey: updatedData.groupByInfo.groupByKey, prevGroupByData: updatedData.groupByInfo.prevGroupByData, prevGroupByFilters: updatedData.groupByInfo.prevGroupByFilters, filterKey: updatedData.groupByInfo.filterKey, type: updatedData.groupByInfo.type, groupByValue: updatedData.groupByInfo.groupByValue}
const newDataDownload = setBarTypesChart(activeChartDataDownload, updatedData.groupByInfo.prevGroupByData, updatedData.groupByInfo.prevGroupByFilters, state.machinesDataDefault, toRaw(state.chartsData))
const isNotTypesChartsDownload = typesCharts(updatedData.groupByInfo.type)
const downloadActiveMenuChartData = {openMenuChart: false, groupByInfo: {...updatedData.groupByInfo, data: isNotTypesChartsDownload ? updatedData.groupByInfo.data[0] : newDataDownload}}
commit('setActiveMenuChartData', downloadActiveMenuChartData)
break
case 'legendFiltersParams':
commit('setLegendFiltersParams', updatedData.data)
default: return false
case 'nextLayoutChart':
// console.log('updatedDataNext', updatedData)
const prevGroupByFiltersNext = updatedData.prevGroupByFilters
const updatedFiltersNext = {...prevGroupByFiltersNext, ...updatedData.prevGroupByData}
const prevGroupByValue = updatedData.prevGroupByData.type ? updatedData.prevGroupByData.type : null
const groupByKeyNext = setNextLayoutGroupByKey(updatedData.groupByKey, prevGroupByValue)
if (groupByKeyNext) {
const activeChartData = {id: updatedData.id, data: updatedData.data, groupByKey: groupByKeyNext, filterKey: updatedData.filterKey, type: updatedData.type, groupByValue: updatedData.groupByValue}
const newData = setBarTypesChart(activeChartData, updatedData.prevGroupByData, updatedFiltersNext, state.machinesDataDefault, toRaw(state.chartsData))
return commit('setActiveChartData', {...activeChartData, data: newData})
}
break
case 'beforeLayoutChart':
// console.log('updatedDataBefore', updatedData)
const prevGroupByData = updatedData.groupByInfo.prevGroupByData
const prevGroupByFiltersBefore = updatedData.groupByInfo.prevGroupByFilters
const groupByKeyBefore = Object.keys(prevGroupByData)[0] // Получаем уже предыдущее значение ключа
delete prevGroupByFiltersBefore[groupByKeyBefore] // Удаляем значение после вычисления prevGroupByData, так как подымаемся на уровень выше, сохраняя актуальное значение для фильтрации
const isOnlyFiltersParams = equals(prevGroupByData, prevGroupByFiltersBefore)
const updatedPrevGroupByDataBefore = isOnlyFiltersParams ? {} : setBeforeLayoutGroupByData(prevGroupByData, prevGroupByFiltersBefore, updatedData.groupByInfo.type)
if (groupByKeyBefore) {
const activeChartData = {id: updatedData.id, data: updatedData.data, groupByKey: groupByKeyBefore, filterKey: updatedData.filterKey, type: updatedData.groupByInfo.type, groupByValue: updatedData.groupByInfo.groupByValue}
const newData = setBarTypesChart(activeChartData, updatedPrevGroupByDataBefore, prevGroupByFiltersBefore, state.machinesDataDefault, toRaw(state.chartsData))
return commit('setActiveChartData', {...activeChartData, data: newData})
}
break
case 'openMenuChart':
// console.log('updatedDataOpen', updatedData)
const openMenuChart = toRaw(state.activeMenuChartData.openMenuChart)
updatedData.groupByInfo.data[0].type = updatedData.groupByInfo.type
const activeChartDataMenu = {chartId: updatedData.groupByInfo.chartId, data: updatedData.groupByInfo.data, groupByKey: updatedData.groupByInfo.groupByKey, filterKey: updatedData.groupByInfo.filterKey, type: updatedData.groupByInfo.type, groupByValue: updatedData.groupByInfo.groupByValue}
const newDataMenu = setBarTypesChart(activeChartDataMenu, updatedData.groupByInfo.prevGroupByData, updatedData.groupByInfo.prevGroupByFilters, state.machinesDataDefault, toRaw(state.chartsData))
const isNotTypesChartsMenu = typesCharts(updatedData.groupByInfo.type)
const toggleActiveMenuChartData = {openMenuChart: !openMenuChart, groupByInfo: {...activeChartDataMenu, data: isNotTypesChartsMenu ? updatedData.groupByInfo.data[0] : newDataMenu}}
commit('setActiveMenuChartData', toggleActiveMenuChartData)
break
case 'downloadChart':
// console.log('updatedDataDownload', updatedData)
const activeChartDataDownload = {chartId: updatedData.groupByInfo.chartId, isDownloadChart: updatedData.groupByInfo.isDownloadChart, data: updatedData.groupByInfo.data, groupByKey: updatedData.groupByInfo.groupByKey, prevGroupByData: updatedData.groupByInfo.prevGroupByData, prevGroupByFilters: updatedData.groupByInfo.prevGroupByFilters, filterKey: updatedData.groupByInfo.filterKey, type: updatedData.groupByInfo.type, groupByValue: updatedData.groupByInfo.groupByValue}
const newDataDownload = setBarTypesChart(activeChartDataDownload, updatedData.groupByInfo.prevGroupByData, updatedData.groupByInfo.prevGroupByFilters, state.machinesDataDefault, toRaw(state.chartsData))
const isNotTypesChartsDownload = typesCharts(updatedData.groupByInfo.type)
const downloadActiveMenuChartData = {openMenuChart: false, groupByInfo: {...updatedData.groupByInfo, data: isNotTypesChartsDownload ? updatedData.groupByInfo.data[0] : newDataDownload}}
commit('setActiveMenuChartData', downloadActiveMenuChartData)
break
case 'legendFiltersParams':
commit('setLegendFiltersParams', updatedData.data)
default: return false
}
} catch (err) {
console.error(err)

942
live_monitor_vue/src/store/modules/machines/StaticData.js
View File

@ -32,39 +32,39 @@ const pagination = {
const selectors = {
org_name: ["ПЧМ Воронеж", "ПЧМ Фаянсовая",
"ПЧМ Топки", "ПЧМ Кочетовка", "ПЧР КЛНГ",
"ПЧМ Нижний Новгород", "ПЧМ Новосибирск",
"ПЧМ Екатеринбург", "ПЧМ Омск", "ПЧМ Алтай",
"ПЧМ Тосно", "ПЧМ Вязьма", "ПМС-46", "ПМС-183",
"ПЧМ Тихорецк", "ПЧМ Сызрань",
"ПЧМ Хабаровск", null, "ПЧМ Северобайкальск",
"ПЧМ Смолино", "ПЧМ Вологда", "ПЧМ Пермь",
"ПЧМ Астрахань", "ПЧМ Нигозеро",
"ПЧМ Челябинск", "ПЧМ Завитая", "ПМС-217",
"ПМС-199", "ПМС-31", "ТрансЭнерго", "ПМС-340",
"ОПМС-99", "ПМС-11", "ПМС-77", "ПМС-208", "ПМС-172",
"ПМС-12", "ПМС-22",
"Экспулуатация БУ прекращена", "ОПМС-68",
"ПМС-170", "ОПМС-103", "ПМС-205", "ПМС-152", "ПМС-20",
"ПЧМ Тында", "КалугаПутьМаш",
"ПЧМ Санкт-Петербург", "ПЧМ Красноярск"],
"ПЧМ Топки", "ПЧМ Кочетовка", "ПЧР КЛНГ",
"ПЧМ Нижний Новгород", "ПЧМ Новосибирск",
"ПЧМ Екатеринбург", "ПЧМ Омск", "ПЧМ Алтай",
"ПЧМ Тосно", "ПЧМ Вязьма", "ПМС-46", "ПМС-183",
"ПЧМ Тихорецк", "ПЧМ Сызрань",
"ПЧМ Хабаровск", null, "ПЧМ Северобайкальск",
"ПЧМ Смолино", "ПЧМ Вологда", "ПЧМ Пермь",
"ПЧМ Астрахань", "ПЧМ Нигозеро",
"ПЧМ Челябинск", "ПЧМ Завитая", "ПМС-217",
"ПМС-199", "ПМС-31", "ТрансЭнерго", "ПМС-340",
"ОПМС-99", "ПМС-11", "ПМС-77", "ПМС-208", "ПМС-172",
"ПМС-12", "ПМС-22",
"Экспулуатация БУ прекращена", "ОПМС-68",
"ПМС-170", "ОПМС-103", "ПМС-205", "ПМС-152", "ПМС-20",
"ПЧМ Тында", "КалугаПутьМаш",
"ПЧМ Санкт-Петербург", "ПЧМ Красноярск"],
org_type_name: ["ЦДИМ", "Другие", "ЦДРП"],
railway_name: ["Ю-Вост", "Моск", "З-Сиб", "Клг", "Горьк",
"Сверд", "Окт", "Заб", "В-Сиб", "С-Кав", "Кбш",
"Д-Вост", null, "Ю-Ур", "Сев", "Прив", "РЖД", "Крас"],
"Сверд", "Окт", "Заб", "В-Сиб", "С-Кав", "Кбш",
"Д-Вост", null, "Ю-Ур", "Сев", "Прив", "РЖД", "Крас"],
type: ["УТМ", "РПБ", "ПРЛ УПК", "ПУМА", "МДС", "МПТ",
"ТЭС", "СПП", "ДСП", "СЧ", "ЩОМ", "RM", "АСГ", "ВПО",
"без типа", "ПМГ", "МТГ", "АС", "СМ", "ВПР", "ПСС",
"МПК", "АДМ", "АГД", "УК", "АМ", "ПРЛ", "АДЭ",
"Унимат", "ВПРС", "ПБ", "Дуоматик", "МВУ",
"АВФ-1М.2", "Динамик", "АГС", "ПМА", "ССГ-1", "СЧУ",
"АГП", "Унимат компакт", "ДГКу", "СЗ", "ТЭУ",
"РБ", "ФАТРА",],
"ТЭС", "СПП", "ДСП", "СЧ", "ЩОМ", "RM", "АСГ", "ВПО",
"без типа", "ПМГ", "МТГ", "АС", "СМ", "ВПР", "ПСС",
"МПК", "АДМ", "АГД", "УК", "АМ", "ПРЛ", "АДЭ",
"Унимат", "ВПРС", "ПБ", "Дуоматик", "МВУ",
"АВФ-1М.2", "Динамик", "АГС", "ПМА", "ССГ-1", "СЧУ",
"АГП", "Унимат компакт", "ДГКу", "СЗ", "ТЭУ",
"РБ", "ФАТРА",],
zav_nomer: ["84", "49", "15", "90", "27", "9", "5", "105", "005", "656",
"001", "39", "38", "57", "03", "003", "593", "235", "1453", "1307", "766",
"528", "485", "02", "752", "704", "584", "669", "261", "482", "762", "985",
"605", "016", "1258", "729", "963", "927", "319", "1154", "1163", "825",
"1276", "1062", "1025",]
"001", "39", "38", "57", "03", "003", "593", "235", "1453", "1307", "766",
"528", "485", "02", "752", "704", "584", "669", "261", "482", "762", "985",
"605", "016", "1258", "729", "963", "927", "319", "1154", "1163", "825",
"1276", "1062", "1025",]
}
@ -245,163 +245,163 @@ const chartsBarTypesWithoutLayoutParams = [{groupByKey: 'railway_name', filterKe
const charts = {
pie: {
countMachines: 4790,
period: 'две недели',
machines: [
{ name: "Есть МЛ, выходил на связь", value: 1048, color: "rgb(134, 212, 131, 1)", order: 1 },
{ name: "Есть МЛ, нет связи", value: 1048, color: "rgb(134, 212, 131, 1)", order: 2 },
{ name: "Нет МЛ, выходил на связь", value: 1048, color: "rgb(134, 212, 131, 1)", order: 3 },
{ name: "Нет МЛ, нет связи", value: 1048, color: "rgb(134, 212, 131, 1)", order: 4 },
]},
countMachines: 4790,
period: 'две недели',
machines: [
{ name: "Есть МЛ, выходил на связь", value: 1048, color: "rgb(134, 212, 131, 1)", order: 1 },
{ name: "Есть МЛ, нет связи", value: 1048, color: "rgb(134, 212, 131, 1)", order: 2 },
{ name: "Нет МЛ, выходил на связь", value: 1048, color: "rgb(134, 212, 131, 1)", order: 3 },
{ name: "Нет МЛ, нет связи", value: 1048, color: "rgb(134, 212, 131, 1)", order: 4 },
]},
mainMl: {
countMachinesWithMl: 2916,
period: 'две недели',
machines: [
{ key: "routes_common", name: "Обычные", value: 2182, itemStyle: {color: "rgb(134, 212, 131, 1)"}, order: 1 },
{ key: "routes_emergency", name: "Аварийные", value: 64, itemStyle: {color: "rgb(255, 114, 114, 1)"}, order: 2 },
{ key: "routes_other", name: "Прочие", value: 259, itemStyle: {color: "rgb(196, 161, 201, 1)"}, order: 3 },
{ key: "routes_repair", name: "Ремонтные", value: 338, itemStyle: {color: "rgb(228, 202, 163, 1)"}, order: 4 },
{ key: "routes_without_leaving", name: "Без выезда", value: 73, itemStyle: {color: "rgb(243, 161, 30, 1)"}, order: 5 },
{ key: "routes_without_ml", name: "СПС без МЛ", value: 3073, itemStyle: {color: "rgb(165, 165, 165, 1)"}, order: 6 },
]},
mount_mounter_type_bar: {
chartId: "mount_mounter_type_bar",
countMounts: 5436,
filterKey: "mounter_type",
height: 500,
type: "mount",
xAxisData: [
[
{
charts: [
{name: "ВНИИЖТ", value: 92},
{name: "Калугапутьмаш", value: 1}
],
totalCount: 3,
yAxisData: "2016 г."
},
{
charts: [
{name: "ВНИИЖТ", value: 349},
{name: "КалугаРПМ", value: 9},
{name: "Калугапутьмаш", value: 92},
{name: "Свердловский РПМ", value: 23},
{
name: "Тихорецкий завод им Воровского",
value: 26
},
{name: "Тулажелдормаш", value: 8}
],
totalCount: 9,
yAxisData: "2017 г."
},
{
charts: [
{name: "ВНИИЖТ", value: 590},
{name: "КалугаРПМ", value: 7},
{name: "Калугапутьмаш", value: 73},
{name: "Свердловский РПМ", value: 30},
{
name: "Тихорецкий завод им Воровского",
value: 23
},
{name: "Тулажелдормаш", value: 32}
],
totalCount: 11,
yAxisData: "2018 г."
},
{
charts: [
{name: "ВНИИЖТ", value: 719},
{name: "КалугаРПМ", value: 16},
{name: "Калугапутьмаш", value: 88},
{name: "Свердловский РПМ", value: 20},
{
name: "Тихорецкий завод им Воровского",
value: 33
},
{name: "Тулажелдормаш", value: 24}
],
totalCount: 12,
yAxisData: "2019 г."
},
{
charts: [
{name: "ВНИИЖТ", value: 594},
{name: "КалугаРПМ", value: 18},
{name: "Калугапутьмаш", value: 100},
{name: "Свердловский РПМ", value: 19},
{
name: "Тихорецкий завод им Воровского",
value: 36
},
{name: "Тулажелдормаш", value: 31}
],
totalCount: 9,
yAxisData: "2020 г."
},
{
charts: [
{name: "ВНИИЖТ", value: 777},
{name: "Инжиниринг Сервис-Путьмаш", value: 10},
{name: "КалугаРПМ", value: 5},
{name: "Калугапутьмаш", value: 84},
{name: "Пермский РПМ", value: 5},
{name: "Свердловский РПМ", value: 4},
{
name: "Тихорецкий завод им Воровского",
value: 14
},
{name: "Тулажелдормаш", value: 28}
],
totalCount: 12,
yAxisData: "2021 г."
},
{
charts: [
{name: "ВНИИЖТ", value: 746},
{name: "Инжиниринг Сервис-Путьмаш", value: 10},
{name: "КалугаРПМ", value: 4},
{name: "Калугапутьмаш", value: 36},
{name: "Свердловский РПМ", value: 1},
{
name: "Тихорецкий завод им Воровского",
value: 5
},
{name: "Тулажелдормаш", value: 20}
],
totalCount: 15,
yAxisData: "2022 г."
},
{
charts: [
{name: "ВНИИЖТ", value: 612},
{name: "Инжиниринг Сервис-Путьмаш", value: 4},
{name: "КалугаРПМ", value: 3},
{name: "Калугапутьмаш", value: 2},
{name: "Кировский машзавод", value: 3},
{
name: "Тихорецкий завод им Воровского",
value: 7
},
{name: "Тулажелдормаш", value: 6}
],
totalCount: 10,
yAxisData: "2023 г."
}
]
countMachinesWithMl: 2916,
period: 'две недели',
machines: [
{ key: "routes_common", name: "Обычные", value: 2182, itemStyle: {color: "rgb(134, 212, 131, 1)"}, order: 1 },
{ key: "routes_emergency", name: "Аварийные", value: 64, itemStyle: {color: "rgb(255, 114, 114, 1)"}, order: 2 },
{ key: "routes_other", name: "Прочие", value: 259, itemStyle: {color: "rgb(196, 161, 201, 1)"}, order: 3 },
{ key: "routes_repair", name: "Ремонтные", value: 338, itemStyle: {color: "rgb(228, 202, 163, 1)"}, order: 4 },
{ key: "routes_without_leaving", name: "Без выезда", value: 73, itemStyle: {color: "rgb(243, 161, 30, 1)"}, order: 5 },
{ key: "routes_without_ml", name: "СПС без МЛ", value: 3073, itemStyle: {color: "rgb(165, 165, 165, 1)"}, order: 6 },
]},
mount_mounter_type_bar: {
chartId: "mount_mounter_type_bar",
countMounts: 5436,
filterKey: "mounter_type",
height: 500,
type: "mount",
xAxisData: [
[
{
charts: [
{name: "ВНИИЖТ", value: 92},
{name: "Калугапутьмаш", value: 1}
],
totalCount: 3,
yAxisData: "2016 г."
},
{
charts: [
{name: "ВНИИЖТ", value: 349},
{name: "КалугаРПМ", value: 9},
{name: "Калугапутьмаш", value: 92},
{name: "Свердловский РПМ", value: 23},
{
name: "Тихорецкий завод им Воровского",
value: 26
},
{name: "Тулажелдормаш", value: 8}
],
totalCount: 9,
yAxisData: "2017 г."
},
{
charts: [
{name: "ВНИИЖТ", value: 590},
{name: "КалугаРПМ", value: 7},
{name: "Калугапутьмаш", value: 73},
{name: "Свердловский РПМ", value: 30},
{
name: "Тихорецкий завод им Воровского",
value: 23
},
{name: "Тулажелдормаш", value: 32}
],
totalCount: 11,
yAxisData: "2018 г."
},
{
charts: [
{name: "ВНИИЖТ", value: 719},
{name: "КалугаРПМ", value: 16},
{name: "Калугапутьмаш", value: 88},
{name: "Свердловский РПМ", value: 20},
{
name: "Тихорецкий завод им Воровского",
value: 33
},
{name: "Тулажелдормаш", value: 24}
],
totalCount: 12,
yAxisData: "2019 г."
},
{
charts: [
{name: "ВНИИЖТ", value: 594},
{name: "КалугаРПМ", value: 18},
{name: "Калугапутьмаш", value: 100},
{name: "Свердловский РПМ", value: 19},
{
name: "Тихорецкий завод им Воровского",
value: 36
},
{name: "Тулажелдормаш", value: 31}
],
totalCount: 9,
yAxisData: "2020 г."
},
{
charts: [
{name: "ВНИИЖТ", value: 777},
{name: "Инжиниринг Сервис-Путьмаш", value: 10},
{name: "КалугаРПМ", value: 5},
{name: "Калугапутьмаш", value: 84},
{name: "Пермский РПМ", value: 5},
{name: "Свердловский РПМ", value: 4},
{
name: "Тихорецкий завод им Воровского",
value: 14
},
{name: "Тулажелдормаш", value: 28}
],
totalCount: 12,
yAxisData: "2021 г."
},
{
charts: [
{name: "ВНИИЖТ", value: 746},
{name: "Инжиниринг Сервис-Путьмаш", value: 10},
{name: "КалугаРПМ", value: 4},
{name: "Калугапутьмаш", value: 36},
{name: "Свердловский РПМ", value: 1},
{
name: "Тихорецкий завод им Воровского",
value: 5
},
{name: "Тулажелдормаш", value: 20}
],
totalCount: 15,
yAxisData: "2022 г."
},
{
charts: [
{name: "ВНИИЖТ", value: 612},
{name: "Инжиниринг Сервис-Путьмаш", value: 4},
{name: "КалугаРПМ", value: 3},
{name: "Калугапутьмаш", value: 2},
{name: "Кировский машзавод", value: 3},
{
name: "Тихорецкий завод им Воровского",
value: 7
},
{name: "Тулажелдормаш", value: 6}
],
totalCount: 10,
yAxisData: "2023 г."
}
]
],
yAxisData: [
{key: "2016 г.", val: 93},
{key: "2017 г.", val: 507},
{key: "2018 г.", val: 755},
{key: "2019 г.", val: 900},
{key: "2020 г.", val: 797},
{key: "2021 г.", val: 927},
{key: "2022 г.", val: 818},
{key: "2023 г.", val: 637}
]}
],
yAxisData: [
{key: "2016 г.", val: 93},
{key: "2017 г.", val: 507},
{key: "2018 г.", val: 755},
{key: "2019 г.", val: 900},
{key: "2020 г.", val: 797},
{key: "2021 г.", val: 927},
{key: "2022 г.", val: 818},
{key: "2023 г.", val: 637}
]}
}
const dataMachines = [
@ -1305,282 +1305,282 @@ const dataMachines = [
]
const dataMount = [
{
client_type: "ЦДИМ",
device_count: 6,
mounter_type: "Тулажелдормаш",
year: "2023 г."
},
{
client_type: "Трансэнерго",
device_count: 1,
mounter_type: "ВНИИЖТ",
year: "2018 г."
},
{
client_type: "ЦДРП",
device_count: 86,
mounter_type: "Калугапутьмаш",
year: "2019 г."
},
{
client_type: "ЦДИМ",
device_count: 593,
mounter_type: "ВНИИЖТ",
year: "2020 г."
},
{
client_type: "ЦДИМ",
device_count: 589,
mounter_type: "ВНИИЖТ",
year: "2018 г."
},
{
client_type: "ЦДИМ",
device_count: 12,
mounter_type: "Тулажелдормаш",
year: "2022 г."
},
{
client_type: "ЦДРП",
device_count: 8,
mounter_type: "Тулажелдормаш",
year: "2022 г."
},
{
client_type: "ЦДИМ",
device_count: 3,
mounter_type: "Калугапутьмаш",
year: "2018 г."
},
{
client_type: "ЦДИМ",
device_count: 347,
mounter_type: "ВНИИЖТ",
year: "2017 г."
},
{
client_type: "ЦДИМ",
device_count: 8,
mounter_type: "Тулажелдормаш",
year: "2017 г."
},
{
client_type: "ЦДРП",
device_count: 1,
mounter_type: "КалугаРПМ",
year: "2021 г."
},
{
client_type: "ЦДИМ",
device_count: 7,
mounter_type: "КалугаРПМ",
year: "2018 г."
},
{
client_type: "ЦДИМ",
device_count: 27,
mounter_type: "Тихорецкий завод им Воровского",
year: "2019 г."
},
{
client_type: "ЦДИМ",
device_count: 1,
mounter_type: "Свердловский РПМ",
year: "2022 г."
},
{
client_type: "Иные",
device_count: 6,
mounter_type: "Тихорецкий завод им Воровского",
year: "2019 г."
},
{
client_type: "Иные",
device_count: 4,
mounter_type: "Тихорецкий завод им Воровского",
year: "2023 г."
},
{
client_type: "Трансэнерго",
device_count: 16,
mounter_type: "ВНИИЖТ",
year: "2016 г."
},
{
client_type: "ЦДИМ",
device_count: 5,
mounter_type: "Пермский РПМ",
year: "2021 г."
},
{
client_type: null,
device_count: 1,
mounter_type: "Инжиниринг Сервис-Путьмаш",
year: "2022 г."
},
{
client_type: "ЦДИМ",
device_count: 2,
mounter_type: "КалугаРПМ",
year: "2022 г."
},
{
client_type: "ЦДИМ",
device_count: 4,
mounter_type: "КалугаРПМ",
year: "2021 г."
},
{
client_type: "ЦДРП",
device_count: 2,
mounter_type: "Калугапутьмаш",
year: "2023 г."
},
{
client_type: "ЦДРП",
device_count: 80,
mounter_type: "Калугапутьмаш",
year: "2021 г."
},
{
client_type: "ЦДИМ",
device_count: 2,
mounter_type: "КалугаРПМ",
year: "2023 г."
},
{
client_type: "ЦДРП",
device_count: 8,
mounter_type: "Тулажелдормаш",
year: "2021 г."
},
{
client_type: "ЦДИМ",
device_count: 20,
mounter_type: "Свердловский РПМ",
year: "2019 г."
},
{
client_type: "ЦДИМ",
device_count: 4,
mounter_type: "Тихорецкий завод им Воровского",
year: "2022 г."
},
{
client_type: "Трансэнерго",
device_count: 1,
mounter_type: "ВНИИЖТ",
year: "2022 г."
},
{
client_type: "Иные",
device_count: 2,
mounter_type: "ВНИИЖТ",
year: "2017 г."
},
{
client_type: "ЦДРП",
device_count: 1,
mounter_type: "Калугапутьмаш",
year: "2016 г."
},
{
client_type: "ЦДРП",
device_count: 181,
mounter_type: "ВНИИЖТ",
year: "2023 г."
},
{
client_type: "ЦДРП",
device_count: 100,
mounter_type: "Калугапутьмаш",
year: "2020 г."
},
{
client_type: "ЦДИМ",
device_count: 76,
mounter_type: "ВНИИЖТ",
year: "2016 г."
},
{
client_type: "ЦДИМ",
device_count: 29,
mounter_type: "Свердловский РПМ",
year: "2018 г."
},
{
client_type: "ЦДИМ",
device_count: 4,
mounter_type: "Калугапутьмаш",
year: "2021 г."
},
{
client_type: null,
device_count: 1,
mounter_type: "ВНИИЖТ",
year: "2020 г."
},
{
client_type: "ЦДИМ",
device_count: 5,
mounter_type: "Тихорецкий завод им Воровского",
year: "2021 г."
},
{
client_type: "Иные",
device_count: 25,
mounter_type: "Тихорецкий завод им Воровского",
year: "2020 г."
},
{
client_type: "ЦДРП",
device_count: 15,
mounter_type: "Тулажелдормаш",
year: "2019 г."
},
{
client_type: "ЦДИМ",
device_count: 4,
mounter_type: "Инжиниринг Сервис-Путьмаш",
year: "2023 г."
},
{
client_type: "ЦДИМ",
device_count: 2,
mounter_type: "Калугапутьмаш",
year: "2019 г."
},
{
client_type: "ЦДРП",
device_count: 1,
mounter_type: "ВНИИЖТ",
year: "2022 г."
},
{
client_type: "ЦДРП",
device_count: 3,
mounter_type: "Кировский машзавод",
year: "2023 г."
},
{
client_type: "ЦДРП",
device_count: 26,
mounter_type: "Тулажелдормаш",
year: "2020 г."
},
{
client_type: "ЦДИМ",
device_count: 3,
mounter_type: "Тихорецкий завод им Воровского",
year: "2023 г."
},
{
client_type: "ЦДИМ",
device_count: 16,
mounter_type: "КалугаРПМ",
year: "2019 г."
},
{
client_type: "ЦДИМ",
device_count: 6,
mounter_type: "Тулажелдормаш",
year: "2023 г."
},
{
client_type: "Трансэнерго",
device_count: 1,
mounter_type: "ВНИИЖТ",
year: "2018 г."
},
{
client_type: "ЦДРП",
device_count: 86,
mounter_type: "Калугапутьмаш",
year: "2019 г."
},
{
client_type: "ЦДИМ",
device_count: 593,
mounter_type: "ВНИИЖТ",
year: "2020 г."
},
{
client_type: "ЦДИМ",
device_count: 589,
mounter_type: "ВНИИЖТ",
year: "2018 г."
},
{
client_type: "ЦДИМ",
device_count: 12,
mounter_type: "Тулажелдормаш",
year: "2022 г."
},
{
client_type: "ЦДРП",
device_count: 8,
mounter_type: "Тулажелдормаш",
year: "2022 г."
},
{
client_type: "ЦДИМ",
device_count: 3,
mounter_type: "Калугапутьмаш",
year: "2018 г."
},
{
client_type: "ЦДИМ",
device_count: 347,
mounter_type: "ВНИИЖТ",
year: "2017 г."
},
{
client_type: "ЦДИМ",
device_count: 8,
mounter_type: "Тулажелдормаш",
year: "2017 г."
},
{
client_type: "ЦДРП",
device_count: 1,
mounter_type: "КалугаРПМ",
year: "2021 г."
},
{
client_type: "ЦДИМ",
device_count: 7,
mounter_type: "КалугаРПМ",
year: "2018 г."
},
{
client_type: "ЦДИМ",
device_count: 27,
mounter_type: "Тихорецкий завод им Воровского",
year: "2019 г."
},
{
client_type: "ЦДИМ",
device_count: 1,
mounter_type: "Свердловский РПМ",
year: "2022 г."
},
{
client_type: "Иные",
device_count: 6,
mounter_type: "Тихорецкий завод им Воровского",
year: "2019 г."
},
{
client_type: "Иные",
device_count: 4,
mounter_type: "Тихорецкий завод им Воровского",
year: "2023 г."
},
{
client_type: "Трансэнерго",
device_count: 16,
mounter_type: "ВНИИЖТ",
year: "2016 г."
},
{
client_type: "ЦДИМ",
device_count: 5,
mounter_type: "Пермский РПМ",
year: "2021 г."
},
{
client_type: null,
device_count: 1,
mounter_type: "Инжиниринг Сервис-Путьмаш",
year: "2022 г."
},
{
client_type: "ЦДИМ",
device_count: 2,
mounter_type: "КалугаРПМ",
year: "2022 г."
},
{
client_type: "ЦДИМ",
device_count: 4,
mounter_type: "КалугаРПМ",
year: "2021 г."
},
{
client_type: "ЦДРП",
device_count: 2,
mounter_type: "Калугапутьмаш",
year: "2023 г."
},
{
client_type: "ЦДРП",
device_count: 80,
mounter_type: "Калугапутьмаш",
year: "2021 г."
},
{
client_type: "ЦДИМ",
device_count: 2,
mounter_type: "КалугаРПМ",
year: "2023 г."
},
{
client_type: "ЦДРП",
device_count: 8,
mounter_type: "Тулажелдормаш",
year: "2021 г."
},
{
client_type: "ЦДИМ",
device_count: 20,
mounter_type: "Свердловский РПМ",
year: "2019 г."
},
{
client_type: "ЦДИМ",
device_count: 4,
mounter_type: "Тихорецкий завод им Воровского",
year: "2022 г."
},
{
client_type: "Трансэнерго",
device_count: 1,
mounter_type: "ВНИИЖТ",
year: "2022 г."
},
{
client_type: "Иные",
device_count: 2,
mounter_type: "ВНИИЖТ",
year: "2017 г."
},
{
client_type: "ЦДРП",
device_count: 1,
mounter_type: "Калугапутьмаш",
year: "2016 г."
},
{
client_type: "ЦДРП",
device_count: 181,
mounter_type: "ВНИИЖТ",
year: "2023 г."
},
{
client_type: "ЦДРП",
device_count: 100,
mounter_type: "Калугапутьмаш",
year: "2020 г."
},
{
client_type: "ЦДИМ",
device_count: 76,
mounter_type: "ВНИИЖТ",
year: "2016 г."
},
{
client_type: "ЦДИМ",
device_count: 29,
mounter_type: "Свердловский РПМ",
year: "2018 г."
},
{
client_type: "ЦДИМ",
device_count: 4,
mounter_type: "Калугапутьмаш",
year: "2021 г."
},
{
client_type: null,
device_count: 1,
mounter_type: "ВНИИЖТ",
year: "2020 г."
},
{
client_type: "ЦДИМ",
device_count: 5,
mounter_type: "Тихорецкий завод им Воровского",
year: "2021 г."
},
{
client_type: "Иные",
device_count: 25,
mounter_type: "Тихорецкий завод им Воровского",
year: "2020 г."
},
{
client_type: "ЦДРП",
device_count: 15,
mounter_type: "Тулажелдормаш",
year: "2019 г."
},
{
client_type: "ЦДИМ",
device_count: 4,
mounter_type: "Инжиниринг Сервис-Путьмаш",
year: "2023 г."
},
{
client_type: "ЦДИМ",
device_count: 2,
mounter_type: "Калугапутьмаш",
year: "2019 г."
},
{
client_type: "ЦДРП",
device_count: 1,
mounter_type: "ВНИИЖТ",
year: "2022 г."
},
{
client_type: "ЦДРП",
device_count: 3,
mounter_type: "Кировский машзавод",
year: "2023 г."
},
{
client_type: "ЦДРП",
device_count: 26,
mounter_type: "Тулажелдормаш",
year: "2020 г."
},
{
client_type: "ЦДИМ",
device_count: 3,
mounter_type: "Тихорецкий завод им Воровского",
year: "2023 г."
},
{
client_type: "ЦДИМ",
device_count: 16,
mounter_type: "КалугаРПМ",
year: "2019 г."
},
]
@ -2366,11 +2366,11 @@ const multiReport = {
}
],
diagExcludeSps: [993, 1062, 3078, 1136, 1109, 1618, 1085, 2936, 1669, 1045,
1739, 1525, 1869, 1461, 1843, 928, 1940, 1907, 1482, 1870, 1813, 1131,
1133, 1515, 1800, 2151, 1833, 1068, 1110, 1000, 2904, 926, 2964, 917, 2903,
1743, 1738, 1469, 2902, 1478, 999, 1801, 1742, 1139, 1141, 1842, ],
1739, 1525, 1869, 1461, 1843, 928, 1940, 1907, 1482, 1870, 1813, 1131,
1133, 1515, 1800, 2151, 1833, 1068, 1110, 1000, 2904, 926, 2964, 917, 2903,
1743, 1738, 1469, 2902, 1478, 999, 1801, 1742, 1139, 1141, 1842, ],
diagTables: ["as", "dsp", "dyn", "mpt", "pmg", "rpb", "rs", "schom", "sm",
"uk", "uni", "utm", "vpo", ""],
"uk", "uni", "utm", "vpo", ""],
id: 197,
insertedAt: "2023-03-15 06:27:41",
isProd: true,
@ -2423,7 +2423,7 @@ const multiReport = {
const multiPackStructure = [
// %LiveMonitor.Packages.Models.PackStruct{
// __meta__: #Ecto.Schema.Metadata<:loaded, "pack_struct">,
// __meta__: #Ecto.Schema.Metadata<:loaded, "pack_struct">,
{
id: 197,
description: null,
@ -2523,7 +2523,7 @@ const multiPackStructure = [
}
],
diag_tables: ["as", "dsp", "dyn", "mpt", "pmg", "rpb", "rs", "schom", "sm",
"uk", "uni", "utm", "vpo", ""],
"uk", "uni", "utm", "vpo", ""],
diag_exclude_tables: null,
diag_classifications: null,
diag_types: null,
@ -2531,9 +2531,9 @@ const multiPackStructure = [
diag_exclude_classifications: null,
diag_exclude_types: null,
diag_exclude_sps: [993, 1062, 3078, 1136, 1109, 1618, 1085, 2936, 1669,
1045, 1739, 1525, 1869, 1461, 1843, 928, 1940, 1907, 1482, 1870, 1813,
1131, 1133, 1515, 1800, 2151, 1833, 1068, 1110, 1000, 2904, 926, 2964,
],
1045, 1739, 1525, 1869, 1461, 1843, 928, 1940, 1907, 1482, 1870, 1813,
1131, 1133, 1515, 1800, 2151, 1833, 1068, 1110, 1000, 2904, 926, 2964,
],
pack_group_id: 28,
// pack_group: #Ecto.Association.NotLoaded<association :pack_group is not loaded>,
inserted_at: "2023-03-15 06:27:41",
@ -2838,8 +2838,8 @@ const multiPackStructure = [
diag_classifications: null,
diag_types: null,
diag_sps: [993, 1062, 3078, 1136, 1109, 1618, 1085, 2936, 1669, 1045, 1739,
1525, 1869, 1461, 1843, 928, 1940, 1907, 1482, 1870, 1813, 1131, 1133,
1515, 1800, 2151, 1833, 1068, 1110, 1000, 2904, 926, 2964, 917, ],
1525, 1869, 1461, 1843, 928, 1940, 1907, 1482, 1870, 1813, 1131, 1133,
1515, 1800, 2151, 1833, 1068, 1110, 1000, 2904, 926, 2964, 917, ],
diag_exclude_classifications: null,
diag_exclude_types: null,
diag_exclude_sps: null,

16
live_monitor_vue/src/store/modules/machines/helpers.js
View File

@ -14,14 +14,14 @@ const prepareSelects = (selects, selectors) => {
// console.log('updSelects', updatedSelects)
const filteredSelects = updatedSelects.map((el) => ({...el, data: el.data.reduce((acc, select) => {
if (select) {
const newSelect = {name: select}
acc = [...acc, newSelect]
} else {
acc
}
return acc
}, [])
if (select) {
const newSelect = {name: select}
acc = [...acc, newSelect]
} else {
acc
}
return acc
}, [])
})).sort((a, b) => a.order - b.order)
// console.log('filteredSelects', filteredSelects)
return filteredSelects

738
live_monitor_vue/src/store/modules/machines/helpersCharts.js
View File

@ -1,431 +1,431 @@
import { chartsFilterParams, chartsGroupByParams, chartsGroupByParams2, chartsFilterKeysMl, chartsMountParams, chartsBarTypesParams, chartsBarTypesGroupByParams, chartsBarTypesWithoutLayoutParams } from "./StaticData"
import {cond, uniq, has, T} from 'ramda'
const setPeriodCharts = (filterKeys) => {
if (typeof filterKeys === 'array') return {period: 'dayly', title: '24 часа'}
switch(filterKeys) {
case 'commun': return {period: 'yearly', title: "год"}
case 'rors': return {period: 'dayly', title: "на данный момент"}
case 'routes': return {period: 'weekly', title: "две недели"}
default: return {period: 'dayly', title: "на данный момент"}
const setPeriodCharts = (filterKeys) => {
if (typeof filterKeys === 'array') return {period: 'dayly', title: '24 часа'}
switch(filterKeys) {
case 'commun': return {period: 'yearly', title: "год"}
case 'rors': return {period: 'dayly', title: "на данный момент"}
case 'routes': return {period: 'weekly', title: "две недели"}
default: return {period: 'dayly', title: "на данный момент"}
}
}
const setNamesMl = (filterKey) => {
if (!filterKey) return null
switch(filterKey) {
case 'routes_common': return 'Обычные'
case 'routes_emergency': return 'Аварийные'
case 'routes_other': return 'Прочие'
case 'routes_repair': return 'Ремонтные'
case 'routes_without_leaving': return 'Без выезда'
case 'routes_without_ml': return 'СПС без МЛ'
default: return ''
}
}
const setMachinesClass = (typeId) => {
if (typeId) {
switch(typeId) {
case 'mpt_types': return 'МРТ'
case 'gdsm_types': return 'ЖДСМ'
case 'sm_pss_types': return 'СМ'
default: return ''
}
}
}
const setNamesMl = (filterKey) => {
if (!filterKey) return null
switch(filterKey) {
case 'routes_common': return 'Обычные'
case 'routes_emergency': return 'Аварийные'
case 'routes_other': return 'Прочие'
case 'routes_repair': return 'Ремонтные'
case 'routes_without_leaving': return 'Без выезда'
case 'routes_without_ml': return 'СПС без МЛ'
default: return ''
}
const setFilterValues = (machineValue, filterParams) => {
if(filterParams.values.includes(machineValue.toLowerCase())) {
return {name: machineValue}
}
}
const setMachinesClass = (typeId) => {
if (typeId) {
switch(typeId) {
case 'mpt_types': return 'МРТ'
case 'gdsm_types': return 'ЖДСМ'
case 'sm_pss_types': return 'СМ'
default: return ''
}
}
}
const setFilterValues = (machineValue, filterParams) => {
if(filterParams.values.includes(machineValue.toLowerCase())) {
return {name: machineValue}
}
}
const setCountMachinesMl = (arr, counter = 0) => {
return arr.reduce((acc, item) => {
if (item && item.length > 0) {
return setCountMachinesMl(item, acc)
} else {
if (item.charts?.value) {
acc = acc + item.charts?.value
} else {
acc
}
}
return acc
}, counter)
}
/* Charts updated data */
const chartsPie = (data, filterParams) => {
// {list, _resp} = Agents.MachineList.get_machines(set_period_loading_charts(filterKey).period, params) apiHelpers
const countMachines = data?.length
const machines = data.reduce((acc, machine) => {
if (machine[filterParams.filterKey]) {
acc.push(setFilterValues(machine[filterParams.filterKey], filterParams))
const setCountMachinesMl = (arr, counter = 0) => {
return arr.reduce((acc, item) => {
if (item && item.length > 0) {
return setCountMachinesMl(item, acc)
} else {
if (item.charts?.value) {
acc = acc + item.charts?.value
} else {
acc
}
return acc
}, [])
}
return acc
}, counter)
}
// const isFilteredMachine = machines.find((el) => filterParams.values.includes(el.name.toLowerCase()))
const groupByfiltered = machines.reduce((acc, machine) => {
if (filterParams.values.includes(machine.name.toLowerCase())) {
const count = machines.filter((el) => el.name === machine.name).length
const filteredMachines = {name: machine.name, value: count}
acc = uniq([...acc, filteredMachines])
} else {
acc
}
return acc
}, [])
return {countMachines: countMachines, period: setPeriodCharts(filterParams.filterKey).title, machines: groupByfiltered}
}
/* Charts updated data */
const chartsPieGroupedBy = (data, groupByParams, filterParams) => {
const chartsPie = (data, filterParams) => {
// {list, _resp} = Agents.MachineList.get_machines(set_period_loading_charts(filterKey).period, params) apiHelpers
const filteredGroupByParams = data.filter((machine) => machine[groupByParams.groupByKey] && machine[groupByParams.groupByKey].toLowerCase() === groupByParams.value)
const countMachines = filteredGroupByParams?.length
const countMachines = data?.length
const machines = data.reduce((acc, machine) => {
if (machine[filterParams.filterKey]) {
acc.push(setFilterValues(machine[filterParams.filterKey], filterParams))
} else {
acc
}
return acc
}, [])
const machines = filteredGroupByParams.reduce((acc, machine) => {
// const isFilteredMachine = machines.find((el) => filterParams.values.includes(el.name.toLowerCase()))
const groupByfiltered = machines.reduce((acc, machine) => {
if (filterParams.values.includes(machine.name.toLowerCase())) {
const count = machines.filter((el) => el.name === machine.name).length
const filteredMachines = {name: machine.name, value: count}
acc = uniq([...acc, filteredMachines])
} else {
acc
}
return acc
}, [])
return {countMachines: countMachines, period: setPeriodCharts(filterParams.filterKey).title, machines: groupByfiltered}
}
const chartsPieGroupedBy = (data, groupByParams, filterParams) => {
const filteredGroupByParams = data.filter((machine) => machine[groupByParams.groupByKey] && machine[groupByParams.groupByKey].toLowerCase() === groupByParams.value)
const countMachines = filteredGroupByParams?.length
const machines = filteredGroupByParams.reduce((acc, machine) => {
if (machine[filterParams.filterKey]) {
acc.push(setFilterValues(machine[filterParams.filterKey], filterParams))
} else {
acc
}
return acc
}, [])
if (machine[filterParams.filterKey]) {
acc.push(setFilterValues(machine[filterParams.filterKey], filterParams))
} else {
acc
}
return acc
}, [])
const filteredMachines = machines.reduce((acc, machine) => {
if (filterParams.values.includes(machine.name.toLowerCase())) {
const count = machines.filter((el) => el.name === machine.name).length
const filteredMachines = {name: machine.name, value: count}
acc = uniq([...acc, filteredMachines])
const filteredMachines = machines.reduce((acc, machine) => {
if (filterParams.values.includes(machine.name.toLowerCase())) {
const count = machines.filter((el) => el.name === machine.name).length
const filteredMachines = {name: machine.name, value: count}
acc = uniq([...acc, filteredMachines])
} else {
acc
}
return acc
}, [])
return {countMachines: countMachines, period: setPeriodCharts(filterParams.filterKey).title, machines: filteredMachines}
}
const chartsBarGroupedByMl = (data, filterKeysMl) => {
const machinesWithMl = filterKeysMl.map((filterKey) => {
const filteredWithMl = data.reduce((acc, machine) => {
if (machine[filterKey] === 0 || machine[filterKey]) {
acc = [...acc, {[filterKey]: machine[filterKey]}]
} else {
acc
}
return acc
}, [])
return {countMachines: countMachines, period: setPeriodCharts(filterParams.filterKey).title, machines: filteredMachines}
}
const chartsBarGroupedByMl = (data, filterKeysMl) => {
const machinesWithMl = filterKeysMl.map((filterKey) => {
const filteredWithMl = data.reduce((acc, machine) => {
if (machine[filterKey] === 0 || machine[filterKey]) {
acc = [...acc, {[filterKey]: machine[filterKey]}]
} else {
acc
}
return acc
}, [])
const count = filteredWithMl.reduce((acc, machine) => {
acc = acc + parseFloat(machine[filterKey])
return acc
}, 0)
const count = filteredWithMl.reduce((acc, machine) => {
acc = acc + parseFloat(machine[filterKey])
return acc
}, 0)
return {key: filterKey, name: setNamesMl(filterKey), machinesCount: filteredWithMl.length, value: count}
})
return {key: filterKey, name: setNamesMl(filterKey), machinesCount: filteredWithMl.length, value: count}
})
// console.log('machinesWithMl', machinesWithMl)
// console.log('machinesWithMl', machinesWithMl)
const countMachinesWithMl = Math.floor((machinesWithMl.reduce((acc, machine) => {
return acc + machine.machinesCount
}, 0)) / filterKeysMl.length)
const countMachinesWithMl = Math.floor((machinesWithMl.reduce((acc, machine) => {
return acc + machine.machinesCount
}, 0)) / filterKeysMl.length)
const machinesWithoutMl = filterKeysMl.map((filterKey) => {
const countNull = data.reduce((acc, machine) => {
if (machine[filterKey] === null) {
acc = acc + 1
const machinesWithoutMl = filterKeysMl.map((filterKey) => {
const countNull = data.reduce((acc, machine) => {
if (machine[filterKey] === null) {
acc = acc + 1
} else {
acc
}
return acc
}, 0)
return {key: filterKey, value: countNull}
})
// console.log('machinesWithoutMl', machinesWithoutMl)
const countMachinesWithoutMl = Math.floor((machinesWithoutMl.reduce((acc, machine) => {
return acc + machine.value
}, 0)) / filterKeysMl.length // Либо только машины, если без деления тогда все null МЛ суммируются
)
machinesWithMl.push({key: 'routes_without_ml', name: setNamesMl('routes_without_ml'), value: countMachinesWithoutMl})
return {countMachinesWithMl: countMachinesWithMl, period: setPeriodCharts(filterKeysMl).title, machines: machinesWithMl}
}
const chartsBarMount = (data, groupByKey, filterKey, countKey) => {
const groupByData = Object.groupBy(data, (el) => el[groupByKey])
const yAxisData = Object.entries(groupByData).map(([key, val]) => ({key: key, val: val.reduce((acc, val) => acc + val[countKey], 0)}))
const xAxisData = Object.entries(groupByData).map(([key, groupArr]) => {
const groupByFilterData = Object.groupBy(groupArr, (el) => el[filterKey])
const newArr = Object.entries(groupByFilterData).map(([key, val]) => ({name: key, value: val.reduce((acc, val) => acc + val[countKey], 0)}))
return {yAxisData: key, totalCount: groupArr.length, charts: newArr}
})
const countMounts = yAxisData.reduce((acc, year) => (acc + year.val), 0)
return {yAxisData: yAxisData, xAxisData: xAxisData, countMounts: countMounts, filterKey: filterKey}
}
const chartsBarTypes = (data, groupByKey, filterKey, prevGroupByData, prevGroupByFilters) => {
const countMachines = data.length
const groupByData = Object.groupBy(data, (el) => el[groupByKey])
const yAxisData = Object.entries(groupByData).map(([key, val]) => ({key: key, val: val.length}))
const xAxisData = Object.entries(groupByData).map(([key, groupArr]) => {
const groupByFilterData = Object.groupBy(groupArr, (el) => el[filterKey])
const newArr = Object.entries(groupByFilterData).map(([key, val]) => ({name: key, value: val.length, linkData: groupByKey === 'machine_type' ? val.map((el) => ({machine_type: el.machine_type, device_number: el.device_number})) : ''}))
return {yAxisData: key, totalCount: groupArr.length, charts: newArr}
})
return {yAxisData: yAxisData, xAxisData: xAxisData, countMachines: countMachines, period: setPeriodCharts(filterKey).title, filterKey: filterKey, groupByKey: groupByKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters}
}
const chartsBarTypesGroupedBy = (data, groupByKey, filterKey, prevGroupByData, prevGroupByFilters, typeId) => {
const machineClass = setMachinesClass(typeId)
const machinesFilteredClass = data.filter(({machine_class}) => machine_class === machineClass)
const groupByData = Object.groupBy(machinesFilteredClass, (el) => el[groupByKey])
const yAxisData = Object.entries(groupByData).map(([key, val]) => ({key: key, val: val.length}))
const xAxisData = Object.entries(groupByData).map(([key, groupArr]) => {
const groupByFilterData = Object.groupBy(groupArr, (el) => el[filterKey])
const newArr = Object.entries(groupByFilterData).map(([key, val]) => ({name: key, value: val.length, linkData: groupByKey === 'machine_type' ? val.map((el) => ({machine_type: el.machine_type, device_number: el.device_number})) : ''}))
return {yAxisData: key, totalCount: groupArr.length, charts: newArr}
})
const countMachines = yAxisData.reduce((acc, type) => acc + type.val, 0)
return {yAxisData: yAxisData, xAxisData: xAxisData, countMachines: countMachines, period: setPeriodCharts(filterKey).title, filterKey: filterKey, groupByKey: groupByKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters, typeId: typeId}
}
const chartsBarTypesWithoutFirstLayout = (data, groupByKey, filterKey, prevGroupByData, prevGroupByFilters, groupByValue) => {
const groupByData = Object.groupBy(data, (el) => el['org_type_name'])
const filteredGroupByData = Object.entries(groupByData).filter(([key, val]) => key === groupByValue)
if (filteredGroupByData.length === 0) return {yAxisData: [], xAxisData: [], countMachines: 0, period: setPeriodCharts(filterKey).title, filterKey: filterKey, groupByKey: groupByKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters, groupByValue: groupByValue}
const [groupedByGroupByKeyY] = filteredGroupByData.map(([key, groupArr]) => Object.groupBy(groupArr, (el) => el[groupByKey]))
const yAxisData = Object.entries(groupedByGroupByKeyY).map(([key, val]) => ({key: key, val: val.length}))
const [groupedByGroupByKeyX] = filteredGroupByData.map(([key, groupArr]) => Object.groupBy(groupArr, (el) => el[groupByKey]))
const xAxisData = Object.entries(groupedByGroupByKeyX).map(([key, groupArr]) => {
const groupByFilterData = Object.groupBy(groupArr, (el) => el[filterKey])
const newArr = Object.entries(groupByFilterData).map(([key, val]) => ({name: key, value: val.length, linkData: groupByKey === 'machine_type' ? val.map((el) => ({machine_type: el.machine_type, device_number: el.device_number})) : ''}))
return {yAxisData: key, totalCount: groupArr.length, charts: newArr}
})
const countMachines = yAxisData.reduce((acc, type) => acc + type.val, 0)
return {yAxisData: yAxisData, xAxisData: xAxisData, countMachines: countMachines, period: setPeriodCharts(filterKey).title, filterKey: filterKey, groupByKey: groupByKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters, groupByValue: groupByValue}
}
const chartsBarTypesGroupedByMl = (data, groupByKey, filterKeys, prevGroupByData, prevGroupByFilters) => {
const groupByData = Object.groupBy(data, (el) => el[groupByKey])
const yAxisData = Object.entries(groupByData).map(([key, val]) => {
const allValuesArr = filterKeys.map((filterKey) => {
const machinesWithMl = val.reduce((acc, el) => {
if (el[filterKey] || el[filterKey] === 0) {
acc = acc + el[filterKey]
} else {
acc
}
return acc
}, 0)
return {key: filterKey, value: countNull}
const machinesWithoutMl = val.filter((el) => el[filterKey] === null).length
return {machinesWithMl: machinesWithMl, machinesWithoutMl: machinesWithoutMl}
})
// console.log('machinesWithoutMl', machinesWithoutMl)
const countMachinesWithoutMl = Math.floor((machinesWithoutMl.reduce((acc, machine) => {
return acc + machine.value
}, 0)) / filterKeysMl.length // Либо только машины, если без деления тогда все null МЛ суммируются
)
machinesWithMl.push({key: 'routes_without_ml', name: setNamesMl('routes_without_ml'), value: countMachinesWithoutMl})
return {countMachinesWithMl: countMachinesWithMl, period: setPeriodCharts(filterKeysMl).title, machines: machinesWithMl}
}
const chartsBarMount = (data, groupByKey, filterKey, countKey) => {
const groupByData = Object.groupBy(data, (el) => el[groupByKey])
const yAxisData = Object.entries(groupByData).map(([key, val]) => ({key: key, val: val.reduce((acc, val) => acc + val[countKey], 0)}))
const xAxisData = Object.entries(groupByData).map(([key, groupArr]) => {
const groupByFilterData = Object.groupBy(groupArr, (el) => el[filterKey])
const newArr = Object.entries(groupByFilterData).map(([key, val]) => ({name: key, value: val.reduce((acc, val) => acc + val[countKey], 0)}))
return {yAxisData: key, totalCount: groupArr.length, charts: newArr}
})
const countMounts = yAxisData.reduce((acc, year) => (acc + year.val), 0)
return {yAxisData: yAxisData, xAxisData: xAxisData, countMounts: countMounts, filterKey: filterKey}
}
const chartsBarTypes = (data, groupByKey, filterKey, prevGroupByData, prevGroupByFilters) => {
const countMachines = data.length
const groupByData = Object.groupBy(data, (el) => el[groupByKey])
const yAxisData = Object.entries(groupByData).map(([key, val]) => ({key: key, val: val.length}))
const xAxisData = Object.entries(groupByData).map(([key, groupArr]) => {
const groupByFilterData = Object.groupBy(groupArr, (el) => el[filterKey])
const newArr = Object.entries(groupByFilterData).map(([key, val]) => ({name: key, value: val.length, linkData: groupByKey === 'machine_type' ? val.map((el) => ({machine_type: el.machine_type, device_number: el.device_number})) : ''}))
return {yAxisData: key, totalCount: groupArr.length, charts: newArr}
})
return {yAxisData: yAxisData, xAxisData: xAxisData, countMachines: countMachines, period: setPeriodCharts(filterKey).title, filterKey: filterKey, groupByKey: groupByKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters}
}
const chartsBarTypesGroupedBy = (data, groupByKey, filterKey, prevGroupByData, prevGroupByFilters, typeId) => {
const machineClass = setMachinesClass(typeId)
const machinesFilteredClass = data.filter(({machine_class}) => machine_class === machineClass)
const groupByData = Object.groupBy(machinesFilteredClass, (el) => el[groupByKey])
const yAxisData = Object.entries(groupByData).map(([key, val]) => ({key: key, val: val.length}))
const xAxisData = Object.entries(groupByData).map(([key, groupArr]) => {
const groupByFilterData = Object.groupBy(groupArr, (el) => el[filterKey])
const newArr = Object.entries(groupByFilterData).map(([key, val]) => ({name: key, value: val.length, linkData: groupByKey === 'machine_type' ? val.map((el) => ({machine_type: el.machine_type, device_number: el.device_number})) : ''}))
return {yAxisData: key, totalCount: groupArr.length, charts: newArr}
})
const countMachines = yAxisData.reduce((acc, type) => acc + type.val, 0)
return {yAxisData: yAxisData, xAxisData: xAxisData, countMachines: countMachines, period: setPeriodCharts(filterKey).title, filterKey: filterKey, groupByKey: groupByKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters, typeId: typeId}
}
const chartsBarTypesWithoutFirstLayout = (data, groupByKey, filterKey, prevGroupByData, prevGroupByFilters, groupByValue) => {
const groupByData = Object.groupBy(data, (el) => el['org_type_name'])
const filteredGroupByData = Object.entries(groupByData).filter(([key, val]) => key === groupByValue)
if (filteredGroupByData.length === 0) return {yAxisData: [], xAxisData: [], countMachines: 0, period: setPeriodCharts(filterKey).title, filterKey: filterKey, groupByKey: groupByKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters, groupByValue: groupByValue}
const [groupedByGroupByKeyY] = filteredGroupByData.map(([key, groupArr]) => Object.groupBy(groupArr, (el) => el[groupByKey]))
const yAxisData = Object.entries(groupedByGroupByKeyY).map(([key, val]) => ({key: key, val: val.length}))
const [groupedByGroupByKeyX] = filteredGroupByData.map(([key, groupArr]) => Object.groupBy(groupArr, (el) => el[groupByKey]))
const xAxisData = Object.entries(groupedByGroupByKeyX).map(([key, groupArr]) => {
const groupByFilterData = Object.groupBy(groupArr, (el) => el[filterKey])
const newArr = Object.entries(groupByFilterData).map(([key, val]) => ({name: key, value: val.length, linkData: groupByKey === 'machine_type' ? val.map((el) => ({machine_type: el.machine_type, device_number: el.device_number})) : ''}))
return {yAxisData: key, totalCount: groupArr.length, charts: newArr}
})
const countMachines = yAxisData.reduce((acc, type) => acc + type.val, 0)
return {yAxisData: yAxisData, xAxisData: xAxisData, countMachines: countMachines, period: setPeriodCharts(filterKey).title, filterKey: filterKey, groupByKey: groupByKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters, groupByValue: groupByValue}
}
const chartsBarTypesGroupedByMl = (data, groupByKey, filterKeys, prevGroupByData, prevGroupByFilters) => {
const groupByData = Object.groupBy(data, (el) => el[groupByKey])
const yAxisData = Object.entries(groupByData).map(([key, val]) => {
const allValuesArr = filterKeys.map((filterKey) => {
const machinesWithMl = val.reduce((acc, el) => {
if (el[filterKey] || el[filterKey] === 0) {
acc = acc + el[filterKey]
} else {
acc
}
return acc
}, 0)
const machinesWithoutMl = val.filter((el) => el[filterKey] === null).length
return {machinesWithMl: machinesWithMl, machinesWithoutMl: machinesWithoutMl}
})
// console.log('allValuesArr', allValuesArr)
const countMachinesWithMl = allValuesArr.reduce((acc, count) => (acc + count.machinesWithMl), 0)
const countMachinesWithoutMl = allValuesArr.reduce((acc, count) => (acc + count.machinesWithoutMl), 0) / filterKeys.length // Для исключения дублирования делим н а длину filterKeys
// console.log('allValuesArr', allValuesArr)
const countMachinesWithMl = allValuesArr.reduce((acc, count) => (acc + count.machinesWithMl), 0)
const countMachinesWithoutMl = allValuesArr.reduce((acc, count) => (acc + count.machinesWithoutMl), 0) / filterKeys.length // Для исключения дублирования делим н а длину filterKeys
return {key: key, val: countMachinesWithMl + countMachinesWithoutMl}
return {key: key, val: countMachinesWithMl + countMachinesWithoutMl}
})
const xAxisData = Object.entries(groupByData).map(([key, groupArr]) => {
return filterKeys.map((filterKey) => {
const groupByFilterData = Object.groupBy(groupArr, (el) => el[filterKey])
const newArr = Object.entries(groupByFilterData).map(([key, val]) => ({key: filterKey, name: key, value: val.reduce((acc, el) => el[filterKey] ? acc + el[filterKey] : acc, 0), linkData: groupByKey === 'machine_type' ? val.map((el) => ({machine_type: el.machine_type, device_number: el.device_number})) : ''}
))
const machinesWithMl = newArr.reduce((acc, type) => {
if (type.key === filterKey) {
acc = {filterKey: filterKey, name: setNamesMl(filterKey), value: acc?.value + type.value, linkData: type.linkData}
} else {
acc = {filterKey: filterKey, name: setNamesMl(filterKey), value: acc?.value, linkData: type.linkData}
}
return acc
}, {value: 0})
// console.log('machinesWithMl', machinesWithMl)
return {yAxisData: key, charts: machinesWithMl}
})
})
const xAxisData = Object.entries(groupByData).map(([key, groupArr]) => {
return filterKeys.map((filterKey) => {
const groupByFilterData = Object.groupBy(groupArr, (el) => el[filterKey])
const newArr = Object.entries(groupByFilterData).map(([key, val]) => ({key: filterKey, name: key, value: val.reduce((acc, el) => el[filterKey] ? acc + el[filterKey] : acc, 0), linkData: groupByKey === 'machine_type' ? val.map((el) => ({machine_type: el.machine_type, device_number: el.device_number})) : ''}
))
const machinesWithMl = newArr.reduce((acc, type) => {
if (type.key === filterKey) {
acc = {filterKey: filterKey, name: setNamesMl(filterKey), value: acc?.value + type.value, linkData: type.linkData}
} else {
acc = {filterKey: filterKey, name: setNamesMl(filterKey), value: acc?.value, linkData: type.linkData}
}
return acc
}, {value: 0})
// console.log('machinesWithMl', machinesWithMl)
return {yAxisData: key, charts: machinesWithMl}
})
})
const machinesWithoutMl = Object.entries(groupByData).map(([key, val]) => {
const countWithoutMl = val.filter((el) => filterKeys.find((filterKey) => el[filterKey] === null)).length
return {yAxisData: key, charts: {filterKey: 'routes_without_ml', name: setNamesMl('routes_without_ml'), value: countWithoutMl, linkData: groupByKey === 'machine_type' ? val.map((el) => ({machine_type: el.machine_type, device_number: el.device_number})) : ''}}
})
const machinesWithoutMl = Object.entries(groupByData).map(([key, val]) => {
const countWithoutMl = val.filter((el) => filterKeys.find((filterKey) => el[filterKey] === null)).length
return {yAxisData: key, charts: {filterKey: 'routes_without_ml', name: setNamesMl('routes_without_ml'), value: countWithoutMl, linkData: groupByKey === 'machine_type' ? val.map((el) => ({machine_type: el.machine_type, device_number: el.device_number})) : ''}}
})
const countMachinesWithMl = setCountMachinesMl(xAxisData)
const countMachinesWithoutMl = Math.floor(setCountMachinesMl(machinesWithoutMl)) / filterKeys.length
const countMachinesWithMl = setCountMachinesMl(xAxisData)
const countMachinesWithoutMl = Math.floor(setCountMachinesMl(machinesWithoutMl)) / filterKeys.length
const updatedXAxisData = xAxisData.reduce((acc, group) => {
const isFindGroup = machinesWithoutMl.find((machine) => machine.yAxisData === group[0].yAxisData)
if (isFindGroup) {
const updatedGroup = [...group, isFindGroup]
acc.push(updatedGroup)
} else {
acc
}
return acc
}, [])
const updatedXAxisData = xAxisData.reduce((acc, group) => {
const isFindGroup = machinesWithoutMl.find((machine) => machine.yAxisData === group[0].yAxisData)
if (isFindGroup) {
const updatedGroup = [...group, isFindGroup]
acc.push(updatedGroup)
} else {
acc
}
return acc
}, [])
// console.log('updatedXAxisData', updatedXAxisData)
// console.log('updatedXAxisData', updatedXAxisData)
return {yAxisData: yAxisData, xAxisData: updatedXAxisData, countMachinesWithMl: countMachinesWithMl, countMachinesWithoutMl: countMachinesWithoutMl, period: setPeriodCharts(filterKeys).title, groupByKey: groupByKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters}
}
return {yAxisData: yAxisData, xAxisData: updatedXAxisData, countMachinesWithMl: countMachinesWithMl, countMachinesWithoutMl: countMachinesWithoutMl, period: setPeriodCharts(filterKeys).title, groupByKey: groupByKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters}
}
/* Charts updated data end */
/* Charts updated data end */
const loadingChartsData = ({chartsSetup, data, dataMount, prevGroupByData, prevGroupByFilters}) => {
const loadingChartsData = ({chartsSetup, data, dataMount, prevGroupByData, prevGroupByFilters}) => {
// console.log('dataPie', chartsPie(data, chartsFilterParams[0]))
// console.log('dataPieValue', chartsPieGroupByValue(data, chartsGroupByParams[0], chartsFilterParams[0]))
// console.log('dataPieTypes', chartsPieGroupedBy(data, chartsGroupByParams2[0], chartsFilterParams[0]))
// console.log('dataBarMl', chartsBarGroupedByMl(data, chartsFilterKeysMl))
// console.log('dataBarMount', chartsBarMount(dataMount, 'year', 'client_type', 'device_count'))
// console.log('chartsBarTypesGroupedByMl', chartsBarTypesGroupedByMl(data, 'org_type_name', chartsFilterKeysMl, {}, {}))
// console.log('dataPie', chartsPie(data, chartsFilterParams[0]))
// console.log('dataPieValue', chartsPieGroupByValue(data, chartsGroupByParams[0], chartsFilterParams[0]))
// console.log('dataPieTypes', chartsPieGroupedBy(data, chartsGroupByParams2[0], chartsFilterParams[0]))
// console.log('dataBarMl', chartsBarGroupedByMl(data, chartsFilterKeysMl))
// console.log('dataBarMount', chartsBarMount(dataMount, 'year', 'client_type', 'device_count'))
// console.log('chartsBarTypesGroupedByMl', chartsBarTypesGroupedByMl(data, 'org_type_name', chartsFilterKeysMl, {}, {}))
const filteredPie = chartsFilterParams.reduce((acc, param) => {
const idChart = `${param.filterKey}_pie`
return {...acc, [idChart]: chartsPie(data, param)}}, {}) // Далее объединение всех типов графиков
const filteredPie = chartsFilterParams.reduce((acc, param) => {
const idChart = `${param.filterKey}_pie`
return {...acc, [idChart]: chartsPie(data, param)}}, {}) // Далее объединение всех типов графиков
const filteredPieGroupByValue = chartsGroupByParams.reduce((acc, param) => {
const idChart = `${chartsFilterParams[0].filterKey}_pie_${param.valueId}`
return {...acc, [idChart]: chartsPieGroupedBy(data, param, chartsFilterParams[0])}}, {})
const filteredPieGroupByValue = chartsGroupByParams.reduce((acc, param) => {
const idChart = `${chartsFilterParams[0].filterKey}_pie_${param.valueId}`
return {...acc, [idChart]: chartsPieGroupedBy(data, param, chartsFilterParams[0])}}, {})
const filteredPieGroupByTypes = chartsGroupByParams2.reduce((acc, param) => {
const idChart = `${chartsFilterParams[0].filterKey}_pie_${param.valueId}`
return {...acc, [idChart]: chartsPieGroupedBy(data, param, chartsFilterParams[0])}}, {})
const filteredPieGroupByTypes = chartsGroupByParams2.reduce((acc, param) => {
const idChart = `${chartsFilterParams[0].filterKey}_pie_${param.valueId}`
return {...acc, [idChart]: chartsPieGroupedBy(data, param, chartsFilterParams[0])}}, {})
const filteredBarGroupByMl = {[`${chartsFilterParams[1].filterKey}_bar`]: chartsBarGroupedByMl(data, chartsFilterKeysMl)}
const filteredBarGroupByMl = {[`${chartsFilterParams[1].filterKey}_bar`]: chartsBarGroupedByMl(data, chartsFilterKeysMl)}
const filteredBarMount = chartsMountParams.reduce((acc, param) => {
const idChart = `mount_${param.filterKey}_bar`
return {...acc, [idChart]: chartsBarMount(dataMount, param.groupByKey, param.filterKey, param.countKey)}}, {})
const filteredBarMount = chartsMountParams.reduce((acc, param) => {
const idChart = `mount_${param.filterKey}_bar`
return {...acc, [idChart]: chartsBarMount(dataMount, param.groupByKey, param.filterKey, param.countKey)}}, {})
const filteredBarTypes = chartsBarTypesParams.reduce((acc, param) => {
const idChart = `${param.filterKey}_${param.valueId}_bar`
return {...acc, [idChart]: chartsBarTypes(data, param.groupByKey, param.filterKey, prevGroupByData, prevGroupByFilters)}}, {})
const filteredBarTypes = chartsBarTypesParams.reduce((acc, param) => {
const idChart = `${param.filterKey}_${param.valueId}_bar`
return {...acc, [idChart]: chartsBarTypes(data, param.groupByKey, param.filterKey, prevGroupByData, prevGroupByFilters)}}, {})
const filteredBarGroupByTypes = chartsBarTypesGroupByParams.reduce((acc, param) => {
const idChart = `${param.filterKey}_${param.valueId}_bar_${param.typeId}`
return {...acc, [idChart]: chartsBarTypesGroupedBy(data, param.groupByKey, param.filterKey, prevGroupByData, prevGroupByFilters, param.typeId)}}, {})
const filteredBarGroupByTypes = chartsBarTypesGroupByParams.reduce((acc, param) => {
const idChart = `${param.filterKey}_${param.valueId}_bar_${param.typeId}`
return {...acc, [idChart]: chartsBarTypesGroupedBy(data, param.groupByKey, param.filterKey, prevGroupByData, prevGroupByFilters, param.typeId)}}, {})
const filteredBarWithoutLayoutTypes = chartsBarTypesWithoutLayoutParams.reduce((acc, param) => {
const idChart = `${param.filterKey}_types_bar_${param.valueId}`
return {...acc, [idChart]: chartsBarTypesWithoutFirstLayout(data, param.groupByKey, param.filterKey, prevGroupByData, prevGroupByFilters, param.groupByValue)}}, {})
const filteredBarWithoutLayoutTypes = chartsBarTypesWithoutLayoutParams.reduce((acc, param) => {
const idChart = `${param.filterKey}_types_bar_${param.valueId}`
return {...acc, [idChart]: chartsBarTypesWithoutFirstLayout(data, param.groupByKey, param.filterKey, prevGroupByData, prevGroupByFilters, param.groupByValue)}}, {})
const filteredBarGroupByMlTypes = {[`${chartsFilterParams[1].filterKey}_types_bar_ml`]: chartsBarTypesGroupedByMl(data, 'org_type_name', chartsFilterKeysMl, prevGroupByData, prevGroupByFilters)}
const filteredBarGroupByMlTypes = {[`${chartsFilterParams[1].filterKey}_types_bar_ml`]: chartsBarTypesGroupedByMl(data, 'org_type_name', chartsFilterKeysMl, prevGroupByData, prevGroupByFilters)}
const allCharts = {...filteredPie, ...filteredPieGroupByValue, ...filteredPieGroupByTypes, ...filteredBarGroupByMl, ...filteredBarMount, ...filteredBarTypes, ...filteredBarGroupByTypes, ...filteredBarWithoutLayoutTypes, ...filteredBarGroupByMlTypes}
const allCharts = {...filteredPie, ...filteredPieGroupByValue, ...filteredPieGroupByTypes, ...filteredBarGroupByMl, ...filteredBarMount, ...filteredBarTypes, ...filteredBarGroupByTypes, ...filteredBarWithoutLayoutTypes, ...filteredBarGroupByMlTypes}
console.log('allCharts', allCharts)
console.log('allCharts', allCharts)
// console.log('this.charts', data)
const main = chartsSetup.main.reduce((acc, chart) => {
if (allCharts[chart.id]) {
const newChart = {...chart, data: allCharts[chart.id]}
acc = [...acc, newChart]
} else {
acc
}
return acc
}, [])
const types = chartsSetup.types.reduce((acc, chart) => {
if (allCharts[chart.id]) {
const newChart = {...chart, data: allCharts[chart.id]}
acc = [...acc, newChart]
} else {
acc
}
return acc
}, [])
return {...chartsSetup, main: main, types: types}
}
const setBarTypesChart = (activeChartParams, prevGroupByData, prevGroupByFilters, defaultData, currentData) => {
switch (activeChartParams.type) {
case 'default':
const dataDefault = chartsBarTypes(defaultData, activeChartParams.groupByKey, activeChartParams.filterKey, prevGroupByData, prevGroupByFilters)
// const updatedData = currentData.types.reduce((acc, chart) => {
// if (chart.id === activeChartParams.id) {
// const newChart = {...chart, data: data}
// acc = [...acc, newChart]
// } else {
// acc = [...acc, chart]
// }
// return acc
// }, [])
// return {main: currentData.main, types: updatedData}
return dataDefault
case 'without_first_layout':
const dataWithoutFirstLayout = chartsBarTypesWithoutFirstLayout(defaultData, activeChartParams.groupByKey, activeChartParams.filterKey, prevGroupByData, prevGroupByFilters, activeChartParams.groupByValue)
return dataWithoutFirstLayout
case 'types':
const dataGroupBy = chartsBarTypesGroupedBy(defaultData, activeChartParams.groupByKey, activeChartParams.filterKey, prevGroupByData, prevGroupByFilters, activeChartParams.groupByValue)
return dataGroupBy
case 'ml':
const dataMl = chartsBarTypesGroupedByMl(defaultData, activeChartParams.groupByKey, chartsFilterKeysMl, prevGroupByData, prevGroupByFilters)
return dataMl
// console.log('this.charts', data)
const main = chartsSetup.main.reduce((acc, chart) => {
if (allCharts[chart.id]) {
const newChart = {...chart, data: allCharts[chart.id]}
acc = [...acc, newChart]
} else {
acc
}
return acc
}, [])
const types = chartsSetup.types.reduce((acc, chart) => {
if (allCharts[chart.id]) {
const newChart = {...chart, data: allCharts[chart.id]}
acc = [...acc, newChart]
} else {
acc
}
return acc
}, [])
return {...chartsSetup, main: main, types: types}
}
const setBarTypesChart = (activeChartParams, prevGroupByData, prevGroupByFilters, defaultData, currentData) => {
switch (activeChartParams.type) {
case 'default':
const dataDefault = chartsBarTypes(defaultData, activeChartParams.groupByKey, activeChartParams.filterKey, prevGroupByData, prevGroupByFilters)
// const updatedData = currentData.types.reduce((acc, chart) => {
// if (chart.id === activeChartParams.id) {
// const newChart = {...chart, data: data}
// acc = [...acc, newChart]
// } else {
// acc = [...acc, chart]
// }
// return acc
// }, [])
// return {main: currentData.main, types: updatedData}
return dataDefault
case 'without_first_layout':
const dataWithoutFirstLayout = chartsBarTypesWithoutFirstLayout(defaultData, activeChartParams.groupByKey, activeChartParams.filterKey, prevGroupByData, prevGroupByFilters, activeChartParams.groupByValue)
return dataWithoutFirstLayout
case 'types':
const dataGroupBy = chartsBarTypesGroupedBy(defaultData, activeChartParams.groupByKey, activeChartParams.filterKey, prevGroupByData, prevGroupByFilters, activeChartParams.groupByValue)
return dataGroupBy
case 'ml':
const dataMl = chartsBarTypesGroupedByMl(defaultData, activeChartParams.groupByKey, chartsFilterKeysMl, prevGroupByData, prevGroupByFilters)
return dataMl
}
}
const setNextLayoutGroupByKey = (groupByKey, prevGroupByValue) => {
if (prevGroupByValue === 'без типа') return null
switch (groupByKey) {
case 'org_type_name': return 'railway_name'
case 'railway_name': return 'org_name'
case 'org_name': return 'type'
case 'type': return 'machine_type'
case 'zav_nomer': return 'machine_type'
default: return null
}
const setNextLayoutGroupByKey = (groupByKey, prevGroupByValue) => {
if (prevGroupByValue === 'без типа') return null
switch (groupByKey) {
case 'org_type_name': return 'railway_name'
case 'railway_name': return 'org_name'
case 'org_name': return 'type'
case 'type': return 'machine_type'
case 'zav_nomer': return 'machine_type'
default: return null
}
}
const setBeforeLayoutGroupByData = (prevGroupByData, prevGroupByFilters, type) => {
return cond([
[has('type'), () => ({org_name: prevGroupByFilters['org_name']})],
[has('org_name'), () => ({railway_name: prevGroupByFilters['railway_name']})],
[has('railway_name'), () => (type === 'without_first_layout' ? {} : {org_type_name: prevGroupByFilters['org_type_name']})],
[T, () => {}],
])(prevGroupByData)
const setBeforeLayoutGroupByData = (prevGroupByData, prevGroupByFilters, type) => {
return cond([
[has('type'), () => ({org_name: prevGroupByFilters['org_name']})],
[has('org_name'), () => ({railway_name: prevGroupByFilters['railway_name']})],
[has('railway_name'), () => (type === 'without_first_layout' ? {} : {org_type_name: prevGroupByFilters['org_type_name']})],
[T, () => {}],
])(prevGroupByData)
}
const typesCharts = (type) => {
switch (type) {
case 'pie': return true
case 'mount': return true
case 'mainMl': return true
default: return false
}
}
const typesCharts = (type) => {
switch (type) {
case 'pie': return true
case 'mount': return true
case 'mainMl': return true
default: return false
}
}
export { loadingChartsData, setBarTypesChart, setNextLayoutGroupByKey, setBeforeLayoutGroupByData, typesCharts }
export { loadingChartsData, setBarTypesChart, setNextLayoutGroupByKey, setBeforeLayoutGroupByData, typesCharts }

18
live_monitor_vue/src/store/modules/main/index.js
View File

@ -32,15 +32,15 @@ const actions = {
uploadData: async ({commit}, path) => {
try{
switch(path) {
case '/finder_packs':
commit('setPage', pages[1])
break
case '/add_users':
commit('setPage', pages[2])
break
default:
commit('setPage', pages[0])
break
case '/finder_packs':
commit('setPage', pages[1])
break
case '/add_users':
commit('setPage', pages[2])
break
default:
commit('setPage', pages[0])
break
}
} catch(err) {

128
live_monitor_vue/src/store/modules/packs/StaticData.js
View File

@ -252,10 +252,10 @@ const packStruct = [
const packsNames = ["Диагностика УК (7681)", "Диагностика УК (7682)",
"Диагностика УК (7683)", "Диагностика УК (7684)",
"Диагностика УК (7685)", "Тест УК(9473)",
"УК 25/25(9473)", "УК 25/25(9475)", "УК 25/28СП(9473)",
"УК 25/28СП(9475)", "УК 25/9-18(9473)", "УК 25/9-18(9475)"]
"Диагностика УК (7683)", "Диагностика УК (7684)",
"Диагностика УК (7685)", "Тест УК(9473)",
"УК 25/25(9473)", "УК 25/25(9475)", "УК 25/28СП(9473)",
"УК 25/28СП(9475)", "УК 25/9-18(9473)", "УК 25/9-18(9475)"]
const data = {
askr_logs: [
@ -273,10 +273,10 @@ const data = {
geo:
// %Geo.Point{
{
coordinates: [136.150181, 49.90781],
srid: 4326,
properties: {}
},
coordinates: [136.150181, 49.90781],
srid: 4326,
properties: {}
},
is_valid: true,
voltage: 25.93,
pack_lon: 136.150181,
@ -319,10 +319,10 @@ const data = {
geo:
// %Geo.Point{
{
coordinates: [136.15018899999998, 49.907799],
srid: 4326,
properties: {}
},
coordinates: [136.15018899999998, 49.907799],
srid: 4326,
properties: {}
},
is_valid: true,
voltage: 25.89,
pack_lon: 136.150189,
@ -365,10 +365,10 @@ const data = {
geo:
// %Geo.Point{
{
coordinates: [136.15018899999998, 49.907801],
srid: 4326,
properties: {}
},
coordinates: [136.15018899999998, 49.907801],
srid: 4326,
properties: {}
},
is_valid: true,
voltage: 25.77,
pack_lon: 136.150189,
@ -411,10 +411,10 @@ const data = {
geo:
// %Geo.Point{
{
coordinates: [136.15018, 49.907806],
srid: 4326,
properties: {}
},
coordinates: [136.15018, 49.907806],
srid: 4326,
properties: {}
},
is_valid: true,
voltage: 25.87,
pack_lon: 136.15018,
@ -457,10 +457,10 @@ const data = {
geo:
// %Geo.Point{
{
coordinates: [136.150184, 49.907799],
srid: 4326,
properties: {}
},
coordinates: [136.150184, 49.907799],
srid: 4326,
properties: {}
},
is_valid: true,
voltage: 25.88,
pack_lon: 136.150184,
@ -503,10 +503,10 @@ const data = {
geo:
// %Geo.Point{
{
coordinates: [136.15018, 49.907807],
srid: 4326,
properties: {}
},
coordinates: [136.15018, 49.907807],
srid: 4326,
properties: {}
},
is_valid: true,
voltage: 25.94,
pack_lon: 136.15018,
@ -549,10 +549,10 @@ const data = {
geo:
// %Geo.Point{
{
coordinates: [136.150181, 49.907799999999995],
srid: 4326,
properties: {}
},
coordinates: [136.150181, 49.907799999999995],
srid: 4326,
properties: {}
},
is_valid: true,
voltage: 25.84,
pack_lon: 136.150181,
@ -595,10 +595,10 @@ const data = {
geo:
// %Geo.Point{
{
coordinates: [136.150181, 49.907810999999995],
srid: 4326,
properties: {}
},
coordinates: [136.150181, 49.907810999999995],
srid: 4326,
properties: {}
},
is_valid: true,
voltage: 25.93,
pack_lon: 136.150181,
@ -641,10 +641,10 @@ const data = {
geo:
// %Geo.Point{
{
coordinates: [136.15018, 49.90781],
srid: 4326,
properties: {}
},
coordinates: [136.15018, 49.90781],
srid: 4326,
properties: {}
},
is_valid: true,
voltage: 25.91,
pack_lon: 136.15018,
@ -687,10 +687,10 @@ const data = {
geo:
// %Geo.Point{
{
coordinates: [136.15017899999998, 49.907809],
srid: 4326,
properties: {}
},
coordinates: [136.15017899999998, 49.907809],
srid: 4326,
properties: {}
},
is_valid: true,
voltage: 25.91,
pack_lon: 136.150179,
@ -733,10 +733,10 @@ const data = {
geo:
// %Geo.Point{
{
coordinates: [136.150185, 49.907799999999995],
srid: 4326,
properties: {}
},
coordinates: [136.150185, 49.907799999999995],
srid: 4326,
properties: {}
},
is_valid: true,
voltage: 25.61,
pack_lon: 136.150185,
@ -779,10 +779,10 @@ const data = {
geo:
// %Geo.Point{
{
coordinates: [136.15018799999999, 49.907803],
srid: 4326,
properties: {}
},
coordinates: [136.15018799999999, 49.907803],
srid: 4326,
properties: {}
},
is_valid: true,
voltage: 25.49,
pack_lon: 136.150188,
@ -824,10 +824,10 @@ const data = {
geo:
// %Geo.Point{
{
coordinates: [136.150184, 49.907796999999995],
srid: 4326,
properties: {}
},
coordinates: [136.150184, 49.907796999999995],
srid: 4326,
properties: {}
},
is_valid: true,
voltage: 25.6,
pack_lon: 136.150184,
@ -868,10 +868,10 @@ const data = {
geo:
// %Geo.Point{
{
coordinates: [136.150184, 49.907796999999995],
srid: 4326,
properties: {}
},
coordinates: [136.150184, 49.907796999999995],
srid: 4326,
properties: {}
},
is_valid: true,
voltage: 25.62,
pack_lon: 136.150184,
@ -911,10 +911,10 @@ const data = {
geo:
// %Geo.Point{
{
coordinates: [136.15018999999998, 49.907802],
srid: 4326,
properties: {}
},
coordinates: [136.15018999999998, 49.907802],
srid: 4326,
properties: {}
},
is_valid: true,
voltage: 25.88,
pack_lon: 136.15019,

2
live_monitor_vue/src/store/modules/packs/index.js
View File

@ -109,7 +109,7 @@ const actions = {
*/
// imei 864004043403283
// imei 864004043403283
console.log('params', toRaw(params))
console.log('getters.isLoading', toRaw(getters.isLoading))

36
live_monitor_vue/src/store/modules/services/StaticData.js
View File

@ -1,22 +1,22 @@
const servicesNames = ["check_scand_api_2EC27AEA12AAC9E5B013", "niflheim",
"scand_client_B0C8B117F3AB40D5869C",
"local_local_cdrp@172.25.78.64_E66972859C7734FBAB11",
"cronex_9354617E3A5A69493AC0",
"local_lm_api@172.25.78.153_36C091D060A018177B49",
"db_loader_7C6C7680BAC92D4BFD8C", "sql_inserter_B2751775DD1FC358682A",
"authentication_service_F2AE8881F984DFE1A4BD", "cdrp",
"asgard_82DB735B1F03E8A5BA0E", "alfheim_90556327D9DC81351EE2", "GStore",
"alfheim_1B3027982471601E45E8", "cronex", "comm_client_diap_1",
"cdrp_B2E275BA9E7E79D4D2D6", "authentication_service",
"comm_client_diap_1_8348C79D6407CDB752FD", "sql_sup_F66176648815DC42BD4D",
"periodic_tasks_228605BF57BD5DE8C94B",
"integration_pk_gip_F6797EF2E89795090B4D", "live_monitor_EA3F27068ABA3C4F5D7F",
"snotra_EC6E797D24F8E93C536F", "thor_70B46C452D3105A6AF09",
"kudt_diag_3D0E0652B99B208E8519", "snotra", "live_monitor", "sql_sup",
"comm_client_diap_2_B2FAA49D7F5EF167DF1D", "niflheim_829F2F30E9FD2539D3E7",
"comm_client_diap_repl_6BA0746DB5CFB506AC7A", "pack_rrnr_DDCE13940E392EB3456A",
"local_local_live_monitor@172.25.78.151_CD55455FB92AB74F178B", "alfheim",
"local_fuel_api@172.25.78.98_C215EA176A84C84A6CEC"]
"scand_client_B0C8B117F3AB40D5869C",
"local_local_cdrp@172.25.78.64_E66972859C7734FBAB11",
"cronex_9354617E3A5A69493AC0",
"local_lm_api@172.25.78.153_36C091D060A018177B49",
"db_loader_7C6C7680BAC92D4BFD8C", "sql_inserter_B2751775DD1FC358682A",
"authentication_service_F2AE8881F984DFE1A4BD", "cdrp",
"asgard_82DB735B1F03E8A5BA0E", "alfheim_90556327D9DC81351EE2", "GStore",
"alfheim_1B3027982471601E45E8", "cronex", "comm_client_diap_1",
"cdrp_B2E275BA9E7E79D4D2D6", "authentication_service",
"comm_client_diap_1_8348C79D6407CDB752FD", "sql_sup_F66176648815DC42BD4D",
"periodic_tasks_228605BF57BD5DE8C94B",
"integration_pk_gip_F6797EF2E89795090B4D", "live_monitor_EA3F27068ABA3C4F5D7F",
"snotra_EC6E797D24F8E93C536F", "thor_70B46C452D3105A6AF09",
"kudt_diag_3D0E0652B99B208E8519", "snotra", "live_monitor", "sql_sup",
"comm_client_diap_2_B2FAA49D7F5EF167DF1D", "niflheim_829F2F30E9FD2539D3E7",
"comm_client_diap_repl_6BA0746DB5CFB506AC7A", "pack_rrnr_DDCE13940E392EB3456A",
"local_local_live_monitor@172.25.78.151_CD55455FB92AB74F178B", "alfheim",
"local_fuel_api@172.25.78.98_C215EA176A84C84A6CEC"]
// const servicesNotConnected = [

4
live_monitor_vue/src/store/modules/services/index.js
View File

@ -52,10 +52,10 @@ const actions = {
}
},
uploadServiceData: async ({}, service) => {
uploadServiceData: async ({}, service) => {
try{
const serviceNew = new Service(service)
const getCache = serviceNew.getCashe(service)
serviceNew.getCashe(service)
} catch (err) {
console.error(err)
}