fernando/luos
1
0
Fork 0
Code Releases 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>

50
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)
@@ -257,35 +264,15 @@ export default {
serie.push(el["TOTAL"]);
labels.push(el["PRO_TITLE"]);
});
this.$refs["LevelOneChart"].updateOptions({ labels: labels });
this.$apexcharts.exec("LevelOneChart", "updateSeries", [
{
data: serie,
},
]);
},
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

File diff suppressed because it is too large Load Diff

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>