290 lines
7.8 KiB
Vue
290 lines
7.8 KiB
Vue
<template>
|
|
<section>
|
|
<Navbar class="task-navbar"> </Navbar>
|
|
<the-sidebar2
|
|
:showUserAvatar="true"
|
|
:menu="menu"
|
|
@statusPage="statusPage"
|
|
></the-sidebar2>
|
|
|
|
<main
|
|
class="task-dashboard main-page__content"
|
|
:class="{ expanded: !isSidebarCollapsed }"
|
|
>
|
|
<div class="flex-grow-1">
|
|
<div class="position-relative d-flex justify-content-center"></div>
|
|
<section class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-6 mt-3">
|
|
<div class="my-card DonutChart">
|
|
<!-- <h2 class="title">Tasks by status</h2> -->
|
|
<pie-donut
|
|
:dataPie="dataPie"
|
|
:PieOptions="PieOptions"
|
|
width="90%"
|
|
height="300px"
|
|
ref="donutchart"
|
|
></pie-donut>
|
|
<div class="content"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-md-3 mt-3">
|
|
<div class="my-card">
|
|
<h2 class="title">Completed tasks</h2>
|
|
<div class="content">
|
|
<span class="value">28</span
|
|
><span class="subtitle">tasks completed</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-md-3 mt-3">
|
|
<div class="my-card">
|
|
<h2 class="title">Incomplete tasks</h2>
|
|
<div class="content">
|
|
<span class="value">14</span
|
|
><span class="subtitle">to be done</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-4">
|
|
<div class="my-card total-tasks">
|
|
<h2 class="title">Total tasks by assignee</h2>
|
|
<div class="content"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-md-8">
|
|
<div class="my-card Gantt">
|
|
<h2 class="title">Timeline</h2>
|
|
<div class="content">
|
|
<Gantt class="Gantt"></Gantt>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="my-card">
|
|
<h2 class="title">Cumulative flow</h2>
|
|
<div class="content"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
// import commentMixin from "@mixins/commentMixin";
|
|
// import apis from "@apis/listApi";
|
|
import { mapGetters, mapMutations, mapActions } from "vuex";
|
|
// import { handleErrors } from "@utilities/utilities";
|
|
// import HttpService from "@services/httpService";
|
|
import menu from "@task/json/menu.json";
|
|
import taskApi from "@apis/taskApi";
|
|
import HttpService from "@services/httpService";
|
|
export default {
|
|
beforeMount() {
|
|
// const headers = {
|
|
// "app-id": process.env.VUE_APP_APP_ID,
|
|
// // "lang": process.env.VUE_APP_LANG,
|
|
// // "app-version-code": process.env.VUE_APP_APP_VERSION,
|
|
// };
|
|
// this.httpService = new HttpService(this.repoMicroServiceName);
|
|
},
|
|
// mixins: [commentMixin],
|
|
beforeMount() {
|
|
this.httpService = new HttpService( this.taskMicroServiceName
|
|
);
|
|
},
|
|
mounted() {
|
|
this.TOGGLE_PANEL(false);
|
|
this.getvalueChartDonut();
|
|
},
|
|
watch: {
|
|
getPanelStatus(status) {
|
|
if (status) this.openForm();
|
|
else this.closeModal();
|
|
},
|
|
$route: {
|
|
handler: function () {
|
|
this.sidebarCollapsedSetter(true);
|
|
},
|
|
deep: true,
|
|
immediate: true,
|
|
},
|
|
// listIdGetter(newId) {
|
|
// this.filterBy(this.selectedFilter);
|
|
// },
|
|
},
|
|
data() {
|
|
return {
|
|
PieOptions: {
|
|
radius: ["40%", "70%"],
|
|
selectedMode: "single",
|
|
},
|
|
// #region mehdi
|
|
nomber: 0,
|
|
statusPagHedear: 1,
|
|
dataPie: [],
|
|
// #endregion
|
|
rerenderChatList: 1,
|
|
showListPanel: false,
|
|
menu: menu,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters([
|
|
"getPanelStatus",
|
|
"isSidebarCollapsed",
|
|
"sidebarListStatusGetter",
|
|
]),
|
|
...mapGetters("list", [
|
|
"listComponentNameGetter",
|
|
"selectedProjectGetter",
|
|
"listIdGetter",
|
|
"selectedItemGetter",
|
|
"listGetter",
|
|
]),
|
|
taskMicroServiceName() {
|
|
return process.env.VUE_APP_TASK;
|
|
},
|
|
},
|
|
methods: {
|
|
...mapMutations([
|
|
"TOGGLE_PANEL",
|
|
"sidebarCollapsedSetter",
|
|
"SET_SIDEBAR_LIST_STATUS",
|
|
]),
|
|
...mapMutations("list", [
|
|
"SET_LIST_COMPONENT_NAME",
|
|
"SET_SELECTED_ITEM",
|
|
"SET_SELECTED_PROJECT",
|
|
"SET_LIST_ID",
|
|
"SET_LIST",
|
|
"SET_LIST_ID",
|
|
]),
|
|
...mapActions(["checkPermissions", "storeState", "getState"]),
|
|
selectedListBackTitle(name) {
|
|
if (name == "groups") return "دانشتو با بقیه به اشتراک بزار.";
|
|
if (name == "privates") return "به هر کی دوست داری، پیام بده.";
|
|
if (name == "lobbies") return "به تالار گفتگو خوش اومدی";
|
|
},
|
|
// showSearch() {
|
|
// search in current group, not all groups.
|
|
// this.$refs["chat-list-panel"].showSearchs(true);
|
|
// },
|
|
|
|
// #region mehdi
|
|
statusPage($event) {
|
|
const number = $event;
|
|
|
|
if (number == 1) {
|
|
if (this.$refs["chat-list-panel"].showMainpag == false) {
|
|
this.$refs["chat-list-panel"].showMainpag = true;
|
|
}
|
|
} else {
|
|
if (this.$refs["chat-list-panel"].showMainpag == false) {
|
|
this.$refs["chat-list-panel"].showMainpag = true;
|
|
}
|
|
}
|
|
},
|
|
// #endregion
|
|
|
|
toggleSidebarMenu() {
|
|
this.TOGGLE_SIDEBAR_MENU();
|
|
},
|
|
showToggleListPanel() {
|
|
this.showListPanel = !this.showListPanel;
|
|
this.$refs["chat-list-panel"].showMainpag = true;
|
|
},
|
|
|
|
// #region mehdi
|
|
openPagGrup(data) {
|
|
this.enablePanelToggling = data;
|
|
if (this.enablePanelToggling == 1) {
|
|
this.showToggleListPanel();
|
|
}
|
|
},
|
|
// #endregion
|
|
getvalueChartDonut() {
|
|
let payload = {
|
|
user_id: this.$store.getters.currentUser.user_id,
|
|
};
|
|
let url = taskApi.taskChart.donut;
|
|
var vm = this;
|
|
this.httpService.postRequest(url, payload).then((res) => {
|
|
vm.dataPie = [];
|
|
res.data.forEach((element) => {
|
|
vm.dataPie.push({
|
|
y: element.Percent,
|
|
name: element.category,
|
|
// color: colors[5],
|
|
drilldown: {
|
|
categories: [element.category],
|
|
data: [element.Total],
|
|
},
|
|
});
|
|
});
|
|
});
|
|
},
|
|
},
|
|
|
|
components: {
|
|
MainSection: () => import("@task/components/MainSection"),
|
|
RightSection: () => import("@task/components/RightSection"),
|
|
Navbar: () => import("@task/components/Navbar"),
|
|
Gantt: () => import("@components/charts/Gantt.vue"),
|
|
PieDonut: () => import("@components/charts/PieDonut.vue"),
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.task-dashboard {
|
|
.row {
|
|
margin-top: 1.5em;
|
|
margin-bottom: 1.5em;
|
|
}
|
|
.my-card {
|
|
// &.DonutChart{
|
|
// width: 54em;
|
|
// }
|
|
// &.Gantt{
|
|
// width: 72.5em;
|
|
// }
|
|
// &.total-tasks{
|
|
// width: unset;
|
|
// }
|
|
// &.ComparetasksChart{
|
|
// width: 100%;
|
|
// }
|
|
// width: 26em;
|
|
height: 18em;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: #fff;
|
|
border-radius: 1em;
|
|
overflow: hidden;
|
|
box-shadow: 0 0.4688rem 2.1875rem rgba(4, 9, 20, 0.03),
|
|
0 0.9375rem 1.4063rem rgba(4, 9, 20, 0.03),
|
|
0 0.25rem 0.5313rem rgba(4, 9, 20, 0.03),
|
|
0 0.125rem 0.1875rem rgba(4, 9, 20, 0.03);
|
|
.title {
|
|
font-size: 1.2em;
|
|
text-align: left;
|
|
margin: 1em;
|
|
}
|
|
.content {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
</style>
|