MaterialMarkaKO

src/components/MaterialMarkaKO.vue

@@ -0,0 +1,169 @@
+<template>
+  <v-container fluid id="HM_DC">
+    <v-card-text class="text-center headline black--text">Материалы КО по маркам стали за период
+      {{ computedDateFormatted }}</v-card-text>
+    <v-divider class="mx-0"></v-divider>
+
+    <v-row>
+      <v-col style="min-width:250px; max-width:250px;" cols="12">
+        <v-menu v-model="datePickerMenu" :close-on-content-click="false" :nudge-right="40" :nudge-top="-5"
+          transition="scale-transition" offset-y min-width="290px">
+          <template v-slot:activator="{ on }">
+            <v-text-field id="datePicker" class="datePicker" v-model="computedDateFormatted" prepend-icon="event"
+              readonly v-on="on" single-line :disabled="loading" />
+          </template>
+          <v-date-picker no-title scrollable popover-align="center" v-model="dates"
+            @input="input($event) && datePickerMenu" @change="refreshData()" range></v-date-picker>
+        </v-menu>
+      </v-col>
+
+      <v-spacer></v-spacer>
+      <v-col cols="12" sm="2" md="2" lg="2" xl="2">
+        <v-text-field v-model="search" append-icon="mdi-magnify" label="Поиск" single-line hide-details clearable
+          :disabled="loading"></v-text-field>
+      </v-col>
+    </v-row>
+
+    <v-data-table item-key="MATERIAL_NAME" :headers="headers" :items="data.items" :loading="loading" :search="search"
+      @click:row="rowClick" disable-pagination hide-default-footer dense>
+    </v-data-table>
+  </v-container>
+</template>
+
+<style>
+.datePicker input {
+  text-align: center;
+  cursor: pointer;
+}
+</style>
+
+<script>
+let jsDate = new Date();
+import { mapGetters, mapActions, } from "vuex";
+export default {
+  data: () => ({
+    value: [],
+    search: "",
+    dates: [
+      new Date(jsDate.getFullYear(), jsDate.getMonth(), jsDate.getDate())
+        .toISOString()
+        .substr(0, 10),
+      new Date().toISOString().substr(0, 10)
+    ],
+    datePickerMenu: false
+  }),
+  computed: {
+    ...mapGetters("MaterialMarkaKO", {
+      loading: "loading",
+      data: "data"
+    }),
+    computedDateFormatted() {
+      let formatDates = [];
+      formatDates.push(this.formatDate(this.dates[0]));
+      formatDates.push(this.formatDate(this.dates[1]));
+      return formatDates.join(" ~ ");
+    },
+    headers() {
+
+      var canvas = document.createElement("canvas");
+      var ctx = canvas.getContext("2d");
+      ctx.font = "12px Roboto, sans-serif";
+
+
+      this.data.headers.forEach(element => {
+        var metrics = ctx.measureText(element.text);
+        var cellWidth = metrics.width;
+        element.width = cellWidth + 65;
+        element.align = "center";
+        element.divider = true;
+        if (element.value === "id") {
+          element.align = " d-none";
+        }
+      });
+      return this.data.headers;
+    }
+  },
+  methods: {
+    ...mapActions("MaterialMarkaKO", {
+      getData: "getData",
+
+    }),
+    rowClick: function (item, row) {
+      let selectState = row.isSelected ? false : true;
+      row.select(selectState);
+    },
+    input(e) {
+      if (e.length == 2) {
+        this.datePickerMenu = false;
+      }
+    },
+    formatDate(date) {
+      if (!date) return null;
+      const [year, month, day] = date.split("-");
+      return `${day}.${month}.${year}`;
+    },
+    refreshData() {
+      this.getData([
+        this.formatDate(this.dates[0]),
+        this.formatDate(this.dates[1])
+      ]);
+    }
+  },
+  mounted() {
+    this.getData([
+      this.formatDate(this.dates[0]),
+      this.formatDate(this.dates[1])
+    ]);
+  }
+};
+</script>
+<style>
+.datePicker input {
+  text-align: center;
+  cursor: pointer;
+}
+
+#HM_DC .v-data-table-header {
+  background-color: #fafafa !important;
+}
+
+
+#HM_DC .spacer {
+  margin-top: 3em;
+}
+
+#HM_DC .divider {
+  border-right: rgba(0, 0, 0, 0.12) solid 1px;
+}
+
+#HM_DC .v-data-table {
+  border-left: thin solid rgba(0, 0, 0, 0.12);
+  border-top: thin solid rgba(0, 0, 0, 0.12);
+  border-bottom: thin solid rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+}
+
+#HM_DC .v-data-table table>tbody>tr>td {
+  border-right: thin solid rgba(0, 0, 0, 0.12);
+}
+
+#HM_DC #datePicker {
+  text-align: center;
+}
+
+.theme--light.v-data-table tbody tr.v-data-table__selected {
+  background: #f5c17d70 !important;
+}
+
+.theme--dark.v-data-table tbody tr.v-data-table__selected {
+  background: #a17b4970 !important;
+}
+
+.theme--dark.v-data-table tbody tr.v-data-table__selected:hover {
+  background: #a17b49c2 !important;
+}
+
+.theme--light.v-data-table tbody tr.v-data-table__selected:hover {
+  background: #ffd296d2 !important;
+}
+</style>

src/components/PRB_FileControl.vue

@@ -195,8 +195,8 @@ export default {
     dateFormatted: vm.formatDate(new Date().toISOString().substr(0, 10)),
     datePickerMenu: false,
     extensionsList: [
-      { value: "mdi-file-excel", extension: ['xlsx'] },
-      { value: "mdi-file-word", extension: ['docx'] },
+      { value: "mdi-file-excel", extension: ['xlsx', 'xls'] },
+      { value: "mdi-file-word", extension: ['docx', 'doc'] },
     ]
   }),
   computed: {

src/routes.js

@@ -144,6 +144,11 @@ const routes = [
     name: "PRB_FileControl",
     component: () => import("./components/PRB_FileControl.vue"),
   },
+  {
+    path: "/MaterialMarkaKO",
+    name: "MaterialMarkaKO",
+    component: () => import("./components/MaterialMarkaKO.vue"),
+  },
 
   // {
   //   path: "/GazTrends/BofGazTrend",

src/store/index.js

@@ -20,7 +20,7 @@ import HM_DC from "./modules/HM_DC";
 import crewAggregateWeight from "./modules/crewAggregateWeight";
 import BOFHeatPhase from "./modules/BOFHeatPhase";
 import PRB_FileControl from "./modules/PRB_FileControl";
-
+import MaterialMarkaKO from "./modules/MaterialMarkaKO";
 
 export const store = new Vuex.Store({
   modules: {
@@ -42,6 +42,7 @@ export const store = new Vuex.Store({
     crewAggregateWeight,
     BOFHeatPhase,
     PRB_FileControl,
+    MaterialMarkaKO,
 
   },
    strict: process.env.NODE_ENV !== "production",

src/store/modules/MaterialMarkaKO.js

@@ -0,0 +1,87 @@
+import axios from "axios";
+import * as utils from "../utils.js";
+
+const initialState = {
+  data: {
+    headers: [],
+    items: [],
+    avgData: [],
+    sumData: [],
+  },
+  loading: false,
+};
+const state = JSON.parse(JSON.stringify(initialState));
+
+
+export default {
+  namespaced: true,
+  state,
+  getters: {
+    data: (state) => {
+      return state.data;
+    },
+    loading: (state) => {
+      return state.loading;
+    },
+  },
+  mutations: {
+
+    set_data(state, payload) {
+      state.data.items = payload[0];
+      state.data.headers = utils.getHeaders(state.data.items);
+      state.data.headers.forEach((element) => {
+        switch (element.text) {
+          case "MATERIAL_NAME":
+            element.text = "Марка";
+            break;
+        }
+      });
+
+      console.log(state.data.headers)
+    },
+    set_loading(state, payload) {
+      state.loading = payload;
+    },
+    resetState(state) {
+      Object.assign(state, JSON.parse(JSON.stringify(initialState)));
+    },
+  },
+  actions: {
+    getData({ commit }, date) {
+      commit("set_loading", true);
+      const allItems = axios({
+        data: {
+          params: {
+            flag: "getData",
+            dateStart: date[0],
+            dateEnd: date[1],
+          },
+        },
+      });
+      return axios
+        .all([
+          allItems,
+        ])
+        .then(
+          axios.spread((...responses) => {
+            const allItems = responses[0].data;
+            if (allItems.length !== 0) {
+              commit("set_data", [
+                allItems,
+              ]);
+            } else {
+              commit("resetState");
+            }
+          })
+        )
+        .catch((error) => {
+          commit("set_loading", false);
+          commit("resetState");
+          console.log(error);
+        })
+        .finally(() => {
+          commit("set_loading", false);
+        });
+    },
+  },
+};