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_NAME=pre-push
HOOK_PATH=../.git/hooks/$(HOOK_NAME) HOOK_PATH=../.git/hooks/$(HOOK_NAME)
prehook: clearhook:
@echo "Setting up pre-push hook..." @echo "clear hooks"
@rm -f $(HOOK_PATH) @rm -f $(HOOK_PATH)
@echo "hooks cleared"
prehook:
make clearhook
@echo '#!/bin/sh' >> $(HOOK_PATH) @echo '#!/bin/sh' >> $(HOOK_PATH)
@echo 'echo "Running lint for live_monitor_vue"' >> $(HOOK_PATH) @echo 'echo "Running lint for live_monitor_vue"' >> $(HOOK_PATH)
@echo 'cd ./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> <script>
export default { export default {
name: 'DoubleSwitch', name: 'DoubleSwitch',
inject: ['isChecked'],
props: { props: {
machine: { machine: {
type: Object, type: Object,
@ -26,13 +25,12 @@ export default {
default: '' default: ''
}, },
}, },
emits: ['switched'],
computed: { computed: {
}, },
mounted () { mounted () {
}, },
inject: ['isChecked'],
emits: ['switched'],
methods: { methods: {
buttonClass: function(value) { 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}` 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> </script>
<template> <template>
<label class="relative inline-flex items-center cursor-pointer"> <label class="relative inline-flex items-center cursor-pointer">
<input <input
@ -55,11 +52,12 @@ export default {
type="checkbox" type="checkbox"
:checked="isChecked" :checked="isChecked"
@change="setChecked" @change="setChecked"
/> >
<div <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`" :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="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> <span class="hidden peer-checked/checkbox:block ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"> {{ secondTitle }} </span>
</label> </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> <script>
import ButtonModal from '@molecules/ButtonModal/ButtonModal.vue' import ButtonModal from '@molecules/ButtonModal/ButtonModal.vue'
import Tabulator from "@molecules/VTabulator/VTabulator.vue" import Tabulator from "@molecules/VTabulator/VTabulator.vue"
@ -49,3 +39,13 @@ export default {
} }
</script> </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: "" default: ""
} }
}, },
computed: {
},
updated () { updated () {
this.$nextTick(function () { this.$nextTick(function () {
if (this.data && this.id && this.open) { if (this.data && this.id && this.open) {
@ -45,8 +47,6 @@ export default {
} }
}) })
}, },
computed: {
},
methods: { 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> <script>
import RawSpinner from './VSpinnerSvg.vue' import RawSpinner from './VSpinnerSvg.vue'
@ -36,3 +24,15 @@ export default {
} }
</script> </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> <script>
export default { export default {
@ -40,3 +19,24 @@ export default {
} }
</script> </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() { __getGroupCfg() {
if (this.groupByTemplate) if (this.groupByTemplate)
return { groupBy: groupByFunction(this.groupByTemplate) }; return { groupBy: groupByFunction(this.groupByTemplate) };
if (this.groupBy) return { groupBy: this.groupBy }; if (this.groupBy) return { groupBy: this.groupBy };
return {}; return {};
}, },
__getGroupHeaderCfg() { __getGroupHeaderCfg() {
if (this.groupHeader) if (this.groupHeader)
return { return {
groupHeader: (value, count, data, group) => groupHeader: (value, count, data, group) =>
renderGroupHeader({ renderGroupHeader({
extra: this.groupExtraValues, extra: this.groupExtraValues,
groupHeader: this.groupHeader, groupHeader: this.groupHeader,
value, value,
count, count,
data, data,
group, group,
}), }),
}; };
return {}; return {};
}, },
} }
@ -189,6 +189,6 @@ export default {
</div> </div>
</div> </div>
<div v-if="pagination"> <div v-if="pagination">
<Pagination :params="pagination"/> <Pagination :params="pagination" />
</div> </div>
</template> </template>

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

@ -1,5 +1,3 @@
<script> <script>
import {mapGetters, mapMutations, mapActions, useStore} from "vuex" import {mapGetters, mapMutations, mapActions, useStore} from "vuex"
import { validation } from './helper' import { validation } from './helper'
@ -42,7 +40,7 @@ export default {
const options = selectOption ? selectOption : optionsDefault const options = selectOption ? selectOption : optionsDefault
const currentOptions = options.filter((el) => { const currentOptions = options.filter((el) => {
if(el <= Math.ceil(paginationOptions.total / 10) * 10) { if(el <= Math.ceil(paginationOptions.total / 10) * 10) {
return el return el
} }
}) })
if(paginationOptions.show_all) { if(paginationOptions.show_all) {
@ -93,13 +91,13 @@ export default {
return false return false
} }
if(!error) { if(!error) {
e.target.removeAttribute('disabled') e.target.removeAttribute('disabled')
e.target.classList.remove('opacity-50') e.target.classList.remove('opacity-50')
const loader = document.querySelector(`#table_loder_${this.params.id}`) const loader = document.querySelector(`#table_loder_${this.params.id}`)
loader.style.display = 'block' loader.style.display = 'block'
e.target.focus() e.target.focus()
const params = {pageNumber: this.inputValue, pageSize: this.params.paginationOptions.page_size} const params = {pageNumber: this.inputValue, pageSize: this.params.paginationOptions.page_size}
return this.params.updatePagination(params) return this.params.updatePagination(params)
} else { } else {
e.target.setAttribute('disabled', 'disabled') e.target.setAttribute('disabled', 'disabled')
e.target.classList.add('opacity-50') e.target.classList.add('opacity-50')
@ -120,61 +118,145 @@ export default {
</script> </script>
<template> <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 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="pagination-left flex flex-row gap-1">
<div class="current-entries flex text-sm font-bold">Показаны {{currentEntries(params?.paginationOptions)}}</div> <div class="current-entries flex text-sm font-bold">
<div class="count-entries flex text-sm font-bold">(Всего записей - {{params?.paginationOptions?.total}})</div> Показаны {{ currentEntries(params?.paginationOptions) }}
</div>
<div class="count-entries flex text-sm font-bold">
(Всего записей - {{ params?.paginationOptions?.total }})
</div>
</div> </div>
<div class="pagination-right flex flex-col xl:flex-row items-center gap-3"> <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
<div role="status"> :id="`table_loder_${params.id}`"
<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" > class="hidden w-full h-auto bg-light flex items-center justify-center px-2"
<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"/> <div
</svg> 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>
<div class="buttons flex h-fit gap-1 sm:gap-3 text-sm"> <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"> <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> <span>1</span>
</button> </button>
</div> </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})"> <button
<span class="hidden sm:flex">Назад</span><i class="ri-arrow-left-line sm:hidden"></i> :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>
<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})"> <button
<span>{{params.paginationOptions.page_number - 1}}</span> :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> </button>
</div> </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"> <button
<span>{{params.paginationOptions.page_number}}</span> :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> </button>
<div class="flex gap-1 sm:gap-3" v-if="params.paginationOptions.page_number < params.paginationOptions.total_pages"> <div
<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})"> v-if="params.paginationOptions.page_number < params.paginationOptions.total_pages"
<span>{{params.paginationOptions.page_number + 1}}</span> 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>
<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})"> <button
<span class="hidden sm:flex">Вперёд</span><i class="ri-arrow-right-line sm:hidden"></i> :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> </button>
<div v-if="params.paginationOptions.page_number + 1 !== params.paginationOptions.total_pages"> <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})"> <button
<span>{{params.paginationOptions.total_pages}}</span> :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> </button>
</div> </div>
</div> </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 class="flex flex-row items-center justify-center gap-2">
<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"> <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" > <select
<option :key={idx} v-for="(el, idx) in selectOptions(params.selectOption, params.paginationOptions)" :value="`${el === 'Все' ? params.paginationOptions.total : el}`"> name="on_page"
{{ el }} :value="params.paginationOptions.page_size"
</option>` :table_option="`${params.id}`"
</select> 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> </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); var right = parseFloat(operand);
switch(operator) { switch(operator) {
case "+": case "+":
return left + right; return left + right;
case "-": case "-":
return left - right; return left - right;
case "*": case "*":
return left * right; return left * right;
case "/": case "/":
return left / right; return left / right;
case "%": case "%":
return left % right; return left % right;
default: default:
return ""; return "";
} }
} }
@ -204,7 +204,7 @@ const render = (col) => ({
if(col.onCell && !record.status) { if(col.onCell && !record.status) {
console.log('onCell', col.onCell) console.log('onCell', col.onCell)
cell.getElement().style.backgroundColor = parseFunc(col.onCell)(record)?.style?.backgroundColor cell.getElement().style.backgroundColor = parseFunc(col.onCell)(record)?.style?.backgroundColor
} }
if (`${col.render}`.includes("{{") && `${col.render}`.includes("}}")) { if (`${col.render}`.includes("{{") && `${col.render}`.includes("}}")) {
let record = cell.getRow().getData(); let record = cell.getRow().getData();
cell.getElement().innerHTML = Handlebars.compile(col.render)( cell.getElement().innerHTML = Handlebars.compile(col.render)(
@ -278,21 +278,21 @@ const makedFiltering = (id, filterParams, selectedFilter, clearFilters) => {
const table = document.querySelector(`#${id}`) const table = document.querySelector(`#${id}`)
const isFiltering = document.querySelector(`${id}-filters`) const isFiltering = document.querySelector(`${id}-filters`)
if(id && filterParams) { if(id && filterParams) {
filterParams.unshift([]) filterParams.unshift([])
const filtersContainer = document.createElement('div') const filtersContainer = document.createElement('div')
filtersContainer.setAttribute("id", `${id}-filters`) filtersContainer.setAttribute("id", `${id}-filters`)
filtersContainer.classList.add("col-span-12") filtersContainer.classList.add("col-span-12")
filtersContainer.innerHTML = ` 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}-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"> <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" > <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) => { ${filterParams.map((el) => {
return (`<option value='${el}'> return (`<option value='${el}'>
${el} ${el}
</option>`) </option>`)
})} })}
</select> </select>
</div> </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> <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":{ "pagination":{
"page_size":"Размер таблицы", //label for the page size select element "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) "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":"К первой", //text for the first page button
"first_title":"Показать страницу", //tooltip text for the first page button "first_title":"Показать страницу", //tooltip text for the first page button
"last":"К последней", "last":"К последней",
"last_title":"Последняя страница", "last_title":"Последняя страница",
"prev":"<<", "prev":"<<",
"prev_title":"<<", "prev_title":"<<",
"next":">>", "next":">>",
"next_title":">>", "next_title":">>",
"all":"Все", "all":"Все",
"counter":{ "counter":{
"showing": "Показать", "showing": "Показать",
"of": "из", "of": "из",
"rows": "строки", "rows": "строки",
"pages": "страницы", "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 parseFunc3 = (string) => {
const f = new Function(`return (${string})`) const f = new Function(`return (${string})`)
return f() return f()
} }
export {parseFunc, parseFunc2, parseFunc3} 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") => export const reformateDateString = (date, format = "full") =>
!!date ? reformate(date, format) : null; date ? reformate(date, format) : null;
const reformate = (date, format) => const reformate = (date, format) =>
cond([ cond([
@ -116,42 +116,42 @@ export const parseSepareteDate = (
if (dateBits[key] < 10) dateBits[key] = `0${dateBits[key]}`; if (dateBits[key] < 10) dateBits[key] = `0${dateBits[key]}`;
}); });
switch (mode) { switch (mode) {
case "DateDMY": case "DateDMY":
return dateBits.day + symbol + dateBits.month + symbol + dateBits.year; return dateBits.day + symbol + dateBits.month + symbol + dateBits.year;
case "DateDM": case "DateDM":
return dateBits.day + symbol + dateBits.month; return dateBits.day + symbol + dateBits.month;
case "DateYMD": case "DateYMD":
return dateBits.year + symbol + dateBits.month + symbol + dateBits.day; return dateBits.year + symbol + dateBits.month + symbol + dateBits.day;
case "DateDMYHM": case "DateDMYHM":
return `${ return `${
dateBits.day + symbol + dateBits.month + symbol + dateBits.year dateBits.day + symbol + dateBits.month + symbol + dateBits.year
} ${dateBits.hours}:${dateBits.minutes}`; } ${dateBits.hours}:${dateBits.minutes}`;
case "DateDMYHMS": case "DateDMYHMS":
return `${ return `${
dateBits.day + symbol + dateBits.month + symbol + dateBits.year dateBits.day + symbol + dateBits.month + symbol + dateBits.year
} ${dateBits.hours}:${dateBits.minutes}:${dateBits.seconds}`; } ${dateBits.hours}:${dateBits.minutes}:${dateBits.seconds}`;
case "DateYMDHM": case "DateYMDHM":
return `${ return `${
dateBits.year + symbol + dateBits.month + symbol + dateBits.day dateBits.year + symbol + dateBits.month + symbol + dateBits.day
} ${dateBits.hours}:${dateBits.minutes}`; } ${dateBits.hours}:${dateBits.minutes}`;
case "DateYMDHMS": case "DateYMDHMS":
return `${ return `${
dateBits.year + symbol + dateBits.month + symbol + dateBits.day dateBits.year + symbol + dateBits.month + symbol + dateBits.day
} ${dateBits.hours}:${dateBits.minutes}:${dateBits.seconds}`; } ${dateBits.hours}:${dateBits.minutes}:${dateBits.seconds}`;
case "DateHM": case "DateHM":
return `${dateBits.hours}:${dateBits.minutes}`; return `${dateBits.hours}:${dateBits.minutes}`;
case "DateHMDM": case "DateHMDM":
return `${dateBits.hours}:${dateBits.minutes} ${dateBits.day}${symbol}${dateBits.month}`; return `${dateBits.hours}:${dateBits.minutes} ${dateBits.day}${symbol}${dateBits.month}`;
case "DateDataBase": case "DateDataBase":
return `${ return `${
dateBits.year + symbol + dateBits.month + symbol + dateBits.day dateBits.year + symbol + dateBits.month + symbol + dateBits.day
}T${dateBits.hours}:${dateBits.minutes}:${dateBits.seconds}`; }T${dateBits.hours}:${dateBits.minutes}:${dateBits.seconds}`;
case "DateDataBaseSpace": case "DateDataBaseSpace":
return `${ return `${
dateBits.year + symbol + dateBits.month + symbol + dateBits.day dateBits.year + symbol + dateBits.month + symbol + dateBits.day
} ${dateBits.hours}:${dateBits.minutes}:${dateBits.seconds}`; } ${dateBits.hours}:${dateBits.minutes}:${dateBits.seconds}`;
default: default:
return dateBits.day + symbol + dateBits.month + symbol + dateBits.year; 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) => { const setPackColumns = (name) => {
switch(name) { switch(name) {
case 'КолонкиПакетов': case 'КолонкиПакетов':
return [ return [
{ {
title: "Пакет на проде", title: "Пакет на проде",
field: "switch ", field: "switch ",
width: 150, width: 150,
render: ` render: `
<form x-data='{ isProd: {{ isProd }} }' phx-change='update_pack_struct_online:{{ id }}'> <form x-data='{ isProd: {{ isProd }} }' phx-change='update_pack_struct_online:{{ id }}'>
<div class='flex justify-center'> <div class='flex justify-center'>
<div class='form-check form-switch'> <div class='form-check form-switch'>
@ -20,17 +20,17 @@ const setPackColumns = (name) => {
</div> </div>
</form> </form>
` `
}, },
{ {
title: "Название", title: "Название",
field: "name", field: "name",
width: 180 width: 180
}, },
{ {
title: "Действия", title: "Действия",
field: "actions", field: "actions",
width: 100, width: 100,
render: ` render: `
<div class='flex gap-2 py-1'> <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 }}' > <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> <i class='ri-eye-fill'></i>
@ -50,105 +50,105 @@ const setPackColumns = (name) => {
</button> </button>
</div> </div>
` `
} }
] ]
case 'Сырые': case 'Сырые':
return [ return [
{ {
title: "Время пакета", title: "Время пакета",
field: "pack_dt", field: "pack_dt",
width: 180 width: 180
}, },
{ {
title: "Архивная дата", title: "Архивная дата",
field: "arhiv_date", field: "arhiv_date",
width: 90 width: 90
}, },
{ {
title: "Номер пакета", title: "Номер пакета",
field: "pack_number", field: "pack_number",
width: 70 width: 70
}, },
{ {
title: "Длинна пакета", title: "Длинна пакета",
field: "pack_len", field: "pack_len",
width: 70 width: 70
}, },
{ {
title: "Репл", title: "Репл",
field: "id_repl", field: "id_repl",
width: 70 width: 70
}, },
{ {
title: "IMEI", title: "IMEI",
field: "imei", field: "imei",
width: 120 width: 120
}, },
{ {
title: "ДАННЫЕ", title: "ДАННЫЕ",
field: "data", field: "data",
width: 600 width: 600
}, },
{ {
title: "Дата начала передачи", title: "Дата начала передачи",
field: "connect_dt", field: "connect_dt",
width: 180 width: 180
}, },
{ {
title: "Дата завершения передачи", title: "Дата завершения передачи",
field: "disconnect_dt", field: "disconnect_dt",
width: 180 width: 180
} }
] ]
case 'Нераспознанные': case 'Нераспознанные':
return [ return [
{ {
title: "Время пакета", title: "Время пакета",
field: "pack_dt", field: "pack_dt",
width: 180 width: 180
}, },
{ {
title: "Архивная дата", title: "Архивная дата",
field: "arhiv_date", field: "arhiv_date",
width: 90 width: 90
}, },
{ {
title: "Номер пакета", title: "Номер пакета",
field: "pack_number", field: "pack_number",
width: 70 width: 70
}, },
{ {
title: "Длинна пакета", title: "Длинна пакета",
field: "pack_len", field: "pack_len",
width: 70 width: 70
}, },
{ {
title: "Репл", title: "Репл",
field: "id_repl", field: "id_repl",
width: 70 width: 70
}, },
{ {
title: "IMEI", title: "IMEI",
field: "imei", field: "imei",
width: 120 width: 120
}, },
{ {
title: "ДАННЫЕ", title: "ДАННЫЕ",
field: "data", field: "data",
width: 600 width: 600
}, },
{ {
title: "Дата начала передачи", title: "Дата начала передачи",
field: "connect_dt", field: "connect_dt",
width: 180 width: 180
}, },
{ {
title: "Дата завершения передачи", title: "Дата завершения передачи",
field: "disconnect_dt", field: "disconnect_dt",
width: 180 width: 180
} }
] ]
default: return [] default: return []
} }
} }
@ -156,18 +156,18 @@ const prepareSetPackColumns = (name, data) => {
console.log('prepareSetPackColumns data', data); console.log('prepareSetPackColumns data', data);
console.log('prepareSetPackColumns name', name); console.log('prepareSetPackColumns name', name);
switch(name) { switch(name) {
case 'askr_logs': case 'askr_logs':
if (data.length > 0) { if (data.length > 0) {
return data[0].map((el) => ({title: Object.keys(el)[0], field: Object.keys(el)[0], width: 150})) return data[0].map((el) => ({title: Object.keys(el)[0], field: Object.keys(el)[0], width: 150}))
} }
if (data.length === 0) { if (data.length === 0) {
return [] return []
} }
case 'raw': case 'raw':
return setPackColumns('Сырые') return setPackColumns('Сырые')
case 'unrecognized': case 'unrecognized':
return setPackColumns('Нераспознанные') return setPackColumns('Нераспознанные')
default: return [] default: return []
} }
} }
@ -206,12 +206,12 @@ const parseCols = (packStructure, report) => {
const fetchColumn = (packStructure, report, id = null) => { const fetchColumn = (packStructure, report, id = null) => {
console.log('packStructure', packStructure) console.log('packStructure', packStructure)
console.log('id', id) console.log('id', id)
const getCurrentPackColls = (packStructure, id) => { const getCurrentPackColls = (packStructure, id) => {
const currentPackStructure = packStructure.find((el) => el.id === id) const currentPackStructure = packStructure.find((el) => el.id === id)
console.log('currentPackStructure', currentPackStructure) console.log('currentPackStructure', currentPackStructure)
const currColumns = currentPackStructure.columns ? currentPackStructure.columns : [] const currColumns = currentPackStructure.columns ? currentPackStructure.columns : []
return parseCols(currColumns, null) return parseCols(currColumns, null)
} }
return cond([ return cond([
[(packStructure) => !packStructure === true, () => parseCols(null, report)], [(packStructure) => !packStructure === true, () => parseCols(null, report)],
[(packStructure) => (packStructure?.length >= 1) && (id && typeof id === 'number'), () => getCurrentPackColls(packStructure, id)], [(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> <script>
import {mapGetters, mapMutations, mapActions, useStore} from "vuex" import {mapGetters, mapMutations, mapActions, useStore} from "vuex"
@ -44,14 +42,30 @@ export default {
</script> </script>
<template> <template>
{{ console.log('selectedPackMode', selectedPackMode) {{ console.log('selectedPackMode', selectedPackMode)
}} }}
<button @click="updateModePack(mode)" v-bind:key="idx" type="button" class="w-full"> <button
<input name="switchTableMode" type="radio" :id="name" :value="name" :checked="active" class="hidden peer" required=""> :key="idx"
<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 type="button"
peer-checked:bg-slate-600 peer-checked:text-white"> 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 }} {{ inner }}
</label> </label>
</button> </button>

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

@ -1,5 +1,3 @@
<script> <script>
import {mapGetters, mapMutations, mapActions, useStore} from "vuex" import {mapGetters, mapMutations, mapActions, useStore} from "vuex"
import PackViewButton from './Button.vue' import PackViewButton from './Button.vue'
@ -24,11 +22,6 @@ export default {
default: "" default: ""
}, },
}, },
data () {
return {
hasData: false
}
},
setup (props, {slots}) { setup (props, {slots}) {
const hasDescription = slots.description != undefined const hasDescription = slots.description != undefined
const hasError = slots.error != undefined const hasError = slots.error != undefined
@ -38,6 +31,11 @@ export default {
hasError hasError
} }
}, },
data () {
return {
hasData: false
}
},
updated () { updated () {
this.$nextTick(function () { this.$nextTick(function () {
if (!isEmpty(this.packData)) { if (!isEmpty(this.packData)) {
@ -66,26 +64,42 @@ export default {
</script> </script>
<template> <template>
<div class="w-full relative"> <div class="w-full relative">
{{ {{
console.log('packData', packData) console.log('packData', packData)
}} }}
<div v-if="!hasData" class="w-full h-[50px] rounded-xl bg-slate-200 hidden" :id="`${id}_loader`"> <div
<Spinner/> v-if="!hasData"
:id="`${id}_loader`"
class="w-full h-[50px] rounded-xl bg-slate-200 hidden"
>
<Spinner />
</div> </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="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"> <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> <h2
<div v-if="hasDescription" class="text-xs text-slate-500"> :id="`${id}_pack_name`"
<slot name="description" /> 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>
</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"> --> <!-- <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"> <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" :idx="idx"
:mode="button.mode" :mode="button.mode"
:name="button.name" :name="button.name"
@ -96,24 +110,53 @@ export default {
</div> </div>
<!-- </form> --> <!-- </form> -->
</div> </div>
<div class="relative" :id="id"> <div
<div id="selectStructContainer" class="flex gap-2 items-center mb-2"> :id="id"
class="relative"
>
<div
id="selectStructContainer"
class="flex gap-2 items-center mb-2"
>
<span>Выберите структуру:</span> <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" > <select
<option :key={idx} v-for="(el, idx) in selectPackStructs" :value="el.id"> 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 }} {{ el.name }}
</option> </option>
</select> </select>
</div> </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" /> <Tabulator v-bind="packData" />
<div v-if="isLoader" class="w-full h-[50px] rounded-xl bg-slate-200 hidden" :id="`${id}_loader`"> <div
<Spinner/> v-if="isLoader"
:id="`${id}_loader`"
class="w-full h-[50px] rounded-xl bg-slate-200 hidden"
>
<Spinner />
</div> </div>
</div> </div>
</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" /> <slot name="error" />
</div> </div>
</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> <template>
<svg <svg
width="1008" width="1008"
@ -965,18 +980,3 @@
</defs> </defs>
</svg> </svg>
</template> </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> <template>
<div class="hidden 2xl:flex w-full h-[100vh] overflow-hidden bg-white"> <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"> <div class="h-full overflow-hidden flex flex-col justify-between translate-y-1">
@ -32,21 +47,6 @@
</div> </div>
</template> </template>
<script>
export default {
name: 'App',
components: {},
data() {
},
computed: {
},
methods: {
}
}
</script>
<style scoped> <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> <script>
export default { export default {
@ -18,3 +12,9 @@ export default {
} }
</script> </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> <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 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"> <div class="flex gap-1 items-center">
@ -67,30 +94,3 @@
</div> </div>
</div> </div>
</template> </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> <template>
<ButtonModal <ButtonModal
forcedBtnClass=" " forcedBtnClass=" "
@ -12,36 +45,3 @@
1234 1234
</ButtonModal> </ButtonModal>
</template> </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> <template>
<ButtonModal <ButtonModal
forcedBtnClass=" " forcedBtnClass=" "
@ -218,39 +254,3 @@
</form> </form>
</ButtonModal> </ButtonModal>
</template> </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> <template>
<div class="flex flex-col gap-3 bg-light h-full w-full col-span-12 rounded-xl p-2"> <div class="flex flex-col gap-3 bg-light h-full w-full col-span-12 rounded-xl p-2">
<TaskModal taskId="new"> <TaskModal taskId="new">
@ -135,27 +159,3 @@
</div> </div>
</div> </div>
</template> </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> <script>
export default { export default {
@ -18,3 +12,9 @@ export default {
} }
</script> </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> <script>
export default { export default {
@ -18,3 +12,9 @@ export default {
} }
</script> </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> <script>
export default { export default {
@ -18,3 +12,9 @@ export default {
} }
</script> </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> <script>
export default { export default {
@ -18,3 +12,9 @@ export default {
} }
</script> </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> <script>
export default { export default {
@ -18,3 +12,9 @@ export default {
} }
</script> </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> <script>
export default { export default {
@ -18,3 +12,9 @@ export default {
} }
</script> </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> <script>
export default { export default {
@ -18,3 +12,9 @@ export default {
} }
</script> </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> <script>
import ButtonModal from '@molecules/ButtonModal/ButtonModal.vue' import ButtonModal from '@molecules/ButtonModal/ButtonModal.vue'
import {mapGetters, mapMutations, mapActions} from 'vuex' import {mapGetters, mapMutations, mapActions} from 'vuex'
@ -168,3 +90,81 @@ export default {
} }
} }
</script> </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> </script>
<template> <template>
{{ console.log('adminData', adminData) {{ console.log('adminData', adminData)
}} }}
<div class="rounded w-full pt-4 pb-1 bg-light cursor-pointer transition-all"> <div class="rounded w-full pt-4 pb-1 bg-light cursor-pointer transition-all">
<div class="mx-2 mb-3"> <div class="mx-2 mb-3">
<a :href="`/html/admin/manage/new?prev_page=/\?page_display_mode=users`"> <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> </a>
</div> </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" /> <Tabulator v-bind="adminData" />
</div> </div>
</div> </div>

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

@ -42,54 +42,103 @@ export default {
</script> </script>
<template> <template>
<div class="rounded w-full transition-all min-h-[500px] relative"> <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"> <div
<Spinner style="padding: 0"/> 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>
<div v-if="packsGroups" phx-change="update_pack_filter" class="p-5 flex flex-col gap-4 bg-light relative items-center"> <div
<div id="searchInput" class="w-full flex flex-col gap-2" > v-if="packsGroups"
<div class="font-bold">Поиск (название и номер): </div> phx-change="update_pack_filter"
<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="Название и номер через пробел"/> 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>
<div class="border-2 rounded-lg w-full bottom-0"></div> <div class="border-2 rounded-lg w-full bottom-0" />
</div> </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
<div class="flex items-center justify-center text-lg font-bold pt-5">Пакеты не найдены</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>
<div class="bg-light"> <div class="bg-light">
<div v-if="packsGroups?.length > 0" class="grid grid-cols-12 gap-3 p-4"> <div
<div :key="idx" v-for="(group, idx) in packsGroups" class="col-span-12 sm:col-span-6 lg:col-span-4"> v-if="packsGroups?.length > 0"
<Accordion :isOpen="isOpen" :id="`pack_group_${group.pack_group_id}`"> 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> <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"> <span class="text-slate-500 font-bold">
{{ group.order_index }}. {{ group.order_index }}.
</span> </span>
<span class="font-bold"> <span class="font-bold">
{{ group.title }} {{ group.title }}
</span></div> </span>
</div>
</template> </template>
<template #body> <template #body>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<table > <table>
<thead> <thead>
<tr> <tr>
<th class="items-center justify-center pb-2">Название</th> <th class="items-center justify-center pb-2">
Название
</th>
</tr> </tr>
</thead> </thead>
<tbody> <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"> <td class="items-center justify-center py-2">
<div class="flex gap-2 w-full"> <div class="flex gap-2 w-full">
<div class="w-full text-left decoration-dashed cursor-pointer hover:text-slate-800 transition-all"> <div class="w-full text-left decoration-dashed cursor-pointer hover:text-slate-800 transition-all">
{{ struct.name }} {{ struct.name }}
</div> </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>
<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> </div>
</td> </td>
</tr> </tr>

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

@ -1,5 +1,3 @@
<script> <script>
import {ref, toRaw, computed} from 'vue' import {ref, toRaw, computed} from 'vue'
import {mapGetters, mapMutations, mapActions, useStore} from "vuex"; import {mapGetters, mapMutations, mapActions, useStore} from "vuex";
@ -16,6 +14,11 @@ export default {
Chart, Chart,
DoubleSwitch DoubleSwitch
}, },
provide() {
return {
isChecked: computed(() => this.isChartTypes),
}
},
setup() { setup() {
const route = useRoute() const route = useRoute()
const path = computed(() => route.path) const path = computed(() => route.path)
@ -31,11 +34,6 @@ export default {
isChartTypes: this.isChartTypesUrl, isChartTypes: this.isChartTypesUrl,
} }
}, },
provide() {
return {
isChecked: computed(() => this.isChartTypes),
}
},
watch: { watch: {
activeChartData: { activeChartData: {
handler(newValue, oldValue) { handler(newValue, oldValue) {
@ -90,13 +88,13 @@ export default {
}, },
setTypeFunc: function(type, chart, data) { setTypeFunc: function(type, chart, data) {
switch(type) { switch(type) {
case 'pie': return chart.makePieCharts({...data, type: type}) case 'pie': return chart.makePieCharts({...data, type: type})
case 'mount': return chart.makeBarMountCharts({...data, type: type, height: this.height}) case 'mount': return chart.makeBarMountCharts({...data, type: type, height: this.height})
case 'mainMl': return chart.makeBarCharts({...data, type: type}) case 'mainMl': return chart.makeBarCharts({...data, type: type})
case 'default': return chart.makeBarTypesCharts({...data, type: type}) case 'default': return chart.makeBarTypesCharts({...data, type: type})
case 'types': 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 'without_first_layout': return chart.makeBarTypesCharts({...data, type: type})
case 'ml': return chart.makeBarTypesCharts({...data, type: type}) case 'ml': return chart.makeBarTypesCharts({...data, type: type})
} }
} }
} }
@ -105,25 +103,53 @@ export default {
</script> </script>
<template> <template>
<div class="px-2 sm:px-5 pt-1 bg-light"> <div class="px-2 sm:px-5 pt-1 bg-light">
<div class="relative"> <div class="relative">
<div class="doubleSwitch flex justify-end mt-3 mb-2"> <div class="doubleSwitch flex justify-end mt-3 mb-2">
<DoubleSwitch name="chartsView" @switched="onToggleCharts" firstColor="#8b5cf6" secondColor="#2563eb" firstTitle="Общий вид" secondTitle="По типам" /> <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>
<div v-if="!isChartTypes" id="main" class="relative flex flex-wrap justify-center w-full h-full mb-3" > </div>
<div v-for="(chart, idx) in chartsData.main"> <div
<Chart :idx="idx" :id="chart.id" :type="chart.type" :height="chart.height" :maxHeight="chart.maxHeight" :data="chart.data"/> v-if="isChartTypes"
</div> id="types"
</div> class="relative flex flex-wrap justify-center w-full h-full mb-3"
<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"> <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"/> <Chart
</div> :id="chart.id"
:idx="idx"
:type="chart.type"
:height="chart.height"
:maxHeight="chart.maxHeight"
:data="chart.data"
/>
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<style src="vue-multiselect/dist/vue-multiselect.css"></style> <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> <script>
import {mapGetters, mapMutations, mapActions, useStore} from "vuex" import {mapGetters, mapMutations, mapActions, useStore} from "vuex"
import Modal from '@molecules/VModal/VModal.vue' import Modal from '@molecules/VModal/VModal.vue'
@ -70,7 +68,6 @@ export default {
</script> </script>
<template> <template>
<Modal <Modal
v-if="open" v-if="open"
@ -81,38 +78,87 @@ export default {
Последние данные Последние данные
</div> </div>
{{ console.log('reportPacks', reportPacks) {{ console.log('reportPacks', reportPacks)
}} }}
<div :id="id" class="w-[95vw] h-[85vh] m-auto p-5"> <div
<div v-if="!machineInfo" id="dataLoader" class=" h-full flex justify-center items-center"> :id="id"
<Spinner style="padding: 0"/> 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>
<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"> <div class="w-full">
<Accordion id="machineInfo"> <Accordion id="machineInfo">
<template #header> <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>
<template #body> <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 p-4">
<div class="flex mr-8 flex-col bg-slate-200 p-3 rounded"> <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 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
<div :key="idx" v-for="(info, idx) in machineMainInfo" class="flex items-center items-center bg-slate-200 px-3 py-2 rounded-md"> v-if="machineMainInfo?.length > 0"
<div class="text-slate-700 font-bold mr-2">{{ info.title }}</div> class="flex flex-col gap-2"
<div class="text-slate-500">{{ info.val }}</div> >
<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> </div>
</div> </div>
<div style="min-width: 300px;" class="flex flex-col bg-slate-200 p-3 rounded"> <div
<h2 clas="font-bold flex items-center"><i class="ri-git-pull-request-line mr-1"></i> Дополнительно</h2> 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 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
<div :key="idx" v-for="(info, idx) in machineOverInfo" class="flex items-center items-center bg-slate-200 px-3 py-2 rounded-md"> v-if="machineOverInfo?.length > 0"
<div class="text-slate-700 font-bold mr-2">{{ info.title }}</div> class="flex flex-col gap-2"
<div class="text-slate-500">{{ info.val }}</div> >
<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> </div>
</div> </div>
@ -122,38 +168,61 @@ export default {
</template> </template>
</Accordion> </Accordion>
</div> </div>
<Accordion :isOpen="true" id="machine_packs"> <Accordion
id="machine_packs"
:isOpen="true"
>
<template #header> <template #header>
<div class="font-bold text-xl">Пакеты</div> <div class="font-bold text-xl">
Пакеты
</div>
</template> </template>
<template #body> <template #body>
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<div id="packReportButtons"> <div id="packReportButtons">
<div class="flex flex-col gap-5"> <div class="flex flex-col gap-5">
<div class="grid grid-cols-12 gap-3"> <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> <h2>Нет данных по машине</h2>
</div> </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-col flex-grow flex py-1">
<div class="flex text-slate-700 font-medium px-3 text-slate-700"> <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>{{ pack.pack_number }}</div>
</div> </div>
<div class="text-slate-600 flex px-3 text-slate-600"> <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>{{ pack.count }}</div>
</div> </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"> <div
<i class="ri-eye-line"></i> 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>
</div> </div>
</div> </div>
<div class="w-full h-[1px] bg-slate-300"></div> <div class="w-full h-[1px] bg-slate-300" />
<PackView :isLoader="false" id="machineReport"> <PackView
id="machineReport"
:isLoader="false"
>
<template #description> <template #description>
<span class="text-slate-400 text-sm">последние 30</span> <span class="text-slate-400 text-sm">последние 30</span>
</template> </template>

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

@ -1,5 +1,3 @@
<script> <script>
import {ref, toRaw, computed} from 'vue' import {ref, toRaw, computed} from 'vue'
import {mapGetters, mapMutations, mapActions, useStore} from "vuex"; import {mapGetters, mapMutations, mapActions, useStore} from "vuex";
@ -44,25 +42,37 @@ export default {
</script> </script>
<template> <template>
<div id="ignore:2Qxwqz" class="pb-1"> <div
id="ignore:2Qxwqz"
class="pb-1"
>
{{ console.log('selectedData' ,selectedData) {{ 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
<div v-for="selectData in selectsData" class="col-span-12 sm:col-span-6 lg:col-span-3"> 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 <VueMultiselect
:multiple="true"
v-model="selectedSelects[selectData.key]" v-model="selectedSelects[selectData.key]"
:multiple="true"
label="name" label="name"
track-by="name" track-by="name"
:options="selectData.data" :options="selectData.data"
:placeholder="selectData.title" :placeholder="selectData.title"
:showLabels="false"
@update:model-value="updateSelectedSelects" @update:model-value="updateSelectedSelects"
@remove="removedOption" @remove="removedOption"
:showLabels="false" />
>
</VueMultiselect>
</div> </div>
</div> </div>
</div> </div>

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

@ -1,5 +1,3 @@
<script> <script>
import {mapGetters, mapMutations, mapActions, useStore} from "vuex" import {mapGetters, mapMutations, mapActions, useStore} from "vuex"
import Button from "@atoms/VButton.vue" import Button from "@atoms/VButton.vue"
@ -77,41 +75,94 @@ export default {
</script> </script>
<template> <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="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
<div class="mb-2 text-right drop-shadow" search-mode="machine_id">ID: {{ machine?.machine_id }}</div> class="flex flex-col items-end absolute text-white top-[-0.75rem] right-0 h-full min-w-[173px] p-2"
<div class="flex flex-row"> style="backdrop-filter: blur(10px);"
<span>{{ machine.railway_name }}</span><i class="ri-route-line ml-2" title="Дорога:"/> >
<div
class="mb-2 text-right drop-shadow"
search-mode="machine_id"
>
ID: {{ machine?.machine_id }}
</div> </div>
<div class="flex flex-row"> <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>
<div class="flex flex-row"> <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>
<div class="flex flex-row" search-mode="device_number"> <div class="flex flex-row">
<span>{{ machine.device_number }}</span><i class="ri-rss-line ml-2" title="Устройство:"/> <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> </div>
<div class="flex flex-col w-full mt-4 mb-2 pl-4 mt-1 z-[1]"> <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
<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> 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>
<div class="flex lg:flex-row flex-col gap-1 my-2 px-2 z-[1]"> <div class="flex lg:flex-row flex-col gap-1 my-2 px-2 z-[1]">
<div class="flex"> <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>
<div class="flex gap-1"> <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
<div @click="dataFunc(machine)" :class="buttonClass('bg-white/25 hover:bg-slate-400 hover:text-white')">30</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>
</div> </div>
</div> </div>
</template> </template>
<style scoped> <style scoped>

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

@ -1,5 +1,3 @@
<script> <script>
import {computed} from 'vue' import {computed} from 'vue'
import {mapGetters, mapMutations, mapActions, useStore} from "vuex" import {mapGetters, mapMutations, mapActions, useStore} from "vuex"
@ -37,12 +35,6 @@ export default {
default: 'static', default: 'static',
}, },
}, },
data () {
return {
openMap: false,
openData: false,
}
},
setup () { setup () {
const initLocalStorage = new EventStore() const initLocalStorage = new EventStore()
const store = useStore() const store = useStore()
@ -60,10 +52,24 @@ export default {
store.commit('layoutMachines/setHistoryData', updatedData) store.commit('layoutMachines/setHistoryData', updatedData)
store.dispatch('layoutMachines/uploadData', externalParams) store.dispatch('layoutMachines/uploadData', externalParams)
}, },
data () {
return {
openMap: false,
openData: false,
}
},
computed: { computed: {
...mapGetters('layoutMachines', ['searchModes', 'searchValue', 'selectedSearchMode', 'leftTopButtons', 'rightTopButtons', 'selectedMode', 'toggleFilter', 'activeFilterBtn', 'mapData', 'machinesData']), ...mapGetters('layoutMachines', ['searchModes', 'searchValue', 'selectedSearchMode', 'leftTopButtons', 'rightTopButtons', 'selectedMode', 'toggleFilter', 'activeFilterBtn', 'mapData', 'machinesData']),
...mapGetters('layout', ['isOpenMenu']), ...mapGetters('layout', ['isOpenMenu']),
}, },
watch: {
isSuccessSearch: {
handler(newValue, oldValue) {
console.log('isSuccessSearch', newValue, oldValue)
},
deep: true
},
},
mounted () { mounted () {
}, },
@ -83,14 +89,6 @@ export default {
const store = useStore(); const store = useStore();
store.dispatch('layoutMachines/resetStore') store.dispatch('layoutMachines/resetStore')
}, },
watch: {
isSuccessSearch: {
handler(newValue, oldValue) {
console.log('isSuccessSearch', newValue, oldValue)
},
deep: true
},
},
methods: { methods: {
...mapMutations('layoutMachines', ['setSearchMode', 'setSelectedMode', 'setToggleFilter', 'setActiveFilterBtn']), ...mapMutations('layoutMachines', ['setSearchMode', 'setSelectedMode', 'setToggleFilter', 'setActiveFilterBtn']),
...mapActions('layoutMachines', ['updateSearch', 'clearFilters']), ...mapActions('layoutMachines', ['updateSearch', 'clearFilters']),
@ -141,13 +139,15 @@ export default {
</script> </script>
<template> <template>
<div class="px-2 sm:px-5 pt-1 bg-light"> <div class="px-2 sm:px-5 pt-1 bg-light">
<div class="relative"> <div class="relative">
<div class="grid grid-cols-12 gap-4 md:gap-3 lg:gap-4 pb-3"> <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 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 <VueMultiselect
v-model="selectedSearchMode" v-model="selectedSearchMode"
label="name" label="name"
@ -156,50 +156,125 @@ export default {
placeholder="" placeholder=""
:showLabels="false" :showLabels="false"
@update:model-value="updateSearchMode" @update:model-value="updateSearchMode"
> />
</VueMultiselect>
</div> </div>
<div id="searchInput" class="relative w-full border-r border-t border-b border-primary rounded-r-md"> <div
<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"/> 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>
</div> </div>
<!-- {{ console.log('machinesData', machinesData) }} --> <!-- {{ 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"> <ul
<li v-bind:key="idx" v-for="(mode, idx) in leftTopButtons"> id="machinesMode"
<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']" /> 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> </li>
</ul> </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"> <div
<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']" /> 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>
<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"> <div
<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']" /> 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> </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"> <ul
<li v-bind:key="idx" v-for="(mode, idx) in rightTopButtons"> id="filtersButtons"
<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']" /> 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> </li>
</ul> </ul>
</div> </div>
<div id="filters" v-if="toggleFilter"> <div
v-if="toggleFilter"
id="filters"
>
<Filters /> <Filters />
</div> </div>
<div class="border-2 rounded-lg w-full bottom-0"></div> <div class="border-2 rounded-lg w-full bottom-0" />
<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"> <div
<ul v-if="selectedMode === 'cards'" class="flex flex-wrap gap-4 w-full justify-center align-center"> 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="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=""> <li
<Machine :machine="machine" :openMap="toggleMap" :openData="toggleData" /> v-for="machine in machinesData"
class=""
>
<Machine
:machine="machine"
:openMap="toggleMap"
:openData="toggleData"
/>
</li> </li>
</ul> </ul>
</div> </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 /> <Table />
</div> </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 /> <HistoryViews />
</div> </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} /> --> <!-- <.loader :if={@display_config.is_loading_charts} /> -->
<div> <div>
<Charts /> <Charts />
@ -210,10 +285,10 @@ export default {
<div class="flex items-center justify-center text-lg font-bold pt-5">Нет данных</div> <div class="flex items-center justify-center text-lg font-bold pt-5">Нет данных</div>
</div> --> </div> -->
<MapModal <MapModal
id="mapModal"
:open="openMap" :open="openMap"
:close="closeMap" :close="closeMap"
:data="mapData" :data="mapData"
id="mapModal"
headerClass="border-b p-4 font-bold" headerClass="border-b p-4 font-bold"
> >
<template #header> <template #header>
@ -221,18 +296,38 @@ export default {
Карта Карта
</div> </div>
</template> </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 /> <Spinner />
</div> </div>
<div v-if="mapData" id="mapModal" style="width: 95vw; height: 82vh;"></div> <div
<div id="popup" class="ol-popup hidden transition-all"> v-if="mapData"
<a href="#" id="popup-closer" class="ol-popup-closer hover:no-underline top-2 right-2 "> id="mapModal"
<i class="ri-close-fill"></i> 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> </a>
<div id="popup-content"></div> <div id="popup-content" />
</div> </div>
</MapModal> </MapModal>
<DataModal id="dataModal" :open="openData" :close="closeData" /> <DataModal
id="dataModal"
:open="openData"
:close="closeData"
/>
</div> </div>
</div> </div>
</template> </template>

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

@ -1,5 +1,3 @@
<script> <script>
import {computed} from 'vue' import {computed} from 'vue'
import {mapGetters, mapMutations, mapActions, useStore} from "vuex"; import {mapGetters, mapMutations, mapActions, useStore} from "vuex";
@ -66,17 +64,26 @@ export default {
</script> </script>
<template> <template>
<div class="col-span-12"> <div class="col-span-12">
<div class="p-2 sm:px-5 pt-1 bg-light rounded-t-xl"> <div class="p-2 sm:px-5 pt-1 bg-light rounded-t-xl">
<div class="relative"> <div class="relative">
<div class="flex gap-3 sm:gap-7 w-full lg:w-[50%]"> <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"> <router-link
<Button v-bind:key="idx" type="button" :title="page.name" :classBtn="[selectedPage.key !== page.key ? 'border-transparent': 'border-slate-500', 'flex border-b-4']" /> 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> </router-link>
</div> </div>
<div class="border-2 rounded-lg w-full bottom-0 absolute"/> <div class="border-2 rounded-lg w-full bottom-0 absolute" />
</div> </div>
</div> </div>
<router-view /> <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> <script>
export default { export default {
@ -18,3 +12,9 @@ export default {
} }
</script> </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> <script>
import Chart from "@molecules/VChart/VChart.vue"; import Chart from "@molecules/VChart/VChart.vue";
import moment from 'moment' import moment from 'moment'
@ -45,9 +43,9 @@ export default {
}) })
console.log('yAxisAata', yAxisAata) console.log('yAxisAata', yAxisAata)
const xAxisData = params.dataSource.map((el) => { const xAxisData = params.dataSource.map((el) => {
const dt = moment(el.pack_dt).format('DD.MM.YYYY HH:mm') const dt = moment(el.pack_dt).format('DD.MM.YYYY HH:mm')
return dt return dt
}) })
return {charts: yAxisAata, names: {yAxis: ' ', xAxis: 'Дата и время'}, xAxisData, title: 'График'} return {charts: yAxisAata, names: {yAxis: ' ', xAxis: 'Дата и время'}, xAxisData, title: 'График'}
}, },
} }
@ -56,10 +54,21 @@ export default {
</script> </script>
<template> <template>
{{ console.log('currentSizes.heigth', maxHeight) }} {{ 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" > <div
<Chart id="packChart" type="packLines" height="800" :data="chartData(curerentTableData)" :sizes="currentSizes" :maxWidth="`${maxWidth}px`" :maxHeight="`${maxHeight}px`" /> 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> </div>
</template> </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('value', value)
console.log('key', key) console.log('key', key)
switch (key) { switch (key) {
case 'date': case 'date':
this.updatePackSettings({dates: {...this.packsSettings.dates, selectedDate: value}}) this.updatePackSettings({dates: {...this.packsSettings.dates, selectedDate: value}})
break break
case 'imei': case 'imei':
this.updatePackSettings({imei: value}) this.updatePackSettings({imei: value})
break break
case 'selectedPack': case 'selectedPack':
this.updatePackSettings({selectedPack: value}) this.updatePackSettings({selectedPack: value})
break break
} }
}, },
setDate: function(value) { setDate: function(value) {
console.log('value', value) console.log('value', value)
this.updatePackSettings({dates: {...this.packsSettings.dates, selectedDate: value}}) this.updatePackSettings({dates: {...this.packsSettings.dates, selectedDate: value}})
}, },
setImei: function(e) { setImei: function(e) {
console.log('value', e.target.value) console.log('value', e.target.value)
this.updatePackSettings({imei: e.target.value}) this.updatePackSettings({imei: e.target.value})
}, },
setPack: function(value) { setPack: function(value) {
console.log('value', value) console.log('value', value)
this.updatePackSettings({selectedPack: value}) this.updatePackSettings({selectedPack: value})
}, },
fetchPack: function(params) { fetchPack: function(params) {
console.log('params', params) console.log('params', params)
@ -125,55 +125,70 @@ export default {
</script> </script>
<template> <template>
<div class="grid grid-cols-12 gap-6 col-span-12 h-full"> <div class="grid grid-cols-12 gap-6 col-span-12 h-full">
{{ {{
// console.log('tableData', tableData) // console.log('tableData', tableData)
console.log('packsSettings', packsSettings) 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"> <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 class="font-medium leading-tight text-xl mb-4 text-slate-600">
Первый пакет Первый пакет
</h1> </h1>
<div class="grid gap-3 mb-3 "> <div class="grid gap-3 mb-3 ">
<div class="grid grid-cols-1"> <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> </label>
<Datepicker id="date" :onchange="setDate" /> <Datepicker
id="date"
:onchange="setDate"
/>
</div> </div>
<div phx-feedback-for="imei"> <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 imei
</label> </label>
<input <input
id="selectedImei" id="selectedImei"
type="text" type="text"
name="imei" name="imei"
v-bind:value="packsSettings.imei" :value="packsSettings.imei"
v-on:change="setImei"
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 " 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" placeholder="imei"
required="" required=""
@change="setImei"
> >
</div> </div>
<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> >Выбрать пакет</label>
<div id="selected_settings_name_wrapper" class="w-full"> <div
<div id="packsOptions" class="col-span-12 sm:col-span-6 lg:col-span-3 rounded-lg"> id="selected_settings_name_wrapper"
<VueMultiselect class="w-full"
name="selectedPack" >
v-model="packsSettings.selectedPack" <div
label="name" id="packsOptions"
track-by="name" class="col-span-12 sm:col-span-6 lg:col-span-3 rounded-lg"
:options="packsSettings.selectedPackGroup" >
:placeholder="packsSettings.selectedPack?.name" <VueMultiselect
@update:model-value="setPack" v-model="packsSettings.selectedPack"
:showLabels="false" name="selectedPack"
> label="name"
</VueMultiselect> track-by="name"
:options="packsSettings.selectedPackGroup"
:placeholder="packsSettings.selectedPack?.name"
:showLabels="false"
@update:model-value="setPack"
/>
</div> </div>
</div> </div>
</div> </div>
@ -181,9 +196,9 @@ export default {
<div class="grid gap-3 grid-cols-4"> <div class="grid gap-3 grid-cols-4">
<input <input
type="submit" 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" 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="Выгрузить" value="Выгрузить"
@click="fetchPack(packsSettings)"
> >
<div <div
phx-click="load_pack_settings" phx-click="load_pack_settings"
@ -206,15 +221,22 @@ export default {
</div> </div>
</div> </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
<div v-if="!isLoading && curerentTableData.dataSource" id="tableButtons" class="w-full"> 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="w-full flex justify-end">
<div class="flex gap-3 pt-4 pb-2 pr-4"> <div class="flex gap-3 pt-4 pb-2 pr-4">
<div class=""> <div class="">
<button <button
type="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" 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" /> <i class="ri-settings-3-line" />
</button> </button>
@ -225,9 +247,9 @@ export default {
> >
<button <button
type="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" 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;}]]" 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" /> <i class="ri-bar-chart-grouped-line" />
</button> </button>
@ -277,33 +299,55 @@ export default {
</div> </div>
</div> </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 <VueMultiselect
name="selectedPack"
v-model="selectedColumnsSelect" v-model="selectedColumnsSelect"
name="selectedPack"
label="name" label="name"
track-by="name" track-by="name"
:options="columnsSelect" :options="columnsSelect"
:placeholder="null" :placeholder="null"
@select="addedOption"
@remove="removedOption"
:showLabels="false" :showLabels="false"
:multiple="true" :multiple="true"
:group-select="true" :group-select="true"
> @select="addedOption"
</VueMultiselect> @remove="removedOption"
/>
</div> </div>
<div v-if="displayView === 'table'" id="packTableWarapper"> <div
v-if="displayView === 'table'"
id="packTableWarapper"
>
{{ console.log('getters.isLoading', isLoading) }} {{ console.log('getters.isLoading', isLoading) }}
<div id="reportPacks" class="tab-pane active text-center min-h-[300px] rounded-md "> <div
<Tabulator v-if="!isLoading && curerentTableData.dataSource" v-bind="curerentTableData" /> id="reportPacks"
<span v-if="!isLoading && !curerentTableData.dataSource" class="absolute flex w-full justify-center items-center mt-2"> Выберите пакет и нажмите выгрузить</span> class="tab-pane active text-center min-h-[300px] rounded-md "
<div v-if="isLoading && !curerentTableData.dataSource" class="absolute flex w-full h-full justify-center items-center bg-slate-50" id="packLoader"> >
<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 /> <Spinner />
</div> </div>
</div> </div>
</div> </div>
<PackChart :displayView="displayView" :curerentTableData="curerentTableData" /> <PackChart
:displayView="displayView"
:curerentTableData="curerentTableData"
/>
</div> </div>
<div> <div>
<button <button

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

@ -1,5 +1,3 @@
<script> <script>
import {mapGetters, useStore} from "vuex" import {mapGetters, useStore} from "vuex"
import Service from './ServicesServiceItem.vue' import Service from './ServicesServiceItem.vue'
@ -15,16 +13,16 @@ export default {
}, },
props: { props: {
}, },
setup (props, {slots}) {
const store = useStore()
store.dispatch('services/uploadData')
},
data () { data () {
return { return {
isOpenServices: false, isOpenServices: false,
titleServicesButton: 'Показать больше' titleServicesButton: 'Показать больше'
} }
}, },
setup (props, {slots}) {
const store = useStore()
store.dispatch('services/uploadData')
},
computed: { computed: {
...mapGetters('services', ['services']), ...mapGetters('services', ['services']),
}, },
@ -42,25 +40,39 @@ export default {
</script> </script>
<template> <template>
<div class="col-span-12"> <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="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 class="flex flex-col max-w-full">
<div> <div>
Сервисы, записывающие данные в кэш Сервисы, записывающие данные в кэш
</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)"> <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>
</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"> <button
{{titleServicesButton}} 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> </button>
</div> </div>
</div> </div>

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

@ -1,9 +1,3 @@
<template>
<div>
123
</div>
</template>
<script> <script>
export default { export default {
@ -18,3 +12,9 @@ export default {
} }
</script> </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 routerHistory = createWebHistory();
const router = createRouter({ const router = createRouter({
history: routerHistory, history: routerHistory,
routes routes
}); });
const logout = (from, next) => { const logout = (from, next) => {

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

@ -1,4 +1,3 @@
class ServiceOfMachines { class ServiceOfMachines {
constructor(adapter, store) { constructor(adapter, store) {
this.adapter = adapter 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)) { 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 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 notFirstLayout = !Object.keys(prevGroupByFilters).includes(groupByKeys.firstLayout)
for (const groupByFilter in prevGroupByFilters) { for (const groupByFilter in prevGroupByFilters) {
if (groupByFilter === groupByKeys.firstLayout) { if (groupByFilter === groupByKeys.firstLayout) {
const linkTitle = `/ ${prevGroupByFilters[groupByKeys.firstLayout]}` const linkTitle = `/ ${prevGroupByFilters[groupByKeys.firstLayout]}`
const leftPos = getTextWidth('Главная ', 10) const leftPos = getTextWidth('Главная ', 10)
elMain.id = `0:link_${groupByFilter}-${linkTitle}` elMain.id = `0:link_${groupByFilter}-${linkTitle}`
elements.push(elMain) 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}} 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) elements.push(paramsFirst)
} }
if (groupByFilter === groupByKeys.secondLayout) { if (groupByFilter === groupByKeys.secondLayout) {
const linkTitle = ` / ${prevGroupByFilters[groupByKeys.secondLayout]}` const linkTitle = ` / ${prevGroupByFilters[groupByKeys.secondLayout]}`
const leftPos = getTextWidth(notFirstLayout ? 'Главная ' : `Главная / ${prevGroupByFilters[groupByKeys.firstLayout]}`, 10) const leftPos = getTextWidth(notFirstLayout ? 'Главная ' : `Главная / ${prevGroupByFilters[groupByKeys.firstLayout]}`, 10)
if(notFirstLayout) { if(notFirstLayout) {
elMain.id = `0:link_${groupByFilter}-${linkTitle}` elMain.id = `0:link_${groupByFilter}-${linkTitle}`
elements.push(elMain) 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}} 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) elements.push(paramsSecond)
} }
if (groupByFilter === groupByKeys.thirdLayout) { if (groupByFilter === groupByKeys.thirdLayout) {
const linkTitle = ` / ${prevGroupByFilters[groupByKeys.thirdLayout]}` const linkTitle = ` / ${prevGroupByFilters[groupByKeys.thirdLayout]}`
const leftPos = getTextWidth(notFirstLayout ? `Главная / ${prevGroupByFilters[groupByKeys.secondLayout]} ` : `Главная / ${prevGroupByFilters[groupByKeys.firstLayout]} / ${prevGroupByFilters[groupByKeys.secondLayout]}`, 10) 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}} 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) elements.push(paramsThird)
} }
if (groupByFilter === groupByKeys.fourthLayout) { if (groupByFilter === groupByKeys.fourthLayout) {
const linkTitle = ` / ${prevGroupByFilters[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 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}} 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) elements.push(paramsFourth)
} }
} }
return elements return elements
} }

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

@ -1,157 +1,157 @@
import {groupByKeys} from './staticData' import {groupByKeys} from './staticData'
const getTextWidth = (text, font) => { const getTextWidth = (text, font) => {
const canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement('canvas')); const canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement('canvas'));
const context = canvas.getContext('2d'); const context = canvas.getContext('2d');
context.font = font; context.font = font;
const metrics = context.measureText(text); const metrics = context.measureText(text);
return metrics.width; return metrics.width;
} }
const isEqualKeyValue = (obj, key, value) => { const isEqualKeyValue = (obj, key, value) => {
if(Object.keys(obj).length > 0) { if(Object.keys(obj).length > 0) {
if(Object.keys(obj).includes(key) && Object.values(obj).includes(value)) return true if(Object.keys(obj).includes(key) && Object.values(obj).includes(value)) return true
else return false else return false
} else return true } else return true
} }
const chartsFiltersNames = (data) => [...new Set(data.map((el) => el.charts.map((item) => item.name)).flat())] 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 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) => { const updateBarChartsData = (data, key) => data.map((el) => {
return el.filter((item) => { return el.filter((item) => {
if(item.name === key) { if(item.name === key) {
return el return el
} }
}) })
}).flat() }).flat()
const dataFilterTitle = (data, title) => data.map((el) => { const dataFilterTitle = (data, title) => data.map((el) => {
return el.reduce((acc, item) => { return el.reduce((acc, item) => {
if(item.name === title || acc !== undefined && acc?.name === title) { if(item.name === title || acc !== undefined && acc?.name === title) {
if(acc === 0) { if(acc === 0) {
return {name: item.name, count: Number(item.value)} return {name: item.name, count: Number(item.value)}
} }
if(acc?.count >= 0) { if(acc?.count >= 0) {
return {name: item.name, count: acc.count + Number(item.value)} return {name: item.name, count: acc.count + Number(item.value)}
} }
} }
}, 0) }, 0)
}).filter((el) => el !== undefined) }).filter((el) => el !== undefined)
const prepareBarTypesData = (data, xAxisData, params) => { const prepareBarTypesData = (data, xAxisData, params) => {
if(data.charts.length < chartsFiltersNames(xAxisData).length) { if(data.charts.length < chartsFiltersNames(xAxisData).length) {
// Если нет фильтруемых данных, то добавляем столбец графика с нулевым значением для каждого элемента el // Если нет фильтруемых данных, то добавляем столбец графика с нулевым значением для каждого элемента el
const zeroData = chartsFiltersNames(xAxisData).filter((name) => !data.charts.some(({name: name2}) => name === name2)).map((name) => { const zeroData = chartsFiltersNames(xAxisData).filter((name) => !data.charts.some(({name: name2}) => name === name2)).map((name) => {
return {filterKey: params.filterKey, name: name, value: 0} return {filterKey: params.filterKey, name: name, value: 0}
}) })
const withoutZeroData = data.charts.map((item) => { const withoutZeroData = data.charts.map((item) => {
item.type = params.type item.type = params.type
item.filterKey = params.filterKey item.filterKey = params.filterKey
item.groupByKey = params.groupByKey item.groupByKey = params.groupByKey
item.groupByValue = params.groupByValue ? params.groupByValue : params.typeId // Для графика типа "types" params.typeId item.groupByValue = params.groupByValue ? params.groupByValue : params.typeId // Для графика типа "types" params.typeId
item.groupByData = {[params.groupByKey]: data.yAxisData} item.groupByData = {[params.groupByKey]: data.yAxisData}
item.prevGroupByData = params.prevGroupByFilters item.prevGroupByData = params.prevGroupByFilters
return item}) return item})
return [withoutZeroData, zeroData].flat() return [withoutZeroData, zeroData].flat()
} else { } else {
return data.charts.map((item) => { return data.charts.map((item) => {
item.type = params.type item.type = params.type
item.filterKey = params.filterKey item.filterKey = params.filterKey
item.groupByKey = params.groupByKey item.groupByKey = params.groupByKey
item.groupByValue = params.groupByValue ? params.groupByValue : params.typeId item.groupByValue = params.groupByValue ? params.groupByValue : params.typeId
item.groupByData = {[params.groupByKey]: data.yAxisData} item.groupByData = {[params.groupByKey]: data.yAxisData}
item.prevGroupByData = params.prevGroupByFilters item.prevGroupByData = params.prevGroupByFilters
return item return item
}) })
} }
} }
const prepareBarTypesMlData = (data, params) => { const prepareBarTypesMlData = (data, params) => {
return data.map((item) => { return data.map((item) => {
// console.log('item', item) // console.log('item', item)
item.charts.type = params.type item.charts.type = params.type
item.charts.groupByKey = params.groupByKey item.charts.groupByKey = params.groupByKey
item.charts.groupByValue = params.groupByValue ? params.groupByValue : params.typeId item.charts.groupByValue = params.groupByValue ? params.groupByValue : params.typeId
item.charts.groupByData = {[params.groupByKey]: item.yAxisData} item.charts.groupByData = {[params.groupByKey]: item.yAxisData}
item.charts.prevGroupByData = params.prevGroupByFilters item.charts.prevGroupByData = params.prevGroupByFilters
return item.charts return item.charts
}) })
} }
const groupByBarTypesData = (data, xAxisData, func) => { const groupByBarTypesData = (data, xAxisData, func) => {
const dataGroupBy = [] const dataGroupBy = []
const dataCustomTitle = [] const dataCustomTitle = []
for(let i = 0; i < (func(xAxisData).length); i++) { for(let i = 0; i < (func(xAxisData).length); i++) {
dataGroupBy.push(updateBarChartsData(data, func(xAxisData)[i])) dataGroupBy.push(updateBarChartsData(data, func(xAxisData)[i]))
dataCustomTitle.push(dataFilterTitle(dataGroupBy, 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) => { const updatedGroupByData = (idx, prevGroupByFilters, groupByKey, groupByValue) => {
switch(idx) { switch(idx) {
case '0': return {[groupByKey]: groupByValue} case '0': return {[groupByKey]: groupByValue}
case '1': case '1':
for (const prevGroupByFilter in prevGroupByFilters) { for (const prevGroupByFilter in prevGroupByFilters) {
if(prevGroupByFilter === groupByKeys.secondLayout) { if(prevGroupByFilter === groupByKeys.secondLayout) {
delete prevGroupByFilters[prevGroupByFilter] delete prevGroupByFilters[prevGroupByFilter]
} }
if(prevGroupByFilter === groupByKeys.thirdLayout) { if(prevGroupByFilter === groupByKeys.thirdLayout) {
delete prevGroupByFilters[prevGroupByFilter] delete prevGroupByFilters[prevGroupByFilter]
} }
if(prevGroupByFilter === groupByKeys.fourthLayout) { if(prevGroupByFilter === groupByKeys.fourthLayout) {
delete prevGroupByFilters[prevGroupByFilter] delete prevGroupByFilters[prevGroupByFilter]
} }
} }
return prevGroupByFilters return prevGroupByFilters
case '2': case '2':
for (const prevGroupByFilter in prevGroupByFilters) { for (const prevGroupByFilter in prevGroupByFilters) {
if(prevGroupByFilter === groupByKeys.thirdLayout) { if(prevGroupByFilter === groupByKeys.thirdLayout) {
delete prevGroupByFilters[prevGroupByFilter] delete prevGroupByFilters[prevGroupByFilter]
} }
if(prevGroupByFilter === groupByKeys.fourthLayout) { if(prevGroupByFilter === groupByKeys.fourthLayout) {
delete prevGroupByFilters[prevGroupByFilter] delete prevGroupByFilters[prevGroupByFilter]
} }
} }
return prevGroupByFilters return prevGroupByFilters
case '3': case '3':
for (const prevGroupByFilter in prevGroupByFilters) { for (const prevGroupByFilter in prevGroupByFilters) {
if(prevGroupByFilter === groupByKeys.fourthLayout) { if(prevGroupByFilter === groupByKeys.fourthLayout) {
delete prevGroupByFilters[prevGroupByFilter] delete prevGroupByFilters[prevGroupByFilter]
} }
} }
return prevGroupByFilters return prevGroupByFilters
} }
} }
const choiceTypeBarTypesCharts = (params) => { const choiceTypeBarTypesCharts = (params) => {
switch(params.type) { switch(params.type) {
case 'ml': case 'ml':
const yAxisMlData = params.yAxisData.sort().map((el) => { const yAxisMlData = params.yAxisData.sort().map((el) => {
return `${el.key !== null ? el.key : 'Нет данных'} ${el.val}` return `${el.key !== null ? el.key : 'Нет данных'} ${el.val}`
}).sort((a, b) => a - b).reverse() }).sort((a, b) => a - b).reverse()
const xAxisMlData = params.xAxisData.map((item) => item.map((el) => el)) const xAxisMlData = params.xAxisData.map((item) => item.map((el) => el))
const mlData = xAxisMlData.sort().map((el) => prepareBarTypesMlData(el, params)) const mlData = xAxisMlData.sort().map((el) => prepareBarTypesMlData(el, params))
return {axisData: yAxisMlData, updatedData: groupByBarTypesData(mlData, xAxisMlData, chartsFiltersNamesMl)} return {axisData: yAxisMlData, updatedData: groupByBarTypesData(mlData, xAxisMlData, chartsFiltersNamesMl)}
case 'mount': case 'mount':
const xAxisMountData = params.yAxisData.sort((a, b) => a.key - b.key).map((el) => { const xAxisMountData = params.yAxisData.sort((a, b) => a.key - b.key).map((el) => {
return `${el.key !== null ? el.key : 'Нет данных'} \n ${el.val}`}) return `${el.key !== null ? el.key : 'Нет данных'} \n ${el.val}`})
const mountData = params.xAxisData.sort().map((el) => prepareBarTypesData(el, params.xAxisData, params)) const mountData = params.xAxisData.sort().map((el) => prepareBarTypesData(el, params.xAxisData, params))
return {axisData: xAxisMountData, updatedData: groupByBarTypesData(mountData, params.xAxisData, chartsFiltersNames)} return {axisData: xAxisMountData, updatedData: groupByBarTypesData(mountData, params.xAxisData, chartsFiltersNames)}
default : default :
const yAxisDefaultData = params.yAxisData.sort().map((el) => { const yAxisDefaultData = params.yAxisData.sort().map((el) => {
return `${el.key !== null ? el.key : 'Нет данных'} ${el.val}` return `${el.key !== null ? el.key : 'Нет данных'} ${el.val}`
}).sort((a, b) => a - b).reverse() }).sort((a, b) => a - b).reverse()
const defaultData = params.xAxisData.sort().map((el) => prepareBarTypesData(el, params.xAxisData, params)) const defaultData = params.xAxisData.sort().map((el) => prepareBarTypesData(el, params.xAxisData, params))
return {axisData: yAxisDefaultData, updatedData: groupByBarTypesData(defaultData, params.xAxisData, chartsFiltersNames)} return {axisData: yAxisDefaultData, updatedData: groupByBarTypesData(defaultData, params.xAxisData, chartsFiltersNames)}
} }
} }
export {isEqualKeyValue, getTextWidth, updatedGroupByData, choiceTypeBarTypesCharts} 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 = { const chartsSetup = {
main: [ main: [
{id: 'commun_pie', type: 'pie', maxHeight: '400px', order: 1}, {id: 'commun_pie', type: 'pie', maxHeight: '400px', order: 1},
{id: 'commun_pie_cdim', type: 'pie', maxHeight: '400px', order: 2}, {id: 'commun_pie_cdim', type: 'pie', maxHeight: '400px', order: 2},
{id: 'commun_pie_cdrp', type: 'pie', maxHeight: '400px', order: 3}, {id: 'commun_pie_cdrp', type: 'pie', maxHeight: '400px', order: 3},
{id: 'commun_pie_mpt_types', type: 'pie', maxHeight: '400px', order: 4}, {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_gdsm_types', type: 'pie', maxHeight: '400px', order: 5},
{id: 'commun_pie_sm_pss_types', type: 'pie', maxHeight: '400px', order: 6}, {id: 'commun_pie_sm_pss_types', type: 'pie', maxHeight: '400px', order: 6},
{id: 'routes_pie', type: 'pie', maxHeight: '400px', order: 7}, {id: 'routes_pie', type: 'pie', maxHeight: '400px', order: 7},
{id: 'rors_pie', type: 'pie', maxHeight: '400px', order: 8}, {id: 'rors_pie', type: 'pie', maxHeight: '400px', order: 8},
{id: 'routes_bar', type: 'mainMl', maxHeight: '400px', order: 9}, {id: 'routes_bar', type: 'mainMl', maxHeight: '400px', order: 9},
{id: 'mount_client_type_bar', type: 'mount', height: '350', maxHeight: '400px', order: 10}, {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}, {id: 'mount_mounter_type_bar', type: 'mount', height: '500', maxHeight: '600px', order: 11},
], ],
types: [ types: [
{id: 'commun_types_bar', type: 'default', maxHeight: '400px', order: 1}, {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_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_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_mpt_types', type: 'types', maxHeight: '400px', order: 4},
{id: 'commun_types_bar_gdsm_types', type: 'types', maxHeight: '400px', order: 5}, {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: 'commun_types_bar_sm_pss_types', type: 'types', maxHeight: '400px', order: 6},
{id: 'routes_types_bar', type: 'default', maxHeight: '400px', order: 7}, {id: 'routes_types_bar', type: 'default', maxHeight: '400px', order: 7},
{id: 'rors_types_bar', type: 'default', maxHeight: '400px', order: 8}, {id: 'rors_types_bar', type: 'default', maxHeight: '400px', order: 8},
{id: 'routes_types_bar_ml', type: 'ml', maxHeight: '380px', order: 9}, {id: 'routes_types_bar_ml', type: 'ml', maxHeight: '380px', order: 9},
] ]
} }
const colorList = (name) => { const colorList = (name) => {
switch(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(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(255, 114, 114, 1)'
case 'Нет МЛ, нет связи': return 'rgb(165, 165, 165, 1)' case 'Нет МЛ, нет связи': return 'rgb(165, 165, 165, 1)'
case 'Не РОРС': return 'rgb(255, 114, 114, 1)' case 'Не РОРС': return 'rgb(255, 114, 114, 1)'
case 'Нет данных': return 'rgb(165, 165, 165, 1)' case 'Нет данных': return 'rgb(165, 165, 165, 1)'
case 'Есть МЛ, нет связи': return 'rgb(255, 114, 114, 1)' case 'Есть МЛ, нет связи': return 'rgb(255, 114, 114, 1)'
case 'Нет МЛ, выходил на связь': return 'rgb(243, 161, 30, 1)' case 'Нет МЛ, выходил на связь': return 'rgb(243, 161, 30, 1)'
} }
} }
const colorListBar = (type, name) => { const colorListBar = (type, name) => {
if(type === typesCharts.mainMl || typesCharts.typesMl) { if(type === typesCharts.mainMl || typesCharts.typesMl) {
switch(name) { switch(name) {
case 'Обычные': return 'rgb(134, 212, 131, 1)' case 'Обычные': return 'rgb(134, 212, 131, 1)'
case 'Аварийные': return 'rgb(255, 114, 114, 1)' case 'Аварийные': return 'rgb(255, 114, 114, 1)'
case 'Прочие': return 'rgb(196, 161, 201, 1)' case 'Прочие': return 'rgb(196, 161, 201, 1)'
case 'Ремонтные': return 'rgb(228, 202, 163, 1)' case 'Ремонтные': return 'rgb(228, 202, 163, 1)'
case 'Без выезда': return 'rgb(243, 161, 30, 1)' case 'Без выезда': return 'rgb(243, 161, 30, 1)'
case 'СПС без МЛ': return 'rgb(165, 165, 165, 1)' case 'СПС без МЛ': return 'rgb(165, 165, 165, 1)'
} }
} }
} }
const orderCharts = (name) => { const orderCharts = (name) => {
switch(name) { switch(name) {
case 'На связи': return 1 case 'На связи': return 1
case 'Есть МЛ, выходил на связь': return 1 case 'Есть МЛ, выходил на связь': return 1
case 'РОРС': return 1 case 'РОРС': return 1
case 'Не на связи': return 2 case 'Не на связи': return 2
case 'Не РОРС': return 2 case 'Не РОРС': return 2
case 'Есть МЛ, нет связи': return 2 case 'Есть МЛ, нет связи': return 2
case 'Нет МЛ, выходил на связь': return 3 case 'Нет МЛ, выходил на связь': return 3
case 'Нет МЛ, нет связи': return 5 case 'Нет МЛ, нет связи': return 5
case 'Нет данных': return 5 case 'Нет данных': return 5
} }
} }
const title = (id, count, countWithoutMl = '') => { const title = (id, count, countWithoutMl = '') => {
switch(id) { switch(id) {
case 'commun_pie': return `Связь с СПС` case 'commun_pie': return `Связь с СПС`
case 'commun_pie_cdim': return `Связь с СПС, ЦДИМ` case 'commun_pie_cdim': return `Связь с СПС, ЦДИМ`
case 'commun_pie_cdrp': return `Связь с СПС, ЦДРП` case 'commun_pie_cdrp': return `Связь с СПС, ЦДРП`
case 'commun_types_bar': return `Связь с СПС` case 'commun_types_bar': return `Связь с СПС`
case 'commun_types_bar_cdim': return `Связь с СПС, ЦДИМ` case 'commun_types_bar_cdim': return `Связь с СПС, ЦДИМ`
case 'commun_types_bar_cdrp': return `Связь с СПС, ЦДРП` case 'commun_types_bar_cdrp': return `Связь с СПС, ЦДРП`
case 'commun_pie_mpt_types': return `Наличие связи с МРТ` case 'commun_pie_mpt_types': return `Наличие связи с МРТ`
case 'commun_pie_gdsm_types': return `Наличие связи с ЖДСМ` case 'commun_pie_gdsm_types': return `Наличие связи с ЖДСМ`
case 'commun_pie_sm_pss_types': return `Наличие связи с СМ` case 'commun_pie_sm_pss_types': return `Наличие связи с СМ`
case 'commun_types_bar_mpt_types': return `Наличие связи с МРТ` case 'commun_types_bar_mpt_types': return `Наличие связи с МРТ`
case 'commun_types_bar_gdsm_types': return `Наличие связи с ЖДСМ` case 'commun_types_bar_gdsm_types': return `Наличие связи с ЖДСМ`
case 'commun_types_bar_sm_pss_types': return `Наличие связи с СМ` case 'commun_types_bar_sm_pss_types': return `Наличие связи с СМ`
case 'rors_pie': return `РОРС` case 'rors_pie': return `РОРС`
case 'rors_types_bar': return `РОРС` case 'rors_types_bar': return `РОРС`
case 'routes_pie': return `Связь с СПС, МЛ` case 'routes_pie': return `Связь с СПС, МЛ`
case 'routes_types_bar': return `Связь с СПС, МЛ` case 'routes_types_bar': return `Связь с СПС, МЛ`
case 'routes_bar': return `Выданные МЛ` case 'routes_bar': return `Выданные МЛ`
case 'routes_types_bar_ml': return `Выданные МЛ` case 'routes_types_bar_ml': return `Выданные МЛ`
case 'mount_client_type_bar': return `Кол-во монтажей по заказчикам и КР` case 'mount_client_type_bar': return `Кол-во монтажей по заказчикам и КР`
case 'mount_mounter_type_bar': return `Кол-во монтажей по исполнителям и КР` case 'mount_mounter_type_bar': return `Кол-во монтажей по исполнителям и КР`
default: return '' default: return ''
} }
} }
const openMachine = (data) => { const openMachine = (data) => {
const [currentEl] = data?.linkData?.filter((el) => el?.machine_type === data?.groupByData[data?.groupByKey]) const [currentEl] = data?.linkData?.filter((el) => el?.machine_type === data?.groupByData[data?.groupByKey])
window.open(`/html/askr_devices/analyze_device/${currentEl.device_number}`, '_blank') window.open(`/html/askr_devices/analyze_device/${currentEl.device_number}`, '_blank')
} }
const groupByKeys = { const groupByKeys = {
firstLayout: 'org_type_name', firstLayout: 'org_type_name',
secondLayout: 'railway_name', secondLayout: 'railway_name',
thirdLayout: 'org_name', thirdLayout: 'org_name',
fourthLayout: 'type', fourthLayout: 'type',
fiveLayout: 'machine_type', fiveLayout: 'machine_type',
} }
const typesCharts = { const typesCharts = {
default: 'default', default: 'default',
without_first_layout: 'without_first_layout', without_first_layout: 'without_first_layout',
mpt: 'mpt_types', mpt: 'mpt_types',
gdsm: 'gdsm_types', gdsm: 'gdsm_types',
sm: 'sm_pss_types', sm: 'sm_pss_types',
mainMl: 'mainMl', mainMl: 'mainMl',
typesMl: 'ml', typesMl: 'ml',
} }
export {colorList, colorListBar, orderCharts, title, openMachine, groupByKeys, typesCharts, chartsSetup} 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 = {}) => { const axisBarConfig = (typeChart, axisData, windowConfig, names = {}) => {
return typeChart === 'mount' || typeChart === 'mainMl' || typeChart === 'states' || typeChart === 'packLines' ? { return typeChart === 'mount' || typeChart === 'mainMl' || typeChart === 'states' || typeChart === 'packLines' ? {
xAxis: { xAxis: {
type: 'category', type: 'category',
name: names.xAxis ? names.xAxis : '', name: names.xAxis ? names.xAxis : '',
nameLocation: 'end', nameLocation: 'end',
nameGap: 35, nameGap: 35,
nameTextStyle: { nameTextStyle: {
verticalAlign: 'top', verticalAlign: 'top',
align: 'right', align: 'right',
padding: typeChart === 'packLines' ? windowConfig?.linesPack.nameXAxis.padding : [25, 40, 0, 0] padding: typeChart === 'packLines' ? windowConfig?.linesPack.nameXAxis.padding : [25, 40, 0, 0]
}, },
splitLine: {show: true}, splitLine: {show: true},
axisLabel: { axisLabel: {
show: true, show: true,
color: 'black', color: 'black',
fontSize: windowConfig?.bar?.xAxis?.label?.fontSize, fontSize: windowConfig?.bar?.xAxis?.label?.fontSize,
fontWeight: windowConfig?.bar?.xAxis?.label?.fontWeight, fontWeight: windowConfig?.bar?.xAxis?.label?.fontWeight,
interval: windowConfig?.bar?.xAxis?.label?.interval, interval: windowConfig?.bar?.xAxis?.label?.interval,
align: windowConfig?.bar?.xAxis?.label?.align, align: windowConfig?.bar?.xAxis?.label?.align,
hideOverlap: true, hideOverlap: true,
}, },
axisTick: { axisTick: {
show: true, show: true,
interval: windowConfig?.bar?.xAxis?.axisTick?.interval, interval: windowConfig?.bar?.xAxis?.axisTick?.interval,
lineStyle: { lineStyle: {
color: 'black', color: 'black',
} }
}, },
data: axisData data: axisData
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
name: names.xAxis ? names.xAxis : '', name: names.xAxis ? names.xAxis : '',
// nameLocation: 'end', // nameLocation: 'end',
// nameGap: 35, // nameGap: 35,
// nameTextStyle: { // nameTextStyle: {
// // verticalAlign: 'top', // // verticalAlign: 'top',
// // align: 'right', // // align: 'right',
// padding: [125, 0, 0, 150] // padding: [125, 0, 0, 150]
// }, // },
splitLine: {show: true}, splitLine: {show: true},
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
// dashOffset: 10, // dashOffset: 10,
width: 1, width: 1,
color: 'white', color: 'white',
shadowColor: 'black', shadowColor: 'black',
shadowOffsetX: -2 shadowOffsetX: -2
}, },
}, },
axisLabel: { axisLabel: {
show: true, show: true,
color: 'black', color: 'black',
}, },
axisTick: { axisTick: {
show: true, show: true,
lineStyle: { lineStyle: {
color: 'black' color: 'black'
} }
}, },
}, },
} : { } : {
xAxis: { xAxis: {
type: 'value', type: 'value',
name: names.xAxis ? names.xAxis : '', name: names.xAxis ? names.xAxis : '',
splitLine: {show: true}, splitLine: {show: true},
axisLabel: { axisLabel: {
show: true, show: true,
color: 'black', color: 'black',
fontSize: windowConfig?.bar?.xAxis?.label?.fontSize, fontSize: windowConfig?.bar?.xAxis?.label?.fontSize,
fontWeight: windowConfig?.bar?.xAxis?.label?.fontWeight, fontWeight: windowConfig?.bar?.xAxis?.label?.fontWeight,
interval: windowConfig?.bar?.xAxis?.label?.interval, interval: windowConfig?.bar?.xAxis?.label?.interval,
align: windowConfig?.bar?.xAxis?.label?.align, align: windowConfig?.bar?.xAxis?.label?.align,
hideOverlap: true, hideOverlap: true,
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: 'black', color: 'black',
} }
}, },
axisTick: { axisTick: {
show: true, show: true,
interval: windowConfig?.bar?.xAxis?.axisTick?.interval, interval: windowConfig?.bar?.xAxis?.axisTick?.interval,
lineStyle: { lineStyle: {
color: 'black' color: 'black'
} }
}, },
minInterval: 1, minInterval: 1,
}, },
yAxis: { yAxis: {
type: 'category', type: 'category',
name: names.yAxis ? names.yAxis : '', name: names.yAxis ? names.yAxis : '',
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
// dashOffset: 10, // dashOffset: 10,
width: 1, width: 1,
color: 'white', color: 'white',
shadowColor: 'black', shadowColor: 'black',
shadowOffsetX: -2 shadowOffsetX: -2
}, },
}, },
// axisLabel: { // axisLabel: {
// formatter: (yAxisData) => { // formatter: (yAxisData) => {
// // return yAxisData.map((el) => { // // return yAxisData.map((el) => {
// // return `${el?.name} ${el?.value}` // // return `${el?.name} ${el?.value}`
// // }) // // })
// } // }
// }, // },
axisLabel: { axisLabel: {
show: true, show: true,
width: windowConfig?.bar?.yAxis?.label?.width, width: windowConfig?.bar?.yAxis?.label?.width,
color: 'black', color: 'black',
fontSize: windowConfig?.bar?.yAxis?.label?.fontSize, fontSize: windowConfig?.bar?.yAxis?.label?.fontSize,
fontWeight: windowConfig?.bar?.yAxis?.label?.fontWeight, fontWeight: windowConfig?.bar?.yAxis?.label?.fontWeight,
overflow: 'break', overflow: 'break',
}, },
axisTick: { axisTick: {
show: true, show: true,
lineStyle: { lineStyle: {
color: 'black' color: 'black'
} }
}, },
// fontSize: 10, // fontSize: 10,
// offset: -7, // offset: -7,
data: axisData, data: axisData,
splitLine: { splitLine: {
show: true show: true
}, },
// position: windowConfig?.bar?.yAxis?.label?.position, // position: windowConfig?.bar?.yAxis?.label?.position,
// offset: windowConfig?.bar?.yAxis?.label?.offset, // offset: windowConfig?.bar?.yAxis?.label?.offset,
zLevel: 3, zLevel: 3,
// z: 99 // z: 99
}, },
} }
} }
const windowConfig = (isMobile, currentWidth, countCharts) => { const windowConfig = (isMobile, currentWidth, countCharts) => {
const scrollbarParams = (countCharts) => { const scrollbarParams = (countCharts) => {
if(15 < countCharts && countCharts < 40) return { if(15 < countCharts && countCharts < 40) return {
start: 85, minSpan: 5 start: 85, minSpan: 5
} }
if(40 < countCharts && countCharts < 70) return { if(40 < countCharts && countCharts < 70) return {
start: 90, minSpan: 5 start: 90, minSpan: 5
} }
if(70 < countCharts && countCharts < 100) return { if(70 < countCharts && countCharts < 100) return {
start: 95, minSpan: 5 start: 95, minSpan: 5
} }
if(100 < countCharts) return { if(100 < countCharts) return {
start: 99, minSpan: 3 start: 99, minSpan: 3
} }
return {start: 70, minSpan: 5} return {start: 70, minSpan: 5}
} }
if(isMobile) return { if(isMobile) return {
title: { title: {
width: currentWidth - 90, width: currentWidth - 90,
top: 3, top: 3,
left: 'left', left: 'left',
fontSize: 11, fontSize: 11,
}, },
backgroundColor: '#FFF', backgroundColor: '#FFF',
pie: { pie: {
legend: { legend: {
itemWidth: 15, itemWidth: 15,
itemHeight: 15, itemHeight: 15,
itemGap: 5, itemGap: 5,
fontSize: 10 fontSize: 10
}, },
graphic: { graphic: {
period: { period: {
top: 10, top: 10,
right: 40, right: 40,
fontSize: 10 fontSize: 10
}, },
count: { count: {
top: 'center', top: 'center',
left: 'center', left: 'center',
fontSize: 20 fontSize: 20
}, },
} }
}, },
linesPack: { linesPack: {
legend: { legend: {
bottom: 0, bottom: 0,
itemWidth: 25, itemWidth: 25,
itemHeight: 14, itemHeight: 14,
itemGap: 7, itemGap: 7,
fontSize: 11 fontSize: 11
}, },
nameXAxis: { nameXAxis: {
padding: [110, 40, 0, 0], padding: [110, 40, 0, 0],
} }
}, },
bar: { bar: {
legend: { legend: {
bottom: 0, bottom: 0,
itemWidth: 10, itemWidth: 10,
itemHeight: 10, itemHeight: 10,
itemGap: 5, itemGap: 5,
fontSize: 10 fontSize: 10
}, },
grid: { grid: {
width: '85%', width: '85%',
top: 40 top: 40
}, },
yAxis: { yAxis: {
label: {width: 40, fontWeight: 'bold', fontSize: 9, position: 'left', offset: -20} label: {width: 40, fontWeight: 'bold', fontSize: 9, position: 'left', offset: -20}
}, },
xAxis: { xAxis: {
label: {fontSize: 10, fontWeight: 'bold', interval: 1, align: 'center'}, label: {fontSize: 10, fontWeight: 'bold', interval: 1, align: 'center'},
axisTick: {interval: 1} axisTick: {interval: 1}
}, },
dataZoom: { dataZoom: {
top: 40, top: 40,
start: scrollbarParams(countCharts).start, start: scrollbarParams(countCharts).start,
minSpan: scrollbarParams(countCharts).minSpan, minSpan: scrollbarParams(countCharts).minSpan,
}, },
graphic: { graphic: {
period: { period: {
top: 8, top: 8,
right: 50, right: 50,
fontSize: 10 fontSize: 10
}, },
menu: { menu: {
top: 5, top: 5,
right: 0 right: 0
}, },
container: { container: {
top: 27, top: 27,
right: 0 right: 0
}, },
rect: { rect: {
top: 8, top: 8,
right: 10 right: 10
}, },
download: { download: {
top: 18, top: 18,
right: 70 right: 70
}, },
downloadTitle: { downloadTitle: {
top: 23, top: 23,
right: 20 right: 20
}, },
back: { back: {
top: 5, top: 5,
right: 20, right: 20,
}, },
link: { link: {
top: 23, top: 23,
left: 7, left: 7,
} }
} }
} }
} }
if(!isMobile) return { if(!isMobile) return {
title: { title: {
width: 'auto', width: 'auto',
top: 3, top: 3,
left: 'left', left: 'left',
fontSize: 16, fontSize: 16,
}, },
backgroundColor: '#FFF', backgroundColor: '#FFF',
line: { line: {
legend: { legend: {
bottom: 0, bottom: 0,
itemWidth: 25, itemWidth: 25,
itemHeight: 14, itemHeight: 14,
itemGap: 7, itemGap: 7,
fontSize: 11 fontSize: 11
}, },
}, },
linesPack: { linesPack: {
legend: { legend: {
bottom: 0, bottom: 0,
itemWidth: 25, itemWidth: 25,
itemHeight: 14, itemHeight: 14,
itemGap: 7, itemGap: 7,
fontSize: 11 fontSize: 11
}, },
nameXAxis: { nameXAxis: {
padding: [110, 40, 0, 0], padding: [110, 40, 0, 0],
} }
}, },
pie: { pie: {
legend: { legend: {
itemWidth: 15, itemWidth: 15,
itemHeight: 15, itemHeight: 15,
itemGap: 10, itemGap: 10,
fontSize: 12 fontSize: 12
}, },
graphic: { graphic: {
period: { period: {
top: 10, top: 10,
right: 30, right: 30,
fontSize: 12 fontSize: 12
}, },
count: { count: {
top: 'center', top: 'center',
left: 'center', left: 'center',
fontSize: 27 fontSize: 27
}, },
} }
}, },
bar: { bar: {
legend: { legend: {
bottom: 10, bottom: 10,
itemWidth: 25, itemWidth: 25,
itemHeight: 14, itemHeight: 14,
itemGap: 10, itemGap: 10,
fontSize: 12 fontSize: 12
}, },
grid: { grid: {
width: '90%', width: '90%',
top: 50 top: 50
}, },
yAxis: { yAxis: {
label: {fontSize: 13, width: 110, fontWeight: 'normal', position: 'left', offset: 0} label: {fontSize: 13, width: 110, fontWeight: 'normal', position: 'left', offset: 0}
}, },
xAxis: { xAxis: {
label: {fontSize: 10, fontWeight: 'normal', interval: 1, align: 'center'}, label: {fontSize: 10, fontWeight: 'normal', interval: 1, align: 'center'},
axisTick: {interval: 0} axisTick: {interval: 0}
}, },
dataZoom: { dataZoom: {
top: 50, top: 50,
start: scrollbarParams(countCharts).start, start: scrollbarParams(countCharts).start,
minSpan: scrollbarParams(countCharts).minSpan, minSpan: scrollbarParams(countCharts).minSpan,
}, },
graphic: { graphic: {
period: { period: {
top: 10, top: 10,
right: 60, right: 60,
fontSize: 12 fontSize: 12
}, },
menu: { menu: {
top: 7, top: 7,
right: 5 right: 5
}, },
container: { container: {
top: 27, top: 27,
right: 0 right: 0
}, },
rect: { rect: {
top: 8, top: 8,
right: 10 right: 10
}, },
download: { download: {
top: 18, top: 18,
right: 70 right: 70
}, },
downloadTitle: { downloadTitle: {
top: 23, top: 23,
right: 20 right: 20
}, },
back: { back: {
top: 7, top: 7,
right: 30, right: 30,
}, },
link: { link: {
top: 28, top: 28,
left: 7, left: 7,
} }
} }
} }
} }
} }
const sizeOptions = (width = 600, height = 400) => { const sizeOptions = (width = 600, height = 400) => {
return { return {
width: width, width: width,
height: height height: height
} }
} }
export {axisBarConfig, windowConfig, sizeOptions} 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}` Authorization: `Bearer ${token}`
} }
}) })
.then(r => r.data) .then(r => r.data)
.catch(error => { .catch(error => {
onError && onError(error) onError && onError(error)
console.error('Error post request:', error) console.error('Error post request:', error)
authViewer(error) authViewer(error)
}) })
} }
const get = async (path, success_callback) => { const get = async (path, success_callback) => {
return await axios.get(`${import.meta.env.VITE_API_ADDR}${path}`) return await axios.get(`${import.meta.env.VITE_API_ADDR}${path}`)
.then(success_callback) .then(success_callback)
.catch(error => { .catch(error => {
console.error('Error post request:', error) console.error('Error post request:', error)
authViewer(error) authViewer(error)
}) })
} }

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

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

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

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

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

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

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

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

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

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

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

@ -32,39 +32,39 @@ const pagination = {
const selectors = { const selectors = {
org_name: ["ПЧМ Воронеж", "ПЧМ Фаянсовая", org_name: ["ПЧМ Воронеж", "ПЧМ Фаянсовая",
"ПЧМ Топки", "ПЧМ Кочетовка", "ПЧР КЛНГ", "ПЧМ Топки", "ПЧМ Кочетовка", "ПЧР КЛНГ",
"ПЧМ Нижний Новгород", "ПЧМ Новосибирск", "ПЧМ Нижний Новгород", "ПЧМ Новосибирск",
"ПЧМ Екатеринбург", "ПЧМ Омск", "ПЧМ Алтай", "ПЧМ Екатеринбург", "ПЧМ Омск", "ПЧМ Алтай",
"ПЧМ Тосно", "ПЧМ Вязьма", "ПМС-46", "ПМС-183", "ПЧМ Тосно", "ПЧМ Вязьма", "ПМС-46", "ПМС-183",
"ПЧМ Тихорецк", "ПЧМ Сызрань", "ПЧМ Тихорецк", "ПЧМ Сызрань",
"ПЧМ Хабаровск", null, "ПЧМ Северобайкальск", "ПЧМ Хабаровск", null, "ПЧМ Северобайкальск",
"ПЧМ Смолино", "ПЧМ Вологда", "ПЧМ Пермь", "ПЧМ Смолино", "ПЧМ Вологда", "ПЧМ Пермь",
"ПЧМ Астрахань", "ПЧМ Нигозеро", "ПЧМ Астрахань", "ПЧМ Нигозеро",
"ПЧМ Челябинск", "ПЧМ Завитая", "ПМС-217", "ПЧМ Челябинск", "ПЧМ Завитая", "ПМС-217",
"ПМС-199", "ПМС-31", "ТрансЭнерго", "ПМС-340", "ПМС-199", "ПМС-31", "ТрансЭнерго", "ПМС-340",
"ОПМС-99", "ПМС-11", "ПМС-77", "ПМС-208", "ПМС-172", "ОПМС-99", "ПМС-11", "ПМС-77", "ПМС-208", "ПМС-172",
"ПМС-12", "ПМС-22", "ПМС-12", "ПМС-22",
"Экспулуатация БУ прекращена", "ОПМС-68", "Экспулуатация БУ прекращена", "ОПМС-68",
"ПМС-170", "ОПМС-103", "ПМС-205", "ПМС-152", "ПМС-20", "ПМС-170", "ОПМС-103", "ПМС-205", "ПМС-152", "ПМС-20",
"ПЧМ Тында", "КалугаПутьМаш", "ПЧМ Тында", "КалугаПутьМаш",
"ПЧМ Санкт-Петербург", "ПЧМ Красноярск"], "ПЧМ Санкт-Петербург", "ПЧМ Красноярск"],
org_type_name: ["ЦДИМ", "Другие", "ЦДРП"], org_type_name: ["ЦДИМ", "Другие", "ЦДРП"],
railway_name: ["Ю-Вост", "Моск", "З-Сиб", "Клг", "Горьк", railway_name: ["Ю-Вост", "Моск", "З-Сиб", "Клг", "Горьк",
"Сверд", "Окт", "Заб", "В-Сиб", "С-Кав", "Кбш", "Сверд", "Окт", "Заб", "В-Сиб", "С-Кав", "Кбш",
"Д-Вост", null, "Ю-Ур", "Сев", "Прив", "РЖД", "Крас"], "Д-Вост", null, "Ю-Ур", "Сев", "Прив", "РЖД", "Крас"],
type: ["УТМ", "РПБ", "ПРЛ УПК", "ПУМА", "МДС", "МПТ", type: ["УТМ", "РПБ", "ПРЛ УПК", "ПУМА", "МДС", "МПТ",
"ТЭС", "СПП", "ДСП", "СЧ", "ЩОМ", "RM", "АСГ", "ВПО", "ТЭС", "СПП", "ДСП", "СЧ", "ЩОМ", "RM", "АСГ", "ВПО",
"без типа", "ПМГ", "МТГ", "АС", "СМ", "ВПР", "ПСС", "без типа", "ПМГ", "МТГ", "АС", "СМ", "ВПР", "ПСС",
"МПК", "АДМ", "АГД", "УК", "АМ", "ПРЛ", "АДЭ", "МПК", "АДМ", "АГД", "УК", "АМ", "ПРЛ", "АДЭ",
"Унимат", "ВПРС", "ПБ", "Дуоматик", "МВУ", "Унимат", "ВПРС", "ПБ", "Дуоматик", "МВУ",
"АВФ-1М.2", "Динамик", "АГС", "ПМА", "ССГ-1", "СЧУ", "АВФ-1М.2", "Динамик", "АГС", "ПМА", "ССГ-1", "СЧУ",
"АГП", "Унимат компакт", "ДГКу", "СЗ", "ТЭУ", "АГП", "Унимат компакт", "ДГКу", "СЗ", "ТЭУ",
"РБ", "ФАТРА",], "РБ", "ФАТРА",],
zav_nomer: ["84", "49", "15", "90", "27", "9", "5", "105", "005", "656", zav_nomer: ["84", "49", "15", "90", "27", "9", "5", "105", "005", "656",
"001", "39", "38", "57", "03", "003", "593", "235", "1453", "1307", "766", "001", "39", "38", "57", "03", "003", "593", "235", "1453", "1307", "766",
"528", "485", "02", "752", "704", "584", "669", "261", "482", "762", "985", "528", "485", "02", "752", "704", "584", "669", "261", "482", "762", "985",
"605", "016", "1258", "729", "963", "927", "319", "1154", "1163", "825", "605", "016", "1258", "729", "963", "927", "319", "1154", "1163", "825",
"1276", "1062", "1025",] "1276", "1062", "1025",]
} }
@ -245,163 +245,163 @@ const chartsBarTypesWithoutLayoutParams = [{groupByKey: 'railway_name', filterKe
const charts = { const charts = {
pie: { pie: {
countMachines: 4790, countMachines: 4790,
period: 'две недели', period: 'две недели',
machines: [ machines: [
{ name: "Есть МЛ, выходил на связь", value: 1048, color: "rgb(134, 212, 131, 1)", order: 1 }, { 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: 2 },
{ name: "Нет МЛ, выходил на связь", value: 1048, color: "rgb(134, 212, 131, 1)", order: 3 }, { name: "Нет МЛ, выходил на связь", value: 1048, color: "rgb(134, 212, 131, 1)", order: 3 },
{ name: "Нет МЛ, нет связи", value: 1048, color: "rgb(134, 212, 131, 1)", order: 4 }, { name: "Нет МЛ, нет связи", value: 1048, color: "rgb(134, 212, 131, 1)", order: 4 },
]}, ]},
mainMl: { mainMl: {
countMachinesWithMl: 2916, countMachinesWithMl: 2916,
period: 'две недели', period: 'две недели',
machines: [ machines: [
{ key: "routes_common", name: "Обычные", value: 2182, itemStyle: {color: "rgb(134, 212, 131, 1)"}, order: 1 }, { 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_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_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_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_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 }, { key: "routes_without_ml", name: "СПС без МЛ", value: 3073, itemStyle: {color: "rgb(165, 165, 165, 1)"}, order: 6 },
]}, ]},
mount_mounter_type_bar: { mount_mounter_type_bar: {
chartId: "mount_mounter_type_bar", chartId: "mount_mounter_type_bar",
countMounts: 5436, countMounts: 5436,
filterKey: "mounter_type", filterKey: "mounter_type",
height: 500, height: 500,
type: "mount", type: "mount",
xAxisData: [ xAxisData: [
[ [
{ {
charts: [ charts: [
{name: "ВНИИЖТ", value: 92}, {name: "ВНИИЖТ", value: 92},
{name: "Калугапутьмаш", value: 1} {name: "Калугапутьмаш", value: 1}
], ],
totalCount: 3, totalCount: 3,
yAxisData: "2016 г." yAxisData: "2016 г."
}, },
{ {
charts: [ charts: [
{name: "ВНИИЖТ", value: 349}, {name: "ВНИИЖТ", value: 349},
{name: "КалугаРПМ", value: 9}, {name: "КалугаРПМ", value: 9},
{name: "Калугапутьмаш", value: 92}, {name: "Калугапутьмаш", value: 92},
{name: "Свердловский РПМ", value: 23}, {name: "Свердловский РПМ", value: 23},
{ {
name: "Тихорецкий завод им Воровского", name: "Тихорецкий завод им Воровского",
value: 26 value: 26
}, },
{name: "Тулажелдормаш", value: 8} {name: "Тулажелдормаш", value: 8}
], ],
totalCount: 9, totalCount: 9,
yAxisData: "2017 г." yAxisData: "2017 г."
}, },
{ {
charts: [ charts: [
{name: "ВНИИЖТ", value: 590}, {name: "ВНИИЖТ", value: 590},
{name: "КалугаРПМ", value: 7}, {name: "КалугаРПМ", value: 7},
{name: "Калугапутьмаш", value: 73}, {name: "Калугапутьмаш", value: 73},
{name: "Свердловский РПМ", value: 30}, {name: "Свердловский РПМ", value: 30},
{ {
name: "Тихорецкий завод им Воровского", name: "Тихорецкий завод им Воровского",
value: 23 value: 23
}, },
{name: "Тулажелдормаш", value: 32} {name: "Тулажелдормаш", value: 32}
], ],
totalCount: 11, totalCount: 11,
yAxisData: "2018 г." yAxisData: "2018 г."
}, },
{ {
charts: [ charts: [
{name: "ВНИИЖТ", value: 719}, {name: "ВНИИЖТ", value: 719},
{name: "КалугаРПМ", value: 16}, {name: "КалугаРПМ", value: 16},
{name: "Калугапутьмаш", value: 88}, {name: "Калугапутьмаш", value: 88},
{name: "Свердловский РПМ", value: 20}, {name: "Свердловский РПМ", value: 20},
{ {
name: "Тихорецкий завод им Воровского", name: "Тихорецкий завод им Воровского",
value: 33 value: 33
}, },
{name: "Тулажелдормаш", value: 24} {name: "Тулажелдормаш", value: 24}
], ],
totalCount: 12, totalCount: 12,
yAxisData: "2019 г." yAxisData: "2019 г."
}, },
{ {
charts: [ charts: [
{name: "ВНИИЖТ", value: 594}, {name: "ВНИИЖТ", value: 594},
{name: "КалугаРПМ", value: 18}, {name: "КалугаРПМ", value: 18},
{name: "Калугапутьмаш", value: 100}, {name: "Калугапутьмаш", value: 100},
{name: "Свердловский РПМ", value: 19}, {name: "Свердловский РПМ", value: 19},
{ {
name: "Тихорецкий завод им Воровского", name: "Тихорецкий завод им Воровского",
value: 36 value: 36
}, },
{name: "Тулажелдормаш", value: 31} {name: "Тулажелдормаш", value: 31}
], ],
totalCount: 9, totalCount: 9,
yAxisData: "2020 г." yAxisData: "2020 г."
}, },
{ {
charts: [ charts: [
{name: "ВНИИЖТ", value: 777}, {name: "ВНИИЖТ", value: 777},
{name: "Инжиниринг Сервис-Путьмаш", value: 10}, {name: "Инжиниринг Сервис-Путьмаш", value: 10},
{name: "КалугаРПМ", value: 5}, {name: "КалугаРПМ", value: 5},
{name: "Калугапутьмаш", value: 84}, {name: "Калугапутьмаш", value: 84},
{name: "Пермский РПМ", value: 5}, {name: "Пермский РПМ", value: 5},
{name: "Свердловский РПМ", value: 4}, {name: "Свердловский РПМ", value: 4},
{ {
name: "Тихорецкий завод им Воровского", name: "Тихорецкий завод им Воровского",
value: 14 value: 14
}, },
{name: "Тулажелдормаш", value: 28} {name: "Тулажелдормаш", value: 28}
], ],
totalCount: 12, totalCount: 12,
yAxisData: "2021 г." yAxisData: "2021 г."
}, },
{ {
charts: [ charts: [
{name: "ВНИИЖТ", value: 746}, {name: "ВНИИЖТ", value: 746},
{name: "Инжиниринг Сервис-Путьмаш", value: 10}, {name: "Инжиниринг Сервис-Путьмаш", value: 10},
{name: "КалугаРПМ", value: 4}, {name: "КалугаРПМ", value: 4},
{name: "Калугапутьмаш", value: 36}, {name: "Калугапутьмаш", value: 36},
{name: "Свердловский РПМ", value: 1}, {name: "Свердловский РПМ", value: 1},
{ {
name: "Тихорецкий завод им Воровского", name: "Тихорецкий завод им Воровского",
value: 5 value: 5
}, },
{name: "Тулажелдормаш", value: 20} {name: "Тулажелдормаш", value: 20}
], ],
totalCount: 15, totalCount: 15,
yAxisData: "2022 г." yAxisData: "2022 г."
}, },
{ {
charts: [ charts: [
{name: "ВНИИЖТ", value: 612}, {name: "ВНИИЖТ", value: 612},
{name: "Инжиниринг Сервис-Путьмаш", value: 4}, {name: "Инжиниринг Сервис-Путьмаш", value: 4},
{name: "КалугаРПМ", value: 3}, {name: "КалугаРПМ", value: 3},
{name: "Калугапутьмаш", value: 2}, {name: "Калугапутьмаш", value: 2},
{name: "Кировский машзавод", value: 3}, {name: "Кировский машзавод", value: 3},
{ {
name: "Тихорецкий завод им Воровского", name: "Тихорецкий завод им Воровского",
value: 7 value: 7
}, },
{name: "Тулажелдормаш", value: 6} {name: "Тулажелдормаш", value: 6}
], ],
totalCount: 10, totalCount: 10,
yAxisData: "2023 г." yAxisData: "2023 г."
} }
] ]
], ],
yAxisData: [ yAxisData: [
{key: "2016 г.", val: 93}, {key: "2016 г.", val: 93},
{key: "2017 г.", val: 507}, {key: "2017 г.", val: 507},
{key: "2018 г.", val: 755}, {key: "2018 г.", val: 755},
{key: "2019 г.", val: 900}, {key: "2019 г.", val: 900},
{key: "2020 г.", val: 797}, {key: "2020 г.", val: 797},
{key: "2021 г.", val: 927}, {key: "2021 г.", val: 927},
{key: "2022 г.", val: 818}, {key: "2022 г.", val: 818},
{key: "2023 г.", val: 637} {key: "2023 г.", val: 637}
]} ]}
} }
const dataMachines = [ const dataMachines = [
@ -1305,282 +1305,282 @@ const dataMachines = [
] ]
const dataMount = [ const dataMount = [
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 6, device_count: 6,
mounter_type: "Тулажелдормаш", mounter_type: "Тулажелдормаш",
year: "2023 г." year: "2023 г."
}, },
{ {
client_type: "Трансэнерго", client_type: "Трансэнерго",
device_count: 1, device_count: 1,
mounter_type: "ВНИИЖТ", mounter_type: "ВНИИЖТ",
year: "2018 г." year: "2018 г."
}, },
{ {
client_type: "ЦДРП", client_type: "ЦДРП",
device_count: 86, device_count: 86,
mounter_type: "Калугапутьмаш", mounter_type: "Калугапутьмаш",
year: "2019 г." year: "2019 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 593, device_count: 593,
mounter_type: "ВНИИЖТ", mounter_type: "ВНИИЖТ",
year: "2020 г." year: "2020 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 589, device_count: 589,
mounter_type: "ВНИИЖТ", mounter_type: "ВНИИЖТ",
year: "2018 г." year: "2018 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 12, device_count: 12,
mounter_type: "Тулажелдормаш", mounter_type: "Тулажелдормаш",
year: "2022 г." year: "2022 г."
}, },
{ {
client_type: "ЦДРП", client_type: "ЦДРП",
device_count: 8, device_count: 8,
mounter_type: "Тулажелдормаш", mounter_type: "Тулажелдормаш",
year: "2022 г." year: "2022 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 3, device_count: 3,
mounter_type: "Калугапутьмаш", mounter_type: "Калугапутьмаш",
year: "2018 г." year: "2018 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 347, device_count: 347,
mounter_type: "ВНИИЖТ", mounter_type: "ВНИИЖТ",
year: "2017 г." year: "2017 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 8, device_count: 8,
mounter_type: "Тулажелдормаш", mounter_type: "Тулажелдормаш",
year: "2017 г." year: "2017 г."
}, },
{ {
client_type: "ЦДРП", client_type: "ЦДРП",
device_count: 1, device_count: 1,
mounter_type: "КалугаРПМ", mounter_type: "КалугаРПМ",
year: "2021 г." year: "2021 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 7, device_count: 7,
mounter_type: "КалугаРПМ", mounter_type: "КалугаРПМ",
year: "2018 г." year: "2018 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 27, device_count: 27,
mounter_type: "Тихорецкий завод им Воровского", mounter_type: "Тихорецкий завод им Воровского",
year: "2019 г." year: "2019 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 1, device_count: 1,
mounter_type: "Свердловский РПМ", mounter_type: "Свердловский РПМ",
year: "2022 г." year: "2022 г."
}, },
{ {
client_type: "Иные", client_type: "Иные",
device_count: 6, device_count: 6,
mounter_type: "Тихорецкий завод им Воровского", mounter_type: "Тихорецкий завод им Воровского",
year: "2019 г." year: "2019 г."
}, },
{ {
client_type: "Иные", client_type: "Иные",
device_count: 4, device_count: 4,
mounter_type: "Тихорецкий завод им Воровского", mounter_type: "Тихорецкий завод им Воровского",
year: "2023 г." year: "2023 г."
}, },
{ {
client_type: "Трансэнерго", client_type: "Трансэнерго",
device_count: 16, device_count: 16,
mounter_type: "ВНИИЖТ", mounter_type: "ВНИИЖТ",
year: "2016 г." year: "2016 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 5, device_count: 5,
mounter_type: "Пермский РПМ", mounter_type: "Пермский РПМ",
year: "2021 г." year: "2021 г."
}, },
{ {
client_type: null, client_type: null,
device_count: 1, device_count: 1,
mounter_type: "Инжиниринг Сервис-Путьмаш", mounter_type: "Инжиниринг Сервис-Путьмаш",
year: "2022 г." year: "2022 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 2, device_count: 2,
mounter_type: "КалугаРПМ", mounter_type: "КалугаРПМ",
year: "2022 г." year: "2022 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 4, device_count: 4,
mounter_type: "КалугаРПМ", mounter_type: "КалугаРПМ",
year: "2021 г." year: "2021 г."
}, },
{ {
client_type: "ЦДРП", client_type: "ЦДРП",
device_count: 2, device_count: 2,
mounter_type: "Калугапутьмаш", mounter_type: "Калугапутьмаш",
year: "2023 г." year: "2023 г."
}, },
{ {
client_type: "ЦДРП", client_type: "ЦДРП",
device_count: 80, device_count: 80,
mounter_type: "Калугапутьмаш", mounter_type: "Калугапутьмаш",
year: "2021 г." year: "2021 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 2, device_count: 2,
mounter_type: "КалугаРПМ", mounter_type: "КалугаРПМ",
year: "2023 г." year: "2023 г."
}, },
{ {
client_type: "ЦДРП", client_type: "ЦДРП",
device_count: 8, device_count: 8,
mounter_type: "Тулажелдормаш", mounter_type: "Тулажелдормаш",
year: "2021 г." year: "2021 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 20, device_count: 20,
mounter_type: "Свердловский РПМ", mounter_type: "Свердловский РПМ",
year: "2019 г." year: "2019 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 4, device_count: 4,
mounter_type: "Тихорецкий завод им Воровского", mounter_type: "Тихорецкий завод им Воровского",
year: "2022 г." year: "2022 г."
}, },
{ {
client_type: "Трансэнерго", client_type: "Трансэнерго",
device_count: 1, device_count: 1,
mounter_type: "ВНИИЖТ", mounter_type: "ВНИИЖТ",
year: "2022 г." year: "2022 г."
}, },
{ {
client_type: "Иные", client_type: "Иные",
device_count: 2, device_count: 2,
mounter_type: "ВНИИЖТ", mounter_type: "ВНИИЖТ",
year: "2017 г." year: "2017 г."
}, },
{ {
client_type: "ЦДРП", client_type: "ЦДРП",
device_count: 1, device_count: 1,
mounter_type: "Калугапутьмаш", mounter_type: "Калугапутьмаш",
year: "2016 г." year: "2016 г."
}, },
{ {
client_type: "ЦДРП", client_type: "ЦДРП",
device_count: 181, device_count: 181,
mounter_type: "ВНИИЖТ", mounter_type: "ВНИИЖТ",
year: "2023 г." year: "2023 г."
}, },
{ {
client_type: "ЦДРП", client_type: "ЦДРП",
device_count: 100, device_count: 100,
mounter_type: "Калугапутьмаш", mounter_type: "Калугапутьмаш",
year: "2020 г." year: "2020 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 76, device_count: 76,
mounter_type: "ВНИИЖТ", mounter_type: "ВНИИЖТ",
year: "2016 г." year: "2016 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 29, device_count: 29,
mounter_type: "Свердловский РПМ", mounter_type: "Свердловский РПМ",
year: "2018 г." year: "2018 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 4, device_count: 4,
mounter_type: "Калугапутьмаш", mounter_type: "Калугапутьмаш",
year: "2021 г." year: "2021 г."
}, },
{ {
client_type: null, client_type: null,
device_count: 1, device_count: 1,
mounter_type: "ВНИИЖТ", mounter_type: "ВНИИЖТ",
year: "2020 г." year: "2020 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 5, device_count: 5,
mounter_type: "Тихорецкий завод им Воровского", mounter_type: "Тихорецкий завод им Воровского",
year: "2021 г." year: "2021 г."
}, },
{ {
client_type: "Иные", client_type: "Иные",
device_count: 25, device_count: 25,
mounter_type: "Тихорецкий завод им Воровского", mounter_type: "Тихорецкий завод им Воровского",
year: "2020 г." year: "2020 г."
}, },
{ {
client_type: "ЦДРП", client_type: "ЦДРП",
device_count: 15, device_count: 15,
mounter_type: "Тулажелдормаш", mounter_type: "Тулажелдормаш",
year: "2019 г." year: "2019 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 4, device_count: 4,
mounter_type: "Инжиниринг Сервис-Путьмаш", mounter_type: "Инжиниринг Сервис-Путьмаш",
year: "2023 г." year: "2023 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 2, device_count: 2,
mounter_type: "Калугапутьмаш", mounter_type: "Калугапутьмаш",
year: "2019 г." year: "2019 г."
}, },
{ {
client_type: "ЦДРП", client_type: "ЦДРП",
device_count: 1, device_count: 1,
mounter_type: "ВНИИЖТ", mounter_type: "ВНИИЖТ",
year: "2022 г." year: "2022 г."
}, },
{ {
client_type: "ЦДРП", client_type: "ЦДРП",
device_count: 3, device_count: 3,
mounter_type: "Кировский машзавод", mounter_type: "Кировский машзавод",
year: "2023 г." year: "2023 г."
}, },
{ {
client_type: "ЦДРП", client_type: "ЦДРП",
device_count: 26, device_count: 26,
mounter_type: "Тулажелдормаш", mounter_type: "Тулажелдормаш",
year: "2020 г." year: "2020 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 3, device_count: 3,
mounter_type: "Тихорецкий завод им Воровского", mounter_type: "Тихорецкий завод им Воровского",
year: "2023 г." year: "2023 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 16, device_count: 16,
mounter_type: "КалугаРПМ", mounter_type: "КалугаРПМ",
year: "2019 г." year: "2019 г."
}, },
] ]
@ -2366,11 +2366,11 @@ const multiReport = {
} }
], ],
diagExcludeSps: [993, 1062, 3078, 1136, 1109, 1618, 1085, 2936, 1669, 1045, diagExcludeSps: [993, 1062, 3078, 1136, 1109, 1618, 1085, 2936, 1669, 1045,
1739, 1525, 1869, 1461, 1843, 928, 1940, 1907, 1482, 1870, 1813, 1131, 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, 1133, 1515, 1800, 2151, 1833, 1068, 1110, 1000, 2904, 926, 2964, 917, 2903,
1743, 1738, 1469, 2902, 1478, 999, 1801, 1742, 1139, 1141, 1842, ], 1743, 1738, 1469, 2902, 1478, 999, 1801, 1742, 1139, 1141, 1842, ],
diagTables: ["as", "dsp", "dyn", "mpt", "pmg", "rpb", "rs", "schom", "sm", diagTables: ["as", "dsp", "dyn", "mpt", "pmg", "rpb", "rs", "schom", "sm",
"uk", "uni", "utm", "vpo", ""], "uk", "uni", "utm", "vpo", ""],
id: 197, id: 197,
insertedAt: "2023-03-15 06:27:41", insertedAt: "2023-03-15 06:27:41",
isProd: true, isProd: true,
@ -2423,7 +2423,7 @@ const multiReport = {
const multiPackStructure = [ const multiPackStructure = [
// %LiveMonitor.Packages.Models.PackStruct{ // %LiveMonitor.Packages.Models.PackStruct{
// __meta__: #Ecto.Schema.Metadata<:loaded, "pack_struct">, // __meta__: #Ecto.Schema.Metadata<:loaded, "pack_struct">,
{ {
id: 197, id: 197,
description: null, description: null,
@ -2523,7 +2523,7 @@ const multiPackStructure = [
} }
], ],
diag_tables: ["as", "dsp", "dyn", "mpt", "pmg", "rpb", "rs", "schom", "sm", diag_tables: ["as", "dsp", "dyn", "mpt", "pmg", "rpb", "rs", "schom", "sm",
"uk", "uni", "utm", "vpo", ""], "uk", "uni", "utm", "vpo", ""],
diag_exclude_tables: null, diag_exclude_tables: null,
diag_classifications: null, diag_classifications: null,
diag_types: null, diag_types: null,
@ -2531,9 +2531,9 @@ const multiPackStructure = [
diag_exclude_classifications: null, diag_exclude_classifications: null,
diag_exclude_types: null, diag_exclude_types: null,
diag_exclude_sps: [993, 1062, 3078, 1136, 1109, 1618, 1085, 2936, 1669, diag_exclude_sps: [993, 1062, 3078, 1136, 1109, 1618, 1085, 2936, 1669,
1045, 1739, 1525, 1869, 1461, 1843, 928, 1940, 1907, 1482, 1870, 1813, 1045, 1739, 1525, 1869, 1461, 1843, 928, 1940, 1907, 1482, 1870, 1813,
1131, 1133, 1515, 1800, 2151, 1833, 1068, 1110, 1000, 2904, 926, 2964, 1131, 1133, 1515, 1800, 2151, 1833, 1068, 1110, 1000, 2904, 926, 2964,
], ],
pack_group_id: 28, pack_group_id: 28,
// pack_group: #Ecto.Association.NotLoaded<association :pack_group is not loaded>, // pack_group: #Ecto.Association.NotLoaded<association :pack_group is not loaded>,
inserted_at: "2023-03-15 06:27:41", inserted_at: "2023-03-15 06:27:41",
@ -2838,8 +2838,8 @@ const multiPackStructure = [
diag_classifications: null, diag_classifications: null,
diag_types: null, diag_types: null,
diag_sps: [993, 1062, 3078, 1136, 1109, 1618, 1085, 2936, 1669, 1045, 1739, 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, 1525, 1869, 1461, 1843, 928, 1940, 1907, 1482, 1870, 1813, 1131, 1133,
1515, 1800, 2151, 1833, 1068, 1110, 1000, 2904, 926, 2964, 917, ], 1515, 1800, 2151, 1833, 1068, 1110, 1000, 2904, 926, 2964, 917, ],
diag_exclude_classifications: null, diag_exclude_classifications: null,
diag_exclude_types: null, diag_exclude_types: null,
diag_exclude_sps: 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) // console.log('updSelects', updatedSelects)
const filteredSelects = updatedSelects.map((el) => ({...el, data: el.data.reduce((acc, select) => { const filteredSelects = updatedSelects.map((el) => ({...el, data: el.data.reduce((acc, select) => {
if (select) { if (select) {
const newSelect = {name: select} const newSelect = {name: select}
acc = [...acc, newSelect] acc = [...acc, newSelect]
} else { } else {
acc acc
} }
return acc return acc
}, []) }, [])
})).sort((a, b) => a.order - b.order) })).sort((a, b) => a.order - b.order)
// console.log('filteredSelects', filteredSelects) // console.log('filteredSelects', filteredSelects)
return 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 { chartsFilterParams, chartsGroupByParams, chartsGroupByParams2, chartsFilterKeysMl, chartsMountParams, chartsBarTypesParams, chartsBarTypesGroupByParams, chartsBarTypesWithoutLayoutParams } from "./StaticData"
import {cond, uniq, has, T} from 'ramda' import {cond, uniq, has, T} from 'ramda'
const setPeriodCharts = (filterKeys) => { const setPeriodCharts = (filterKeys) => {
if (typeof filterKeys === 'array') return {period: 'dayly', title: '24 часа'} if (typeof filterKeys === 'array') return {period: 'dayly', title: '24 часа'}
switch(filterKeys) { switch(filterKeys) {
case 'commun': return {period: 'yearly', title: "год"} case 'commun': return {period: 'yearly', title: "год"}
case 'rors': return {period: 'dayly', title: "на данный момент"} case 'rors': return {period: 'dayly', title: "на данный момент"}
case 'routes': return {period: 'weekly', title: "две недели"} case 'routes': return {period: 'weekly', title: "две недели"}
default: return {period: 'dayly', 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) => { const setFilterValues = (machineValue, filterParams) => {
if (!filterKey) return null if(filterParams.values.includes(machineValue.toLowerCase())) {
switch(filterKey) { return {name: machineValue}
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) => { const setCountMachinesMl = (arr, counter = 0) => {
if (typeId) { return arr.reduce((acc, item) => {
switch(typeId) { if (item && item.length > 0) {
case 'mpt_types': return 'МРТ' return setCountMachinesMl(item, acc)
case 'gdsm_types': return 'ЖДСМ' } else {
case 'sm_pss_types': return 'СМ' if (item.charts?.value) {
default: return '' acc = acc + item.charts?.value
}
}
}
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))
} else { } else {
acc acc
} }
return acc }
}, []) return acc
}, counter)
}
// const isFilteredMachine = machines.find((el) => filterParams.values.includes(el.name.toLowerCase())) /* Charts updated data */
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 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 = data?.length
const countMachines = filteredGroupByParams?.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]) { if (machine[filterParams.filterKey]) {
acc.push(setFilterValues(machine[filterParams.filterKey], filterParams)) acc.push(setFilterValues(machine[filterParams.filterKey], filterParams))
} else { } else {
acc acc
} }
return acc return acc
}, []) }, [])
const filteredMachines = machines.reduce((acc, machine) => { const filteredMachines = machines.reduce((acc, machine) => {
if (filterParams.values.includes(machine.name.toLowerCase())) { if (filterParams.values.includes(machine.name.toLowerCase())) {
const count = machines.filter((el) => el.name === machine.name).length const count = machines.filter((el) => el.name === machine.name).length
const filteredMachines = {name: machine.name, value: count} const filteredMachines = {name: machine.name, value: count}
acc = uniq([...acc, filteredMachines]) 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 { } else {
acc acc
} }
return acc return acc
}, []) }, [])
return {countMachines: countMachines, period: setPeriodCharts(filterParams.filterKey).title, machines: filteredMachines} const count = filteredWithMl.reduce((acc, machine) => {
} acc = acc + parseFloat(machine[filterKey])
return acc
const chartsBarGroupedByMl = (data, filterKeysMl) => { }, 0)
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)
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) => { const countMachinesWithMl = Math.floor((machinesWithMl.reduce((acc, machine) => {
return acc + machine.machinesCount return acc + machine.machinesCount
}, 0)) / filterKeysMl.length) }, 0)) / filterKeysMl.length)
const machinesWithoutMl = filterKeysMl.map((filterKey) => { const machinesWithoutMl = filterKeysMl.map((filterKey) => {
const countNull = data.reduce((acc, machine) => { const countNull = data.reduce((acc, machine) => {
if (machine[filterKey] === null) { if (machine[filterKey] === null) {
acc = acc + 1 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 { } else {
acc acc
} }
return acc return acc
}, 0) }, 0)
return {key: filterKey, value: countNull} const machinesWithoutMl = val.filter((el) => el[filterKey] === null).length
return {machinesWithMl: machinesWithMl, machinesWithoutMl: machinesWithoutMl}
}) })
// console.log('allValuesArr', allValuesArr)
// console.log('machinesWithoutMl', machinesWithoutMl) const countMachinesWithMl = allValuesArr.reduce((acc, count) => (acc + count.machinesWithMl), 0)
const countMachinesWithoutMl = allValuesArr.reduce((acc, count) => (acc + count.machinesWithoutMl), 0) / filterKeys.length // Для исключения дублирования делим н а длину filterKeys
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
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]) => { const machinesWithoutMl = Object.entries(groupByData).map(([key, val]) => {
return filterKeys.map((filterKey) => { const countWithoutMl = val.filter((el) => filterKeys.find((filterKey) => el[filterKey] === null)).length
const groupByFilterData = Object.groupBy(groupArr, (el) => el[filterKey]) 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 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 countMachinesWithMl = setCountMachinesMl(xAxisData)
const countWithoutMl = val.filter((el) => filterKeys.find((filterKey) => el[filterKey] === null)).length const countMachinesWithoutMl = Math.floor(setCountMachinesMl(machinesWithoutMl)) / filterKeys.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 updatedXAxisData = xAxisData.reduce((acc, group) => {
const countMachinesWithoutMl = Math.floor(setCountMachinesMl(machinesWithoutMl)) / filterKeys.length 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) => { // console.log('updatedXAxisData', updatedXAxisData)
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) 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('dataPie', chartsPie(data, chartsFilterParams[0]))
// console.log('dataPieValue', chartsPieGroupByValue(data, chartsGroupByParams[0], chartsFilterParams[0])) // console.log('dataPieValue', chartsPieGroupByValue(data, chartsGroupByParams[0], chartsFilterParams[0]))
// console.log('dataPieTypes', chartsPieGroupedBy(data, chartsGroupByParams2[0], chartsFilterParams[0])) // console.log('dataPieTypes', chartsPieGroupedBy(data, chartsGroupByParams2[0], chartsFilterParams[0]))
// console.log('dataBarMl', chartsBarGroupedByMl(data, chartsFilterKeysMl)) // console.log('dataBarMl', chartsBarGroupedByMl(data, chartsFilterKeysMl))
// console.log('dataBarMount', chartsBarMount(dataMount, 'year', 'client_type', 'device_count')) // console.log('dataBarMount', chartsBarMount(dataMount, 'year', 'client_type', 'device_count'))
// console.log('chartsBarTypesGroupedByMl', chartsBarTypesGroupedByMl(data, 'org_type_name', chartsFilterKeysMl, {}, {})) // console.log('chartsBarTypesGroupedByMl', chartsBarTypesGroupedByMl(data, 'org_type_name', chartsFilterKeysMl, {}, {}))
const filteredPie = chartsFilterParams.reduce((acc, param) => { const filteredPie = chartsFilterParams.reduce((acc, param) => {
const idChart = `${param.filterKey}_pie` const idChart = `${param.filterKey}_pie`
return {...acc, [idChart]: chartsPie(data, param)}}, {}) // Далее объединение всех типов графиков return {...acc, [idChart]: chartsPie(data, param)}}, {}) // Далее объединение всех типов графиков
const filteredPieGroupByValue = chartsGroupByParams.reduce((acc, param) => { const filteredPieGroupByValue = chartsGroupByParams.reduce((acc, param) => {
const idChart = `${chartsFilterParams[0].filterKey}_pie_${param.valueId}` const idChart = `${chartsFilterParams[0].filterKey}_pie_${param.valueId}`
return {...acc, [idChart]: chartsPieGroupedBy(data, param, chartsFilterParams[0])}}, {}) return {...acc, [idChart]: chartsPieGroupedBy(data, param, chartsFilterParams[0])}}, {})
const filteredPieGroupByTypes = chartsGroupByParams2.reduce((acc, param) => { const filteredPieGroupByTypes = chartsGroupByParams2.reduce((acc, param) => {
const idChart = `${chartsFilterParams[0].filterKey}_pie_${param.valueId}` const idChart = `${chartsFilterParams[0].filterKey}_pie_${param.valueId}`
return {...acc, [idChart]: chartsPieGroupedBy(data, param, chartsFilterParams[0])}}, {}) 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 filteredBarMount = chartsMountParams.reduce((acc, param) => {
const idChart = `mount_${param.filterKey}_bar` const idChart = `mount_${param.filterKey}_bar`
return {...acc, [idChart]: chartsBarMount(dataMount, param.groupByKey, param.filterKey, param.countKey)}}, {}) return {...acc, [idChart]: chartsBarMount(dataMount, param.groupByKey, param.filterKey, param.countKey)}}, {})
const filteredBarTypes = chartsBarTypesParams.reduce((acc, param) => { const filteredBarTypes = chartsBarTypesParams.reduce((acc, param) => {
const idChart = `${param.filterKey}_${param.valueId}_bar` const idChart = `${param.filterKey}_${param.valueId}_bar`
return {...acc, [idChart]: chartsBarTypes(data, param.groupByKey, param.filterKey, prevGroupByData, prevGroupByFilters)}}, {}) return {...acc, [idChart]: chartsBarTypes(data, param.groupByKey, param.filterKey, prevGroupByData, prevGroupByFilters)}}, {})
const filteredBarGroupByTypes = chartsBarTypesGroupByParams.reduce((acc, param) => { const filteredBarGroupByTypes = chartsBarTypesGroupByParams.reduce((acc, param) => {
const idChart = `${param.filterKey}_${param.valueId}_bar_${param.typeId}` const idChart = `${param.filterKey}_${param.valueId}_bar_${param.typeId}`
return {...acc, [idChart]: chartsBarTypesGroupedBy(data, param.groupByKey, param.filterKey, prevGroupByData, prevGroupByFilters, param.typeId)}}, {}) return {...acc, [idChart]: chartsBarTypesGroupedBy(data, param.groupByKey, param.filterKey, prevGroupByData, prevGroupByFilters, param.typeId)}}, {})
const filteredBarWithoutLayoutTypes = chartsBarTypesWithoutLayoutParams.reduce((acc, param) => { const filteredBarWithoutLayoutTypes = chartsBarTypesWithoutLayoutParams.reduce((acc, param) => {
const idChart = `${param.filterKey}_types_bar_${param.valueId}` const idChart = `${param.filterKey}_types_bar_${param.valueId}`
return {...acc, [idChart]: chartsBarTypesWithoutFirstLayout(data, param.groupByKey, param.filterKey, prevGroupByData, prevGroupByFilters, param.groupByValue)}}, {}) 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) // console.log('this.charts', data)
const main = chartsSetup.main.reduce((acc, chart) => { const main = chartsSetup.main.reduce((acc, chart) => {
if (allCharts[chart.id]) { if (allCharts[chart.id]) {
const newChart = {...chart, data: allCharts[chart.id]} const newChart = {...chart, data: allCharts[chart.id]}
acc = [...acc, newChart] acc = [...acc, newChart]
} else { } else {
acc 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
} }
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) => { const setNextLayoutGroupByKey = (groupByKey, prevGroupByValue) => {
if (prevGroupByValue === 'без типа') return null if (prevGroupByValue === 'без типа') return null
switch (groupByKey) { switch (groupByKey) {
case 'org_type_name': return 'railway_name' case 'org_type_name': return 'railway_name'
case 'railway_name': return 'org_name' case 'railway_name': return 'org_name'
case 'org_name': return 'type' case 'org_name': return 'type'
case 'type': return 'machine_type' case 'type': return 'machine_type'
case 'zav_nomer': return 'machine_type' case 'zav_nomer': return 'machine_type'
default: return null default: return null
}
} }
}
const setBeforeLayoutGroupByData = (prevGroupByData, prevGroupByFilters, type) => { const setBeforeLayoutGroupByData = (prevGroupByData, prevGroupByFilters, type) => {
return cond([ return cond([
[has('type'), () => ({org_name: prevGroupByFilters['org_name']})], [has('type'), () => ({org_name: prevGroupByFilters['org_name']})],
[has('org_name'), () => ({railway_name: prevGroupByFilters['railway_name']})], [has('org_name'), () => ({railway_name: prevGroupByFilters['railway_name']})],
[has('railway_name'), () => (type === 'without_first_layout' ? {} : {org_type_name: prevGroupByFilters['org_type_name']})], [has('railway_name'), () => (type === 'without_first_layout' ? {} : {org_type_name: prevGroupByFilters['org_type_name']})],
[T, () => {}], [T, () => {}],
])(prevGroupByData) ])(prevGroupByData)
}
const typesCharts = (type) => {
switch (type) {
case 'pie': return true
case 'mount': return true
case 'mainMl': return true
default: return false
} }
}
const typesCharts = (type) => { export { loadingChartsData, setBarTypesChart, setNextLayoutGroupByKey, setBeforeLayoutGroupByData, typesCharts }
switch (type) {
case 'pie': return true
case 'mount': return true
case 'mainMl': return true
default: return false
}
}
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 break
} }
if (updatedSelect.key === 'removed' && newSelected && (selectedSelects[curSelect.key] && selectedSelects[curSelect.key].length > 0)) { 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 break
} }
if (updatedSelect.key === 'set' && newSelected && (selectedSelects[curSelect.key] && selectedSelects[curSelect.key].length > 0)) { 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) => { updateCharts: async ({commit, getters, state}, updatedData) => {
try { try {
switch(updatedData.action) { switch(updatedData.action) {
case 'nextLayoutChart': case 'nextLayoutChart':
// console.log('updatedDataNext', updatedData) // console.log('updatedDataNext', updatedData)
const prevGroupByFiltersNext = updatedData.prevGroupByFilters const prevGroupByFiltersNext = updatedData.prevGroupByFilters
const updatedFiltersNext = {...prevGroupByFiltersNext, ...updatedData.prevGroupByData} const updatedFiltersNext = {...prevGroupByFiltersNext, ...updatedData.prevGroupByData}
const prevGroupByValue = updatedData.prevGroupByData.type ? updatedData.prevGroupByData.type : null const prevGroupByValue = updatedData.prevGroupByData.type ? updatedData.prevGroupByData.type : null
const groupByKeyNext = setNextLayoutGroupByKey(updatedData.groupByKey, prevGroupByValue) const groupByKeyNext = setNextLayoutGroupByKey(updatedData.groupByKey, prevGroupByValue)
if (groupByKeyNext) { if (groupByKeyNext) {
const activeChartData = {id: updatedData.id, data: updatedData.data, groupByKey: groupByKeyNext, filterKey: updatedData.filterKey, type: updatedData.type, groupByValue: updatedData.groupByValue} 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)) const newData = setBarTypesChart(activeChartData, updatedData.prevGroupByData, updatedFiltersNext, state.machinesDataDefault, toRaw(state.chartsData))
return commit('setActiveChartData', {...activeChartData, data: newData}) return commit('setActiveChartData', {...activeChartData, data: newData})
} }
break break
case 'beforeLayoutChart': case 'beforeLayoutChart':
// console.log('updatedDataBefore', updatedData) // console.log('updatedDataBefore', updatedData)
const prevGroupByData = updatedData.groupByInfo.prevGroupByData const prevGroupByData = updatedData.groupByInfo.prevGroupByData
const prevGroupByFiltersBefore = updatedData.groupByInfo.prevGroupByFilters const prevGroupByFiltersBefore = updatedData.groupByInfo.prevGroupByFilters
const groupByKeyBefore = Object.keys(prevGroupByData)[0] // Получаем уже предыдущее значение ключа const groupByKeyBefore = Object.keys(prevGroupByData)[0] // Получаем уже предыдущее значение ключа
delete prevGroupByFiltersBefore[groupByKeyBefore] // Удаляем значение после вычисления prevGroupByData, так как подымаемся на уровень выше, сохраняя актуальное значение для фильтрации delete prevGroupByFiltersBefore[groupByKeyBefore] // Удаляем значение после вычисления prevGroupByData, так как подымаемся на уровень выше, сохраняя актуальное значение для фильтрации
const isOnlyFiltersParams = equals(prevGroupByData, prevGroupByFiltersBefore) const isOnlyFiltersParams = equals(prevGroupByData, prevGroupByFiltersBefore)
const updatedPrevGroupByDataBefore = isOnlyFiltersParams ? {} : setBeforeLayoutGroupByData(prevGroupByData, prevGroupByFiltersBefore, updatedData.groupByInfo.type) const updatedPrevGroupByDataBefore = isOnlyFiltersParams ? {} : setBeforeLayoutGroupByData(prevGroupByData, prevGroupByFiltersBefore, updatedData.groupByInfo.type)
if (groupByKeyBefore) { if (groupByKeyBefore) {
const activeChartData = {id: updatedData.id, data: updatedData.data, groupByKey: groupByKeyBefore, filterKey: updatedData.filterKey, type: updatedData.groupByInfo.type, groupByValue: updatedData.groupByInfo.groupByValue} 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)) const newData = setBarTypesChart(activeChartData, updatedPrevGroupByDataBefore, prevGroupByFiltersBefore, state.machinesDataDefault, toRaw(state.chartsData))
return commit('setActiveChartData', {...activeChartData, data: newData}) return commit('setActiveChartData', {...activeChartData, data: newData})
} }
break break
case 'openMenuChart': case 'openMenuChart':
// console.log('updatedDataOpen', updatedData) // console.log('updatedDataOpen', updatedData)
const openMenuChart = toRaw(state.activeMenuChartData.openMenuChart) const openMenuChart = toRaw(state.activeMenuChartData.openMenuChart)
updatedData.groupByInfo.data[0].type = updatedData.groupByInfo.type 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 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 newDataMenu = setBarTypesChart(activeChartDataMenu, updatedData.groupByInfo.prevGroupByData, updatedData.groupByInfo.prevGroupByFilters, state.machinesDataDefault, toRaw(state.chartsData))
const isNotTypesChartsMenu = typesCharts(updatedData.groupByInfo.type) const isNotTypesChartsMenu = typesCharts(updatedData.groupByInfo.type)
const toggleActiveMenuChartData = {openMenuChart: !openMenuChart, groupByInfo: {...activeChartDataMenu, data: isNotTypesChartsMenu ? updatedData.groupByInfo.data[0] : newDataMenu}} const toggleActiveMenuChartData = {openMenuChart: !openMenuChart, groupByInfo: {...activeChartDataMenu, data: isNotTypesChartsMenu ? updatedData.groupByInfo.data[0] : newDataMenu}}
commit('setActiveMenuChartData', toggleActiveMenuChartData) commit('setActiveMenuChartData', toggleActiveMenuChartData)
break break
case 'downloadChart': case 'downloadChart':
// console.log('updatedDataDownload', updatedData) // 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 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 newDataDownload = setBarTypesChart(activeChartDataDownload, updatedData.groupByInfo.prevGroupByData, updatedData.groupByInfo.prevGroupByFilters, state.machinesDataDefault, toRaw(state.chartsData))
const isNotTypesChartsDownload = typesCharts(updatedData.groupByInfo.type) const isNotTypesChartsDownload = typesCharts(updatedData.groupByInfo.type)
const downloadActiveMenuChartData = {openMenuChart: false, groupByInfo: {...updatedData.groupByInfo, data: isNotTypesChartsDownload ? updatedData.groupByInfo.data[0] : newDataDownload}} const downloadActiveMenuChartData = {openMenuChart: false, groupByInfo: {...updatedData.groupByInfo, data: isNotTypesChartsDownload ? updatedData.groupByInfo.data[0] : newDataDownload}}
commit('setActiveMenuChartData', downloadActiveMenuChartData) commit('setActiveMenuChartData', downloadActiveMenuChartData)
break break
case 'legendFiltersParams': case 'legendFiltersParams':
commit('setLegendFiltersParams', updatedData.data) commit('setLegendFiltersParams', updatedData.data)
default: return false default: return false
} }
} catch (err) { } catch (err) {
console.error(err) console.error(err)

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

@ -32,39 +32,39 @@ const pagination = {
const selectors = { const selectors = {
org_name: ["ПЧМ Воронеж", "ПЧМ Фаянсовая", org_name: ["ПЧМ Воронеж", "ПЧМ Фаянсовая",
"ПЧМ Топки", "ПЧМ Кочетовка", "ПЧР КЛНГ", "ПЧМ Топки", "ПЧМ Кочетовка", "ПЧР КЛНГ",
"ПЧМ Нижний Новгород", "ПЧМ Новосибирск", "ПЧМ Нижний Новгород", "ПЧМ Новосибирск",
"ПЧМ Екатеринбург", "ПЧМ Омск", "ПЧМ Алтай", "ПЧМ Екатеринбург", "ПЧМ Омск", "ПЧМ Алтай",
"ПЧМ Тосно", "ПЧМ Вязьма", "ПМС-46", "ПМС-183", "ПЧМ Тосно", "ПЧМ Вязьма", "ПМС-46", "ПМС-183",
"ПЧМ Тихорецк", "ПЧМ Сызрань", "ПЧМ Тихорецк", "ПЧМ Сызрань",
"ПЧМ Хабаровск", null, "ПЧМ Северобайкальск", "ПЧМ Хабаровск", null, "ПЧМ Северобайкальск",
"ПЧМ Смолино", "ПЧМ Вологда", "ПЧМ Пермь", "ПЧМ Смолино", "ПЧМ Вологда", "ПЧМ Пермь",
"ПЧМ Астрахань", "ПЧМ Нигозеро", "ПЧМ Астрахань", "ПЧМ Нигозеро",
"ПЧМ Челябинск", "ПЧМ Завитая", "ПМС-217", "ПЧМ Челябинск", "ПЧМ Завитая", "ПМС-217",
"ПМС-199", "ПМС-31", "ТрансЭнерго", "ПМС-340", "ПМС-199", "ПМС-31", "ТрансЭнерго", "ПМС-340",
"ОПМС-99", "ПМС-11", "ПМС-77", "ПМС-208", "ПМС-172", "ОПМС-99", "ПМС-11", "ПМС-77", "ПМС-208", "ПМС-172",
"ПМС-12", "ПМС-22", "ПМС-12", "ПМС-22",
"Экспулуатация БУ прекращена", "ОПМС-68", "Экспулуатация БУ прекращена", "ОПМС-68",
"ПМС-170", "ОПМС-103", "ПМС-205", "ПМС-152", "ПМС-20", "ПМС-170", "ОПМС-103", "ПМС-205", "ПМС-152", "ПМС-20",
"ПЧМ Тында", "КалугаПутьМаш", "ПЧМ Тында", "КалугаПутьМаш",
"ПЧМ Санкт-Петербург", "ПЧМ Красноярск"], "ПЧМ Санкт-Петербург", "ПЧМ Красноярск"],
org_type_name: ["ЦДИМ", "Другие", "ЦДРП"], org_type_name: ["ЦДИМ", "Другие", "ЦДРП"],
railway_name: ["Ю-Вост", "Моск", "З-Сиб", "Клг", "Горьк", railway_name: ["Ю-Вост", "Моск", "З-Сиб", "Клг", "Горьк",
"Сверд", "Окт", "Заб", "В-Сиб", "С-Кав", "Кбш", "Сверд", "Окт", "Заб", "В-Сиб", "С-Кав", "Кбш",
"Д-Вост", null, "Ю-Ур", "Сев", "Прив", "РЖД", "Крас"], "Д-Вост", null, "Ю-Ур", "Сев", "Прив", "РЖД", "Крас"],
type: ["УТМ", "РПБ", "ПРЛ УПК", "ПУМА", "МДС", "МПТ", type: ["УТМ", "РПБ", "ПРЛ УПК", "ПУМА", "МДС", "МПТ",
"ТЭС", "СПП", "ДСП", "СЧ", "ЩОМ", "RM", "АСГ", "ВПО", "ТЭС", "СПП", "ДСП", "СЧ", "ЩОМ", "RM", "АСГ", "ВПО",
"без типа", "ПМГ", "МТГ", "АС", "СМ", "ВПР", "ПСС", "без типа", "ПМГ", "МТГ", "АС", "СМ", "ВПР", "ПСС",
"МПК", "АДМ", "АГД", "УК", "АМ", "ПРЛ", "АДЭ", "МПК", "АДМ", "АГД", "УК", "АМ", "ПРЛ", "АДЭ",
"Унимат", "ВПРС", "ПБ", "Дуоматик", "МВУ", "Унимат", "ВПРС", "ПБ", "Дуоматик", "МВУ",
"АВФ-1М.2", "Динамик", "АГС", "ПМА", "ССГ-1", "СЧУ", "АВФ-1М.2", "Динамик", "АГС", "ПМА", "ССГ-1", "СЧУ",
"АГП", "Унимат компакт", "ДГКу", "СЗ", "ТЭУ", "АГП", "Унимат компакт", "ДГКу", "СЗ", "ТЭУ",
"РБ", "ФАТРА",], "РБ", "ФАТРА",],
zav_nomer: ["84", "49", "15", "90", "27", "9", "5", "105", "005", "656", zav_nomer: ["84", "49", "15", "90", "27", "9", "5", "105", "005", "656",
"001", "39", "38", "57", "03", "003", "593", "235", "1453", "1307", "766", "001", "39", "38", "57", "03", "003", "593", "235", "1453", "1307", "766",
"528", "485", "02", "752", "704", "584", "669", "261", "482", "762", "985", "528", "485", "02", "752", "704", "584", "669", "261", "482", "762", "985",
"605", "016", "1258", "729", "963", "927", "319", "1154", "1163", "825", "605", "016", "1258", "729", "963", "927", "319", "1154", "1163", "825",
"1276", "1062", "1025",] "1276", "1062", "1025",]
} }
@ -245,163 +245,163 @@ const chartsBarTypesWithoutLayoutParams = [{groupByKey: 'railway_name', filterKe
const charts = { const charts = {
pie: { pie: {
countMachines: 4790, countMachines: 4790,
period: 'две недели', period: 'две недели',
machines: [ machines: [
{ name: "Есть МЛ, выходил на связь", value: 1048, color: "rgb(134, 212, 131, 1)", order: 1 }, { 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: 2 },
{ name: "Нет МЛ, выходил на связь", value: 1048, color: "rgb(134, 212, 131, 1)", order: 3 }, { name: "Нет МЛ, выходил на связь", value: 1048, color: "rgb(134, 212, 131, 1)", order: 3 },
{ name: "Нет МЛ, нет связи", value: 1048, color: "rgb(134, 212, 131, 1)", order: 4 }, { name: "Нет МЛ, нет связи", value: 1048, color: "rgb(134, 212, 131, 1)", order: 4 },
]}, ]},
mainMl: { mainMl: {
countMachinesWithMl: 2916, countMachinesWithMl: 2916,
period: 'две недели', period: 'две недели',
machines: [ machines: [
{ key: "routes_common", name: "Обычные", value: 2182, itemStyle: {color: "rgb(134, 212, 131, 1)"}, order: 1 }, { 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_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_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_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_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 }, { key: "routes_without_ml", name: "СПС без МЛ", value: 3073, itemStyle: {color: "rgb(165, 165, 165, 1)"}, order: 6 },
]}, ]},
mount_mounter_type_bar: { mount_mounter_type_bar: {
chartId: "mount_mounter_type_bar", chartId: "mount_mounter_type_bar",
countMounts: 5436, countMounts: 5436,
filterKey: "mounter_type", filterKey: "mounter_type",
height: 500, height: 500,
type: "mount", type: "mount",
xAxisData: [ xAxisData: [
[ [
{ {
charts: [ charts: [
{name: "ВНИИЖТ", value: 92}, {name: "ВНИИЖТ", value: 92},
{name: "Калугапутьмаш", value: 1} {name: "Калугапутьмаш", value: 1}
], ],
totalCount: 3, totalCount: 3,
yAxisData: "2016 г." yAxisData: "2016 г."
}, },
{ {
charts: [ charts: [
{name: "ВНИИЖТ", value: 349}, {name: "ВНИИЖТ", value: 349},
{name: "КалугаРПМ", value: 9}, {name: "КалугаРПМ", value: 9},
{name: "Калугапутьмаш", value: 92}, {name: "Калугапутьмаш", value: 92},
{name: "Свердловский РПМ", value: 23}, {name: "Свердловский РПМ", value: 23},
{ {
name: "Тихорецкий завод им Воровского", name: "Тихорецкий завод им Воровского",
value: 26 value: 26
}, },
{name: "Тулажелдормаш", value: 8} {name: "Тулажелдормаш", value: 8}
], ],
totalCount: 9, totalCount: 9,
yAxisData: "2017 г." yAxisData: "2017 г."
}, },
{ {
charts: [ charts: [
{name: "ВНИИЖТ", value: 590}, {name: "ВНИИЖТ", value: 590},
{name: "КалугаРПМ", value: 7}, {name: "КалугаРПМ", value: 7},
{name: "Калугапутьмаш", value: 73}, {name: "Калугапутьмаш", value: 73},
{name: "Свердловский РПМ", value: 30}, {name: "Свердловский РПМ", value: 30},
{ {
name: "Тихорецкий завод им Воровского", name: "Тихорецкий завод им Воровского",
value: 23 value: 23
}, },
{name: "Тулажелдормаш", value: 32} {name: "Тулажелдормаш", value: 32}
], ],
totalCount: 11, totalCount: 11,
yAxisData: "2018 г." yAxisData: "2018 г."
}, },
{ {
charts: [ charts: [
{name: "ВНИИЖТ", value: 719}, {name: "ВНИИЖТ", value: 719},
{name: "КалугаРПМ", value: 16}, {name: "КалугаРПМ", value: 16},
{name: "Калугапутьмаш", value: 88}, {name: "Калугапутьмаш", value: 88},
{name: "Свердловский РПМ", value: 20}, {name: "Свердловский РПМ", value: 20},
{ {
name: "Тихорецкий завод им Воровского", name: "Тихорецкий завод им Воровского",
value: 33 value: 33
}, },
{name: "Тулажелдормаш", value: 24} {name: "Тулажелдормаш", value: 24}
], ],
totalCount: 12, totalCount: 12,
yAxisData: "2019 г." yAxisData: "2019 г."
}, },
{ {
charts: [ charts: [
{name: "ВНИИЖТ", value: 594}, {name: "ВНИИЖТ", value: 594},
{name: "КалугаРПМ", value: 18}, {name: "КалугаРПМ", value: 18},
{name: "Калугапутьмаш", value: 100}, {name: "Калугапутьмаш", value: 100},
{name: "Свердловский РПМ", value: 19}, {name: "Свердловский РПМ", value: 19},
{ {
name: "Тихорецкий завод им Воровского", name: "Тихорецкий завод им Воровского",
value: 36 value: 36
}, },
{name: "Тулажелдормаш", value: 31} {name: "Тулажелдормаш", value: 31}
], ],
totalCount: 9, totalCount: 9,
yAxisData: "2020 г." yAxisData: "2020 г."
}, },
{ {
charts: [ charts: [
{name: "ВНИИЖТ", value: 777}, {name: "ВНИИЖТ", value: 777},
{name: "Инжиниринг Сервис-Путьмаш", value: 10}, {name: "Инжиниринг Сервис-Путьмаш", value: 10},
{name: "КалугаРПМ", value: 5}, {name: "КалугаРПМ", value: 5},
{name: "Калугапутьмаш", value: 84}, {name: "Калугапутьмаш", value: 84},
{name: "Пермский РПМ", value: 5}, {name: "Пермский РПМ", value: 5},
{name: "Свердловский РПМ", value: 4}, {name: "Свердловский РПМ", value: 4},
{ {
name: "Тихорецкий завод им Воровского", name: "Тихорецкий завод им Воровского",
value: 14 value: 14
}, },
{name: "Тулажелдормаш", value: 28} {name: "Тулажелдормаш", value: 28}
], ],
totalCount: 12, totalCount: 12,
yAxisData: "2021 г." yAxisData: "2021 г."
}, },
{ {
charts: [ charts: [
{name: "ВНИИЖТ", value: 746}, {name: "ВНИИЖТ", value: 746},
{name: "Инжиниринг Сервис-Путьмаш", value: 10}, {name: "Инжиниринг Сервис-Путьмаш", value: 10},
{name: "КалугаРПМ", value: 4}, {name: "КалугаРПМ", value: 4},
{name: "Калугапутьмаш", value: 36}, {name: "Калугапутьмаш", value: 36},
{name: "Свердловский РПМ", value: 1}, {name: "Свердловский РПМ", value: 1},
{ {
name: "Тихорецкий завод им Воровского", name: "Тихорецкий завод им Воровского",
value: 5 value: 5
}, },
{name: "Тулажелдормаш", value: 20} {name: "Тулажелдормаш", value: 20}
], ],
totalCount: 15, totalCount: 15,
yAxisData: "2022 г." yAxisData: "2022 г."
}, },
{ {
charts: [ charts: [
{name: "ВНИИЖТ", value: 612}, {name: "ВНИИЖТ", value: 612},
{name: "Инжиниринг Сервис-Путьмаш", value: 4}, {name: "Инжиниринг Сервис-Путьмаш", value: 4},
{name: "КалугаРПМ", value: 3}, {name: "КалугаРПМ", value: 3},
{name: "Калугапутьмаш", value: 2}, {name: "Калугапутьмаш", value: 2},
{name: "Кировский машзавод", value: 3}, {name: "Кировский машзавод", value: 3},
{ {
name: "Тихорецкий завод им Воровского", name: "Тихорецкий завод им Воровского",
value: 7 value: 7
}, },
{name: "Тулажелдормаш", value: 6} {name: "Тулажелдормаш", value: 6}
], ],
totalCount: 10, totalCount: 10,
yAxisData: "2023 г." yAxisData: "2023 г."
} }
] ]
], ],
yAxisData: [ yAxisData: [
{key: "2016 г.", val: 93}, {key: "2016 г.", val: 93},
{key: "2017 г.", val: 507}, {key: "2017 г.", val: 507},
{key: "2018 г.", val: 755}, {key: "2018 г.", val: 755},
{key: "2019 г.", val: 900}, {key: "2019 г.", val: 900},
{key: "2020 г.", val: 797}, {key: "2020 г.", val: 797},
{key: "2021 г.", val: 927}, {key: "2021 г.", val: 927},
{key: "2022 г.", val: 818}, {key: "2022 г.", val: 818},
{key: "2023 г.", val: 637} {key: "2023 г.", val: 637}
]} ]}
} }
const dataMachines = [ const dataMachines = [
@ -1305,282 +1305,282 @@ const dataMachines = [
] ]
const dataMount = [ const dataMount = [
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 6, device_count: 6,
mounter_type: "Тулажелдормаш", mounter_type: "Тулажелдормаш",
year: "2023 г." year: "2023 г."
}, },
{ {
client_type: "Трансэнерго", client_type: "Трансэнерго",
device_count: 1, device_count: 1,
mounter_type: "ВНИИЖТ", mounter_type: "ВНИИЖТ",
year: "2018 г." year: "2018 г."
}, },
{ {
client_type: "ЦДРП", client_type: "ЦДРП",
device_count: 86, device_count: 86,
mounter_type: "Калугапутьмаш", mounter_type: "Калугапутьмаш",
year: "2019 г." year: "2019 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 593, device_count: 593,
mounter_type: "ВНИИЖТ", mounter_type: "ВНИИЖТ",
year: "2020 г." year: "2020 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 589, device_count: 589,
mounter_type: "ВНИИЖТ", mounter_type: "ВНИИЖТ",
year: "2018 г." year: "2018 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 12, device_count: 12,
mounter_type: "Тулажелдормаш", mounter_type: "Тулажелдормаш",
year: "2022 г." year: "2022 г."
}, },
{ {
client_type: "ЦДРП", client_type: "ЦДРП",
device_count: 8, device_count: 8,
mounter_type: "Тулажелдормаш", mounter_type: "Тулажелдормаш",
year: "2022 г." year: "2022 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 3, device_count: 3,
mounter_type: "Калугапутьмаш", mounter_type: "Калугапутьмаш",
year: "2018 г." year: "2018 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 347, device_count: 347,
mounter_type: "ВНИИЖТ", mounter_type: "ВНИИЖТ",
year: "2017 г." year: "2017 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 8, device_count: 8,
mounter_type: "Тулажелдормаш", mounter_type: "Тулажелдормаш",
year: "2017 г." year: "2017 г."
}, },
{ {
client_type: "ЦДРП", client_type: "ЦДРП",
device_count: 1, device_count: 1,
mounter_type: "КалугаРПМ", mounter_type: "КалугаРПМ",
year: "2021 г." year: "2021 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 7, device_count: 7,
mounter_type: "КалугаРПМ", mounter_type: "КалугаРПМ",
year: "2018 г." year: "2018 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 27, device_count: 27,
mounter_type: "Тихорецкий завод им Воровского", mounter_type: "Тихорецкий завод им Воровского",
year: "2019 г." year: "2019 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 1, device_count: 1,
mounter_type: "Свердловский РПМ", mounter_type: "Свердловский РПМ",
year: "2022 г." year: "2022 г."
}, },
{ {
client_type: "Иные", client_type: "Иные",
device_count: 6, device_count: 6,
mounter_type: "Тихорецкий завод им Воровского", mounter_type: "Тихорецкий завод им Воровского",
year: "2019 г." year: "2019 г."
}, },
{ {
client_type: "Иные", client_type: "Иные",
device_count: 4, device_count: 4,
mounter_type: "Тихорецкий завод им Воровского", mounter_type: "Тихорецкий завод им Воровского",
year: "2023 г." year: "2023 г."
}, },
{ {
client_type: "Трансэнерго", client_type: "Трансэнерго",
device_count: 16, device_count: 16,
mounter_type: "ВНИИЖТ", mounter_type: "ВНИИЖТ",
year: "2016 г." year: "2016 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 5, device_count: 5,
mounter_type: "Пермский РПМ", mounter_type: "Пермский РПМ",
year: "2021 г." year: "2021 г."
}, },
{ {
client_type: null, client_type: null,
device_count: 1, device_count: 1,
mounter_type: "Инжиниринг Сервис-Путьмаш", mounter_type: "Инжиниринг Сервис-Путьмаш",
year: "2022 г." year: "2022 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 2, device_count: 2,
mounter_type: "КалугаРПМ", mounter_type: "КалугаРПМ",
year: "2022 г." year: "2022 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 4, device_count: 4,
mounter_type: "КалугаРПМ", mounter_type: "КалугаРПМ",
year: "2021 г." year: "2021 г."
}, },
{ {
client_type: "ЦДРП", client_type: "ЦДРП",
device_count: 2, device_count: 2,
mounter_type: "Калугапутьмаш", mounter_type: "Калугапутьмаш",
year: "2023 г." year: "2023 г."
}, },
{ {
client_type: "ЦДРП", client_type: "ЦДРП",
device_count: 80, device_count: 80,
mounter_type: "Калугапутьмаш", mounter_type: "Калугапутьмаш",
year: "2021 г." year: "2021 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 2, device_count: 2,
mounter_type: "КалугаРПМ", mounter_type: "КалугаРПМ",
year: "2023 г." year: "2023 г."
}, },
{ {
client_type: "ЦДРП", client_type: "ЦДРП",
device_count: 8, device_count: 8,
mounter_type: "Тулажелдормаш", mounter_type: "Тулажелдормаш",
year: "2021 г." year: "2021 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 20, device_count: 20,
mounter_type: "Свердловский РПМ", mounter_type: "Свердловский РПМ",
year: "2019 г." year: "2019 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 4, device_count: 4,
mounter_type: "Тихорецкий завод им Воровского", mounter_type: "Тихорецкий завод им Воровского",
year: "2022 г." year: "2022 г."
}, },
{ {
client_type: "Трансэнерго", client_type: "Трансэнерго",
device_count: 1, device_count: 1,
mounter_type: "ВНИИЖТ", mounter_type: "ВНИИЖТ",
year: "2022 г." year: "2022 г."
}, },
{ {
client_type: "Иные", client_type: "Иные",
device_count: 2, device_count: 2,
mounter_type: "ВНИИЖТ", mounter_type: "ВНИИЖТ",
year: "2017 г." year: "2017 г."
}, },
{ {
client_type: "ЦДРП", client_type: "ЦДРП",
device_count: 1, device_count: 1,
mounter_type: "Калугапутьмаш", mounter_type: "Калугапутьмаш",
year: "2016 г." year: "2016 г."
}, },
{ {
client_type: "ЦДРП", client_type: "ЦДРП",
device_count: 181, device_count: 181,
mounter_type: "ВНИИЖТ", mounter_type: "ВНИИЖТ",
year: "2023 г." year: "2023 г."
}, },
{ {
client_type: "ЦДРП", client_type: "ЦДРП",
device_count: 100, device_count: 100,
mounter_type: "Калугапутьмаш", mounter_type: "Калугапутьмаш",
year: "2020 г." year: "2020 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 76, device_count: 76,
mounter_type: "ВНИИЖТ", mounter_type: "ВНИИЖТ",
year: "2016 г." year: "2016 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 29, device_count: 29,
mounter_type: "Свердловский РПМ", mounter_type: "Свердловский РПМ",
year: "2018 г." year: "2018 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 4, device_count: 4,
mounter_type: "Калугапутьмаш", mounter_type: "Калугапутьмаш",
year: "2021 г." year: "2021 г."
}, },
{ {
client_type: null, client_type: null,
device_count: 1, device_count: 1,
mounter_type: "ВНИИЖТ", mounter_type: "ВНИИЖТ",
year: "2020 г." year: "2020 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 5, device_count: 5,
mounter_type: "Тихорецкий завод им Воровского", mounter_type: "Тихорецкий завод им Воровского",
year: "2021 г." year: "2021 г."
}, },
{ {
client_type: "Иные", client_type: "Иные",
device_count: 25, device_count: 25,
mounter_type: "Тихорецкий завод им Воровского", mounter_type: "Тихорецкий завод им Воровского",
year: "2020 г." year: "2020 г."
}, },
{ {
client_type: "ЦДРП", client_type: "ЦДРП",
device_count: 15, device_count: 15,
mounter_type: "Тулажелдормаш", mounter_type: "Тулажелдормаш",
year: "2019 г." year: "2019 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 4, device_count: 4,
mounter_type: "Инжиниринг Сервис-Путьмаш", mounter_type: "Инжиниринг Сервис-Путьмаш",
year: "2023 г." year: "2023 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 2, device_count: 2,
mounter_type: "Калугапутьмаш", mounter_type: "Калугапутьмаш",
year: "2019 г." year: "2019 г."
}, },
{ {
client_type: "ЦДРП", client_type: "ЦДРП",
device_count: 1, device_count: 1,
mounter_type: "ВНИИЖТ", mounter_type: "ВНИИЖТ",
year: "2022 г." year: "2022 г."
}, },
{ {
client_type: "ЦДРП", client_type: "ЦДРП",
device_count: 3, device_count: 3,
mounter_type: "Кировский машзавод", mounter_type: "Кировский машзавод",
year: "2023 г." year: "2023 г."
}, },
{ {
client_type: "ЦДРП", client_type: "ЦДРП",
device_count: 26, device_count: 26,
mounter_type: "Тулажелдормаш", mounter_type: "Тулажелдормаш",
year: "2020 г." year: "2020 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 3, device_count: 3,
mounter_type: "Тихорецкий завод им Воровского", mounter_type: "Тихорецкий завод им Воровского",
year: "2023 г." year: "2023 г."
}, },
{ {
client_type: "ЦДИМ", client_type: "ЦДИМ",
device_count: 16, device_count: 16,
mounter_type: "КалугаРПМ", mounter_type: "КалугаРПМ",
year: "2019 г." year: "2019 г."
}, },
] ]
@ -2366,11 +2366,11 @@ const multiReport = {
} }
], ],
diagExcludeSps: [993, 1062, 3078, 1136, 1109, 1618, 1085, 2936, 1669, 1045, diagExcludeSps: [993, 1062, 3078, 1136, 1109, 1618, 1085, 2936, 1669, 1045,
1739, 1525, 1869, 1461, 1843, 928, 1940, 1907, 1482, 1870, 1813, 1131, 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, 1133, 1515, 1800, 2151, 1833, 1068, 1110, 1000, 2904, 926, 2964, 917, 2903,
1743, 1738, 1469, 2902, 1478, 999, 1801, 1742, 1139, 1141, 1842, ], 1743, 1738, 1469, 2902, 1478, 999, 1801, 1742, 1139, 1141, 1842, ],
diagTables: ["as", "dsp", "dyn", "mpt", "pmg", "rpb", "rs", "schom", "sm", diagTables: ["as", "dsp", "dyn", "mpt", "pmg", "rpb", "rs", "schom", "sm",
"uk", "uni", "utm", "vpo", ""], "uk", "uni", "utm", "vpo", ""],
id: 197, id: 197,
insertedAt: "2023-03-15 06:27:41", insertedAt: "2023-03-15 06:27:41",
isProd: true, isProd: true,
@ -2423,7 +2423,7 @@ const multiReport = {
const multiPackStructure = [ const multiPackStructure = [
// %LiveMonitor.Packages.Models.PackStruct{ // %LiveMonitor.Packages.Models.PackStruct{
// __meta__: #Ecto.Schema.Metadata<:loaded, "pack_struct">, // __meta__: #Ecto.Schema.Metadata<:loaded, "pack_struct">,
{ {
id: 197, id: 197,
description: null, description: null,
@ -2523,7 +2523,7 @@ const multiPackStructure = [
} }
], ],
diag_tables: ["as", "dsp", "dyn", "mpt", "pmg", "rpb", "rs", "schom", "sm", diag_tables: ["as", "dsp", "dyn", "mpt", "pmg", "rpb", "rs", "schom", "sm",
"uk", "uni", "utm", "vpo", ""], "uk", "uni", "utm", "vpo", ""],
diag_exclude_tables: null, diag_exclude_tables: null,
diag_classifications: null, diag_classifications: null,
diag_types: null, diag_types: null,
@ -2531,9 +2531,9 @@ const multiPackStructure = [
diag_exclude_classifications: null, diag_exclude_classifications: null,
diag_exclude_types: null, diag_exclude_types: null,
diag_exclude_sps: [993, 1062, 3078, 1136, 1109, 1618, 1085, 2936, 1669, diag_exclude_sps: [993, 1062, 3078, 1136, 1109, 1618, 1085, 2936, 1669,
1045, 1739, 1525, 1869, 1461, 1843, 928, 1940, 1907, 1482, 1870, 1813, 1045, 1739, 1525, 1869, 1461, 1843, 928, 1940, 1907, 1482, 1870, 1813,
1131, 1133, 1515, 1800, 2151, 1833, 1068, 1110, 1000, 2904, 926, 2964, 1131, 1133, 1515, 1800, 2151, 1833, 1068, 1110, 1000, 2904, 926, 2964,
], ],
pack_group_id: 28, pack_group_id: 28,
// pack_group: #Ecto.Association.NotLoaded<association :pack_group is not loaded>, // pack_group: #Ecto.Association.NotLoaded<association :pack_group is not loaded>,
inserted_at: "2023-03-15 06:27:41", inserted_at: "2023-03-15 06:27:41",
@ -2838,8 +2838,8 @@ const multiPackStructure = [
diag_classifications: null, diag_classifications: null,
diag_types: null, diag_types: null,
diag_sps: [993, 1062, 3078, 1136, 1109, 1618, 1085, 2936, 1669, 1045, 1739, 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, 1525, 1869, 1461, 1843, 928, 1940, 1907, 1482, 1870, 1813, 1131, 1133,
1515, 1800, 2151, 1833, 1068, 1110, 1000, 2904, 926, 2964, 917, ], 1515, 1800, 2151, 1833, 1068, 1110, 1000, 2904, 926, 2964, 917, ],
diag_exclude_classifications: null, diag_exclude_classifications: null,
diag_exclude_types: null, diag_exclude_types: null,
diag_exclude_sps: 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) // console.log('updSelects', updatedSelects)
const filteredSelects = updatedSelects.map((el) => ({...el, data: el.data.reduce((acc, select) => { const filteredSelects = updatedSelects.map((el) => ({...el, data: el.data.reduce((acc, select) => {
if (select) { if (select) {
const newSelect = {name: select} const newSelect = {name: select}
acc = [...acc, newSelect] acc = [...acc, newSelect]
} else { } else {
acc acc
} }
return acc return acc
}, []) }, [])
})).sort((a, b) => a.order - b.order) })).sort((a, b) => a.order - b.order)
// console.log('filteredSelects', filteredSelects) // console.log('filteredSelects', filteredSelects)
return 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 { chartsFilterParams, chartsGroupByParams, chartsGroupByParams2, chartsFilterKeysMl, chartsMountParams, chartsBarTypesParams, chartsBarTypesGroupByParams, chartsBarTypesWithoutLayoutParams } from "./StaticData"
import {cond, uniq, has, T} from 'ramda' import {cond, uniq, has, T} from 'ramda'
const setPeriodCharts = (filterKeys) => { const setPeriodCharts = (filterKeys) => {
if (typeof filterKeys === 'array') return {period: 'dayly', title: '24 часа'} if (typeof filterKeys === 'array') return {period: 'dayly', title: '24 часа'}
switch(filterKeys) { switch(filterKeys) {
case 'commun': return {period: 'yearly', title: "год"} case 'commun': return {period: 'yearly', title: "год"}
case 'rors': return {period: 'dayly', title: "на данный момент"} case 'rors': return {period: 'dayly', title: "на данный момент"}
case 'routes': return {period: 'weekly', title: "две недели"} case 'routes': return {period: 'weekly', title: "две недели"}
default: return {period: 'dayly', 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) => { const setFilterValues = (machineValue, filterParams) => {
if (!filterKey) return null if(filterParams.values.includes(machineValue.toLowerCase())) {
switch(filterKey) { return {name: machineValue}
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) => { const setCountMachinesMl = (arr, counter = 0) => {
if (typeId) { return arr.reduce((acc, item) => {
switch(typeId) { if (item && item.length > 0) {
case 'mpt_types': return 'МРТ' return setCountMachinesMl(item, acc)
case 'gdsm_types': return 'ЖДСМ' } else {
case 'sm_pss_types': return 'СМ' if (item.charts?.value) {
default: return '' acc = acc + item.charts?.value
}
}
}
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))
} else { } else {
acc acc
} }
return acc }
}, []) return acc
}, counter)
}
// const isFilteredMachine = machines.find((el) => filterParams.values.includes(el.name.toLowerCase())) /* Charts updated data */
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 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 = data?.length
const countMachines = filteredGroupByParams?.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]) { if (machine[filterParams.filterKey]) {
acc.push(setFilterValues(machine[filterParams.filterKey], filterParams)) acc.push(setFilterValues(machine[filterParams.filterKey], filterParams))
} else { } else {
acc acc
} }
return acc return acc
}, []) }, [])
const filteredMachines = machines.reduce((acc, machine) => { const filteredMachines = machines.reduce((acc, machine) => {
if (filterParams.values.includes(machine.name.toLowerCase())) { if (filterParams.values.includes(machine.name.toLowerCase())) {
const count = machines.filter((el) => el.name === machine.name).length const count = machines.filter((el) => el.name === machine.name).length
const filteredMachines = {name: machine.name, value: count} const filteredMachines = {name: machine.name, value: count}
acc = uniq([...acc, filteredMachines]) 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 { } else {
acc acc
} }
return acc return acc
}, []) }, [])
return {countMachines: countMachines, period: setPeriodCharts(filterParams.filterKey).title, machines: filteredMachines} const count = filteredWithMl.reduce((acc, machine) => {
} acc = acc + parseFloat(machine[filterKey])
return acc
const chartsBarGroupedByMl = (data, filterKeysMl) => { }, 0)
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)
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) => { const countMachinesWithMl = Math.floor((machinesWithMl.reduce((acc, machine) => {
return acc + machine.machinesCount return acc + machine.machinesCount
}, 0)) / filterKeysMl.length) }, 0)) / filterKeysMl.length)
const machinesWithoutMl = filterKeysMl.map((filterKey) => { const machinesWithoutMl = filterKeysMl.map((filterKey) => {
const countNull = data.reduce((acc, machine) => { const countNull = data.reduce((acc, machine) => {
if (machine[filterKey] === null) { if (machine[filterKey] === null) {
acc = acc + 1 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 { } else {
acc acc
} }
return acc return acc
}, 0) }, 0)
return {key: filterKey, value: countNull} const machinesWithoutMl = val.filter((el) => el[filterKey] === null).length
return {machinesWithMl: machinesWithMl, machinesWithoutMl: machinesWithoutMl}
}) })
// console.log('allValuesArr', allValuesArr)
// console.log('machinesWithoutMl', machinesWithoutMl) const countMachinesWithMl = allValuesArr.reduce((acc, count) => (acc + count.machinesWithMl), 0)
const countMachinesWithoutMl = allValuesArr.reduce((acc, count) => (acc + count.machinesWithoutMl), 0) / filterKeys.length // Для исключения дублирования делим н а длину filterKeys
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
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]) => { const machinesWithoutMl = Object.entries(groupByData).map(([key, val]) => {
return filterKeys.map((filterKey) => { const countWithoutMl = val.filter((el) => filterKeys.find((filterKey) => el[filterKey] === null)).length
const groupByFilterData = Object.groupBy(groupArr, (el) => el[filterKey]) 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 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 countMachinesWithMl = setCountMachinesMl(xAxisData)
const countWithoutMl = val.filter((el) => filterKeys.find((filterKey) => el[filterKey] === null)).length const countMachinesWithoutMl = Math.floor(setCountMachinesMl(machinesWithoutMl)) / filterKeys.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 updatedXAxisData = xAxisData.reduce((acc, group) => {
const countMachinesWithoutMl = Math.floor(setCountMachinesMl(machinesWithoutMl)) / filterKeys.length 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) => { // console.log('updatedXAxisData', updatedXAxisData)
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) 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('dataPie', chartsPie(data, chartsFilterParams[0]))
// console.log('dataPieValue', chartsPieGroupByValue(data, chartsGroupByParams[0], chartsFilterParams[0])) // console.log('dataPieValue', chartsPieGroupByValue(data, chartsGroupByParams[0], chartsFilterParams[0]))
// console.log('dataPieTypes', chartsPieGroupedBy(data, chartsGroupByParams2[0], chartsFilterParams[0])) // console.log('dataPieTypes', chartsPieGroupedBy(data, chartsGroupByParams2[0], chartsFilterParams[0]))
// console.log('dataBarMl', chartsBarGroupedByMl(data, chartsFilterKeysMl)) // console.log('dataBarMl', chartsBarGroupedByMl(data, chartsFilterKeysMl))
// console.log('dataBarMount', chartsBarMount(dataMount, 'year', 'client_type', 'device_count')) // console.log('dataBarMount', chartsBarMount(dataMount, 'year', 'client_type', 'device_count'))
// console.log('chartsBarTypesGroupedByMl', chartsBarTypesGroupedByMl(data, 'org_type_name', chartsFilterKeysMl, {}, {})) // console.log('chartsBarTypesGroupedByMl', chartsBarTypesGroupedByMl(data, 'org_type_name', chartsFilterKeysMl, {}, {}))
const filteredPie = chartsFilterParams.reduce((acc, param) => { const filteredPie = chartsFilterParams.reduce((acc, param) => {
const idChart = `${param.filterKey}_pie` const idChart = `${param.filterKey}_pie`
return {...acc, [idChart]: chartsPie(data, param)}}, {}) // Далее объединение всех типов графиков return {...acc, [idChart]: chartsPie(data, param)}}, {}) // Далее объединение всех типов графиков
const filteredPieGroupByValue = chartsGroupByParams.reduce((acc, param) => { const filteredPieGroupByValue = chartsGroupByParams.reduce((acc, param) => {
const idChart = `${chartsFilterParams[0].filterKey}_pie_${param.valueId}` const idChart = `${chartsFilterParams[0].filterKey}_pie_${param.valueId}`
return {...acc, [idChart]: chartsPieGroupedBy(data, param, chartsFilterParams[0])}}, {}) return {...acc, [idChart]: chartsPieGroupedBy(data, param, chartsFilterParams[0])}}, {})
const filteredPieGroupByTypes = chartsGroupByParams2.reduce((acc, param) => { const filteredPieGroupByTypes = chartsGroupByParams2.reduce((acc, param) => {
const idChart = `${chartsFilterParams[0].filterKey}_pie_${param.valueId}` const idChart = `${chartsFilterParams[0].filterKey}_pie_${param.valueId}`
return {...acc, [idChart]: chartsPieGroupedBy(data, param, chartsFilterParams[0])}}, {}) 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 filteredBarMount = chartsMountParams.reduce((acc, param) => {
const idChart = `mount_${param.filterKey}_bar` const idChart = `mount_${param.filterKey}_bar`
return {...acc, [idChart]: chartsBarMount(dataMount, param.groupByKey, param.filterKey, param.countKey)}}, {}) return {...acc, [idChart]: chartsBarMount(dataMount, param.groupByKey, param.filterKey, param.countKey)}}, {})
const filteredBarTypes = chartsBarTypesParams.reduce((acc, param) => { const filteredBarTypes = chartsBarTypesParams.reduce((acc, param) => {
const idChart = `${param.filterKey}_${param.valueId}_bar` const idChart = `${param.filterKey}_${param.valueId}_bar`
return {...acc, [idChart]: chartsBarTypes(data, param.groupByKey, param.filterKey, prevGroupByData, prevGroupByFilters)}}, {}) return {...acc, [idChart]: chartsBarTypes(data, param.groupByKey, param.filterKey, prevGroupByData, prevGroupByFilters)}}, {})
const filteredBarGroupByTypes = chartsBarTypesGroupByParams.reduce((acc, param) => { const filteredBarGroupByTypes = chartsBarTypesGroupByParams.reduce((acc, param) => {
const idChart = `${param.filterKey}_${param.valueId}_bar_${param.typeId}` const idChart = `${param.filterKey}_${param.valueId}_bar_${param.typeId}`
return {...acc, [idChart]: chartsBarTypesGroupedBy(data, param.groupByKey, param.filterKey, prevGroupByData, prevGroupByFilters, param.typeId)}}, {}) return {...acc, [idChart]: chartsBarTypesGroupedBy(data, param.groupByKey, param.filterKey, prevGroupByData, prevGroupByFilters, param.typeId)}}, {})
const filteredBarWithoutLayoutTypes = chartsBarTypesWithoutLayoutParams.reduce((acc, param) => { const filteredBarWithoutLayoutTypes = chartsBarTypesWithoutLayoutParams.reduce((acc, param) => {
const idChart = `${param.filterKey}_types_bar_${param.valueId}` const idChart = `${param.filterKey}_types_bar_${param.valueId}`
return {...acc, [idChart]: chartsBarTypesWithoutFirstLayout(data, param.groupByKey, param.filterKey, prevGroupByData, prevGroupByFilters, param.groupByValue)}}, {}) 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) // console.log('this.charts', data)
const main = chartsSetup.main.reduce((acc, chart) => { const main = chartsSetup.main.reduce((acc, chart) => {
if (allCharts[chart.id]) { if (allCharts[chart.id]) {
const newChart = {...chart, data: allCharts[chart.id]} const newChart = {...chart, data: allCharts[chart.id]}
acc = [...acc, newChart] acc = [...acc, newChart]
} else { } else {
acc 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
} }
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) => { const setNextLayoutGroupByKey = (groupByKey, prevGroupByValue) => {
if (prevGroupByValue === 'без типа') return null if (prevGroupByValue === 'без типа') return null
switch (groupByKey) { switch (groupByKey) {
case 'org_type_name': return 'railway_name' case 'org_type_name': return 'railway_name'
case 'railway_name': return 'org_name' case 'railway_name': return 'org_name'
case 'org_name': return 'type' case 'org_name': return 'type'
case 'type': return 'machine_type' case 'type': return 'machine_type'
case 'zav_nomer': return 'machine_type' case 'zav_nomer': return 'machine_type'
default: return null default: return null
}
} }
}
const setBeforeLayoutGroupByData = (prevGroupByData, prevGroupByFilters, type) => { const setBeforeLayoutGroupByData = (prevGroupByData, prevGroupByFilters, type) => {
return cond([ return cond([
[has('type'), () => ({org_name: prevGroupByFilters['org_name']})], [has('type'), () => ({org_name: prevGroupByFilters['org_name']})],
[has('org_name'), () => ({railway_name: prevGroupByFilters['railway_name']})], [has('org_name'), () => ({railway_name: prevGroupByFilters['railway_name']})],
[has('railway_name'), () => (type === 'without_first_layout' ? {} : {org_type_name: prevGroupByFilters['org_type_name']})], [has('railway_name'), () => (type === 'without_first_layout' ? {} : {org_type_name: prevGroupByFilters['org_type_name']})],
[T, () => {}], [T, () => {}],
])(prevGroupByData) ])(prevGroupByData)
}
const typesCharts = (type) => {
switch (type) {
case 'pie': return true
case 'mount': return true
case 'mainMl': return true
default: return false
} }
}
const typesCharts = (type) => { export { loadingChartsData, setBarTypesChart, setNextLayoutGroupByKey, setBeforeLayoutGroupByData, typesCharts }
switch (type) {
case 'pie': return true
case 'mount': return true
case 'mainMl': return true
default: return false
}
}
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) => { uploadData: async ({commit}, path) => {
try{ try{
switch(path) { switch(path) {
case '/finder_packs': case '/finder_packs':
commit('setPage', pages[1]) commit('setPage', pages[1])
break break
case '/add_users': case '/add_users':
commit('setPage', pages[2]) commit('setPage', pages[2])
break break
default: default:
commit('setPage', pages[0]) commit('setPage', pages[0])
break break
} }
} catch(err) { } catch(err) {

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

@ -252,10 +252,10 @@ const packStruct = [
const packsNames = ["Диагностика УК (7681)", "Диагностика УК (7682)", const packsNames = ["Диагностика УК (7681)", "Диагностика УК (7682)",
"Диагностика УК (7683)", "Диагностика УК (7684)", "Диагностика УК (7683)", "Диагностика УК (7684)",
"Диагностика УК (7685)", "Тест УК(9473)", "Диагностика УК (7685)", "Тест УК(9473)",
"УК 25/25(9473)", "УК 25/25(9475)", "УК 25/28СП(9473)", "УК 25/25(9473)", "УК 25/25(9475)", "УК 25/28СП(9473)",
"УК 25/28СП(9475)", "УК 25/9-18(9473)", "УК 25/9-18(9475)"] "УК 25/28СП(9475)", "УК 25/9-18(9473)", "УК 25/9-18(9475)"]
const data = { const data = {
askr_logs: [ askr_logs: [
@ -273,10 +273,10 @@ const data = {
geo: geo:
// %Geo.Point{ // %Geo.Point{
{ {
coordinates: [136.150181, 49.90781], coordinates: [136.150181, 49.90781],
srid: 4326, srid: 4326,
properties: {} properties: {}
}, },
is_valid: true, is_valid: true,
voltage: 25.93, voltage: 25.93,
pack_lon: 136.150181, pack_lon: 136.150181,
@ -319,10 +319,10 @@ const data = {
geo: geo:
// %Geo.Point{ // %Geo.Point{
{ {
coordinates: [136.15018899999998, 49.907799], coordinates: [136.15018899999998, 49.907799],
srid: 4326, srid: 4326,
properties: {} properties: {}
}, },
is_valid: true, is_valid: true,
voltage: 25.89, voltage: 25.89,
pack_lon: 136.150189, pack_lon: 136.150189,
@ -365,10 +365,10 @@ const data = {
geo: geo:
// %Geo.Point{ // %Geo.Point{
{ {
coordinates: [136.15018899999998, 49.907801], coordinates: [136.15018899999998, 49.907801],
srid: 4326, srid: 4326,
properties: {} properties: {}
}, },
is_valid: true, is_valid: true,
voltage: 25.77, voltage: 25.77,
pack_lon: 136.150189, pack_lon: 136.150189,
@ -411,10 +411,10 @@ const data = {
geo: geo:
// %Geo.Point{ // %Geo.Point{
{ {
coordinates: [136.15018, 49.907806], coordinates: [136.15018, 49.907806],
srid: 4326, srid: 4326,
properties: {} properties: {}
}, },
is_valid: true, is_valid: true,
voltage: 25.87, voltage: 25.87,
pack_lon: 136.15018, pack_lon: 136.15018,
@ -457,10 +457,10 @@ const data = {
geo: geo:
// %Geo.Point{ // %Geo.Point{
{ {
coordinates: [136.150184, 49.907799], coordinates: [136.150184, 49.907799],
srid: 4326, srid: 4326,
properties: {} properties: {}
}, },
is_valid: true, is_valid: true,
voltage: 25.88, voltage: 25.88,
pack_lon: 136.150184, pack_lon: 136.150184,
@ -503,10 +503,10 @@ const data = {
geo: geo:
// %Geo.Point{ // %Geo.Point{
{ {
coordinates: [136.15018, 49.907807], coordinates: [136.15018, 49.907807],
srid: 4326, srid: 4326,
properties: {} properties: {}
}, },
is_valid: true, is_valid: true,
voltage: 25.94, voltage: 25.94,
pack_lon: 136.15018, pack_lon: 136.15018,
@ -549,10 +549,10 @@ const data = {
geo: geo:
// %Geo.Point{ // %Geo.Point{
{ {
coordinates: [136.150181, 49.907799999999995], coordinates: [136.150181, 49.907799999999995],
srid: 4326, srid: 4326,
properties: {} properties: {}
}, },
is_valid: true, is_valid: true,
voltage: 25.84, voltage: 25.84,
pack_lon: 136.150181, pack_lon: 136.150181,
@ -595,10 +595,10 @@ const data = {
geo: geo:
// %Geo.Point{ // %Geo.Point{
{ {
coordinates: [136.150181, 49.907810999999995], coordinates: [136.150181, 49.907810999999995],
srid: 4326, srid: 4326,
properties: {} properties: {}
}, },
is_valid: true, is_valid: true,
voltage: 25.93, voltage: 25.93,
pack_lon: 136.150181, pack_lon: 136.150181,
@ -641,10 +641,10 @@ const data = {
geo: geo:
// %Geo.Point{ // %Geo.Point{
{ {
coordinates: [136.15018, 49.90781], coordinates: [136.15018, 49.90781],
srid: 4326, srid: 4326,
properties: {} properties: {}
}, },
is_valid: true, is_valid: true,
voltage: 25.91, voltage: 25.91,
pack_lon: 136.15018, pack_lon: 136.15018,
@ -687,10 +687,10 @@ const data = {
geo: geo:
// %Geo.Point{ // %Geo.Point{
{ {
coordinates: [136.15017899999998, 49.907809], coordinates: [136.15017899999998, 49.907809],
srid: 4326, srid: 4326,
properties: {} properties: {}
}, },
is_valid: true, is_valid: true,
voltage: 25.91, voltage: 25.91,
pack_lon: 136.150179, pack_lon: 136.150179,
@ -733,10 +733,10 @@ const data = {
geo: geo:
// %Geo.Point{ // %Geo.Point{
{ {
coordinates: [136.150185, 49.907799999999995], coordinates: [136.150185, 49.907799999999995],
srid: 4326, srid: 4326,
properties: {} properties: {}
}, },
is_valid: true, is_valid: true,
voltage: 25.61, voltage: 25.61,
pack_lon: 136.150185, pack_lon: 136.150185,
@ -779,10 +779,10 @@ const data = {
geo: geo:
// %Geo.Point{ // %Geo.Point{
{ {
coordinates: [136.15018799999999, 49.907803], coordinates: [136.15018799999999, 49.907803],
srid: 4326, srid: 4326,
properties: {} properties: {}
}, },
is_valid: true, is_valid: true,
voltage: 25.49, voltage: 25.49,
pack_lon: 136.150188, pack_lon: 136.150188,
@ -824,10 +824,10 @@ const data = {
geo: geo:
// %Geo.Point{ // %Geo.Point{
{ {
coordinates: [136.150184, 49.907796999999995], coordinates: [136.150184, 49.907796999999995],
srid: 4326, srid: 4326,
properties: {} properties: {}
}, },
is_valid: true, is_valid: true,
voltage: 25.6, voltage: 25.6,
pack_lon: 136.150184, pack_lon: 136.150184,
@ -868,10 +868,10 @@ const data = {
geo: geo:
// %Geo.Point{ // %Geo.Point{
{ {
coordinates: [136.150184, 49.907796999999995], coordinates: [136.150184, 49.907796999999995],
srid: 4326, srid: 4326,
properties: {} properties: {}
}, },
is_valid: true, is_valid: true,
voltage: 25.62, voltage: 25.62,
pack_lon: 136.150184, pack_lon: 136.150184,
@ -911,10 +911,10 @@ const data = {
geo: geo:
// %Geo.Point{ // %Geo.Point{
{ {
coordinates: [136.15018999999998, 49.907802], coordinates: [136.15018999999998, 49.907802],
srid: 4326, srid: 4326,
properties: {} properties: {}
}, },
is_valid: true, is_valid: true,
voltage: 25.88, voltage: 25.88,
pack_lon: 136.15019, 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('params', toRaw(params))
console.log('getters.isLoading', toRaw(getters.isLoading)) 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", const servicesNames = ["check_scand_api_2EC27AEA12AAC9E5B013", "niflheim",
"scand_client_B0C8B117F3AB40D5869C", "scand_client_B0C8B117F3AB40D5869C",
"local_local_cdrp@172.25.78.64_E66972859C7734FBAB11", "local_local_cdrp@172.25.78.64_E66972859C7734FBAB11",
"cronex_9354617E3A5A69493AC0", "cronex_9354617E3A5A69493AC0",
"local_lm_api@172.25.78.153_36C091D060A018177B49", "local_lm_api@172.25.78.153_36C091D060A018177B49",
"db_loader_7C6C7680BAC92D4BFD8C", "sql_inserter_B2751775DD1FC358682A", "db_loader_7C6C7680BAC92D4BFD8C", "sql_inserter_B2751775DD1FC358682A",
"authentication_service_F2AE8881F984DFE1A4BD", "cdrp", "authentication_service_F2AE8881F984DFE1A4BD", "cdrp",
"asgard_82DB735B1F03E8A5BA0E", "alfheim_90556327D9DC81351EE2", "GStore", "asgard_82DB735B1F03E8A5BA0E", "alfheim_90556327D9DC81351EE2", "GStore",
"alfheim_1B3027982471601E45E8", "cronex", "comm_client_diap_1", "alfheim_1B3027982471601E45E8", "cronex", "comm_client_diap_1",
"cdrp_B2E275BA9E7E79D4D2D6", "authentication_service", "cdrp_B2E275BA9E7E79D4D2D6", "authentication_service",
"comm_client_diap_1_8348C79D6407CDB752FD", "sql_sup_F66176648815DC42BD4D", "comm_client_diap_1_8348C79D6407CDB752FD", "sql_sup_F66176648815DC42BD4D",
"periodic_tasks_228605BF57BD5DE8C94B", "periodic_tasks_228605BF57BD5DE8C94B",
"integration_pk_gip_F6797EF2E89795090B4D", "live_monitor_EA3F27068ABA3C4F5D7F", "integration_pk_gip_F6797EF2E89795090B4D", "live_monitor_EA3F27068ABA3C4F5D7F",
"snotra_EC6E797D24F8E93C536F", "thor_70B46C452D3105A6AF09", "snotra_EC6E797D24F8E93C536F", "thor_70B46C452D3105A6AF09",
"kudt_diag_3D0E0652B99B208E8519", "snotra", "live_monitor", "sql_sup", "kudt_diag_3D0E0652B99B208E8519", "snotra", "live_monitor", "sql_sup",
"comm_client_diap_2_B2FAA49D7F5EF167DF1D", "niflheim_829F2F30E9FD2539D3E7", "comm_client_diap_2_B2FAA49D7F5EF167DF1D", "niflheim_829F2F30E9FD2539D3E7",
"comm_client_diap_repl_6BA0746DB5CFB506AC7A", "pack_rrnr_DDCE13940E392EB3456A", "comm_client_diap_repl_6BA0746DB5CFB506AC7A", "pack_rrnr_DDCE13940E392EB3456A",
"local_local_live_monitor@172.25.78.151_CD55455FB92AB74F178B", "alfheim", "local_local_live_monitor@172.25.78.151_CD55455FB92AB74F178B", "alfheim",
"local_fuel_api@172.25.78.98_C215EA176A84C84A6CEC"] "local_fuel_api@172.25.78.98_C215EA176A84C84A6CEC"]
// const servicesNotConnected = [ // 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{ try{
const serviceNew = new Service(service) const serviceNew = new Service(service)
const getCache = serviceNew.getCashe(service) serviceNew.getCashe(service)
} catch (err) { } catch (err) {
console.error(err) console.error(err)
} }