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

update task metrics

Browse Source
This commit is contained in:
Henry Jordan
2021-08-12 19:05:50 +00:00
parent 50c8cae9c2 1d740f9e9c
commit 1cba862603
51 changed files with 5756 additions and 1133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,151 +1,149 @@
<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, index)"
: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" @click="onClick(item)">
{{ 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"
>
<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: [],
data() {
let that = this;
return {
index: 0,
classObject: {
"rounded-circle": true,
"v-pm-drill-down-number": true,
"vp-btn-secondary": true,
"btn-primary": false,
"vp-block": true,
},
data: [
{
label: "Level",
content: "1",
click() {},
},
{
label: "Level",
content: "2",
click() {},
},
{
label: "Level",
content: "3",
click() {},
},
{
label: "Level",
content: "4",
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() {},
},
{
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) {},
},
};
</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>