sync

src/components/index.vue

@@ -0,0 +1,110 @@
+<template>
+  <v-container id="stat" fill-height>
+    <v-card class="mx-auto" tile elevation="5">
+      <v-img height="200" width="750" src="../assets/2.png"></v-img>
+      <v-card-title>
+        <v-icon color="teal lighten-3" large left>mdi-apps</v-icon>
+        <span>APP-VUE-HUB ({{ items.length }} projects<span v-if="!loading"> | {{ allCounts }} visits</span>)</span>
+      </v-card-title>
+      <v-progress-linear v-if="loading" indeterminate></v-progress-linear>
+      <v-divider></v-divider>
+      <v-list two-line id="scrolling-techniques-7" class="overflow-y-auto" max-height="450" max-width="750">
+        <v-list-item-group>
+          <v-list-item v-for="(item, i) in items" :key="item.index" :to="{ path: item.path }">
+            <v-list-item-content>
+              <v-list-item-title>{{ ++i }} - {{ item.name }}</v-list-item-title>
+              <v-list-item-subtitle>URL:{{ item.path }}</v-list-item-subtitle>
+            </v-list-item-content>
+
+            <span id="myheaders" class="text--secondary overline"
+              v-if="item.counters !== 'undefined visits |' && !loading">
+              <span class="pa-md-2 mx-lg-auto "><v-chip small>{{ item.counters
+                  }}</v-chip></span>
+              <span class=" mx-lg-auto ">visits \ </span>
+              <span class=" mx-lg-auto ">last </span>
+              <span class=" mx-lg-auto "><v-chip small>{{ item.last_date }}</v-chip></span>
+              <v-list-item-action>
+                <v-btn icon @click.native.prevent="showInfo(item.name)">
+                  <v-icon color="grey lighten-1">mdi-information</v-icon>
+                </v-btn>
+              </v-list-item-action>
+            </span>
+          </v-list-item>
+        </v-list-item-group>
+      </v-list>
+      <v-divider></v-divider>
+      <v-list subheader>
+        <v-subheader class="overline">БОТП АСУТП ККЦ - Самофалов Д.А.</v-subheader>
+      </v-list>
+    </v-card>
+  </v-container>
+</template>
+
+<script>
+import { mapGetters, mapActions } from "vuex";
+import { _ } from "vue-underscore";
+export default {
+  data: () => ({
+    allCounts: 0,
+    items: [],
+  }),
+  computed: {
+    ...mapGetters("stat", {
+      loading: "loading",
+      data: "data"
+    })
+  },
+  methods: {
+    ...mapActions("stat", {
+      getData: "getData"
+    }),
+    showInfo(e) {
+      this.$router.props = e;
+      this.$router.push('/stat')
+    },
+  },
+  mounted() {
+    this.$router.options.routes.forEach(element => {
+      if ((element.path !== "/") && (element.path !== "/stat")) {
+        this.items.push(
+          { name: element.name, path: element.path }
+        )
+      }
+    });
+    this.getData().then(() => {
+      this.items = this.items.map((arr) => {
+        return {
+          ...arr,
+          counters: _.defaults(_.findWhere(this.data.stat, {
+            project_name: arr.name
+          })).project_count,
+          last_date: _.defaults(_.findWhere(this.data.stat, {
+            project_name: arr.name,
+          })).last_date
+        };
+      });
+      this.data.stat.forEach(element => {
+        if (element.project_name !== 'Stat') {
+          this.allCounts = this.allCounts + element.project_count
+        }
+      });
+    });
+  }
+};
+</script>
+<style>
+.container {
+  max-width: 100% !important;
+}
+
+#myheaders {
+  font-size: 12px !important;
+}
+
+#stat {
+  height: 100%;
+  width: 100%;
+
+  background: url(../assets/1.png) center !important;
+}
+</style>