111 lines
3.3 KiB
Vue
111 lines
3.3 KiB
Vue
<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>
|