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: {}, data: {},
keys: {} 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}", DEBUG_STATUS: "/home/process-debug-status?processUid={prj_uid}",
LIST_TOTAL_CASES: "/metrics/list-total-cases", LIST_TOTAL_CASES: "/metrics/list-total-cases",
TOTAL_CASES_BY_PROCESS:"/metrics/total-cases-by-process", TOTAL_CASES_BY_PROCESS:"/metrics/total-cases-by-process",
TOTAL_CASES_BY_RANGE:"/metrics/process-total-cases",
CONFIG: "/home/config", CONFIG: "/home/config",
GET_CONFIG: "/home/config/{id}/{name}", GET_CONFIG: "/home/config/{id}/{name}",
PAUSE_CASE: "/cases/{app_uid}/pause", PAUSE_CASE: "/cases/{app_uid}/pause",

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

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

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

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

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

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

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

@@ -3,25 +3,53 @@
<div class="p-1 v-flex"> <div class="p-1 v-flex">
<h6 class="v-search-title">Number of Tasks Status per Process</h6> <h6 class="v-search-title">Number of Tasks Status per Process</h6>
<div> <div>
<BreadCrumb :options="dataBreadCrumbs(data)" /> <BreadCrumb
:options="breadCrumbs.data"
:settings="breadCrumbs.settings"
/>
<div class="vp-width-p30 vp-inline-block"> <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>
<div class="vp-width-p30 vp-inline-block"> <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>
<div class="vp-inline-block"> <div class="vp-inline-block">
<b-button-group size="sm"> <b-form-radio-group
<b-button variant="outline-secondary">{{ $t("ID_DAY") }}</b-button> id="btn-radios"
<b-button variant="outline-secondary">{{ v-model="period"
$t("ID_MONTH") :options="periodOptions"
}}</b-button> button-variant="outline-secondary"
<b-button variant="outline-secondary">{{ $t("ID_YEAR") }}</b-button> size="sm"
</b-button-group> name="radio-btn-outline"
buttons
@change="changeOption"
></b-form-radio-group>
</div> </div>
</div> </div>
<apexchart <apexchart
ref="apexchart1" ref="LevelTwoChart"
:width="width" :width="width"
:options="options" :options="options"
:series="series" :series="series"
@@ -35,108 +63,62 @@ import _ from "lodash";
import Api from "../../api/index"; import Api from "../../api/index";
import Multiselect from "vue-multiselect"; import Multiselect from "vue-multiselect";
import BreadCrumb from "../../components/utils/BreadCrumb.vue"; import BreadCrumb from "../../components/utils/BreadCrumb.vue";
import moment from "moment";
export default { export default {
name: "VueChartLvOne", name: "VueChartLvTwo",
mixins: [], mixins: [],
components: { components: {
Multiselect, Multiselect,
BreadCrumb, BreadCrumb,
}, },
props: ["data"], props: ["data", "breadCrumbs"],
data() { data() {
let that = this; let that = this;
return { return {
category: null, dateFrom: "",
optionsCategory: [], dateTo: "",
top: false, 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, width: 0,
series: [ series: [
{ {
name: "TEAM 1", name: "Process",
data: this.generateDayWiseTimeSeries( data: [],
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,
}
),
}, },
], ],
options: { options: {
chart: { chart: {
height: 350, type: "area",
type: "scatter",
zoom: { zoom: {
type: "xy", enabled: false,
}, },
id: "LevelTwoChart",
}, },
dataLabels: { dataLabels: {
enabled: false, enabled: true,
}, },
grid: { stroke: {
xaxis: { curve: "straight",
lines: {
show: true,
},
},
yaxis: {
lines: {
show: true,
},
},
}, },
title: {
text: "",
align: "left",
},
labels: [],
xaxis: { xaxis: {
type: "datetime", type: "datetime",
}, },
yaxis: { yaxis: {
max: 70, opposite: false,
},
legend: {
horizontalAlign: "left",
}, },
}, },
}; };
@@ -144,9 +126,6 @@ export default {
created() {}, created() {},
mounted() { mounted() {
this.getBodyHeight(); this.getBodyHeight();
this.getCategories();
//this.getDataDonut();
//this.getData();
}, },
watch: {}, watch: {},
computed: {}, computed: {},
@@ -160,123 +139,56 @@ export default {
this.width = window.innerHeight; this.width = window.innerHeight;
}, },
/** /**
* Change view - donut/bar * Change datepickers or radio button
*/ */
changeView(view) { changeOption() {
this.typeView = view; let that = this,
this.getData(); 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() { formatDataRange(data) {
let that = this; let labels = [],
Api.cases serie = [];
.listTotalCases()
.then((response) => { this.dataCasesByRange = data;
that.formatData(response.data);
})
.catch((response) => {});
},
/**
* Format the data for chart
*/
formatData(data) {
let l = [],
c = [],
s = [];
_.each(data, (el) => { _.each(data, (el) => {
l.push(el["List Name"]); serie.push(el["TOTAL"]);
s.push(el["Total"]); labels.push(el["dateGroup"]);
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");
}
}); });
this.seriesDonut = s; console.log("DRWAWWW");
this.seriesBar = [ this.$refs["LevelTwoChart"].updateOptions({
{ labels: labels,
data: s, title: {
text: this.data[0]["PRO_TITLE"],
align: "left",
}, },
]; });
this.$refs["apexchart1"].updateOptions({ labels: l, colors: c }); this.$apexcharts.exec("LevelTwoChart", "updateSeries", [
this.$refs["apexchart2"].updateOptions({ labels: l, colors: c });
this.$apexcharts.exec("apexchart1", "updateSeries", s);
this.$apexcharts.exec("apexchart2", "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) { generateDayWiseTimeSeries(baseval, count, yrange) {
var i = 0; var i = 0;
var series = []; 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 id="v-pm-charts" ref="v-pm-charts" class="v-pm-charts vp-inline-block">
<div class="p-1 v-flex"> <div class="p-1 v-flex">
<h6 class="v-search-title">Number of tasks per Task Status</h6> <h6 class="v-search-title">Number of tasks per Task Status</h6>
<BreadCrumb
:options="breadCrumbs.data"
:settings="breadCrumbs.settings"
/>
<apexchart <apexchart
v-show="typeView === 'donut'" v-show="typeView === 'donut'"
ref="apexchart1" ref="apexchart1"
@@ -46,11 +50,12 @@
<script> <script>
import _ from "lodash"; import _ from "lodash";
import Api from "../../api/index"; import Api from "../../api/index";
import BreadCrumb from "./../../components/utils/BreadCrumb.vue";
export default { export default {
name: "VueChartLvZero", name: "VueChartLvZero",
mixins: [], mixins: [],
components: {}, components: { BreadCrumb },
props: [], props: ["breadCrumbs"],
data() { data() {
let that = this; let that = this;
return { return {
@@ -161,7 +166,7 @@ export default {
* Return the height for Vue Card View body * Return the height for Vue Card View body
*/ */
getBodyHeight() { getBodyHeight() {
this.width = window.innerHeight * 0.9; this.width = window.innerHeight * 0.8;
}, },
/** /**
* Change view - donut/bar * Change view - donut/bar

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

@@ -3,17 +3,21 @@
<vue-chart-lv-zero <vue-chart-lv-zero
v-show="level === 0" v-show="level === 0"
@updateDataLevel="updateDataLevel" @updateDataLevel="updateDataLevel"
:breadCrumbs="dataBreadCrumbs()"
/> />
<vue-chart-lv-one <vue-chart-lv-one
v-if="level === 1" :key="key1"
v-show="level === 1"
:data="data" :data="data"
@onChangeLevel="onChangeLevel" @onChangeLevel="onChangeLevel"
@updateDataLevel="updateDataLevel" @updateDataLevel="updateDataLevel"
:breadCrumbs="dataBreadCrumbs()"
/> />
<vue-chart-lv-two <vue-chart-lv-two
v-if="level === 2" v-show="level === 2"
:data="data" :data="data"
@onChangeLevel="onChangeLevel" @onChangeLevel="onChangeLevel"
:breadCrumbs="dataBreadCrumbs()"
/> />
</div> </div>
</template> </template>
@@ -36,8 +40,14 @@ export default {
let that = this; let that = this;
return { return {
level: 0, level: 0,
key1: 1,
data: [], data: [],
dataBreadCrumbs: [], settingsBreadCrumbs: [
{
class: "fas fa-info-circle",
onClick() {},
},
],
}; };
}, },
created() {}, created() {},
@@ -53,7 +63,21 @@ export default {
updateDataLevel(data) { updateDataLevel(data) {
this.data.push(data); this.data.push(data);
this.level = data.level + 1; 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) { onChangeLevel(lv) {
console.log("leveeeeeeeeeeeeeee"); _.remove(this.data, function (n) {
return n.level >= lv;
});
this.level = lv; this.level = lv;
this.$emit("onChangeLevel", this.level); 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> </script>