fernando/luos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Henry Jordan
2021-08-16 18:54:43 +00:00
parent 509a187d8e
commit a6d33690f2
9 changed files with 380 additions and 352 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
resources/assets/js/api/Process.js
View File

@@ -27,5 +27,13 @@ export let process = {
data: {},
keys: {}
});
}
},
totalCasesByRange(dt) {
return Api.get({
service: "TOTAL_CASES_BY_RANGE",
method: "get",
params: dt,
keys: {}
});
}
};

1
resources/assets/js/api/Services.js
View File

@@ -70,6 +70,7 @@
DEBUG_STATUS: "/home/process-debug-status?processUid={prj_uid}",
LIST_TOTAL_CASES: "/metrics/list-total-cases",
TOTAL_CASES_BY_PROCESS:"/metrics/total-cases-by-process",
TOTAL_CASES_BY_RANGE:"/metrics/process-total-cases",
CONFIG: "/home/config",
GET_CONFIG: "/home/config/{id}/{name}",
PAUSE_CASE: "/cases/{app_uid}/pause",

40
resources/assets/js/components/utils/BreadCrumb.vue
View File

@@ -1,6 +1,6 @@
<template>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<ol class="vp-breadcrumb">
<li
v-for="item in formatOptions(options)"
:key="item.label"
@@ -14,6 +14,15 @@
>{{ item.label }}</a
>
</li>
<div
v-for="item in settings"
:key="item.id"
class="vp-bread-crumbs-settings vp-float-right vp-inline-block"
>
<span @click="item.onClick">
<i :class="formatClass(item)"></i>
</span>
</div>
</ol>
</nav>
</template>
@@ -22,7 +31,7 @@
import _ from "lodash";
export default {
name: "BreadCrumb",
props: ["options"],
props: ["options", "settings"],
data() {
return {};
},
@@ -37,17 +46,42 @@ export default {
options[i].classObject = {
"breadcrumb-item": true,
active: true,
"vp-inline-block": true,
};
} else {
options[i].classObject = {
"breadcrumb-item": true,
active: false,
"vp-inline-block": true,
};
}
}
console.log("aquii");
return options;
},
formatClass(item) {
return item.class;
},
},
};
</script>
<style scoped>
.vp-float-right {
float: right;
}
.vp-bread-crumbs-settings {
line-height: 20px;
}
.vp-breadcrumb {
padding: 0.75rem 1rem;
margin-bottom: 1rem;
list-style: none;
background-color: #e9ecef;
border-radius: 0.25rem;
}
.vp-inline-block {
display: inline-block;
}
</style>

236
resources/assets/js/home/TaskMetrics/DrillDown.vue
View File

@@ -1,149 +1,157 @@
<template>
<div
id="v-pm-drill-down"
ref="v-pm-drill-down"
class="v-pm-drill-down vp-inline-block"
>
<div class="p-1 v-flex">
<h6 class="v-search-title">Drill Down Navigator</h6>
</div>
<div
v-for="item in loadItems(data, level)"
:key="item.content"
class="vp-padding-b10"
>
<span class="vp-inline-block vp-padding-r10 vp-font-size-r1">
{{ item.label }}
</span>
<div class="vp-inline-block">
<span :class="item.classObject"> {{ item.content }}</span>
</div>
</div>
</div>
<div
id="v-pm-drill-down"
ref="v-pm-drill-down"
class="v-pm-drill-down vp-inline-block"
>
<div class="p-1 v-flex">
<h6 class="v-search-title">Drill Down Navigator</h6>
</div>
<div
v-for="item in loadItems(data, level)"
:key="item.content"
class="vp-padding-b10"
@click="onClick(item)"
>
<span class="vp-inline-block vp-padding-r10 vp-font-size-r1">
{{ item.label }}
</span>
<div class="vp-inline-block">
<span :class="item.classObject"> {{ item.content }}</span>
</div>
</div>
</div>
</template>
<script>
import _ from "lodash";
export default {
name: "DrillDown",
mixins: [],
components: {},
props: ["level"],
data() {
let that = this;
return {
classObject: {
"rounded-circle": true,
"v-pm-drill-down-number": true,
"vp-btn-secondary": true,
"btn-primary": false,
"vp-block": true,
},
data: [
{
label: "Level",
content: "0",
click() {},
},
{
label: "Level",
content: "1",
click() {},
},
{
label: "Level",
content: "2",
click() {},
},
{
label: "Level",
content: "3",
click() {},
},
],
};
},
created() {},
mounted() {},
watch: {},
computed: {},
updated() {},
beforeCreate() {},
methods: {
onClick(item) {
let array,
i = 0,
nindex;
array = _.clone(this.data);
array.forEach((el) => {
if (el.content === item.content) {
nindex = i;
}
i++;
});
this.index = nindex;
item.click(item);
},
loadItems(items, index) {
let array,
i = 0,
that = this;
array = _.clone(items);
array.forEach((el) => {
el.classObject = _.clone(that.classObject);
if (i <= index) {
el.classObject["vp-btn-secondary"] = false;
el.classObject["btn-primary"] = true;
}
i++;
});
console.log("aquiaaa");
return array;
},
changeItem(item) {},
},
name: "DrillDown",
mixins: [],
components: {},
props: ["level"],
data() {
let that = this;
return {
classObject: {
"rounded-circle": true,
"v-pm-drill-down-number": true,
"vp-btn-secondary": true,
"btn-primary": false,
"vp-block": true,
},
data: [
{
label: "Level",
content: "0",
click() {
that.$emit("onChangeLevel", 0);
},
},
{
label: "Level",
content: "1",
click() {
that.$emit("onChangeLevel", 1);
},
},
{
label: "Level",
content: "2",
click() {
that.$emit("onChangeLevel", 2);
},
},
{
label: "Level",
content: "3",
click() {},
},
],
};
},
created() {},
mounted() {},
watch: {},
computed: {},
updated() {},
beforeCreate() {},
methods: {
onClick(item) {
let array,
i = 0,
nindex;
array = _.clone(this.data);
array.forEach((el) => {
if (el.content === item.content) {
nindex = i;
}
i++;
});
this.index = nindex;
if (nindex <= this.level) {
item.click(item);
}
},
loadItems(items, index) {
let array,
i = 0,
that = this;
array = _.clone(items);
array.forEach((el) => {
el.classObject = _.clone(that.classObject);
if (i <= index) {
el.classObject["vp-btn-secondary"] = false;
el.classObject["btn-primary"] = true;
}
i++;
});
return array;
},
changeItem(item) {},
},
};
</script>
<style>
.v-pm-drill-down-number {
height: 5rem;
width: 5rem;
text-align: center;
line-height: 5rem;
font-size: 1.5rem;
height: 5rem;
width: 5rem;
text-align: center;
line-height: 5rem;
font-size: 1.5rem;
}
.vp-inline-block {
display: inline-block;
display: inline-block;
}
.vp-block {
display: block;
display: block;
}
.vp-padding-r10 {
padding-right: 10px;
padding-right: 10px;
}
.vp-padding-b10 {
padding-bottom: 10px;
padding-bottom: 10px;
}
.vp-font-size-r1 {
font-size: 1rem;
font-size: 1rem;
}
.vp-btn-secondary {
color: #2f3133;
background-color: #b5b6b6;
color: #2f3133;
background-color: #b5b6b6;
}
.vp-btn-secondary:hover {
color: #fff;
background-color: #6c757d;
border-color: #6c757d;
color: #fff;
background-color: #6c757d;
border-color: #6c757d;
}
.v-pm-drill-down {
vertical-align: top;
vertical-align: top;
padding-left: 50px;
}
</style>

11
resources/assets/js/home/TaskMetrics/TaskMetrics.vue
View File

@@ -9,9 +9,13 @@
</div>
<modal-new-request ref="newRequest"></modal-new-request>
<div class="d-inline-flex p-2">
<vue-charts @onChangeLevel="changeLevel" />
<vue-charts
ref="pm-vue-chart"
@onChangeLevel="changeLevel"
:level="level"
/>
<div class="vp-6"></div>
<drill-down :level="level" />
<drill-down :level="level" @onChangeLevel="updateVueChart" />
</div>
</div>
</template>
@@ -49,6 +53,9 @@ export default {
changeLevel(lv) {
this.level = lv;
},
updateVueChart(lv) {
this.$refs["pm-vue-chart"].onChangeLevel(lv);
},
},
};
</script>

46
resources/assets/js/home/TaskMetrics/VueChartLvOne.vue
View File

@@ -3,7 +3,10 @@
<div class="p-1 v-flex">
<h6 class="v-search-title">Number of Tasks Status per Process</h6>
<div>
<BreadCrumb :options="dataBreadCrumbs(data)" />
<BreadCrumb
:options="breadCrumbs.data"
:settings="breadCrumbs.settings"
/>
<ProcessPopover
:options="optionsProcesses"
target="pm-task-process"
@@ -26,7 +29,12 @@
$t("ID_MAFE_a4ffdcf0dc1f31b9acaf295d75b51d00")
}}</label>
<div class="vp-inline-block">
<b-form-checkbox v-model="top" name="check-button" switch>
<b-form-checkbox
v-model="top"
name="check-button"
@change="changeOption"
switch
>
</b-form-checkbox>
</div>
<div class="vp-inline-block vp-right vp-padding-r40">
@@ -64,7 +72,7 @@ export default {
BreadCrumb,
ProcessPopover,
},
props: ["data"],
props: ["data", "breadCrumbs"],
data() {
let that = this;
return {
@@ -93,7 +101,6 @@ export default {
events: {
legendClick: function (chartContext, seriesIndex, config) {
that.currentSelection = that.totalCases[seriesIndex];
console.log("LEGENDDDDDDDDDDDDD");
that.$emit("updateDataLevel", {
id: that.currentSelection["PRO_ID"],
name: that.currentSelection["PRO_TITLE"],
@@ -217,7 +224,6 @@ export default {
//Update the labels
this.dataProcesses = data;
this.updateLabels(data);
console.log("aaaaaaaaaaaaaaaaa aaaaaaa");
},
/**
* Change the options in TOTAL CASES BY PROCESS
@@ -230,6 +236,7 @@ export default {
category: option.id,
caseList: this.data[0].id.toLowerCase(),
processes: this.selectedProcesses,
top: this.top,
};
Api.process
.totalCasesByProcess(dt)
@@ -266,26 +273,6 @@ export default {
},
]);
},
dataBreadCrumbs(options) {
let res = [],
that = this;
res.push({
label: "Start",
onClick() {
console.log("STARTTTTTTTTTT");
that.$emit("onChangeLevel", 0);
},
});
_.each(options, (el) => {
res.push({
label: el.id,
onClick() {
that.$emit("onChangeLevel", el.level);
},
});
});
return res;
},
/**
* Update list processes in chart
*/
@@ -316,7 +303,14 @@ export default {
});
this.$refs["LevelOneChart"].updateOptions({ labels: labels });
},
/**
* Force update view when update level
*/
forceUpdateView() {
this.changeOption({
id: 0,
});
},
},
};
</script>

304
resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue
View File

@@ -3,25 +3,53 @@
<div class="p-1 v-flex">
<h6 class="v-search-title">Number of Tasks Status per Process</h6>
<div>
<BreadCrumb :options="dataBreadCrumbs(data)" />
<BreadCrumb
:options="breadCrumbs.data"
:settings="breadCrumbs.settings"
/>
<div class="vp-width-p30 vp-inline-block">
<b-form-datepicker id="date-from" size="sm"></b-form-datepicker>
<b-form-datepicker
id="date-from"
:date-format-options="{
year: '2-digit',
month: '2-digit',
day: '2-digit',
}"
size="sm"
:placeholder="$t('ID_DELEGATE_DATE_FROM')"
v-model="dateFrom"
@input="changeOption"
></b-form-datepicker>
</div>
<div class="vp-width-p30 vp-inline-block">
<b-form-datepicker id="date-to" size="sm"></b-form-datepicker>
<b-form-datepicker
id="date-to"
size="sm"
:date-format-options="{
year: '2-digit',
month: '2-digit',
day: '2-digit',
}"
:placeholder="$t('ID_DELEGATE_DATE_TO')"
v-model="dateTo"
@input="changeOption"
></b-form-datepicker>
</div>
<div class="vp-inline-block">
<b-button-group size="sm">
<b-button variant="outline-secondary">{{ $t("ID_DAY") }}</b-button>
<b-button variant="outline-secondary">{{
$t("ID_MONTH")
}}</b-button>
<b-button variant="outline-secondary">{{ $t("ID_YEAR") }}</b-button>
</b-button-group>
<b-form-radio-group
id="btn-radios"
v-model="period"
:options="periodOptions"
button-variant="outline-secondary"
size="sm"
name="radio-btn-outline"
buttons
@change="changeOption"
></b-form-radio-group>
</div>
</div>
<apexchart
ref="apexchart1"
ref="LevelTwoChart"
:width="width"
:options="options"
:series="series"
@@ -35,108 +63,62 @@ import _ from "lodash";
import Api from "../../api/index";
import Multiselect from "vue-multiselect";
import BreadCrumb from "../../components/utils/BreadCrumb.vue";
import moment from "moment";
export default {
name: "VueChartLvOne",
name: "VueChartLvTwo",
mixins: [],
components: {
Multiselect,
BreadCrumb,
},
props: ["data"],
props: ["data", "breadCrumbs"],
data() {
let that = this;
return {
category: null,
optionsCategory: [],
top: false,
dateFrom: "",
dateTo: "",
period: "",
periodOptions: [
{ text: this.$t("ID_DAY"), value: "day" },
{ text: this.$t("ID_MONTH"), value: "month" },
{ text: this.$t("ID_YEAR"), value: "year" },
],
dataCasesByRange: [],
width: 0,
series: [
{
name: "TEAM 1",
data: this.generateDayWiseTimeSeries(
new Date("11/02/2017").getTime(),
20,
{
min: 10,
max: 60,
}
),
},
{
name: "TEAM 2",
data: this.generateDayWiseTimeSeries(
new Date("11 Feb 2017 GMT").getTime(),
20,
{
min: 10,
max: 60,
}
),
},
{
name: "TEAM 3",
data: this.generateDayWiseTimeSeries(
new Date("11 Feb 2017 GMT").getTime(),
30,
{
min: 10,
max: 60,
}
),
},
{
name: "TEAM 4",
data: this.generateDayWiseTimeSeries(
new Date("11 Feb 2017 GMT").getTime(),
10,
{
min: 10,
max: 60,
}
),
},
{
name: "TEAM 5",
data: this.generateDayWiseTimeSeries(
new Date("11 Feb 2017 GMT").getTime(),
30,
{
min: 10,
max: 60,
}
),
name: "Process",
data: [],
},
],
options: {
chart: {
height: 350,
type: "scatter",
type: "area",
zoom: {
type: "xy",
enabled: false,
},
id: "LevelTwoChart",
},
dataLabels: {
enabled: false,
enabled: true,
},
grid: {
xaxis: {
lines: {
show: true,
},
},
yaxis: {
lines: {
show: true,
},
},
stroke: {
curve: "straight",
},
title: {
text: "",
align: "left",
},
labels: [],
xaxis: {
type: "datetime",
},
yaxis: {
max: 70,
opposite: false,
},
legend: {
horizontalAlign: "left",
},
},
};
@@ -144,9 +126,6 @@ export default {
created() {},
mounted() {
this.getBodyHeight();
this.getCategories();
//this.getDataDonut();
//this.getData();
},
watch: {},
computed: {},
@@ -160,123 +139,56 @@ export default {
this.width = window.innerHeight;
},
/**
* Change view - donut/bar
* Change datepickers or radio button
*/
changeView(view) {
this.typeView = view;
this.getData();
changeOption() {
let that = this,
dt;
if (this.dateFrom && this.dateTo && this.period) {
dt = {
processId: this.data[1].id,
caseList: this.data[0].id.toLowerCase(),
dateFrom: moment(this.dateFrom).format("DD/MM/YYYY"),
dateTo: moment(this.dateTo).format("DD/MM/YYYY"),
groupBy: this.period,
};
Api.process
.totalCasesByRange(dt)
.then((response) => {
that.formatDataRange(response.data);
})
.catch((e) => {
console.error(err);
});
}
},
/**
* Get data from rest API
* Format response fromn API
*/
getData() {
let that = this;
Api.cases
.listTotalCases()
.then((response) => {
that.formatData(response.data);
})
.catch((response) => {});
},
/**
* Format the data for chart
*/
formatData(data) {
let l = [],
c = [],
s = [];
formatDataRange(data) {
let labels = [],
serie = [];
this.dataCasesByRange = data;
_.each(data, (el) => {
l.push(el["List Name"]);
s.push(el["Total"]);
if (el["Color"] == "green") {
c.push("#179a6e");
}
if (el["Color"] == "yellow") {
c.push("#feb019");
}
if (el["Color"] == "blue") {
c.push("#008ffb");
}
if (el["Color"] == "gray") {
c.push("#8f99a0");
}
serie.push(el["TOTAL"]);
labels.push(el["dateGroup"]);
});
this.seriesDonut = s;
this.seriesBar = [
{
data: s,
console.log("DRWAWWW");
this.$refs["LevelTwoChart"].updateOptions({
labels: labels,
title: {
text: this.data[0]["PRO_TITLE"],
align: "left",
},
];
this.$refs["apexchart1"].updateOptions({ labels: l, colors: c });
this.$refs["apexchart2"].updateOptions({ labels: l, colors: c });
this.$apexcharts.exec("apexchart1", "updateSeries", s);
this.$apexcharts.exec("apexchart2", "updateSeries", [
});
this.$apexcharts.exec("LevelTwoChart", "updateSeries", [
{
data: s,
name: this.data[0]["PRO_TITLE"],
data: serie,
},
]);
},
getCategories() {
let that = this;
console.log("jonas");
Api.filters
.categories()
.then((response) => {
that.formatDataCategories(response.data);
})
.catch((e) => {
console.error(err);
});
},
formatDataCategories(data) {
let array = [];
_.each(data, (el) => {
array.push({ name: el["CATEGORY_NAME"], id: el["CATEGORY_ID"] });
});
this.optionsCategory = array;
this.category = array[0];
},
changeOption(option) {
console.log("asda sdas d");
let dt = {
category: option.id,
caseList:
this.data && this.data.dataLv0
? this.data.dataLv0["List Name"].toLowerCase()
: "inbox",
};
Api.process
.processTotalCases(dt)
.then((response) => {
console.log("asda sdas d11111111111111");
console.log(response);
})
.catch((e) => {
console.error(err);
});
},
dataBreadCrumbs(options) {
let res = [],
that = this;
res.push({
label: "Start",
onClick() {
console.log("STARTTTTTTTTTT");
that.$emit("onChangeLevel", 0);
},
});
_.each(options, (el) => {
res.push({
label: el.name,
onClick() {
that.$emit("onChangeLevel", el.level);
},
});
});
return res;
},
generateDayWiseTimeSeries(baseval, count, yrange) {
var i = 0;
var series = [];

11
resources/assets/js/home/TaskMetrics/VueChartLvZero.vue
View File

@@ -2,6 +2,10 @@
<div id="v-pm-charts" ref="v-pm-charts" class="v-pm-charts vp-inline-block">
<div class="p-1 v-flex">
<h6 class="v-search-title">Number of tasks per Task Status</h6>
<BreadCrumb
:options="breadCrumbs.data"
:settings="breadCrumbs.settings"
/>
<apexchart
v-show="typeView === 'donut'"
ref="apexchart1"
@@ -46,11 +50,12 @@
<script>
import _ from "lodash";
import Api from "../../api/index";
import BreadCrumb from "./../../components/utils/BreadCrumb.vue";
export default {
name: "VueChartLvZero",
mixins: [],
components: {},
props: [],
components: { BreadCrumb },
props: ["breadCrumbs"],
data() {
let that = this;
return {
@@ -161,7 +166,7 @@ export default {
* Return the height for Vue Card View body
*/
getBodyHeight() {
this.width = window.innerHeight * 0.9;
this.width = window.innerHeight * 0.8;
},
/**
* Change view - donut/bar

69
resources/assets/js/home/TaskMetrics/VueCharts.vue
View File

@@ -3,17 +3,21 @@
<vue-chart-lv-zero
v-show="level === 0"
@updateDataLevel="updateDataLevel"
:breadCrumbs="dataBreadCrumbs()"
/>
<vue-chart-lv-one
v-if="level === 1"
:key="key1"
v-show="level === 1"
:data="data"
@onChangeLevel="onChangeLevel"
@updateDataLevel="updateDataLevel"
:breadCrumbs="dataBreadCrumbs()"
/>
<vue-chart-lv-two
v-if="level === 2"
v-show="level === 2"
:data="data"
@onChangeLevel="onChangeLevel"
:breadCrumbs="dataBreadCrumbs()"
/>
</div>
</template>
@@ -36,8 +40,14 @@ export default {
let that = this;
return {
level: 0,
key1: 1,
data: [],
dataBreadCrumbs: [],
settingsBreadCrumbs: [
{
class: "fas fa-info-circle",
onClick() {},
},
],
};
},
created() {},
@@ -53,7 +63,21 @@ export default {
updateDataLevel(data) {
this.data.push(data);
this.level = data.level + 1;
this.$emit("onChangeLevel", this.level);
this.$emit("onChangeLevel", data.level + 1);
this.updateKey();
},
updateKey() {
switch (this.level) {
case 0:
break;
case 1:
this.key1++;
break;
case 2:
break;
case 3:
break;
}
},
/**
@@ -66,10 +90,45 @@ export default {
};
},
onChangeLevel(lv) {
console.log("leveeeeeeeeeeeeeee");
_.remove(this.data, function (n) {
return n.level >= lv;
});
this.level = lv;
this.$emit("onChangeLevel", this.level);
},
dataBreadCrumbs() {
let res = [],
that = this,
index = 0;
_.each(this.data, (el) => {
if (index <= that.level) {
res.push({
label: el.name,
onClick() {
that.onChangeLevel(el.level);
},
});
}
});
res.push({
label: "Select the drill option",
onClick() {},
});
switch (this.level) {
case 0:
return {
data: res,
settings: this.settingsBreadCrumbs,
};
break;
default:
return {
data: res,
settings: this.settingsBreadCrumbs,
};
break;
}
},
},
};
</script>