Merge pull request 'eslint_fixes' (#3) from eslint_fixes into master

Reviewed-on: https://vniac.ru:8998/vbuglov/frontend-apps/pulls/3
Reviewed-by: vbuglov <v.a.buglov@gmail.com>

live_monitor_vue/Makefile

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

live_monitor_vue/src/components/1_atoms/DoubleSwitch.vue

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

live_monitor_vue/src/components/2_molecules/MachinesModal/MachinesModal.vue

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

live_monitor_vue/src/components/2_molecules/MapModal/MapModal.vue

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

live_monitor_vue/src/components/2_molecules/MapModal/helpers.js

@@ -196,11 +196,11 @@ const setTooltip = (map, coordinates, machine, tooltip_id, content_id, closer_id
     tooltipText.classList.add(content_id)
 
     if (feature) {
-      const container = tooltip.getElement();
+      const container = tooltip.getElement()
-      const props = feature.getProperties()
+      // const props = feature.getProperties()
 
-      const coordsFormated = feature.getGeometry()
+      // const coordsFormated = feature.getGeometry()
-      const coordsFormat = feature.getGeometry().getFlatCoordinates()
+      // const coordsFormat = feature.getGeometry().getFlatCoordinates()
 
       // const hdms = toLonLat(coordinates)
   
@@ -228,12 +228,9 @@ const setTooltip = (map, coordinates, machine, tooltip_id, content_id, closer_id
   });
   
   map.on('pointermove', function (e) {
-    const pixel = map.getEventPixel(e.originalEvent);
+    const pixel = map.getEventPixel(e.originalEvent)
-    const hit = map.hasFeatureAtPixel(pixel);
+    const hit = map.hasFeatureAtPixel(pixel)
-    // console.log('hit', hit)
+    map.getTarget().style.cursor = hit ? 'pointer' : ''
-    // console.log('pixel', pixel)
-    // console.log('map', map)
-    // map.getTarget().style.cursor = hit ? 'pointer' : '';
   })
 
   onClose.addEventListener('click', onClosed)

live_monitor_vue/src/components/2_molecules/VDatepicker/VDatepicker.vue

@@ -39,7 +39,7 @@ export default {
       enableTime: this.enableTime,
       dateFormat: this._dateFormat,
       locale: Russian,
-      onChange: (a,_b,_c) => {
+      onChange: (a) => {
         this.onchange(a[0])
       }
     });

live_monitor_vue/src/components/2_molecules/VSpinner/VSpinner.vue

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

live_monitor_vue/src/components/2_molecules/VSpinner/VSpinnerSvg.vue

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

live_monitor_vue/src/components/2_molecules/VTabulator/VTabulator.vue

@@ -5,11 +5,10 @@ import {
   sorter,
   renderGroupHeader,
   groupByFunction,
-  makedFiltering,
   tablefy
 } from "./helper";
 import localization from "./localization";
-import { cond, equals, is, mergeAll, sort, T, mergeDeepRight } from "ramda";
+import { is, sort, mergeDeepRight } from "ramda";
 import { pipe } from "@helpers/functions";
 import Pagination from "./VTabulatorPagination.vue";
 
@@ -116,7 +115,7 @@ export default {
         data: this.data,
         groupStartOpen: false,
 
-        groupHeader: function (value, count, data, group) {
+        groupHeader: function (value, count) {
           return value + "<span>(" + count + " записей)</span>";
         },
       };
@@ -155,23 +154,23 @@ export default {
     },
     __getGroupCfg() {
       if (this.groupByTemplate)
-      return { groupBy: groupByFunction(this.groupByTemplate) };
+        return { groupBy: groupByFunction(this.groupByTemplate) };
       if (this.groupBy) return { groupBy: this.groupBy };
       return {};
     },
     __getGroupHeaderCfg() {
       if (this.groupHeader)
-      return {
+        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 {};
     },
   }
@@ -189,6 +188,6 @@ export default {
     </div>
   </div>
   <div v-if="pagination">
-    <Pagination :params="pagination"/>
+    <Pagination :params="pagination" />
   </div>
 </template>

live_monitor_vue/src/components/2_molecules/VTabulator/VTabulatorPagination.vue

@@ -1,12 +1,9 @@
-
-
 <script>
-import {mapGetters, mapMutations, mapActions, useStore} from "vuex"
 import { validation } from './helper'
 import { Alert } from "@store/hooks/Alert"
 
 export default {
-  name: 'Pagination',
+  name: 'TabulatorPagination',
   components: {
   },
   props: {
@@ -26,8 +23,8 @@ export default {
   },
   watch: {
     params: {
-      handler(value, oldValue) {
+      handler(newValue) {
-        if(value) {
+        if(newValue) {
           const loader = document.querySelector(`#table_loder_${this.params.id}`)
           loader.style.display = 'none'
         }
@@ -39,10 +36,10 @@ export default {
   },
   methods: {
     selectOptions: (selectOption, paginationOptions) => {
-      const options = selectOption ? selectOption : optionsDefault
+      const options = selectOption ? selectOption : []
       const currentOptions = options.filter((el) => {
         if(el <= Math.ceil(paginationOptions.total / 10) * 10) {
-        return el
+          return el
         }
       })
       if(paginationOptions.show_all) {
@@ -93,13 +90,13 @@ export default {
           return false
         }
         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 {
           e.target.setAttribute('disabled', 'disabled')
           e.target.classList.add('opacity-50')
@@ -120,61 +117,145 @@ export default {
 </script>
 
 
-
 <template>
   <div class="pagination w-full flex flex-row items-center justify-between gap-3 mt-2 mb-8 xl:mb-0 pb-8 xl:p-2.5 bg-slate-100 border-2 border-solid border-slate-300 rounded-lg flex-col 2xl:flex-row">
     <div class="pagination-left flex flex-row gap-1">
-      <div class="current-entries flex text-sm font-bold">Показаны {{currentEntries(params?.paginationOptions)}}</div>
+      <div class="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 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 class="buttons flex h-fit gap-1 sm:gap-3 text-sm">
-        <div class="flex gap-1 sm:gap-3" v-if="params.paginationOptions.page_number > 1">
+        <div
+          v-if="params.paginationOptions.page_number > 1"
+          class="flex gap-1 sm:gap-3"
+        >
           <div v-if="params.paginationOptions.page_number - 1 !== 1">
-            <button :table_btn="`${params.id}`" class="previous flex items-center text-white font-bold bg-slate-600 hover:bg-slate-700 py-1 px-3 gap-2 rounded" @click="setPagination({pageNumber: 1, pageSize: params.paginationOptions.page_size})">
+            <button
+              :table_btn="`${params.id}`"
+              class="previous flex items-center text-white font-bold bg-slate-600 hover:bg-slate-700 py-1 px-3 gap-2 rounded"
+              @click="setPagination({pageNumber: 1, pageSize: params.paginationOptions.page_size})"
+            >
               <span>1</span>
             </button>
           </div>
-          <button :table_btn="`${params.id}`" class="previous flex items-center text-white font-bold bg-slate-600 hover:bg-slate-700 py-1 px-3 gap-2 rounded" @click="setPagination({pageNumber: params.paginationOptions.page_number - 1, pageSize: params.paginationOptions.page_size})">
+          <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 :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>
         </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>
-        <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 :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>
           <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>
           </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>

live_monitor_vue/src/components/2_molecules/VTabulator/helper.js

@@ -1,4 +1,4 @@
-import { always, cond, equals, is, T,  mergeLeft } from "ramda";
+import { always, cond, equals, is, T, pipe, mergeLeft } from "ramda";
 import Handlebars from "handlebars/dist/cjs/handlebars";
 import moment from "moment";
 import presetConfig from './presetConfig'
@@ -20,23 +20,23 @@ const tablefy = (list = []) => {
   return list.map((el) => mergeLeft(el, defaultData(el?.title || "")))
 }
 
-const math = (value, operator, operand, options) => {
+const math = (value, operator, operand) => {
   var left = parseFloat(value);
   var right = parseFloat(operand);
 
   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 "";
   }
 }
 
@@ -138,7 +138,8 @@ const link = (col) => ({
   [
     "from_list",
     (list, param_string) => {
-
+      const [key, value] = param_string.split(",")
+      return list.find(el => el[key] === value)
     }
   ],
   [
@@ -204,7 +205,7 @@ const render = (col) => ({
       if(col.onCell && !record.status) {
         console.log('onCell', col.onCell)
         cell.getElement().style.backgroundColor = parseFunc(col.onCell)(record)?.style?.backgroundColor
-       }
+      }
       if (`${col.render}`.includes("{{") && `${col.render}`.includes("}}")) {
         let record = cell.getRow().getData();
         cell.getElement().innerHTML = Handlebars.compile(col.render)(
@@ -278,21 +279,21 @@ const makedFiltering = (id, filterParams, selectedFilter, clearFilters) => {
   const table = document.querySelector(`#${id}`)
   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}-selectFilters" class="flex items-center justify-start gap-3 p-1 ml-2 text-base text-slate-700 font-bold">
           Фильтр по статусу
           <select name="selectFilter" id="${id}-selectFilter" class="flex text-gray-700 pl-3 pr-9 py-0.5 rounded cursor-pointer border-none" style="--tw-ring-color:focus: none" >
           ${filterParams.map((el) => {
-            return (`<option value='${el}'>
+    return (`<option value='${el}'>
                       ${el}
                     </option>`)
-          })}
+  })}
           </select>
         </div>
         <button id="${id}-filtersClear"class="w-fit h-fit flex items-center text-white text-sm font-bold bg-slate-600 hover:bg-slate-700 py-1 px-3 gap-1 rounded">Очистить фильтр</button>
@@ -334,9 +335,9 @@ const makedFiltering = (id, filterParams, selectedFilter, clearFilters) => {
 
 const validation = (value, pagination) => {
   const pipe = (...fns) => (...x) => fns.reduce((error, validator) => error || validator(...x), undefined)
-  const required = value => {
+  // const required = value => {
-    return value ? undefined : "*"
+  //   return value ? undefined : "*"
-  }
+  // }
   const minPage = length => value => {
     value = value.replace(/\s+/g, '')
     return value >= length ? undefined : `Номер страницы должен быть больше или равен ${length}`

live_monitor_vue/src/components/2_molecules/VTabulator/localization.js

@@ -6,22 +6,22 @@ const localization = () => ({
     },
     "pagination":{
       "page_size":"Размер таблицы", //label for the page size select element
-        "page_title":"Показать страницу",//tooltip text for the numeric page button, appears in front of the page number (eg. "Show Page" will result in a tool tip of "Show Page 1" on the page 1 button)
+      "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": "страницы",
-        }
+      }
     },
   },
 });

live_monitor_vue/src/components/2_molecules/VTabulator/presetConfig.js

@@ -1,52 +1,5 @@
 import { cond, T } from "ramda";
 
-const text = `
-0	Конфигурация не установлена (по умолчанию)
-1	Стандартная конфигурация МРТ (МПТ/АВФ)
-2	Стандартная конфигурация ЖДСМ
-3	Стандартная конфигурация УК/ВПО
-4	ЩОМ/РМ (Акселерометр)
-5	СМ (Сибирский ПГУПС)
-6	СМ (зарезервировано)
-7	Эмуляция платы БКП
-8	Конфигурация Блок-М
-40	Эмуляторы
-41	Эмуляторы (CAN1 + CAN2 (Блок-М) + ModBus
-50	Стандартная конфигурация ModBus Master (опрос внешних устройств)
-51	Стандартная конфигурация ModBus Master (опрос плат АС КРСПС)
-52	Конфигурация трекера (электрички и т.п.)
-53	Конфигурация трекер + счетчик импульсов + акселерометр
-54	РадарП
-55	СДРГО
-100	ПМА-1М РПМ
-101	ЩОМ-1400 РПМ
-102	АМ-140 СКРТ РПМ
-103	АС-01 РПМ
-104	ТЭС ПСС-1К РПМ
-105	ПСС-2П РПМ
-200	РПБ-01 ВНИКТИ
-201	МПК Спецлоко
-202	УК 25/25 ВНИКТИ
-203	СЗ-800 ВНИКТИ
-300	ЩОМ-1200С ТЖДМ
-301	ЩОМ-2000 ТЖДМc
-302	ССГС-1 ТЖДМ
-303	ВПО-С ТЖДМ
-304	МПВ ТЖДМ
-305	УПК ТЖДМ
-306	ПРЛ-М ТЖДМ
-307	РУ-700 ТЖДМ
-308	МПВ Секция 2 ТЖДМ
-1911	Конфигурация для отладки
-4096	Настраиваемая конфигурация
-`
-
-//TODO SERGEY
-const parse = () => {
-  text
-  return {}
-}
-
 const get_f1_preset = (el) => {
   const r = {
     0: "Конфигурация не установлена (по умолчанию)",

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

@@ -8,10 +8,8 @@ import {
   propEq,
   findIndex,
   update,
-  is,
   cond,
   T,
-  isNil
 } from "ramda";
 
 let getPackSettings = (userId, page, packStructId, func) => {
@@ -30,7 +28,7 @@ let getPackSettings = (userId, page, packStructId, func) => {
   }
 };
 
-const prepDiscretes = (from, to, arr) =>
+const prepDiscretes = (from, to) =>
   range(from, to + 1).map((el) => ({
     title: el,
     dataIndex: `disc${el}`,
@@ -79,17 +77,14 @@ const withCustomSettings = (_columns, requestSettings) => {
   let columns = _columns
 
   if (requestSettings?.colors?.isOn) {
-  }
+    let colors = requestSettings.colors.list.filter((el) => el.isOn)
-
+    colors = groupBy((c) => c.param)(colors)
-  if (requestSettings?.colors?.isOn) {
+    const coloredParams = Object.keys(colors)
-    let colors = requestSettings.colors.list.filter((el) => el.isOn);
-    colors = groupBy((c) => c.param)(colors);
-    coloredParams = Object.keys(colors);
     columns = columns.map((el) => {
       if (coloredParams.includes(el.dataIndex)) {
         return {
           ...el,
-          onCell: (data, index) => {
+          onCell: (data) => {
             let colrSettings = colors[el.dataIndex];
             let value = data[el.dataIndex];
             let color = find(({ from, untill }) =>
@@ -147,23 +142,22 @@ const withCustomSettings = (_columns, requestSettings) => {
     }
   }
 
-  return columns;
+  return columns
 };
 
-const fetch_sorter_field = (sorter, req_params) => {
+// const fetch_sorter_field = (sorter, req_params) => {
-  const date_param = req_params?.settings?.date_param
+//   const date_param = req_params?.settings?.date_param
-  return cond([
+//   return cond([
-    [() => sorter?.field, () => sorter.field],
+//     [() => sorter?.field, () => sorter.field],
-    [is(Array), field_from_arr(sorter, date_param)],
+//     [is(Array), field_from_arr(sorter, date_param)],
-    [isNil, () => date_param],
+//     [isNil, () => date_param],
-  ])(sorter)
+//   ])(sorter)
-}
+// }
-
-const field_from_arr = (sorter, date_param) => () => {
-  const field = sorter.find((el) => `${el?.field}`.includes("dt"))?.field
-  return field || date_param
-}
 
+// const field_from_arr = (sorter, date_param) => () => {
+//   const field = sorter.find((el) => `${el?.field}`.includes("dt"))?.field
+//   return field || date_param
+// }
 
 const get_f1_preset = (el) => {
   const r = {
@@ -401,6 +395,6 @@ let parseFunc2 = (string) => {
 const parseFunc3 = (string) => {
   const f = new Function(`return (${string})`)
   return f()
-  }
+}
 
 export {parseFunc, parseFunc2, parseFunc3}

live_monitor_vue/src/components/2_molecules/VTabulator/time_funcs.js

@@ -21,7 +21,7 @@ const monthNames = [
 ];
 
 export const reformateDateString = (date, format = "full") =>
-  !!date ? reformate(date, format) : null;
+  date ? reformate(date, format) : null;
 
 const reformate = (date, format) =>
   cond([
@@ -116,42 +116,42 @@ export const parseSepareteDate = (
     if (dateBits[key] < 10) dateBits[key] = `0${dateBits[key]}`;
   });
   switch (mode) {
-    case "DateDMY":
+  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;
   }
 };
 

live_monitor_vue/src/components/3_organisms/PackColumns.js

@@ -1,15 +1,14 @@
-import { parse } from "handlebars/dist/cjs/handlebars/compiler/base";
 import { cond, T, isEmpty } from "ramda";
 
 const setPackColumns = (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 }}'>
             <div class='flex justify-center'>
               <div class='form-check form-switch'>
@@ -20,17 +19,17 @@ const setPackColumns = (name) => {
             </div>
           </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'>
             <button style='width: 25px; height: 25px;' class='italic border border-solid transition-all duration-300 rounded-full cursor-pointer hover:text-gray-500 linear-loader card-btn-action pt-[2px] text-primary' phx-click='select_struct:{{ id }}' >
               <i class='ri-eye-fill'></i>
@@ -50,105 +49,105 @@ const setPackColumns = (name) => {
                 </button>
           </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 +155,19 @@ const prepareSetPackColumns = (name, data) => {
   console.log('prepareSetPackColumns data', data);
   console.log('prepareSetPackColumns name', 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':
+    break  
-      return setPackColumns('Сырые')
+  case 'raw':
-    case 'unrecognized':
+    return setPackColumns('Сырые')
-      return setPackColumns('Нераспознанные')
+  case 'unrecognized':
-    default: return []
+    return setPackColumns('Нераспознанные')
+  default: return []
   }
 }
 
@@ -206,12 +206,12 @@ const parseCols = (packStructure, report) => {
 const fetchColumn = (packStructure, report, id = null) => {
   console.log('packStructure', packStructure)
   console.log('id', id)
-    const getCurrentPackColls = (packStructure, id) => {
+  const 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([
     [(packStructure) => !packStructure === true,  () => parseCols(null, report)],
     [(packStructure) => (packStructure?.length >= 1) && (id && typeof id === 'number'),  () => getCurrentPackColls(packStructure, id)],

live_monitor_vue/src/components/3_organisms/PackView/Button.vue

@@ -1,7 +1,5 @@
-
-
 <script>
-import {mapGetters, mapMutations, mapActions, useStore} from "vuex"
+import {mapGetters, mapActions} from "vuex"
 
 export default {
   name: 'PackViewButton',
@@ -30,7 +28,7 @@ export default {
     },
     idx: {
       type: Number,
-      default: ""
+      default: 0
     }
   },
   computed: {
@@ -44,14 +42,30 @@ export default {
 </script>
 
 
-
 <template>
   {{ console.log('selectedPackMode', selectedPackMode)
-   }}
+  }}
-  <button @click="updateModePack(mode)" v-bind:key="idx" type="button" class="w-full">
+  <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 }}
     </label>
   </button>

live_monitor_vue/src/components/3_organisms/PackView/index.vue

@@ -1,7 +1,5 @@
-
-
 <script>
-import {mapGetters, mapMutations, mapActions, useStore} from "vuex"
+import {mapGetters, mapActions} from "vuex"
 import PackViewButton from './Button.vue'
 import Spinner from "@molecules/VSpinner/VSpinner.vue"
 import Tabulator from "@molecules/VTabulator/VTabulator.vue"
@@ -24,11 +22,6 @@ export default {
       default: ""
     },
   },
-  data () {
-    return {
-      hasData: false
-    }
-  },
   setup (props, {slots}) {
     const hasDescription = slots.description != undefined
     const hasError = slots.error != undefined
@@ -38,12 +31,10 @@ export default {
       hasError
     }
   },
-  updated () {
+  data () {
-    this.$nextTick(function () {
+    return {
-      if (!isEmpty(this.packData)) {
+      hasData: false
-        this.hasData = true
+    }
-      }
-    })
   },
   computed: {
     ...mapGetters('machines', ['packData', 'selectPackStructs', 'selectedPackStruct']),
@@ -54,6 +45,13 @@ export default {
         {mode: 'unrecognized', isActive: false, name: 'switch_unrecognized', inner: 'нераспознанные', labelClass: 'rounded-r-lg border'},
       ])
   },
+  updated () {
+    this.$nextTick(function () {
+      if (!isEmpty(this.packData)) {
+        this.hasData = true
+      }
+    })
+  },
   methods: {
     ...mapActions('machines', ['updateSelectStruct']),
     updateSelectedValue: function (e) {
@@ -66,26 +64,43 @@ export default {
 </script>
 
 
-
 <template>
   <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 v-if="hasData" :id="id" class="w-full rounded-md bg-light border-rounded p-4">
+    <div
+      v-if="hasData"
+      :id="id"
+      class="w-full rounded-md bg-light border-rounded p-4"
+    >
       <div class="grid grid-cols-12 mb-6">
         <div class="flex flex-col gap-1 col-span-12 sm:col-span-4 md:col-span-5 lg:col-span-5 2xl:col-span-7 sm:mb-0">
-          <h2 :id="`${id}_pack_name`" class=" text-lg">Пакет: <span v-if="selectPackStructs" >{{selectPackStructs[0]?.packNumber}}</span></h2>
+          <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>
         <!-- <form phx-change="c_packs_mode:on_click" :id="`${id}_table_active`" class="col-span-12 sm:col-span-8 md:col-span-7 lg:col-span-7 2xl:col-span-5 flex justify-center hidden"> -->
         <div class="col-span-12 sm:col-span-8 md:col-span-7 lg:col-span-7 2xl:col-span-5 flex justify-center">
-          <PackViewButton v-for="(button, idx) in buttonsData" 
+          <PackViewButton
+            v-for="(button, idx) in buttonsData"
+            :key="idx" 
             :idx="idx" 
             :mode="button.mode"
             :name="button.name" 
@@ -96,24 +111,53 @@ export default {
         </div>
         <!-- </form> -->
       </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>
-          <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 }}
             </option>
           </select>
         </div>
-        <div :id="`${id}_report`" class="tab-pane active bg-light relative shadow  text-center min-h-[300px] relative rounded-md w-full relative">
+        <div
+          :id="`${id}_report`"
+          class="tab-pane active bg-light relative shadow  text-center min-h-[300px] relative rounded-md w-full relative"
+        >
           <Tabulator v-bind="packData" />
-          <div v-if="isLoader" class="w-full h-[50px] rounded-xl bg-slate-200 hidden" :id="`${id}_loader`">
+          <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 v-if="hasError" :id="`${id}_error`" class="w-full rounded-md bg-light border-rounded p-4 flex flex-col gap-5 items-center justify-center hidden">
+    <div
+      v-if="hasError"
+      :id="`${id}_error`"
+      class="w-full rounded-md bg-light border-rounded p-4 flex flex-col gap-5 items-center justify-center hidden"
+    >
       <slot name="error" /> 
     </div>
   </div>

live_monitor_vue/src/components/4_frames/AppContainer/AppContainerRightPanel.vue

@@ -1,5 +1,4 @@
 <script>
-import {mapGetters} from 'vuex'
 import { createIcons, icons } from "lucide";
 
 export default {

live_monitor_vue/src/components/5_pages/404/Car.vue

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

live_monitor_vue/src/components/5_pages/404/index.vue

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

live_monitor_vue/src/components/5_pages/Auth/index.vue

@@ -2,7 +2,7 @@
 import Login from './Login.vue'
 
 export default {
-  name: 'Auth',
+  name: 'AuthPage',
   components: {
     Login
   },

live_monitor_vue/src/components/5_pages/Communication/index.vue

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

live_monitor_vue/src/components/5_pages/Cron/Task.vue

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

live_monitor_vue/src/components/5_pages/Cron/TaskHistory.vue

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

live_monitor_vue/src/components/5_pages/Cron/TaskModal.vue

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

live_monitor_vue/src/components/5_pages/Cron/index.vue

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

live_monitor_vue/src/components/5_pages/Devices/index.vue

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

live_monitor_vue/src/components/5_pages/FileLogs/index.vue

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

live_monitor_vue/src/components/5_pages/FileViewer/index.vue

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

live_monitor_vue/src/components/5_pages/FilesLogs/index.vue

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

live_monitor_vue/src/components/5_pages/FreePacks/index.vue

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

live_monitor_vue/src/components/5_pages/Fuel/index.vue

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

live_monitor_vue/src/components/5_pages/ICCID/index.vue

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

live_monitor_vue/src/components/5_pages/LastPacksNum/index.vue

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

live_monitor_vue/src/components/5_pages/Main/AddUsers/AddUsers.vue

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

live_monitor_vue/src/components/5_pages/Main/FinderPacks/FinderPacks.vue

@@ -1,5 +1,5 @@
 <script>
-import {mapGetters, mapMutations, mapActions, useStore} from "vuex"
+import {mapGetters, mapActions, useStore} from "vuex"
 import Spinner from "@molecules/VSpinner/VSpinner.vue"
 import {PushAfterTimeout} from '@store/hooks/PushAfterTimeout'
 import Accordion from '@atoms/VAccordion.vue'
@@ -42,54 +42,106 @@ export default {
 </script>
 
 
-
 <template>
   <div class="rounded w-full transition-all min-h-[500px] relative">
-    <div v-if="!packsGroups" id="dataLoader" class="h-full absolute inset-0 flex flex-row items-center grow transition items-center justify-center bg-light appear_from_opacity-3 z-30 rounded p-2">
+    <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 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 class="border-2 rounded-lg w-full bottom-0"></div>
+      <div class="border-2 rounded-lg w-full bottom-0" />
     </div>
-    <div v-if="packsGroups?.length === 0" id="no_data" class="w-full min-h-[80vh] bg-light dark:bg-slate-900 dark:text-slate-300 relative">
+    <div
-      <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 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>
-              <div v-if="group.order_index" id="packsInfoTitle" class="font-bold text-sm">
+              <div
+                v-if="group.order_index"
+                id="packsInfoTitle"
+                class="font-bold text-sm"
+              >
                 <span class="text-slate-500 font-bold">
                   {{ group.order_index }}. 
                 </span>
                 <span class="font-bold">
                   {{ group.title }}
-                </span></div>
+                </span>
+              </div>
             </template>
             <template #body>
               <div class="flex flex-col gap-2">
-                <table >
+                <table>
                   <thead>
                     <tr>
-                      <th class="items-center justify-center pb-2">Название</th>
+                      <th class="items-center justify-center pb-2">
+                        Название
+                      </th>
                     </tr>
                   </thead>
                   <tbody>
-                    <tr v-for="struct in group.pack_structs" >
+                    <tr
+                      v-for="(struct, index) in group.pack_structs" 
+                      :key="index"
+                    >
                       <td class="items-center justify-center py-2">
                         <div class="flex gap-2 w-full">
                           <div class="w-full text-left decoration-dashed cursor-pointer hover:text-slate-800 transition-all">
                             {{ struct.name }}
                           </div>
-                          <a class="bg-slate-500 hover:bg-slate-700 text-white text-xs font-bold py-1 px-3 rounded transition-all h-fit" target="_blank" :href="`/html/packs/${group.link}?pack=${struct.name}`">
+                          <a
+                            class="bg-slate-500 hover:bg-slate-700 text-white text-xs font-bold py-1 px-3 rounded transition-all h-fit"
+                            target="_blank"
+                            :href="`/html/packs/${group.link}?pack=${struct.name}`"
+                          >
                             таблица
                           </a>
-                          <a class="bg-slate-500 hover:bg-slate-700 text-white text-xs font-bold py-1 px-3 rounded transition-all h-fit" target="_blank" :href="`/admin_panel/packs/${group.pack_group_id}/${struct.id}`">карточка</a>
+                          <a
+                            class="bg-slate-500 hover:bg-slate-700 text-white text-xs font-bold py-1 px-3 rounded transition-all h-fit"
+                            target="_blank"
+                            :href="`/admin_panel/packs/${group.pack_group_id}/${struct.id}`"
+                          >карточка</a>
                         </div>
                       </td>
                     </tr>

live_monitor_vue/src/components/5_pages/Main/Machines/Charts.vue

@@ -1,21 +1,22 @@
-
-
 <script>
-import {ref, toRaw, computed} from 'vue'
+import {computed} from 'vue'
-import {mapGetters, mapMutations, mapActions, useStore} from "vuex";
+import {mapGetters, mapMutations, mapActions} from "vuex";
-import {useRoute, useRouter} from 'vue-router'
+import {useRoute} from 'vue-router'
-import Button from "@atoms/VButton.vue";
 import DoubleSwitch from "@/components/1_atoms/DoubleSwitch.vue";
 import Chart from "@molecules/VChart/VChart.vue";
 import ECharts from '@store/hooks/Echarts';
 
 export default {
-  name: 'Charts',
+  name: 'ChartsComponent',
   components: {
-    Button,
     Chart,
     DoubleSwitch
   },
+  provide() {
+    return {
+      isChecked: computed(() => this.isChartTypes),
+    }
+  },
   setup() {
     const route = useRoute()
     const path = computed(() => route.path)
@@ -31,15 +32,12 @@ export default {
       isChartTypes: this.isChartTypesUrl,
     }
   },
-  provide() {
+  computed: {
-    return {
+    ...mapGetters('layoutMachines', ['selectedSelects', 'selectsData', 'toggleFilter', 'chartsData', 'activeChartData', 'prevGroupByData', 'activeMenuChartData', 'openMenuChart', 'legendFiltersParams']),
-      isChecked: computed(() => this.isChartTypes),
-    }
   },
   watch: {
     activeChartData: {
-      handler(newValue, oldValue)  {
+      handler(newValue)  {
-        console.log('newValue - activeChartData', newValue)
         if (newValue.id && newValue.type && newValue.data) {
           const chart = new ECharts(newValue.id)
           const isSelectedLegend = this.legendFiltersParams.length > 0 && this.legendFiltersParams[0].id === newValue.id
@@ -51,8 +49,7 @@ export default {
       // deep: true
     },
     activeMenuChartData: {
-      handler(newValue, oldValue)  {
+      handler(newValue)  {
-        // console.log('newValue - activeMenuChartData', newValue)
         if (newValue.groupByInfo && newValue.groupByInfo.chartId) {
           const chart = new ECharts(newValue.groupByInfo.chartId)
           chart.setMenuChart(newValue)
@@ -63,9 +60,6 @@ export default {
       },
     },
   },
-  computed: {
-    ...mapGetters('layoutMachines', ['selectedSelects', 'selectsData', 'toggleFilter', 'chartsData', 'activeChartData', 'prevGroupByData', 'activeMenuChartData', 'openMenuChart', 'legendFiltersParams']),
-  },
   mounted () {
     
   },
@@ -90,13 +84,13 @@ export default {
     },
     setTypeFunc: function(type, chart, data) {
       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 +99,59 @@ export default {
 </script>
 
 
-
 <template>
   <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"
+          :key="idx"
+        >
+          <Chart
+            :id="chart.id"
+            :idx="idx"
+            :type="chart.type"
+            :height="chart.height"
+            :maxHeight="chart.maxHeight"
+            :data="chart.data"
+          />
         </div>
-        <div v-if="!isChartTypes" id="main" class="relative flex flex-wrap justify-center w-full h-full mb-3" >
+      </div>
-          <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 
-            <Chart :idx="idx" :id="chart.id" :type="chart.type" :height="chart.height" :maxHeight="chart.maxHeight" :data="chart.data"/>
+          v-for="(chart, idx) in chartsData.types"
-          </div>
+          :key="idx"
+        >
+          <Chart
+            :id="chart.id"
+            :idx="idx"
+            :type="chart.type"
+            :height="chart.height"
+            :maxHeight="chart.maxHeight"
+            :data="chart.data"
+          />
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>

live_monitor_vue/src/components/5_pages/Main/Machines/DataModal/DataModal.vue

@@ -1,7 +1,5 @@
-
-
 <script>
-import {mapGetters, mapMutations, mapActions, useStore} from "vuex"
+import {mapGetters, mapActions} from "vuex"
 import Modal from '@molecules/VModal/VModal.vue'
 import Accordion from '@atoms/VAccordion.vue'
 import PackView from '@organisms/PackView/index.vue'
@@ -48,6 +46,9 @@ export default {
       machineOverInfo: null
     }
   },
+  computed: {
+    ...mapGetters('machines', ['machineInfo', 'reportPacks']),
+  },
   updated () {
     this.$nextTick(function () {
       if (this.data && this.id && this.open) {
@@ -59,9 +60,6 @@ export default {
       }
     })
   },
-  computed: {
-    ...mapGetters('machines', ['machineInfo', 'reportPacks']),
-  },
   methods: {
     ...mapActions('machines', ['loadPack']),
   }
@@ -70,7 +68,6 @@ export default {
 </script>
 
 
-
 <template>
   <Modal
     v-if="open"
@@ -81,38 +78,87 @@ export default {
       Последние данные
     </div>
     {{ console.log('reportPacks', reportPacks)
-     }}
+    }}
-    <div :id="id" class="w-[95vw] h-[85vh] m-auto p-5">
+    <div
-      <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 v-if="machineInfo" class="w-full flex flex-col gap-5">
+      <div
+        v-if="machineInfo"
+        class="w-full flex flex-col gap-5"
+      >
         <div class="w-full">
           <Accordion id="machineInfo">
             <template #header>
-              <div v-if="machineInfo?.machine_name" id="machineInfoTitle" class="font-bold text-xl">{{ machineInfo.machine_name }}</div>
+              <div
+                v-if="machineInfo?.machine_name"
+                id="machineInfoTitle"
+                class="font-bold text-xl"
+              >
+                {{ machineInfo.machine_name }}
+              </div>
             </template>
             <template #body>
-              <div v-if="machineInfo.machine_info?.length > 0" id="machineInfoBody" class="flex w-full justify-start 2xl:justify-between gap-3 flex-wrap">
+              <div
+                v-if="machineInfo.machine_info?.length > 0"
+                id="machineInfoBody"
+                class="flex w-full justify-start 2xl:justify-between gap-3 flex-wrap"
+              >
                 <div class="flex p-4">
                   <div class="flex mr-8 flex-col bg-slate-200 p-3 rounded">
-                    <h2 clas="font-bold flex items-center"><i class="ri-flashlight-line mr-1" /> Основная информация</h2>
+                    <h2 clas="font-bold flex items-center">
+                      <i class="ri-flashlight-line mr-1" /> Основная информация
+                    </h2>
                     <div class="mt-2 p-2 rounded-md flex flex-col bg-slate-300">
-                      <div v-if="machineMainInfo?.length > 0" class="flex flex-col gap-2">
+                      <div
-                        <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 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 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>
@@ -122,38 +168,62 @@ export default {
             </template>
           </Accordion>
         </div>
-        <Accordion :isOpen="true" id="machine_packs">
+        <Accordion
+          id="machine_packs"
+          :isOpen="true"
+        >
           <template #header>
-            <div class="font-bold text-xl">Пакеты</div>
+            <div class="font-bold text-xl">
+              Пакеты
+            </div>
           </template>
           <template #body>
             <div class="flex flex-col gap-4">
               <div id="packReportButtons">
                 <div class="flex flex-col gap-5">
                   <div class="grid grid-cols-12 gap-3">
-                    <div v-if="reportPacks.length === 0" class="flex items-center justify-center text-slate-700 text-2xl font-bold col-span-12">
+                    <div
+                      v-if="reportPacks.length === 0"
+                      class="flex items-center justify-center text-slate-700 text-2xl font-bold col-span-12"
+                    >
                       <h2>Нет данных по машине</h2>
                     </div>
-                    <div :key="idx" v-if="reportPacks.length > 0" v-for="(pack, idx) in reportPacks" class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2 flex items-start flex gap-1 justify-center rounded-md bg-slate-300">
+                    <div v-if="reportPacks.length > 0">
-                      <div class="flex-col flex-grow flex py-1">
+                      <div
-                        <div class="flex text-slate-700 font-medium px-3 text-slate-700">
+                        v-for="(pack, idx) in reportPacks"
-                          <div class="mr-1">Номер</div>
+                        :key="idx"
-                          <div>{{ pack.pack_number }}</div>
+                        class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2 flex items-start flex gap-1 justify-center rounded-md bg-slate-300"
+                      >
+                        <div class="flex-col flex-grow flex py-1">
+                          <div class="flex text-slate-700 font-medium px-3 text-slate-700">
+                            <div class="mr-1">
+                              Номер
+                            </div>
+                            <div>{{ pack.pack_number }}</div>
+                          </div>
+                          <div class="text-slate-600 flex px-3 text-slate-600">
+                            <div class="mr-1">
+                              Количество
+                            </div>
+                            <div>{{ pack.count }}</div>
+                          </div>
                         </div>
-                        <div class="text-slate-600 flex px-3 text-slate-600">
+                        <div
-                          <div class="mr-1">Количество</div>
+                          class="h-full flex items-center justify-center text-white rounded-md px-3 text-center cursor-pointer transitiona-all bg-slate-400 hover:bg-slate-600"
-                          <div>{{ pack.count }}</div>
+                          @click="loadPack(pack.pack_number)"
+                        >
+                          <i class="ri-eye-line" />
                         </div>
                       </div>
-                      <div @click="loadPack(pack.pack_number)" class="h-full flex items-center justify-center text-white rounded-md px-3 text-center cursor-pointer transitiona-all bg-slate-400 hover:bg-slate-600">
-                        <i class="ri-eye-line"></i>
-                      </div>
                     </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>
                   <span class="text-slate-400 text-sm">последние 30</span>
                 </template>

live_monitor_vue/src/components/5_pages/Main/Machines/DataModal/helpers.js

@@ -1,7 +1,7 @@
 const getMachineInfo = (info, isMain) => {
   const mainInfo = ["Текущая симкарта", "Последняя коммуникация", "Предприятие приписки", "Текущее устройство"]
   if (isMain) {
-    return info.reduce((acc, el, idx) => {
+    return info.reduce((acc, el) => {
       if (mainInfo.includes(Object.keys(el)[0])) {
         const item = {title: Object.keys(el)[0], val: Object.values(el)[0]}
         acc.push(item)
@@ -12,7 +12,7 @@ const getMachineInfo = (info, isMain) => {
     }, [])
   }
   if (!isMain) {
-    return info.reduce((acc, el, idx) => {
+    return info.reduce((acc, el) => {
       if (!mainInfo.includes(Object.keys(el)[0])) {
         const item = {title: Object.keys(el)[0], val: Object.values(el)[0]}
         acc.push(item)

live_monitor_vue/src/components/5_pages/Main/Machines/Filters.vue

@@ -1,15 +1,10 @@
-
-
 <script>
-import {ref, toRaw, computed} from 'vue'
+import {mapGetters, mapMutations, mapActions} from "vuex"
-import {mapGetters, mapMutations, mapActions, useStore} from "vuex";
-import Button from "@atoms/VButton.vue";
 import VueMultiselect from 'vue-multiselect'
 
 export default {
-  name: 'Filters',
+  name: 'FiltersComponent',
   components: {
-    Button,
     VueMultiselect
   },
   setup() {
@@ -22,14 +17,14 @@ export default {
     }
   },
   computed: {
-    ...mapGetters('machines', ['selectedSelects', 'selectsData', 'toggleFilter', 'selectedData']),
+    ...mapGetters('layoutMachines', ['selectedSelects', 'selectsData', 'toggleFilter', 'selectedData']),
   },
   mounted () {
     
   },
   methods: {
-    ...mapMutations('machines', ['setSelectedSelect', 'setToggleFilter']),
+    ...mapMutations('layoutMachines', ['setSelectedSelect', 'setToggleFilter']),
-    ...mapActions('machines', ['updateSelects']),
+    ...mapActions('layoutMachines', ['updateSelects']),
     updateSelectedSelects: function(value) {
       if (value.length > 0) {
         this.updateSelects({key: 'set', value: value})
@@ -44,25 +39,38 @@ export default {
 </script>
 
 
-
 <template>
-  <div id="ignore:2Qxwqz" class="pb-1">
+  <div
+    id="ignore:2Qxwqz"
+    class="pb-1"
+  >
     {{ console.log('selectedData' ,selectedData)
-     }}
+    }}
-    <div v-if="toggleFilter" wrapper_class="grid grid-cols-12 gap-2" selects_class="col-span-12 sm:col-span-6 lg:col-span-3" class="grid grid-cols-12 gap-2 mb-3 border-t border-slate-300 pt-3"  fields={@filters_fields} id="SelectFilters" phx-hook="SelectFilters">
+    <div
-      <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, idx) in selectsData"
+        :key="idx"
+        class="col-span-12 sm:col-span-6 lg:col-span-3"
+      >
         <VueMultiselect
-          :multiple="true"
           v-model="selectedSelects[selectData.key]"
+          :multiple="true"
           label="name"
           track-by="name"
           :options="selectData.data"
           :placeholder="selectData.title"
+          :showLabels="false"
           @update:model-value="updateSelectedSelects"
           @remove="removedOption"
-          :showLabels="false"
+        />
-          >
-        </VueMultiselect>
       </div>
     </div>
   </div>

live_monitor_vue/src/components/5_pages/Main/Machines/HistoryViews.vue

@@ -13,10 +13,10 @@ export default {
     // const updatedData = historyData.filter((el, idx, arr) => arr.findIndex((item) => item.machine_id === el.machine_id) === idx).slice(0, 50) // uniq values
     const updatedData = isHistoryData ? historyData.slice(0, 50) : []
     const store = useStore()
-    store.commit('machines/setHistoryData', updatedData)
+    store.commit('layoutMachines/setHistoryData', updatedData)
   },
   computed: {
-    ...mapGetters('machines', ['historyData']),
+    ...mapGetters('layoutMachines', ['historyData']),
     tabulatorOtps() {
       return {
         dataSource: this.historyData,
@@ -51,7 +51,7 @@ export default {
     }
   },
   methods: {
-    ...mapMutations('machines', ['setHistoryData']),
+    ...mapMutations('layoutMachines', ['setHistoryData']),
   }
 }
 

live_monitor_vue/src/components/5_pages/Main/Machines/Machine.vue

@@ -1,15 +1,11 @@
-
-
 <script>
-import {mapGetters, mapMutations, mapActions, useStore} from "vuex"
+import {mapGetters, mapMutations, mapActions} from "vuex"
-import Button from "@atoms/VButton.vue"
 import { EventStore } from "@store/hooks/EventStore"
 import moment from 'moment'
 
 export default {
-  name: 'Machine',
+  name: 'MachineComponent',
   components: {
-    Button,
   },
   props: {
     machine: {
@@ -33,18 +29,18 @@ export default {
     }
   },
   computed: {
-    ...mapGetters('machines', ['machinesData', 'historyData', 'historyMachines']),
+    ...mapGetters('layoutMachines', ['machinesData', 'historyData', 'historyMachines']),
   },
   mounted () {
     
   },
   methods: {
-    ...mapMutations('machines', ['setInitHistory', 'setHistoryData', 'setHistoryMachines']),
+    ...mapMutations('layoutMachines', ['setInitHistory', 'setHistoryData', 'setHistoryMachines']),
-    ...mapActions('machines', ['openMapModal', 'openDataModal']),
+    ...mapActions('layoutMachines', ['openMapModal', 'openDataModal']),
     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}`
     },
-    cardFunc: function(value) {
+    cardFunc: function() {
       this.initLocalStorage = new EventStore()
       if (this.machine.machine_id) {
         const valueStorage = {machine_id: this.machine.machine_id, machine_type: this.machine.machine_type, link: `/html/askr_devices/analyze_device/${this.machine.device_number}`, created_at: moment().format('HH:mm:ss DD-MM-YY')}
@@ -77,41 +73,94 @@ export default {
 </script>
 
 
-
 <template>
-  <div id="card" class="pt-3 border w-[23%] min-w-[310px] border-slate-300 rounded transition-all bg-slate-300}">
+  <div
+    id="card"
+    class="pt-3 border w-[23%] min-w-[310px] border-slate-300 rounded transition-all bg-slate-300}"
+  >
     <div class="h-full flex flex-col gap-5 relative text-left  justify-between">
-      <div class="flex flex-col items-end absolute text-white top-[-0.75rem] right-0 h-full min-w-[173px] p-2" style="backdrop-filter: blur(10px);">
+      <div
-        <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 class="flex flex-row">
-          <span>{{ machine.org_name }}</span><i class="ri-building-2-line ml-2" title="Компания:"/>
+          <span>{{ machine.railway_name }}</span><i
+            class="ri-route-line ml-2"
+            title="Дорога:"
+          />
         </div>
         <div class="flex flex-row">
-          <span>{{ machine.nomer_zn8 }}</span><i class="ri-number-8 ml-2"       title="8зн номер:"/>
+          <span>{{ machine.org_name }}</span><i
+            class="ri-building-2-line ml-2"
+            title="Компания:"
+          />
         </div>
-        <div class="flex flex-row" search-mode="device_number">
+        <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 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 class="flex lg:flex-row flex-col gap-1 my-2 px-2 z-[1]">
         <div class="flex">
-          <a :href="`/html/askr_devices/analyze_device/${machine.device_number}`" id="to_card_machine" no-init="false" @click="cardFunc(machine)" target="_blank" :class="buttonClass('bg-primary text-white')">Карточка</a>
+          <a
+            id="to_card_machine"
+            :href="`/html/askr_devices/analyze_device/${machine.device_number}`"
+            no-init="false"
+            target="_blank"
+            :class="buttonClass('bg-primary text-white')"
+            @click="cardFunc(machine)"
+          >Карточка</a>
         </div>
         <div class="flex gap-1">
-          <div @click="mapFunc(machine)"  :class="buttonClass('bg-white/25 hover:bg-slate-400 hover:text-white')"><i class="ri-map-pin-line"/></div>
+          <div
-          <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>
-
 </template>
 
 <style scoped>

live_monitor_vue/src/components/5_pages/Main/Machines/Machines.vue

@@ -1,9 +1,7 @@
-
-
 <script>
 import {computed} from 'vue'
 import {mapGetters, mapMutations, mapActions, useStore} from "vuex"
-import {useRoute, useRouter} from 'vue-router'
+import {useRoute} from 'vue-router'
 import Button from "@atoms/VButton.vue"
 import VueMultiselect from 'vue-multiselect'
 import Filters from "./Filters.vue"
@@ -18,7 +16,7 @@ import {PushAfterTimeout} from '@store/hooks/PushAfterTimeout'
 import {EventStore} from '@store/hooks/EventStore'
 
 export default {
-  name: 'Machines',
+  name: 'MachinesComponent',
   components: {
     Button,
     Filters,
@@ -37,12 +35,6 @@ export default {
       default: 'static',
     },
   },
-  data () {
-    return {
-      openMap: false,
-      openData: false,
-    }
-  },
   setup () {
     const initLocalStorage = new EventStore()
     const store = useStore()
@@ -60,10 +52,24 @@ export default {
     store.commit('layoutMachines/setHistoryData', updatedData)
     store.dispatch('layoutMachines/uploadData', externalParams)
   },
+  data () {
+    return {
+      openMap: false,
+      openData: false,
+    }
+  },
   computed: {
     ...mapGetters('layoutMachines', ['searchModes', 'searchValue', 'selectedSearchMode', 'leftTopButtons', 'rightTopButtons', 'selectedMode', 'toggleFilter', 'activeFilterBtn', 'mapData', 'machinesData']),
     ...mapGetters('layout', ['isOpenMenu']),
   },
+  watch: {
+    isSuccessSearch: {
+      handler(newValue, oldValue)  {
+        console.log('isSuccessSearch', newValue, oldValue)
+      },
+      deep: true
+    },
+  },
   mounted () {
 
   },
@@ -83,14 +89,6 @@ export default {
     const store = useStore();
     store.dispatch('layoutMachines/resetStore')
   },
-  watch: {
-    isSuccessSearch: {
-      handler(newValue, oldValue)  {
-        console.log('isSuccessSearch', newValue, oldValue)
-      },
-      deep: true
-    },
-  },
   methods: {
     ...mapMutations('layoutMachines', ['setSearchMode', 'setSelectedMode', 'setToggleFilter', 'setActiveFilterBtn']),
     ...mapActions('layoutMachines', ['updateSearch', 'clearFilters']),
@@ -141,13 +139,15 @@ export default {
 </script>
 
 
-
 <template>
   <div class="px-2 sm:px-5 pt-1 bg-light">
     <div class="relative">
       <div class="grid grid-cols-12 gap-4 md:gap-3 lg:gap-4 pb-3">
         <div class="flex items-center col-span-12 sm:col-span-8 lg:col-span-5 xl:col-span-4 2xl:col-span-3">
-          <div id="search" class="relative w-full max-w-[150px] h-[31px] pl-1 py-1 bg-white border border-primary rounded-l-md z-30">
+          <div
+            id="search"
+            class="relative w-full max-w-[150px] h-[31px] pl-1 py-1 bg-white border border-primary rounded-l-md z-30"
+          >
             <VueMultiselect
               v-model="selectedSearchMode"
               label="name"
@@ -156,50 +156,126 @@ export default {
               placeholder=""
               :showLabels="false"
               @update:model-value="updateSearchMode"
-              >
+            />
-            </VueMultiselect>
           </div>
-          <div id="searchInput" class="relative w-full border-r border-t border-b border-primary rounded-r-md">
+          <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>
         <!-- {{ 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>
         </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 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>
-        <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>
         </ul>
       </div>
-      <div id="filters" v-if="toggleFilter">
+      <div
+        v-if="toggleFilter"
+        id="filters"
+      >
         <Filters />
       </div>
-      <div class="border-2 rounded-lg w-full bottom-0"></div>
+      <div 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="">
+          <li
-            <Machine :machine="machine" :openMap="toggleMap" :openData="toggleData" />
+            v-for="(machine, idx) in machinesData"
+            :key="idx"
+            class=""
+          >
+            <Machine
+              :machine="machine"
+              :openMap="toggleMap"
+              :openData="toggleData"
+            />
           </li>
         </ul>
       </div>
-      <div id="tableMachines" v-if="selectedMode === 'table'" class="tab-pane bg-light relative py-4 text-center min-h-[300px] relative rounded-md w-full">
+      <div
+        v-if="selectedMode === 'table'"
+        id="tableMachines"
+        class="tab-pane bg-light relative py-4 text-center min-h-[300px] relative rounded-md w-full"
+      >
         <Table />
       </div>
-      <div id="historyViews" v-if="selectedMode === 'history'" class="tab-pane bg-light relative shadow  text-center min-h-[300px] relative w-full p-4">
+      <div
+        v-if="selectedMode === 'history'"
+        id="historyViews"
+        class="tab-pane bg-light relative shadow  text-center min-h-[300px] relative w-full p-4"
+      >
         <HistoryViews />
       </div>
-      <div id="charts" v-if="selectedMode === 'charts'" class="w-full min-h-[80vh] pb-5 bg-light dark:bg-slate-900 dark:text-slate-300 relative">
+      <div
+        v-if="selectedMode === 'charts'"
+        id="charts"
+        class="w-full min-h-[80vh] pb-5 bg-light dark:bg-slate-900 dark:text-slate-300 relative"
+      >
         <!-- <.loader :if={@display_config.is_loading_charts} /> -->
         <div>
           <Charts />
@@ -210,10 +286,10 @@ export default {
         <div class="flex items-center justify-center text-lg font-bold pt-5">Нет данных</div>
       </div> -->
       <MapModal
+        id="mapModal"
         :open="openMap"
         :close="closeMap"
         :data="mapData"
-        id="mapModal"
         headerClass="border-b p-4 font-bold"
       >
         <template #header>
@@ -221,18 +297,38 @@ export default {
             Карта
           </div>
         </template>
-        <div v-if="!mapData" id="map_loader" class="flex justify-center" style="width: 95vw; height: 82vh;">
+        <div
+          v-if="!mapData"
+          id="map_loader"
+          class="flex justify-center"
+          style="width: 95vw; height: 82vh;"
+        >
           <Spinner />
         </div>
-        <div v-if="mapData" id="mapModal" style="width: 95vw; height: 82vh;"></div>
+        <div
-        <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>
-          <div id="popup-content"></div>
+          <div id="popup-content" />
         </div>
       </MapModal>
-      <DataModal id="dataModal" :open="openData" :close="closeData" />
+      <DataModal
+        id="dataModal"
+        :open="openData"
+        :close="closeData"
+      />
     </div>
   </div>
 </template>

live_monitor_vue/src/components/5_pages/Main/Machines/Table.vue

@@ -1,10 +1,9 @@
 <script>
-import {mapGetters, mapActions, mapMutations, useStore} from "vuex"
+import {mapGetters, mapActions, mapMutations} from "vuex"
 import Tabulator from "@molecules/VTabulator/VTabulator.vue"
-import { EventStore } from "@store/hooks/EventStore"
 
 export default {
-  name: 'Table',
+  name: 'TableComponent',
   components: {Tabulator},
   data () {
     
@@ -12,7 +11,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters('machines', ['tableData', 'pagination']),
+    ...mapGetters('layoutMachines', ['tableData', 'pagination']),
     tabulatorOtps() {
       return {
         dataSource: this.tableData,
@@ -82,8 +81,8 @@ export default {
     }
   },
   methods: {
-    ...mapMutations('machines', ['setHistoryData']),
+    ...mapMutations('layoutMachines', ['setHistoryData']),
-    ...mapActions('machines', ['updatePagination']),
+    ...mapActions('layoutMachines', ['updatePagination']),
   }
 }
 

live_monitor_vue/src/components/5_pages/Main/index.vue

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

live_monitor_vue/src/components/5_pages/News/index.vue

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

live_monitor_vue/src/components/5_pages/Packs/Chart/Chart.vue

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

live_monitor_vue/src/components/5_pages/Packs/index.vue

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

live_monitor_vue/src/components/6_admin_pages/Diap/index.vue

@@ -1,7 +1,7 @@
 <script>
 
 export default {
-  name: 'Diap',
+  name: 'DiapPage',
   components: {},
   data() {
   },

live_monitor_vue/src/components/6_admin_pages/News/index.vue

@@ -1,7 +1,7 @@
 <script>
 
 export default {
-  name: 'News',
+  name: 'NewsPage',
   components: {},
   data() {
   },

live_monitor_vue/src/components/6_admin_pages/Packs/index.vue

@@ -1,7 +1,7 @@
 <script>
 
 export default {
-  name: 'Packs',
+  name: 'PacksAdminPage',
   components: {},
   data() {
   },

live_monitor_vue/src/components/6_admin_pages/Services/Services.vue

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

live_monitor_vue/src/helpers/dom.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-undef
 export default dom = (() => {
   const getNodeList = (arg) => {
     if (typeof arg === "string" && arg.trim().slice(0, 1) !== "<") {

live_monitor_vue/src/helpers/examle.vue

@@ -1,13 +1,7 @@
-<template>
-  <div>
-    123
-  </div>
-</template>
-
 <script>
 
 export default {
-  name: 'Name',
+  name: 'NameComponent',
   components: {},
   data() {
   },
@@ -18,3 +12,9 @@ export default {
 }
 
 </script>
+
+<template>
+  <div>
+    123
+  </div>
+</template>

live_monitor_vue/src/router/index.js

@@ -1,7 +1,7 @@
 import {createRouter, createWebHistory} from "vue-router";
 import Main from "@pages/Main/index.vue"
 import Auth from "@pages/Auth/index.vue"
-import Communication from "@pages/Communication/index.vue"
+// import Communication from "@pages/Communication/index.vue"
 import LastPacksNum from "@pages/LastPacksNum/index.vue"
 import Fuel from "@pages/Fuel/index.vue"
 import Cron from "@pages/Cron/index.vue"
@@ -12,14 +12,13 @@ import Packs from "@pages/Packs/index.vue"
 import FileViewer from "@pages/FileViewer/index.vue"
 import NotFound from "@pages/404/index.vue"
 import Diap from "@admin_pages/Diap/index.vue"
-import News from "@admin_pages/News/index.vue"
+// import News from "@admin_pages/News/index.vue"
 import Machines from "@pages/Main/Machines/Machines.vue"
 import FinderPacks from "@pages/Main/FinderPacks/FinderPacks.vue"
 import AddUsers from "@pages/Main/AddUsers/AddUsers.vue"
 import Services from "@admin_pages/Services/Services.vue"
-import ServiceManage from "@admin_pages/ServiceManage/index.vue"
+// import ServiceManage from "@admin_pages/ServiceManage/index.vue"
-import {get} from "@store/modules/apiHelpers"
+// import {get} from "@store/modules/apiHelpers"
-import {cond, T} from 'ramda'
 
 
 const routes = [
@@ -120,21 +119,21 @@ const routes = [
 const routerHistory = createWebHistory();
 
 const router = createRouter({
-    history: routerHistory,
+  history: routerHistory,
-    routes
+  routes
 });
 
-const logout = (from, next) => {
+// const logout = (from, next) => {
-  localStorage.removeItem("token")
+//   localStorage.removeItem("token")
-  sessionStorage.setItem("pathname", from.fullPath)
+//   sessionStorage.setItem("pathname", from.fullPath)
-  next()
+//   next()
-}
+// }
 
-const auth_check = async () => {
+// const auth_check = async () => {
-  return await get("/api/auth/loginStatus", ({data}) => {
+//   return await get("/api/auth/loginStatus", ({data}) => {
-    return data
+//     return data
-  })
+//   })
-}
+// }
 
 // router.beforeEach(async (to, from, next) => {
 //   const status = await auth_check()

live_monitor_vue/src/services/ServiceOfMachines.js

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

live_monitor_vue/src/store/hooks/CopyToClipboard.js

@@ -18,7 +18,7 @@ export class CopyToClipboard {
 
   copy (text, id) {
     if (!navigator.clipboard) {
-      fallbackCopyTextToClipboard(text)
+      this.fallbackCopyTextToClipboard(text)
       return
     }
     navigator.clipboard.writeText(text).then(function() {

live_monitor_vue/src/store/hooks/Echarts/graphicElements.js

@@ -64,45 +64,45 @@ const viewGraphicsTypesBar = (chartId, title, groupByKey, prevGroupByData, filte
 
   if(groupByKey !== groupByKeys.firstLayout && !isEqualKeyValue(prevGroupByData, groupByKeys.firstLayout, null)) {
 
-       const buttonPrevious = {id: `${filterKey}`, info: {typeEl: 'buttonPrevious', prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters, type: type, groupByValue: groupByValue}, type: 'image', right: windowConfig?.bar?.graphic?.back?.right, top: windowConfig?.bar?.graphic?.back?.top, z: 999, style: {image: '/images/arrow-go-back-line.svg', width: 17, height: 17}}
+    const buttonPrevious = {id: `${filterKey}`, info: {typeEl: 'buttonPrevious', prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters, type: type, groupByValue: groupByValue}, type: 'image', right: windowConfig?.bar?.graphic?.back?.right, top: windowConfig?.bar?.graphic?.back?.top, z: 999, style: {image: '/images/arrow-go-back-line.svg', width: 17, height: 17}}
 
-       elements.push(buttonPrevious)
+    elements.push(buttonPrevious)
   }
-            const elMain = {id: '', info: {typeEl: 'link', filterKey: filterKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters, type: type, groupByValue: groupByValue}, type: 'text', left: windowConfig?.bar?.graphic?.link?.left, top: windowConfig?.bar?.graphic?.link?.top, z: 999, style: {text: 'Главная', fontSize: 10}}
+  const 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
 }

live_monitor_vue/src/store/hooks/Echarts/helpers.js

@@ -1,157 +1,159 @@
 import {groupByKeys} from './staticData'
 
 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) => {
-     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 chartsFiltersNamesMl = (data) => [...new Set(data.map((el) => el.map((item) => item.charts.name)).flat().filter(el => el !== undefined))]
 
 const updateBarChartsData = (data, key) => data.map((el) => {
-          return el.filter((item) => {
+  return el.filter((item) => {
-          if(item.name === key) {
+    if(item.name === key) {
-               return el
+      return el
-          }
+    }
-     })
+  })
 }).flat()
 
 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)
 
 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) => {
-     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 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) => {
 
-     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) => {
-     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': {
+    const xAxisMountData = params.yAxisData.sort((a, b) => a.key - b.key).map((el) => {
+      return `${el.key !== null ? el.key : 'Нет данных'} \n ${el.val}`})
+    const mountData = params.xAxisData.sort().map((el) =>  prepareBarTypesData(el, params.xAxisData, params))
+    return {axisData: xAxisMountData, updatedData: groupByBarTypesData(mountData, params.xAxisData, chartsFiltersNames)}
+  }
 
-          case 'mount':
+  default : {
-               const xAxisMountData = params.yAxisData.sort((a, b) => a.key - b.key).map((el) => {
+    const yAxisDefaultData = params.yAxisData.sort().map((el) => {
-                    return `${el.key !== null ? el.key : 'Нет данных'} \n ${el.val}`})
+      return `${el.key !== null ? el.key : 'Нет данных'} ${el.val}`
-               const mountData = params.xAxisData.sort().map((el) =>  prepareBarTypesData(el, params.xAxisData, params))
+    }).sort((a, b) => a - b).reverse()
-               return {axisData: xAxisMountData, updatedData: groupByBarTypesData(mountData, params.xAxisData, chartsFiltersNames)}
+    const defaultData = params.xAxisData.sort().map((el) => prepareBarTypesData(el, params.xAxisData, params))
-
+    return {axisData: yAxisDefaultData, updatedData: groupByBarTypesData(defaultData, params.xAxisData, chartsFiltersNames)}
-          default :
+  }
-               const yAxisDefaultData = params.yAxisData.sort().map((el) => {
+  }
-                    return `${el.key !== null ? el.key : 'Нет данных'} ${el.val}`
-               }).sort((a, b) => a - b).reverse()
-               const defaultData = params.xAxisData.sort().map((el) => prepareBarTypesData(el, params.xAxisData, params))
-                    return {axisData: yAxisDefaultData, updatedData: groupByBarTypesData(defaultData, params.xAxisData, chartsFiltersNames)}
-     }
 }
 
 export {isEqualKeyValue, getTextWidth, updatedGroupByData, choiceTypeBarTypesCharts}

live_monitor_vue/src/store/hooks/Echarts/staticData.js

@@ -1,118 +1,121 @@
 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) => {
-     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) => {
-     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) => {
-     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) => {
-     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 [currentEl] = data?.linkData?.filter((el) => el?.machine_type === data?.groupByData[data?.groupByKey])
+  const currentArr = data?.linkData?.filter((el) => el?.machine_type === data?.groupByData[data?.groupByKey])
-     window.open(`/html/askr_devices/analyze_device/${currentEl.device_number}`, '_blank')
+  if (currentArr?.length > 0) {
+    const currentEl = currentArr[0]
+    window.open(`/html/askr_devices/analyze_device/${currentEl.device_number}`, '_blank')
+  }
 }
 
 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 = {
-     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}

live_monitor_vue/src/store/hooks/Echarts/windowConfigs.js

@@ -1,381 +1,381 @@
 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 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) => {
-     return {
+  return {
-          width: width,
+    width: width,
-          height: height
+    height: height
-     }
+  }
-   }
+}
 
 export {axisBarConfig, windowConfig, sizeOptions}   

live_monitor_vue/src/store/index.js

@@ -12,6 +12,7 @@ import { store as packs } from '@/store/modules/packs';
 import { store as services } from '@/store/modules/services';
 import { store as logger } from '@/store/modules/logger';
 
+// eslint-disable-next-line no-undef
 let debug = process.env.NODE_ENV !== 'production';
 debug = false;
 

live_monitor_vue/src/store/modules/add_users/index.js

@@ -1,6 +1,5 @@
-import {toRaw} from 'vue'
 import {columns, users} from './StaticData'
-import {equals, isEmpty, uniq} from 'ramda'
+import {isEmpty} from 'ramda'
 
 const initState = {
   adminData: [],
@@ -24,7 +23,7 @@ const mutations = {
 };
 
 const actions = {
-  uploadData: async ({commit, getters, state}, historyData) => {
+  uploadData: async ({commit}, historyData) => {
     try{
 
       /*
@@ -41,7 +40,7 @@ const actions = {
       }
       
       */
-
+      console.log('historyData', historyData)
       const adminList = !isEmpty(users) ? users : []
 
       const report = {

live_monitor_vue/src/store/modules/apiHelpers.js

@@ -21,21 +21,21 @@ const post = async (path, data, onError) => {
       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) => {
   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)
       authViewer(error)
-  })
+    })
 }
 
 

live_monitor_vue/src/store/modules/auth/index.js

@@ -1,7 +1,3 @@
-import {get, post} from '../apiHelpers'
-import {groupBy} from 'ramda'
-import {toRaw} from "vue"
-import {cond, T, equals} from 'ramda'
 import axios from 'axios';
 import {orisMenu} from './menuList'
 

live_monitor_vue/src/store/modules/auth/menuList.js

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

live_monitor_vue/src/store/modules/example/index.js

@@ -1,10 +1,8 @@
-import moment from 'moment'
-
 const initState = {
 }
 
 const state = {
-    ...initState
+  ...initState
 }
 
 const getters = {
@@ -18,9 +16,9 @@ const actions = {
 }
 
 export const store = {
-    namespaced: true,
+  namespaced: true,
-    state,
+  state,
-    getters,
+  getters,
-    mutations,
+  mutations,
-    actions,
+  actions,
 }

live_monitor_vue/src/store/modules/finder_packs/StaticData.js

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

live_monitor_vue/src/store/modules/finder_packs/index.js

@@ -1,6 +1,5 @@
-import {toRaw} from 'vue'
 import {packsGroups} from './StaticData'
-import {equals, isEmpty, uniq} from 'ramda'
+import {isEmpty} from 'ramda'
 
 const initState = {
   
@@ -36,7 +35,7 @@ const mutations = {
 };
 
 const actions = {
-  uploadData: async ({commit, getters, state}, historyData) => {
+  uploadData: async ({commit}) => {
     try{
 
       /*
@@ -81,7 +80,7 @@ const actions = {
       console.error(err)
     }
   },
-  updateSearch: async ({commit, getters, state}, updatedValue) => {
+  updateSearch: async ({commit, state}, updatedValue) => {
     try {
       const groups = state.packsGroupsDefault
       const readyValue = updatedValue?.toLowerCase().split(' ')

live_monitor_vue/src/store/modules/last_packs/index.js

@@ -13,7 +13,7 @@ const initState = {
 }
 
 const state = {
-    ...initState
+  ...initState
 }
 
 const getters = {
@@ -35,7 +35,7 @@ const mutations = {
 
 
 const actions = {
-  uploadData: ({commit, state}) => {
+  uploadData: ({state}) => {
     setTimeout(() => {
       state.pageState = 'loading'
     }, 500);
@@ -46,9 +46,9 @@ const actions = {
 }
 
 export const store = {
-    namespaced: true,
+  namespaced: true,
-    state,
+  state,
-    getters,
+  getters,
-    mutations,
+  mutations,
-    actions,
+  actions,
 }

live_monitor_vue/src/store/modules/last_packs_num/index.js

@@ -1,5 +1,3 @@
-import moment from 'moment'
-
 const initState = {
   imei: "",
   pageState: "await", // await | loading | isLoaded | error
@@ -20,7 +18,7 @@ const initState = {
 }
 
 const state = {
-    ...initState
+  ...initState
 }
 
 const getters = {
@@ -38,7 +36,7 @@ const mutations = {
 
 
 const actions = {
-  uploadData: ({commit, state}) => {
+  uploadData: ({state}) => {
     setTimeout(() => {
       state.pageState = 'loading'
     }, 500);
@@ -49,9 +47,9 @@ const actions = {
 }
 
 export const store = {
-    namespaced: true,
+  namespaced: true,
-    state,
+  state,
-    getters,
+  getters,
-    mutations,
+  mutations,
-    actions,
+  actions,
 }

live_monitor_vue/src/store/modules/layoutMachines/StaticData.js

@@ -32,39 +32,39 @@ const pagination = {
 
 const selectors = {
   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: ["ЦДИМ", "Другие", "ЦДРП"],
   railway_name: ["Ю-Вост", "Моск", "З-Сиб", "Клг", "Горьк",
-   "Сверд", "Окт", "Заб", "В-Сиб", "С-Кав", "Кбш",
+    "Сверд", "Окт", "Заб", "В-Сиб", "С-Кав", "Кбш",
-   "Д-Вост", null, "Ю-Ур", "Сев", "Прив", "РЖД", "Крас"],
+    "Д-Вост", null, "Ю-Ур", "Сев", "Прив", "РЖД", "Крас"],
   type: ["УТМ", "РПБ", "ПРЛ УПК", "ПУМА", "МДС", "МПТ",
-   "ТЭС", "СПП", "ДСП", "СЧ", "ЩОМ", "RM", "АСГ", "ВПО",
+    "ТЭС", "СПП", "ДСП", "СЧ", "ЩОМ", "RM", "АСГ", "ВПО",
-   "без типа", "ПМГ", "МТГ", "АС", "СМ", "ВПР", "ПСС",
+    "без типа", "ПМГ", "МТГ", "АС", "СМ", "ВПР", "ПСС",
-   "МПК", "АДМ", "АГД", "УК", "АМ", "ПРЛ", "АДЭ",
+    "МПК", "АДМ", "АГД", "УК", "АМ", "ПРЛ", "АДЭ",
-   "Унимат", "ВПРС", "ПБ", "Дуоматик", "МВУ",
+    "Унимат", "ВПРС", "ПБ", "Дуоматик", "МВУ",
-   "АВФ-1М.2", "Динамик", "АГС", "ПМА", "ССГ-1", "СЧУ",
+    "АВФ-1М.2", "Динамик", "АГС", "ПМА", "ССГ-1", "СЧУ",
-   "АГП", "Унимат компакт", "ДГКу", "СЗ", "ТЭУ",
+    "АГП", "Унимат компакт", "ДГКу", "СЗ", "ТЭУ",
-   "РБ", "ФАТРА",],
+    "РБ", "ФАТРА",],
   zav_nomer: ["84", "49", "15", "90", "27", "9", "5", "105", "005", "656",
-   "001", "39", "38", "57", "03", "003", "593", "235", "1453", "1307", "766",
+    "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 = {
   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: {
-  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 = [
@@ -1305,282 +1305,282 @@ const dataMachines = [
 ]
 
 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,
-     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",
-     "uk", "uni", "utm", "vpo", ""],
+      "uk", "uni", "utm", "vpo", ""],
     id: 197,
     insertedAt: "2023-03-15 06:27:41",
     isProd: true,
@@ -2423,7 +2423,7 @@ const multiReport = {
 
 const multiPackStructure = [
   // %LiveMonitor.Packages.Models.PackStruct{
-    // __meta__: #Ecto.Schema.Metadata<:loaded, "pack_struct">,
+  // __meta__: #Ecto.Schema.Metadata<:loaded, "pack_struct">,
   {
     id: 197,
     description: null,
@@ -2523,7 +2523,7 @@ const multiPackStructure = [
       }
     ],
     diag_tables: ["as", "dsp", "dyn", "mpt", "pmg", "rpb", "rs", "schom", "sm",
-     "uk", "uni", "utm", "vpo", ""],
+      "uk", "uni", "utm", "vpo", ""],
     diag_exclude_tables: null,
     diag_classifications: null,
     diag_types: null,
@@ -2531,9 +2531,9 @@ const multiPackStructure = [
     diag_exclude_classifications: null,
     diag_exclude_types: null,
     diag_exclude_sps: [993, 1062, 3078, 1136, 1109, 1618, 1085, 2936, 1669,
-     1045, 1739, 1525, 1869, 1461, 1843, 928, 1940, 1907, 1482, 1870, 1813,
+      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: #Ecto.Association.NotLoaded<association :pack_group is not loaded>,
     inserted_at: "2023-03-15 06:27:41",
@@ -2838,8 +2838,8 @@ const multiPackStructure = [
     diag_classifications: null,
     diag_types: null,
     diag_sps: [993, 1062, 3078, 1136, 1109, 1618, 1085, 2936, 1669, 1045, 1739,
-     1525, 1869, 1461, 1843, 928, 1940, 1907, 1482, 1870, 1813, 1131, 1133,
+      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_types: null,
     diag_exclude_sps: null,

live_monitor_vue/src/store/modules/layoutMachines/helpers.js

@@ -1,5 +1,5 @@
-import {isEmpty, uniq} from 'ramda'
+import {isEmpty} from 'ramda'
-import {pagination, searchModes} from './StaticData'
+import {searchModes} from './StaticData'
 
 const prepareSelects = (selects, selectors) => {
   const updatedSelects = selects.reduce((acc, el) => {
@@ -14,14 +14,14 @@ const prepareSelects = (selects, selectors) => {
   // console.log('updSelects', updatedSelects)
   
   const filteredSelects = updatedSelects.map((el) => ({...el, data: el.data.reduce((acc, select) => {
-      if (select) {
+    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)
   // console.log('filteredSelects', filteredSelects)
   return filteredSelects

live_monitor_vue/src/store/modules/layoutMachines/helpersCharts.js

@@ -1,431 +1,438 @@
 import { chartsFilterParams, chartsGroupByParams, chartsGroupByParams2, chartsFilterKeysMl, chartsMountParams, chartsBarTypesParams, chartsBarTypesGroupByParams, chartsBarTypesWithoutLayoutParams } from "./StaticData"
 import {cond, uniq, has, T} from 'ramda'
 
-  const setPeriodCharts = (filterKeys) => {
+const setPeriodCharts = (filterKeys) => {
-    if (typeof filterKeys === 'array') return {period: 'dayly', title: '24 часа'}
+  if (filterKeys && filterKeys.length > 0) 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 {
         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 {
         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, ]) => 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(([, groupArr]) => Object.groupBy(groupArr, (el) => el[groupByKey]))
+  const yAxisData = Object.entries(groupedByGroupByKeyY).map(([key, val]) => ({key: key, val: val.length}))
+    
+  const [groupedByGroupByKeyX] = filteredGroupByData.map(([, groupArr]) => Object.groupBy(groupArr, (el) => el[groupByKey]))
+  const xAxisData = Object.entries(groupedByGroupByKeyX).map(([key, groupArr]) => {
+    const groupByFilterData = Object.groupBy(groupArr, (el) => el[filterKey])
+    const newArr = Object.entries(groupByFilterData).map(([key, val]) => ({name: key, value: val.length, linkData: groupByKey === 'machine_type' ? val.map((el) => ({machine_type: el.machine_type, device_number: el.device_number})) : ''}))
+    return {yAxisData: key, totalCount: groupArr.length, charts: newArr}
+  })
+
+  const countMachines = yAxisData.reduce((acc, type) => acc + type.val, 0)
+
+  return {yAxisData: yAxisData, xAxisData: xAxisData, countMachines: countMachines, period: setPeriodCharts(filterKey).title, filterKey: filterKey, groupByKey: groupByKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters, groupByValue: groupByValue}
+}
+
+const chartsBarTypesGroupedByMl = (data, groupByKey, filterKeys, prevGroupByData, prevGroupByFilters) => {
+
+  const groupByData = Object.groupBy(data, (el) => el[groupByKey])
+  const yAxisData = Object.entries(groupByData).map(([key, val]) => {
+    const allValuesArr = filterKeys.map((filterKey) => {
+      const machinesWithMl = val.reduce((acc, el) => {
+        if (el[filterKey] || el[filterKey] === 0) {
+          acc = acc + el[filterKey]
         } else {
           acc
         }
         return acc
       }, 0)
-      return {key: filterKey, value: countNull}
+      const machinesWithoutMl = val.filter((el) => el[filterKey] === null).length
+      return {machinesWithMl: machinesWithMl, machinesWithoutMl: machinesWithoutMl}
     })
-
+    // console.log('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) => {
+  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 }

live_monitor_vue/src/store/modules/layoutMachines/index.js

@@ -1,11 +1,11 @@
 import {toRaw} from 'vue'
-import {searchModes, leftTopButtons, rightTopButtons, selects, selectors, charts, dataMachines, dataMount, pagination, machineInfo, reportPacks, report, packStructure, multiReport, multiPackStructure} from './StaticData'
+import {searchModes, leftTopButtons, rightTopButtons, selects, selectors, dataMachines, dataMount, pagination, machineInfo, reportPacks, multiReport, multiPackStructure} from './StaticData'
 import { chartsSetup } from '@/store/hooks/Echarts/staticData.js';
 import { prepareSelects, mergedMachines, setUpdatedDataMachines, colorSelection, loadingPagination, setPagination } from './helpers';
 import { loadingChartsData, setBarTypesChart, setNextLayoutGroupByKey, setBeforeLayoutGroupByData, typesCharts } from './helpersCharts';
 import { fetchColumn, prepareSetPackColumns } from '@organisms/PackColumns';
-import { get } from '../apiHelpers';
+// import { get } from '../apiHelpers';
-import {equals, isEmpty, uniq} from 'ramda'
+import {equals, isEmpty} from 'ramda'
 
 const initState = {
   leftTopButtons: leftTopButtons,
@@ -210,7 +210,7 @@ const actions = {
           break
         }
         if (updatedSelect.key === 'removed' && newSelected && (selectedSelects[curSelect.key] && selectedSelects[curSelect.key].length > 0)) {
-            updatedSelects[curSelect.key] = selectedSelects[curSelect.key].filter((el) => el.name !== newSelected.name)
+          updatedSelects[curSelect.key] = selectedSelects[curSelect.key].filter((el) => el.name !== newSelected.name)
           break
         } 
         if (updatedSelect.key === 'set' && newSelected && (selectedSelects[curSelect.key] && selectedSelects[curSelect.key].length > 0)) {
@@ -235,56 +235,61 @@ const actions = {
       console.error(err)
     }
   },
-  updateCharts: async ({commit, getters, state}, updatedData) => {
+  updateCharts: async ({commit, state}, updatedData) => {
     try {
       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':
+      }
-          // console.log('updatedDataBefore', updatedData)
+      case 'beforeLayoutChart': {
-          const prevGroupByData = updatedData.groupByInfo.prevGroupByData
+        // console.log('updatedDataBefore', updatedData)
-          const prevGroupByFiltersBefore = updatedData.groupByInfo.prevGroupByFilters
+        const prevGroupByData = updatedData.groupByInfo.prevGroupByData
-          const groupByKeyBefore = Object.keys(prevGroupByData)[0] // Получаем уже предыдущее значение ключа
+        const prevGroupByFiltersBefore = updatedData.groupByInfo.prevGroupByFilters
-          delete prevGroupByFiltersBefore[groupByKeyBefore] // Удаляем значение после вычисления prevGroupByData, так как подымаемся на уровень выше, сохраняя актуальное значение для фильтрации
+        const groupByKeyBefore = Object.keys(prevGroupByData)[0] // Получаем уже предыдущее значение ключа
-          const isOnlyFiltersParams = equals(prevGroupByData, prevGroupByFiltersBefore)
+        delete prevGroupByFiltersBefore[groupByKeyBefore] // Удаляем значение после вычисления prevGroupByData, так как подымаемся на уровень выше, сохраняя актуальное значение для фильтрации
-          const updatedPrevGroupByDataBefore = isOnlyFiltersParams ? {} : setBeforeLayoutGroupByData(prevGroupByData, prevGroupByFiltersBefore, updatedData.groupByInfo.type)
+        const isOnlyFiltersParams = equals(prevGroupByData, prevGroupByFiltersBefore)
-          if (groupByKeyBefore) {
+        const updatedPrevGroupByDataBefore = isOnlyFiltersParams ? {} : setBeforeLayoutGroupByData(prevGroupByData, prevGroupByFiltersBefore, updatedData.groupByInfo.type)
-            const activeChartData = {id: updatedData.id, data: updatedData.data, groupByKey: groupByKeyBefore, filterKey: updatedData.filterKey, type: updatedData.groupByInfo.type, groupByValue: updatedData.groupByInfo.groupByValue}
+        if (groupByKeyBefore) {
-            const newData = setBarTypesChart(activeChartData, updatedPrevGroupByDataBefore, prevGroupByFiltersBefore, state.machinesDataDefault, toRaw(state.chartsData))
+          const activeChartData = {id: updatedData.id, data: updatedData.data, groupByKey: groupByKeyBefore, filterKey: updatedData.filterKey, type: updatedData.groupByInfo.type, groupByValue: updatedData.groupByInfo.groupByValue}
-            return commit('setActiveChartData', {...activeChartData, data: newData})
+          const newData = setBarTypesChart(activeChartData, updatedPrevGroupByDataBefore, prevGroupByFiltersBefore, state.machinesDataDefault, toRaw(state.chartsData))
-          }
+          return commit('setActiveChartData', {...activeChartData, data: newData})
-          break
+        }
-        case 'openMenuChart':
+        break
-          // console.log('updatedDataOpen', updatedData)
+      }
-          const openMenuChart = toRaw(state.activeMenuChartData.openMenuChart)
+      case 'openMenuChart': {
-          updatedData.groupByInfo.data[0].type = updatedData.groupByInfo.type
+        // console.log('updatedDataOpen', updatedData)
-          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 openMenuChart = toRaw(state.activeMenuChartData.openMenuChart)
-          const newDataMenu = setBarTypesChart(activeChartDataMenu, updatedData.groupByInfo.prevGroupByData, updatedData.groupByInfo.prevGroupByFilters, state.machinesDataDefault, toRaw(state.chartsData))
+        updatedData.groupByInfo.data[0].type = updatedData.groupByInfo.type
-          const isNotTypesChartsMenu = typesCharts(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 toggleActiveMenuChartData = {openMenuChart: !openMenuChart, groupByInfo: {...activeChartDataMenu, data: isNotTypesChartsMenu ?  updatedData.groupByInfo.data[0] : newDataMenu}}
+        const newDataMenu = setBarTypesChart(activeChartDataMenu, updatedData.groupByInfo.prevGroupByData, updatedData.groupByInfo.prevGroupByFilters, state.machinesDataDefault, toRaw(state.chartsData))
-          commit('setActiveMenuChartData', toggleActiveMenuChartData)
+        const isNotTypesChartsMenu = typesCharts(updatedData.groupByInfo.type)
-          break
+        const toggleActiveMenuChartData = {openMenuChart: !openMenuChart, groupByInfo: {...activeChartDataMenu, data: isNotTypesChartsMenu ?  updatedData.groupByInfo.data[0] : newDataMenu}}
-        case 'downloadChart':
+        commit('setActiveMenuChartData', toggleActiveMenuChartData)
-          // console.log('updatedDataDownload', updatedData)
+        break
-          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))
+      case 'downloadChart': {
-          const isNotTypesChartsDownload = typesCharts(updatedData.groupByInfo.type)
+        // console.log('updatedDataDownload', updatedData)
-          const downloadActiveMenuChartData = {openMenuChart: false, groupByInfo: {...updatedData.groupByInfo, data: isNotTypesChartsDownload ?  updatedData.groupByInfo.data[0] : newDataDownload}}
+        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}
-          commit('setActiveMenuChartData', downloadActiveMenuChartData)
+        const newDataDownload = setBarTypesChart(activeChartDataDownload, updatedData.groupByInfo.prevGroupByData, updatedData.groupByInfo.prevGroupByFilters, state.machinesDataDefault, toRaw(state.chartsData))
-          break
+        const isNotTypesChartsDownload = typesCharts(updatedData.groupByInfo.type)
-        case 'legendFiltersParams':
+        const downloadActiveMenuChartData = {openMenuChart: false, groupByInfo: {...updatedData.groupByInfo, data: isNotTypesChartsDownload ?  updatedData.groupByInfo.data[0] : newDataDownload}}
-          commit('setLegendFiltersParams', updatedData.data)
+        commit('setActiveMenuChartData', downloadActiveMenuChartData)
-        default: return false
+        break
+      }
+      case 'legendFiltersParams':
+        commit('setLegendFiltersParams', updatedData.data)
+        break
+      default: return false
       }
     } catch (err) {
       console.error(err)
@@ -302,7 +307,7 @@ const actions = {
       console.error(err)
     }
   },
-  openMapModal: async ({commit, state}, machine) => {
+  openMapModal: async ({commit}, machine) => {
     try {
       // Добавить запрос на получение координат
       /*
@@ -317,7 +322,7 @@ const actions = {
       console.error(err)
     }
   },
-  openDataModal: async ({commit, state}, machine) => {
+  openDataModal: async ({commit}) => {
     try {
 
       // Добавить запрос на получение пакетов и информации о машине
@@ -355,7 +360,7 @@ const actions = {
       console.error(err)
     }
   },
-  loadPack: async ({commit, state}, packNumber) => {
+  loadPack: async ({commit}, packNumber) => {
     try {
 
       /* Получение данных о пакете
@@ -398,7 +403,7 @@ const actions = {
       console.error(err)
     }
   },
-  updateModePack: async ({commit, getters, state}, updatedMode) => {
+  updateModePack: async ({commit, state}, updatedMode) => {
     try {
       const structPackDefault = toRaw(state.structPackDefault)
       const currentReport = multiReport[updatedMode] ? multiReport[updatedMode] : []

live_monitor_vue/src/store/modules/machines/StaticData.js

@@ -32,39 +32,39 @@ const pagination = {
 
 const selectors = {
   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: ["ЦДИМ", "Другие", "ЦДРП"],
   railway_name: ["Ю-Вост", "Моск", "З-Сиб", "Клг", "Горьк",
-   "Сверд", "Окт", "Заб", "В-Сиб", "С-Кав", "Кбш",
+    "Сверд", "Окт", "Заб", "В-Сиб", "С-Кав", "Кбш",
-   "Д-Вост", null, "Ю-Ур", "Сев", "Прив", "РЖД", "Крас"],
+    "Д-Вост", null, "Ю-Ур", "Сев", "Прив", "РЖД", "Крас"],
   type: ["УТМ", "РПБ", "ПРЛ УПК", "ПУМА", "МДС", "МПТ",
-   "ТЭС", "СПП", "ДСП", "СЧ", "ЩОМ", "RM", "АСГ", "ВПО",
+    "ТЭС", "СПП", "ДСП", "СЧ", "ЩОМ", "RM", "АСГ", "ВПО",
-   "без типа", "ПМГ", "МТГ", "АС", "СМ", "ВПР", "ПСС",
+    "без типа", "ПМГ", "МТГ", "АС", "СМ", "ВПР", "ПСС",
-   "МПК", "АДМ", "АГД", "УК", "АМ", "ПРЛ", "АДЭ",
+    "МПК", "АДМ", "АГД", "УК", "АМ", "ПРЛ", "АДЭ",
-   "Унимат", "ВПРС", "ПБ", "Дуоматик", "МВУ",
+    "Унимат", "ВПРС", "ПБ", "Дуоматик", "МВУ",
-   "АВФ-1М.2", "Динамик", "АГС", "ПМА", "ССГ-1", "СЧУ",
+    "АВФ-1М.2", "Динамик", "АГС", "ПМА", "ССГ-1", "СЧУ",
-   "АГП", "Унимат компакт", "ДГКу", "СЗ", "ТЭУ",
+    "АГП", "Унимат компакт", "ДГКу", "СЗ", "ТЭУ",
-   "РБ", "ФАТРА",],
+    "РБ", "ФАТРА",],
   zav_nomer: ["84", "49", "15", "90", "27", "9", "5", "105", "005", "656",
-   "001", "39", "38", "57", "03", "003", "593", "235", "1453", "1307", "766",
+    "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 = {
   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: {
-  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 = [
@@ -1305,282 +1305,282 @@ const dataMachines = [
 ]
 
 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,
-     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",
-     "uk", "uni", "utm", "vpo", ""],
+      "uk", "uni", "utm", "vpo", ""],
     id: 197,
     insertedAt: "2023-03-15 06:27:41",
     isProd: true,
@@ -2423,7 +2423,7 @@ const multiReport = {
 
 const multiPackStructure = [
   // %LiveMonitor.Packages.Models.PackStruct{
-    // __meta__: #Ecto.Schema.Metadata<:loaded, "pack_struct">,
+  // __meta__: #Ecto.Schema.Metadata<:loaded, "pack_struct">,
   {
     id: 197,
     description: null,
@@ -2523,7 +2523,7 @@ const multiPackStructure = [
       }
     ],
     diag_tables: ["as", "dsp", "dyn", "mpt", "pmg", "rpb", "rs", "schom", "sm",
-     "uk", "uni", "utm", "vpo", ""],
+      "uk", "uni", "utm", "vpo", ""],
     diag_exclude_tables: null,
     diag_classifications: null,
     diag_types: null,
@@ -2531,9 +2531,9 @@ const multiPackStructure = [
     diag_exclude_classifications: null,
     diag_exclude_types: null,
     diag_exclude_sps: [993, 1062, 3078, 1136, 1109, 1618, 1085, 2936, 1669,
-     1045, 1739, 1525, 1869, 1461, 1843, 928, 1940, 1907, 1482, 1870, 1813,
+      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: #Ecto.Association.NotLoaded<association :pack_group is not loaded>,
     inserted_at: "2023-03-15 06:27:41",
@@ -2838,8 +2838,8 @@ const multiPackStructure = [
     diag_classifications: null,
     diag_types: null,
     diag_sps: [993, 1062, 3078, 1136, 1109, 1618, 1085, 2936, 1669, 1045, 1739,
-     1525, 1869, 1461, 1843, 928, 1940, 1907, 1482, 1870, 1813, 1131, 1133,
+      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_types: null,
     diag_exclude_sps: null,

live_monitor_vue/src/store/modules/machines/helpers.js

@@ -1,5 +1,5 @@
-import {isEmpty, uniq} from 'ramda'
+import {isEmpty} from 'ramda'
-import {pagination, searchModes} from './StaticData'
+import {searchModes} from './StaticData'
 
 const prepareSelects = (selects, selectors) => {
   const updatedSelects = selects.reduce((acc, el) => {
@@ -14,14 +14,14 @@ const prepareSelects = (selects, selectors) => {
   // console.log('updSelects', updatedSelects)
   
   const filteredSelects = updatedSelects.map((el) => ({...el, data: el.data.reduce((acc, select) => {
-      if (select) {
+    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)
   // console.log('filteredSelects', filteredSelects)
   return filteredSelects

live_monitor_vue/src/store/modules/machines/helpersCharts.js

@@ -1,431 +1,435 @@
 import { chartsFilterParams, chartsGroupByParams, chartsGroupByParams2, chartsFilterKeysMl, chartsMountParams, chartsBarTypesParams, chartsBarTypesGroupByParams, chartsBarTypesWithoutLayoutParams } from "./StaticData"
 import {cond, uniq, has, T} from 'ramda'
 
-  const setPeriodCharts = (filterKeys) => {
+const setPeriodCharts = (filterKeys) => {
-    if (typeof filterKeys === 'array') return {period: 'dayly', title: '24 часа'}
+  if (filterKeys && filterKeys.length > 0) 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 {
         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 {
         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, ]) => 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(([, groupArr]) => Object.groupBy(groupArr, (el) => el[groupByKey]))
+  const yAxisData = Object.entries(groupedByGroupByKeyY).map(([key, val]) => ({key: key, val: val.length}))
+    
+  const [groupedByGroupByKeyX] = filteredGroupByData.map(([, groupArr]) => Object.groupBy(groupArr, (el) => el[groupByKey]))
+  const xAxisData = Object.entries(groupedByGroupByKeyX).map(([key, groupArr]) => {
+    const groupByFilterData = Object.groupBy(groupArr, (el) => el[filterKey])
+    const newArr = Object.entries(groupByFilterData).map(([key, val]) => ({name: key, value: val.length, linkData: groupByKey === 'machine_type' ? val.map((el) => ({machine_type: el.machine_type, device_number: el.device_number})) : ''}))
+    return {yAxisData: key, totalCount: groupArr.length, charts: newArr}
+  })
+
+  const countMachines = yAxisData.reduce((acc, type) => acc + type.val, 0)
+
+  return {yAxisData: yAxisData, xAxisData: xAxisData, countMachines: countMachines, period: setPeriodCharts(filterKey).title, filterKey: filterKey, groupByKey: groupByKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters, groupByValue: groupByValue}
+}
+
+const chartsBarTypesGroupedByMl = (data, groupByKey, filterKeys, prevGroupByData, prevGroupByFilters) => {
+
+  const groupByData = Object.groupBy(data, (el) => el[groupByKey])
+  const yAxisData = Object.entries(groupByData).map(([key, val]) => {
+    const allValuesArr = filterKeys.map((filterKey) => {
+      const machinesWithMl = val.reduce((acc, el) => {
+        if (el[filterKey] || el[filterKey] === 0) {
+          acc = acc + el[filterKey]
         } else {
           acc
         }
         return acc
       }, 0)
-      return {key: filterKey, value: countNull}
+      const machinesWithoutMl = val.filter((el) => el[filterKey] === null).length
+      return {machinesWithMl: machinesWithMl, machinesWithoutMl: machinesWithoutMl}
     })
-
+    // console.log('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) => {
+  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 }

live_monitor_vue/src/store/modules/machines/index.js

@@ -1,5 +1,3 @@
-import {equals, isEmpty} from 'ramda'
-
 const initState = {
   modalMachines: [],
 };

live_monitor_vue/src/store/modules/main/index.js

@@ -1,4 +1,3 @@
-import {toRaw} from 'vue'
 import {pages} from './StaticData'
 
 const initState = {
@@ -32,15 +31,15 @@ const actions = {
   uploadData: async ({commit}, path) => {
     try{
       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) {

live_monitor_vue/src/store/modules/packs/StaticData.js

@@ -252,10 +252,10 @@ const packStruct = [
 
 
 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 = {
   askr_logs: [
@@ -273,10 +273,10 @@ const data = {
       geo: 
       // %Geo.Point{
         {
-        coordinates: [136.150181, 49.90781],
+          coordinates: [136.150181, 49.90781],
-        srid: 4326,
+          srid: 4326,
-        properties: {}
+          properties: {}
-      },
+        },
       is_valid: true,
       voltage: 25.93,
       pack_lon: 136.150181,
@@ -319,10 +319,10 @@ const data = {
       geo: 
       // %Geo.Point{
         {
-        coordinates: [136.15018899999998, 49.907799],
+          coordinates: [136.15018899999998, 49.907799],
-        srid: 4326,
+          srid: 4326,
-        properties: {}
+          properties: {}
-      },
+        },
       is_valid: true,
       voltage: 25.89,
       pack_lon: 136.150189,
@@ -365,10 +365,10 @@ const data = {
       geo: 
       // %Geo.Point{
         {
-        coordinates: [136.15018899999998, 49.907801],
+          coordinates: [136.15018899999998, 49.907801],
-        srid: 4326,
+          srid: 4326,
-        properties: {}
+          properties: {}
-      },
+        },
       is_valid: true,
       voltage: 25.77,
       pack_lon: 136.150189,
@@ -411,10 +411,10 @@ const data = {
       geo: 
       // %Geo.Point{
         {
-        coordinates: [136.15018, 49.907806],
+          coordinates: [136.15018, 49.907806],
-        srid: 4326,
+          srid: 4326,
-        properties: {}
+          properties: {}
-      },
+        },
       is_valid: true,
       voltage: 25.87,
       pack_lon: 136.15018,
@@ -457,10 +457,10 @@ const data = {
       geo: 
       // %Geo.Point{
         {
-        coordinates: [136.150184, 49.907799],
+          coordinates: [136.150184, 49.907799],
-        srid: 4326,
+          srid: 4326,
-        properties: {}
+          properties: {}
-      },
+        },
       is_valid: true,
       voltage: 25.88,
       pack_lon: 136.150184,
@@ -503,10 +503,10 @@ const data = {
       geo: 
       // %Geo.Point{
         {
-        coordinates: [136.15018, 49.907807],
+          coordinates: [136.15018, 49.907807],
-        srid: 4326,
+          srid: 4326,
-        properties: {}
+          properties: {}
-      },
+        },
       is_valid: true,
       voltage: 25.94,
       pack_lon: 136.15018,
@@ -549,10 +549,10 @@ const data = {
       geo: 
       // %Geo.Point{
         {
-        coordinates: [136.150181, 49.907799999999995],
+          coordinates: [136.150181, 49.907799999999995],
-        srid: 4326,
+          srid: 4326,
-        properties: {}
+          properties: {}
-      },
+        },
       is_valid: true,
       voltage: 25.84,
       pack_lon: 136.150181,
@@ -595,10 +595,10 @@ const data = {
       geo: 
       // %Geo.Point{
         {
-        coordinates: [136.150181, 49.907810999999995],
+          coordinates: [136.150181, 49.907810999999995],
-        srid: 4326,
+          srid: 4326,
-        properties: {}
+          properties: {}
-      },
+        },
       is_valid: true,
       voltage: 25.93,
       pack_lon: 136.150181,
@@ -641,10 +641,10 @@ const data = {
       geo: 
       // %Geo.Point{
         {
-        coordinates: [136.15018, 49.90781],
+          coordinates: [136.15018, 49.90781],
-        srid: 4326,
+          srid: 4326,
-        properties: {}
+          properties: {}
-      },
+        },
       is_valid: true,
       voltage: 25.91,
       pack_lon: 136.15018,
@@ -687,10 +687,10 @@ const data = {
       geo: 
       // %Geo.Point{
         {
-        coordinates: [136.15017899999998, 49.907809],
+          coordinates: [136.15017899999998, 49.907809],
-        srid: 4326,
+          srid: 4326,
-        properties: {}
+          properties: {}
-      },
+        },
       is_valid: true,
       voltage: 25.91,
       pack_lon: 136.150179,
@@ -733,10 +733,10 @@ const data = {
       geo: 
       // %Geo.Point{
         {
-        coordinates: [136.150185, 49.907799999999995],
+          coordinates: [136.150185, 49.907799999999995],
-        srid: 4326,
+          srid: 4326,
-        properties: {}
+          properties: {}
-      },
+        },
       is_valid: true,
       voltage: 25.61,
       pack_lon: 136.150185,
@@ -779,10 +779,10 @@ const data = {
       geo: 
       // %Geo.Point{
         {
-        coordinates: [136.15018799999999, 49.907803],
+          coordinates: [136.15018799999999, 49.907803],
-        srid: 4326,
+          srid: 4326,
-        properties: {}
+          properties: {}
-      },
+        },
       is_valid: true,
       voltage: 25.49,
       pack_lon: 136.150188,
@@ -824,10 +824,10 @@ const data = {
       geo: 
       // %Geo.Point{
         {
-        coordinates: [136.150184, 49.907796999999995],
+          coordinates: [136.150184, 49.907796999999995],
-        srid: 4326,
+          srid: 4326,
-        properties: {}
+          properties: {}
-      },
+        },
       is_valid: true,
       voltage: 25.6,
       pack_lon: 136.150184,
@@ -868,10 +868,10 @@ const data = {
       geo: 
       // %Geo.Point{
         {
-        coordinates: [136.150184, 49.907796999999995],
+          coordinates: [136.150184, 49.907796999999995],
-        srid: 4326,
+          srid: 4326,
-        properties: {}
+          properties: {}
-      },
+        },
       is_valid: true,
       voltage: 25.62,
       pack_lon: 136.150184,
@@ -911,10 +911,10 @@ const data = {
       geo: 
       // %Geo.Point{
         {
-        coordinates: [136.15018999999998, 49.907802],
+          coordinates: [136.15018999999998, 49.907802],
-        srid: 4326,
+          srid: 4326,
-        properties: {}
+          properties: {}
-      },
+        },
       is_valid: true,
       voltage: 25.88,
       pack_lon: 136.15019,

live_monitor_vue/src/store/modules/packs/index.js

@@ -2,7 +2,7 @@ import {toRaw} from 'vue'
 import {pageSettings, packStruct, packsNames, data} from './StaticData'
 import {fetchColumn} from '@organisms/PackColumns';
 import {loadingPagination, setPagination} from './helpers';
-import {equals, is, isEmpty, uniq} from 'ramda'
+import {isEmpty, uniq} from 'ramda'
 import moment from'moment'
 
 const initState = {
@@ -65,7 +65,7 @@ const mutations = {
 };
 
 const actions = {
-  uploadData: async ({commit, getters, state}, params) => {
+  uploadData: async ({commit, getters}, params) => {
     try{
 
       /*
@@ -109,7 +109,7 @@ const actions = {
 
       */
 
-        // imei 864004043403283
+      // imei 864004043403283
 
       console.log('params', toRaw(params))
       console.log('getters.isLoading', toRaw(getters.isLoading))
@@ -186,7 +186,7 @@ const actions = {
       console.error(err)
     }
   },
-  updatePackSettings: async ({commit, getters, state}, updatedData) => {
+  updatePackSettings: async ({commit, getters}, updatedData) => {
     try {
       console.log('updatedData', updatedData)
       const packsSettings = toRaw(getters.packsSettings)
@@ -198,7 +198,7 @@ const actions = {
       console.error(err)
     }
   },
-  updateSelects: async ({dispatch, commit, getters, state}, updatedSelect) => {
+  updateSelects: async ({commit, getters}, updatedSelect) => {
     try {
 
       const dataSource = toRaw(getters.tableData).dataSource

live_monitor_vue/src/store/modules/services/StaticData.js

@@ -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 = [

live_monitor_vue/src/store/modules/services/helpers.js

@@ -60,7 +60,7 @@ class Services {
       if (serviceNameArr?.length > 0) {
         if (serviceNameArr[serviceNameArr.length - 1].length > 15)
           serviceCode = serviceNameArr[serviceNameArr.length - 1]
-        serviceIp = serviceNameArr.reduce((acc, el, idx) => {
+        serviceIp = serviceNameArr.reduce((acc, el) => {
           const ipIdx = el.indexOf('@')
           if (ipIdx !== -1) {
             acc = el.slice(ipIdx)

live_monitor_vue/src/store/modules/services/index.js

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

live_monitor_vue/tests/services/ServiceOfMachines.test.js

@@ -1,4 +1,4 @@
-import {expect, describe, vi, test, beforeEach} from 'vitest'
+import {expect, describe, test, beforeEach} from 'vitest'
 import ServiceOfMachines from "@services/ServiceOfMachines.js"
 import {AdapterOfMachines, appModalListMachines} from "@mocks/machines.js"
 import { createStore } from "vuex"
@@ -23,12 +23,6 @@ describe('test ServiceOfMachines', () => {
     expect(result).toEqual(appModalListMachines)
   })
 
-  test('test putModalMachines', async () => {
-    await serviceOfMachines.putModalMachines(appModalListMachines)
-    const result = store.getters['machines/modalMachines']
-    expect(result).toEqual(appModalListMachines)
-  })
-
   test('test makeFetchAndPutModalMachines', async () => {
     const funcResult = await serviceOfMachines.makeFetchAndPutModalMachines()
     const storeResult = store.getters['machines/modalMachines']