last updates
This commit is contained in:
@@ -35,5 +35,13 @@ export let process = {
|
|||||||
params: dt,
|
params: dt,
|
||||||
keys: {}
|
keys: {}
|
||||||
});
|
});
|
||||||
}
|
},
|
||||||
|
totalCasesByRisk(dt) {
|
||||||
|
return Api.get({
|
||||||
|
service: "CASES_RISK",
|
||||||
|
method: "get",
|
||||||
|
params: dt,
|
||||||
|
keys: {}
|
||||||
|
});
|
||||||
|
},
|
||||||
};
|
};
|
||||||
@@ -71,6 +71,7 @@
|
|||||||
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",
|
TOTAL_CASES_BY_RANGE:"/metrics/process-total-cases",
|
||||||
|
CASES_RISK:"/metrics/cases-risk",
|
||||||
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",
|
||||||
|
|||||||
@@ -19,7 +19,12 @@
|
|||||||
:key="item.id"
|
:key="item.id"
|
||||||
class="vp-bread-crumbs-settings vp-float-right vp-inline-block"
|
class="vp-bread-crumbs-settings vp-float-right vp-inline-block"
|
||||||
>
|
>
|
||||||
<span @click="item.onClick">
|
<span
|
||||||
|
@click="item.onClick"
|
||||||
|
data-bs-toggle="tooltip"
|
||||||
|
data-bs-placement="top"
|
||||||
|
:title="item.tooltip || ''"
|
||||||
|
>
|
||||||
<i :class="formatClass(item)"></i>
|
<i :class="formatClass(item)"></i>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -123,6 +123,12 @@ export default {
|
|||||||
eventBus.$on('sort-menu', (data) => {
|
eventBus.$on('sort-menu', (data) => {
|
||||||
that.updateUserSettings('customCasesList', data);
|
that.updateUserSettings('customCasesList', data);
|
||||||
});
|
});
|
||||||
|
eventBus.$on('home-update-page', (data) => {
|
||||||
|
that.onUpdatePage(data);
|
||||||
|
});
|
||||||
|
eventBus.$on('home-update-datacase', (data) => {
|
||||||
|
that.onUpdateDataCase(data);
|
||||||
|
});
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
/**
|
/**
|
||||||
@@ -242,6 +248,7 @@ export default {
|
|||||||
mappingMenu(data) {
|
mappingMenu(data) {
|
||||||
var i,
|
var i,
|
||||||
j,
|
j,
|
||||||
|
that = this,
|
||||||
newData = data,
|
newData = data,
|
||||||
auxId;
|
auxId;
|
||||||
for (i = 0; i < data.length; i += 1) {
|
for (i = 0; i < data.length; i += 1) {
|
||||||
@@ -263,7 +270,7 @@ export default {
|
|||||||
hiddenOnCollapse: data[i].hiddenOnCollapse,
|
hiddenOnCollapse: data[i].hiddenOnCollapse,
|
||||||
icon: 'pie-chart-fill',
|
icon: 'pie-chart-fill',
|
||||||
onClick: function (item) {
|
onClick: function (item) {
|
||||||
// TODO click evet handler
|
that.onUpdatePage("task-metrics");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="v-todo" ref="v-todo" class="v-container-todo">
|
<div id="v-todo" ref="v-todo" class="v-container-todo">
|
||||||
<button-fleft :data="newCase"></button-fleft>
|
<button-fleft :data="newCase"></button-fleft>
|
||||||
<button type="button" @click="task" class="btn btn-primary">Primary</button>
|
|
||||||
<modal-new-request ref="newRequest"></modal-new-request>
|
<modal-new-request ref="newRequest"></modal-new-request>
|
||||||
<ModalPauseCase ref="modal-pause-case"></ModalPauseCase>
|
<ModalPauseCase ref="modal-pause-case"></ModalPauseCase>
|
||||||
<ModalReassignCase ref="modal-reassign-case"></ModalReassignCase>
|
<ModalReassignCase ref="modal-reassign-case"></ModalReassignCase>
|
||||||
|
|||||||
@@ -174,9 +174,6 @@ export default {
|
|||||||
}
|
}
|
||||||
this.columns = cols;
|
this.columns = cols;
|
||||||
this.random = _.random(0, 10000000000);
|
this.random = _.random(0, 10000000000);
|
||||||
},
|
|
||||||
task(){
|
|
||||||
this.$emit("onUpdatePage", "task-metrics");
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -5,7 +5,7 @@
|
|||||||
<div>
|
<div>
|
||||||
<BreadCrumb
|
<BreadCrumb
|
||||||
:options="breadCrumbs.data"
|
:options="breadCrumbs.data"
|
||||||
:settings="breadCrumbs.settings"
|
:settings="settingsBreadcrumbs"
|
||||||
/>
|
/>
|
||||||
<ProcessPopover
|
<ProcessPopover
|
||||||
:options="optionsProcesses"
|
:options="optionsProcesses"
|
||||||
@@ -18,7 +18,7 @@
|
|||||||
v-model="category"
|
v-model="category"
|
||||||
:options="optionsCategory"
|
:options="optionsCategory"
|
||||||
:searchable="false"
|
:searchable="false"
|
||||||
:close-on-select="false"
|
:close-on-select="true"
|
||||||
:show-labels="false"
|
:show-labels="false"
|
||||||
track-by="id"
|
track-by="id"
|
||||||
label="name"
|
label="name"
|
||||||
@@ -78,7 +78,13 @@ export default {
|
|||||||
return {
|
return {
|
||||||
category: null,
|
category: null,
|
||||||
dataProcesses: null, //Data API processes
|
dataProcesses: null, //Data API processes
|
||||||
|
settingsBreadcrumbs: [
|
||||||
|
{
|
||||||
|
class: "fas fa-info-circle",
|
||||||
|
tooltip: this.$t("ID_TASK_RISK_LEVEL1_INFO"),
|
||||||
|
onClick() {},
|
||||||
|
},
|
||||||
|
],
|
||||||
optionsCategory: [],
|
optionsCategory: [],
|
||||||
optionsProcesses: [],
|
optionsProcesses: [],
|
||||||
selectedProcesses: [],
|
selectedProcesses: [],
|
||||||
|
|||||||
@@ -1,11 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<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 Status per Process</h6>
|
<h6 class="v-search-title">Risk Matrix per Process by Task Status</h6>
|
||||||
<div>
|
<div>
|
||||||
<BreadCrumb
|
<BreadCrumb
|
||||||
:options="breadCrumbs.data"
|
:options="breadCrumbs.data"
|
||||||
:settings="breadCrumbs.settings"
|
:settings="settingsBreadcrumbs"
|
||||||
/>
|
/>
|
||||||
<div class="vp-width-p30 vp-inline-block">
|
<div class="vp-width-p30 vp-inline-block">
|
||||||
<b-form-datepicker
|
<b-form-datepicker
|
||||||
@@ -49,6 +49,7 @@
|
|||||||
:show-labels="false"
|
:show-labels="false"
|
||||||
track-by="id"
|
track-by="id"
|
||||||
label="name"
|
label="name"
|
||||||
|
@input="changeOption"
|
||||||
></multiselect>
|
></multiselect>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -58,6 +59,47 @@
|
|||||||
:options="options"
|
:options="options"
|
||||||
:series="series"
|
:series="series"
|
||||||
></apexchart>
|
></apexchart>
|
||||||
|
<div class="vp-width-p100">
|
||||||
|
<div class="vp-text-align-center" role="group">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
@click="
|
||||||
|
riskType = 'ON_TIME';
|
||||||
|
changeOption();
|
||||||
|
"
|
||||||
|
class="btn vp-btn-success btn-sm"
|
||||||
|
>
|
||||||
|
On Time
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
@click="
|
||||||
|
riskType = 'AT_RISK';
|
||||||
|
changeOption();
|
||||||
|
"
|
||||||
|
class="btn vp-btn-warning btn-sm"
|
||||||
|
>
|
||||||
|
At Risk
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
@click="
|
||||||
|
riskType = 'OVERDUE';
|
||||||
|
changeOption();
|
||||||
|
"
|
||||||
|
class="btn vp-btn-danger btn-sm"
|
||||||
|
>
|
||||||
|
Overdue
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="vp-width-p100 vp-text-align-center">
|
||||||
|
<label class="vp-form-label">
|
||||||
|
{{ $t("ID_TODAY") }} : {{ dateNow }}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<ModalUnpauseCase ref="modal-unpause-case"></ModalUnpauseCase>
|
||||||
|
<ModalClaimCase ref="modal-claim-case"></ModalClaimCase>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -68,20 +110,35 @@ 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";
|
import moment from "moment";
|
||||||
|
import ModalUnpauseCase from "../modal/ModalUnpauseCase.vue";
|
||||||
|
import ModalClaimCase from "../modal/ModalClaimCase.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "VueChartLvThree",
|
name: "VueChartLvThree",
|
||||||
mixins: [],
|
mixins: [],
|
||||||
components: {
|
components: {
|
||||||
Multiselect,
|
Multiselect,
|
||||||
BreadCrumb,
|
BreadCrumb,
|
||||||
|
ModalUnpauseCase,
|
||||||
|
ModalClaimCase,
|
||||||
},
|
},
|
||||||
props: ["data", "breadCrumbs"],
|
props: ["data", "breadCrumbs"],
|
||||||
data() {
|
data() {
|
||||||
let that = this;
|
let that = this;
|
||||||
return {
|
return {
|
||||||
|
currentSelection: null,
|
||||||
dateFrom: "",
|
dateFrom: "",
|
||||||
dateTo: "",
|
dateTo: "",
|
||||||
size: "all",
|
dateNow: "",
|
||||||
|
size: { name: this.$t("ID_ALL"), id: "all" },
|
||||||
|
riskType: "ON_TIME",
|
||||||
|
settingsBreadcrumbs: [
|
||||||
|
{
|
||||||
|
class: "fas fa-info-circle",
|
||||||
|
tooltip: this.$t("ID_TASK_RISK_LEVEL3_INFO"),
|
||||||
|
onClick() {},
|
||||||
|
},
|
||||||
|
],
|
||||||
sizeOptions: [
|
sizeOptions: [
|
||||||
{ name: this.$t("ID_ALL"), id: "all" },
|
{ name: this.$t("ID_ALL"), id: "all" },
|
||||||
{ name: "5", id: "5" },
|
{ name: "5", id: "5" },
|
||||||
@@ -89,137 +146,48 @@ export default {
|
|||||||
{ name: "15", id: "15" },
|
{ name: "15", id: "15" },
|
||||||
{ name: "20", id: "20" },
|
{ name: "20", id: "20" },
|
||||||
],
|
],
|
||||||
dataCasesByRange: [],
|
dataCasesByRisk: [],
|
||||||
width: 0,
|
width: 0,
|
||||||
series: [
|
series: [],
|
||||||
{
|
|
||||||
name: "SAMPLE A",
|
|
||||||
data: [
|
|
||||||
[16.4, 5.4],
|
|
||||||
[21.7, 2],
|
|
||||||
[25.4, 3],
|
|
||||||
[19, 2],
|
|
||||||
[10.9, 1],
|
|
||||||
[13.6, 3.2],
|
|
||||||
[10.9, 7.4],
|
|
||||||
[10.9, 0],
|
|
||||||
[10.9, 8.2],
|
|
||||||
[16.4, 0],
|
|
||||||
[16.4, 1.8],
|
|
||||||
[13.6, 0.3],
|
|
||||||
[13.6, 0],
|
|
||||||
[29.9, 0],
|
|
||||||
[27.1, 2.3],
|
|
||||||
[16.4, 0],
|
|
||||||
[13.6, 3.7],
|
|
||||||
[10.9, 5.2],
|
|
||||||
[16.4, 6.5],
|
|
||||||
[10.9, 0],
|
|
||||||
[24.5, 7.1],
|
|
||||||
[10.9, 0],
|
|
||||||
[8.1, 4.7],
|
|
||||||
[19, 0],
|
|
||||||
[21.7, 1.8],
|
|
||||||
[27.1, 0],
|
|
||||||
[24.5, 0],
|
|
||||||
[27.1, 0],
|
|
||||||
[29.9, 1.5],
|
|
||||||
[27.1, 0.8],
|
|
||||||
[22.1, 2],
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "SAMPLE B",
|
|
||||||
data: [
|
|
||||||
[36.4, 13.4],
|
|
||||||
[1.7, 11],
|
|
||||||
[5.4, 8],
|
|
||||||
[9, 17],
|
|
||||||
[1.9, 4],
|
|
||||||
[3.6, 12.2],
|
|
||||||
[1.9, 14.4],
|
|
||||||
[1.9, 9],
|
|
||||||
[1.9, 13.2],
|
|
||||||
[1.4, 7],
|
|
||||||
[6.4, 8.8],
|
|
||||||
[3.6, 4.3],
|
|
||||||
[1.6, 10],
|
|
||||||
[9.9, 2],
|
|
||||||
[7.1, 15],
|
|
||||||
[1.4, 0],
|
|
||||||
[3.6, 13.7],
|
|
||||||
[1.9, 15.2],
|
|
||||||
[6.4, 16.5],
|
|
||||||
[0.9, 10],
|
|
||||||
[4.5, 17.1],
|
|
||||||
[10.9, 10],
|
|
||||||
[0.1, 14.7],
|
|
||||||
[9, 10],
|
|
||||||
[12.7, 11.8],
|
|
||||||
[2.1, 10],
|
|
||||||
[2.5, 10],
|
|
||||||
[27.1, 10],
|
|
||||||
[2.9, 11.5],
|
|
||||||
[7.1, 10.8],
|
|
||||||
[2.1, 12],
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "SAMPLE C",
|
|
||||||
data: [
|
|
||||||
[21.7, 3],
|
|
||||||
[23.6, 3.5],
|
|
||||||
[24.6, 3],
|
|
||||||
[29.9, 3],
|
|
||||||
[21.7, 20],
|
|
||||||
[23, 2],
|
|
||||||
[10.9, 3],
|
|
||||||
[28, 4],
|
|
||||||
[27.1, 0.3],
|
|
||||||
[16.4, 4],
|
|
||||||
[13.6, 0],
|
|
||||||
[19, 5],
|
|
||||||
[22.4, 3],
|
|
||||||
[24.5, 3],
|
|
||||||
[32.6, 3],
|
|
||||||
[27.1, 4],
|
|
||||||
[29.6, 6],
|
|
||||||
[31.6, 8],
|
|
||||||
[21.6, 5],
|
|
||||||
[20.9, 4],
|
|
||||||
[22.4, 0],
|
|
||||||
[32.6, 10.3],
|
|
||||||
[29.7, 20.8],
|
|
||||||
[24.5, 0.8],
|
|
||||||
[21.4, 0],
|
|
||||||
[21.7, 6.9],
|
|
||||||
[28.6, 7.7],
|
|
||||||
[15.4, 0],
|
|
||||||
[18.1, 0],
|
|
||||||
[33.4, 0],
|
|
||||||
[16.4, 0],
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
options: {
|
options: {
|
||||||
chart: {
|
chart: {
|
||||||
height: 350,
|
height: 350,
|
||||||
type: "scatter",
|
type: "bubble",
|
||||||
zoom: {
|
zoom: {
|
||||||
enabled: true,
|
enabled: true,
|
||||||
type: "xy",
|
type: "xy",
|
||||||
},
|
},
|
||||||
|
id: "LevelThreeChart",
|
||||||
|
events: {
|
||||||
|
markerClick: function (event, chartContext, config) {
|
||||||
|
that.currentSelection = that.dataCasesByRisk[config.seriesIndex];
|
||||||
|
that.onClickCaseMarker(that.currentSelection);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
dataLabels: {
|
||||||
|
enabled: true,
|
||||||
|
formatter: function (val, opt) {
|
||||||
|
if (that.dataCasesByRisk.length > 0) {
|
||||||
|
return that.dataCasesByRisk[opt["seriesIndex"]]["number_case"];
|
||||||
|
}
|
||||||
|
return "";
|
||||||
|
},
|
||||||
|
offsetX: 0,
|
||||||
},
|
},
|
||||||
xaxis: {
|
xaxis: {
|
||||||
tickAmount: 10,
|
type: "datetime",
|
||||||
labels: {
|
|
||||||
formatter: function (val) {
|
|
||||||
return parseFloat(val).toFixed(1);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
yaxis: {
|
yaxis: {
|
||||||
tickAmount: 7,
|
tickAmount: 1,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
custom: function ({ series, seriesIndex, dataPointIndex, w }) {
|
||||||
|
return that.customTooltip(series, seriesIndex, dataPointIndex, w);
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
@@ -237,7 +205,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;
|
this.width = window.innerHeight * 0.95;
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* Change datepickers or radio button
|
* Change datepickers or radio button
|
||||||
@@ -245,16 +213,18 @@ export default {
|
|||||||
changeOption() {
|
changeOption() {
|
||||||
let that = this,
|
let that = this,
|
||||||
dt;
|
dt;
|
||||||
if (this.dateFrom && this.dateTo && this.period) {
|
if (this.dateFrom && this.dateTo) {
|
||||||
dt = {
|
dt = {
|
||||||
processId: this.data[1].id,
|
process: this.data[1].id,
|
||||||
caseList: this.data[0].id.toLowerCase(),
|
caseList: this.data[0].id.toLowerCase(),
|
||||||
dateFrom: moment(this.dateFrom).format("DD/MM/YYYY"),
|
dateFrom: moment(this.dateFrom).format("DD/MM/YYYY"),
|
||||||
dateTo: moment(this.dateTo).format("DD/MM/YYYY"),
|
dateTo: moment(this.dateTo).format("DD/MM/YYYY"),
|
||||||
groupBy: this.period,
|
riskStatus: this.riskType,
|
||||||
};
|
};
|
||||||
|
this.size.id != "all" ? (dt["topCases"] = this.size.id) : null;
|
||||||
|
this.dateNow = moment().format("DD/MM/YYYY h:mm:ss a");
|
||||||
Api.process
|
Api.process
|
||||||
.totalCasesByRange(dt)
|
.totalCasesByRisk(dt)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
that.formatDataRange(response.data);
|
that.formatDataRange(response.data);
|
||||||
})
|
})
|
||||||
@@ -267,42 +237,172 @@ export default {
|
|||||||
* Format response fromn API
|
* Format response fromn API
|
||||||
*/
|
*/
|
||||||
formatDataRange(data) {
|
formatDataRange(data) {
|
||||||
let labels = [],
|
let that = this,
|
||||||
serie = [];
|
serie = [];
|
||||||
|
this.dataCasesByRisk = data;
|
||||||
this.dataCasesByRange = data;
|
|
||||||
_.each(data, (el) => {
|
_.each(data, (el) => {
|
||||||
serie.push(el["TOTAL"]);
|
//Format the response to risk type Overdue/At risk/ On time
|
||||||
labels.push(el["dateGroup"]);
|
switch (that.riskType) {
|
||||||
|
case "OVERDUE":
|
||||||
|
serie.push({
|
||||||
|
name: el["number_case"].toString(),
|
||||||
|
data: [
|
||||||
|
[moment(el["due_date"]).toDate().getTime(), el["days"], 20],
|
||||||
|
],
|
||||||
});
|
});
|
||||||
this.$refs["LevelTwoChart"].updateOptions({
|
break;
|
||||||
labels: labels,
|
case "AT_RISK":
|
||||||
title: {
|
serie.push({
|
||||||
text: this.data[0]["PRO_TITLE"],
|
name: el["number_case"].toString(),
|
||||||
align: "left",
|
data: [
|
||||||
},
|
[moment(el["delegated"]).toDate().getTime(), -el["days"], 20],
|
||||||
|
],
|
||||||
});
|
});
|
||||||
this.$apexcharts.exec("LevelTwoChart", "updateSeries", [
|
break;
|
||||||
{
|
case "ON_TIME":
|
||||||
name: this.data[0]["PRO_TITLE"],
|
serie.push({
|
||||||
data: serie,
|
name: el["number_case"].toString(),
|
||||||
},
|
data: [
|
||||||
]);
|
[moment(el["delegated"]).toDate().getTime(), -el["days"], 20],
|
||||||
},
|
],
|
||||||
generateDayWiseTimeSeries(baseval, count, yrange) {
|
});
|
||||||
var i = 0;
|
break;
|
||||||
var series = [];
|
|
||||||
while (i < count) {
|
|
||||||
var y =
|
|
||||||
Math.floor(Math.random() * (yrange.max - yrange.min + 1)) +
|
|
||||||
yrange.min;
|
|
||||||
|
|
||||||
series.push([baseval, y]);
|
|
||||||
baseval += 86400000;
|
|
||||||
i++;
|
|
||||||
}
|
}
|
||||||
console.log(series);
|
});
|
||||||
return series;
|
|
||||||
|
this.updateApexchartAxis();
|
||||||
|
if (this.data[0].id.toLowerCase() == "draft") {
|
||||||
|
this.series = []; // Draft is empty
|
||||||
|
} else {
|
||||||
|
this.series = serie;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
updateApexchartAxis() {
|
||||||
|
switch (this.riskType) {
|
||||||
|
case "OVERDUE":
|
||||||
|
this.$refs["LevelThreeChart"].updateOptions({
|
||||||
|
yaxis: {
|
||||||
|
min: 0,
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
text: "Overdue days",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "AT_RISK":
|
||||||
|
this.$refs["LevelThreeChart"].updateOptions({
|
||||||
|
yaxis: {
|
||||||
|
max: 0,
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
text: "Days before being Overdue",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "ON_TIME":
|
||||||
|
this.$refs["LevelThreeChart"].updateOptions({
|
||||||
|
yaxis: {
|
||||||
|
max: 0,
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
text: "Days before being At-Risk",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
customTooltip(series, seriesIndex, dataPointIndex, w) {
|
||||||
|
let obj = this.dataCasesByRisk[seriesIndex];
|
||||||
|
return `<div class="apexcharts-theme-light">
|
||||||
|
<div class="apexcharts-tooltip-title" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
|
||||||
|
${"Number Case"} : ${obj["number_case"]}
|
||||||
|
</div>
|
||||||
|
<div class="apexcharts-tooltip-series-group apexcharts-active" style="order: 1; display: flex;">
|
||||||
|
<div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
|
||||||
|
<div class="apexcharts-tooltip-y-group">
|
||||||
|
<span class="" style="background-color: #28a745;"></span>
|
||||||
|
<span class="apexcharts-tooltip-text-y-label">Delegated</span> : <span class="apexcharts-tooltip-text-y-value">${
|
||||||
|
obj["delegated"]
|
||||||
|
}</span>
|
||||||
|
</div>
|
||||||
|
<div class="apexcharts-tooltip-y-group">
|
||||||
|
<span class="" style="background-color: #28a745;"></span>
|
||||||
|
<span class="apexcharts-tooltip-text-y-label">At Risk</span> : <span class="apexcharts-tooltip-text-y-value">${
|
||||||
|
obj["at_risk"]
|
||||||
|
}</span>
|
||||||
|
</div>
|
||||||
|
<div class="apexcharts-tooltip-y-group">
|
||||||
|
<span class="" style="background-color: #28a745;"></span>
|
||||||
|
<span class="apexcharts-tooltip-text-y-label">Due Date</span> : <span class="apexcharts-tooltip-text-y-value">${
|
||||||
|
obj["due_date"]
|
||||||
|
}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* Open selected cases in the inbox
|
||||||
|
*
|
||||||
|
* @param {object} item
|
||||||
|
*/
|
||||||
|
openCase(item) {
|
||||||
|
this.$parent.$parent.$emit("onUpdateDataCase", {
|
||||||
|
APP_UID: item.APP_UID,
|
||||||
|
DEL_INDEX: item.DEL_INDEX,
|
||||||
|
PRO_UID: item.PRO_UID,
|
||||||
|
TAS_UID: item.TAS_UID,
|
||||||
|
ACTION: "todo",
|
||||||
|
});
|
||||||
|
this.$parent.$parent.$emit("onUpdatePage", "XCase");
|
||||||
|
},
|
||||||
|
onClickCaseMarker(selection) {
|
||||||
|
let process = this.data[1].id,
|
||||||
|
caseList = this.data[0].id.toLowerCase();
|
||||||
|
switch (caseList) {
|
||||||
|
case "inbox":
|
||||||
|
case "draft":
|
||||||
|
this.openCase({
|
||||||
|
APP_UID: selection["app_uid"],
|
||||||
|
DEL_INDEX: selection["del_index"],
|
||||||
|
PRO_UID: process,
|
||||||
|
TAS_UID: selection["tas_uid"],
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "paused":
|
||||||
|
this.showModalUnpauseCase({
|
||||||
|
APP_UID: selection["app_uid"],
|
||||||
|
DEL_INDEX: selection["del_index"],
|
||||||
|
PRO_UID: process,
|
||||||
|
TAS_UID: selection["tas_uid"],
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "unassigned":
|
||||||
|
this.showModalClaimCase({
|
||||||
|
APP_UID: selection["app_uid"],
|
||||||
|
DEL_INDEX: selection["del_index"],
|
||||||
|
PRO_UID: process,
|
||||||
|
TAS_UID: selection["tas_uid"],
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
showModalUnpauseCase(item) {
|
||||||
|
this.$refs["modal-unpause-case"].data = item;
|
||||||
|
this.$refs["modal-unpause-case"].show();
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* Claim case
|
||||||
|
* @param {object} item
|
||||||
|
*/
|
||||||
|
showModalClaimCase(item) {
|
||||||
|
let that = this;
|
||||||
|
api.cases.open(_.extend({ ACTION: "unassigned" }, item)).then(() => {
|
||||||
|
api.cases.cases_open(_.extend({ ACTION: "todo" }, item)).then(() => {
|
||||||
|
that.$refs["modal-claim-case"].data = item;
|
||||||
|
that.$refs["modal-claim-case"].show();
|
||||||
|
});
|
||||||
|
});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
@@ -323,5 +423,57 @@ export default {
|
|||||||
.vp-padding-l20 {
|
.vp-padding-l20 {
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.vp-width-p100 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-text-align-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-btn-success {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #368b48;
|
||||||
|
border-color: #368b48;
|
||||||
|
}
|
||||||
|
.vp-btn-success:hover {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #255a30;
|
||||||
|
border-color: #368b48;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-btn-warning {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #c99e11;
|
||||||
|
border-color: #a1831d;
|
||||||
|
}
|
||||||
|
.vp-btn-warning:hover {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #886c0e;
|
||||||
|
border-color: #a1831d;
|
||||||
|
}
|
||||||
|
.vp-btn-danger {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #b63b32;
|
||||||
|
border-color: #b63b32;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-btn-danger:hover {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #832923;
|
||||||
|
border-color: #b63b32;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-form-label {
|
||||||
|
display: inline-block;
|
||||||
|
font-family: Helvetica, Arial, sans-serif;
|
||||||
|
text-anchor: start;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 900;
|
||||||
|
fill: rgb(15 17 18);
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
color: #7d7f93;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
|
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
|
||||||
@@ -1,11 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<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 Status per Process</h6>
|
<h6 class="v-search-title">Number of Tasks Status per Process by task status</h6>
|
||||||
<div>
|
<div>
|
||||||
<BreadCrumb
|
<BreadCrumb
|
||||||
:options="breadCrumbs.data"
|
:options="breadCrumbs.data"
|
||||||
:settings="breadCrumbs.settings"
|
:settings="settingsBreadcrumbs"
|
||||||
/>
|
/>
|
||||||
<div class="vp-width-p30 vp-inline-block">
|
<div class="vp-width-p30 vp-inline-block">
|
||||||
<b-form-datepicker
|
<b-form-datepicker
|
||||||
@@ -83,6 +83,13 @@ export default {
|
|||||||
{ text: this.$t("ID_MONTH"), value: "month" },
|
{ text: this.$t("ID_MONTH"), value: "month" },
|
||||||
{ text: this.$t("ID_YEAR"), value: "year" },
|
{ text: this.$t("ID_YEAR"), value: "year" },
|
||||||
],
|
],
|
||||||
|
settingsBreadcrumbs: [
|
||||||
|
{
|
||||||
|
class: "fas fa-info-circle",
|
||||||
|
tooltip: this.$t("ID_TASK_RISK_LEVEL2_INFO"),
|
||||||
|
onClick() {},
|
||||||
|
},
|
||||||
|
],
|
||||||
dataCasesByRange: [],
|
dataCasesByRange: [],
|
||||||
width: 0,
|
width: 0,
|
||||||
options: {
|
options: {
|
||||||
|
|||||||
@@ -2,10 +2,7 @@
|
|||||||
<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
|
<BreadCrumb :options="breadCrumbs.data" :settings="settingsBreadcrumbs" />
|
||||||
:options="breadCrumbs.data"
|
|
||||||
:settings="breadCrumbs.settings"
|
|
||||||
/>
|
|
||||||
<apexchart
|
<apexchart
|
||||||
v-show="typeView === 'donut'"
|
v-show="typeView === 'donut'"
|
||||||
ref="apexchart1"
|
ref="apexchart1"
|
||||||
@@ -64,6 +61,13 @@ export default {
|
|||||||
data: [],
|
data: [],
|
||||||
currentSelection: null,
|
currentSelection: null,
|
||||||
seriesDonut: [],
|
seriesDonut: [],
|
||||||
|
settingsBreadcrumbs: [
|
||||||
|
{
|
||||||
|
class: "fas fa-info-circle",
|
||||||
|
tooltip: this.$t("ID_TASK_RISK_LEVEL0_INFO"),
|
||||||
|
onClick() {},
|
||||||
|
},
|
||||||
|
],
|
||||||
optionsDonut: {
|
optionsDonut: {
|
||||||
labels: [
|
labels: [
|
||||||
this.$i18n.t("ID_INBOX"),
|
this.$i18n.t("ID_INBOX"),
|
||||||
|
|||||||
@@ -14,6 +14,7 @@
|
|||||||
:breadCrumbs="dataBreadCrumbs()"
|
:breadCrumbs="dataBreadCrumbs()"
|
||||||
/>
|
/>
|
||||||
<vue-chart-lv-two
|
<vue-chart-lv-two
|
||||||
|
:key="key2"
|
||||||
v-show="level === 2"
|
v-show="level === 2"
|
||||||
:data="data"
|
:data="data"
|
||||||
@onChangeLevel="onChangeLevel"
|
@onChangeLevel="onChangeLevel"
|
||||||
@@ -21,6 +22,7 @@
|
|||||||
:breadCrumbs="dataBreadCrumbs()"
|
:breadCrumbs="dataBreadCrumbs()"
|
||||||
/>
|
/>
|
||||||
<vue-chart-lv-three
|
<vue-chart-lv-three
|
||||||
|
:key="key3"
|
||||||
v-show="level === 3"
|
v-show="level === 3"
|
||||||
:data="data"
|
:data="data"
|
||||||
@onChangeLevel="onChangeLevel"
|
@onChangeLevel="onChangeLevel"
|
||||||
@@ -50,6 +52,8 @@ export default {
|
|||||||
return {
|
return {
|
||||||
level: 0,
|
level: 0,
|
||||||
key1: 1,
|
key1: 1,
|
||||||
|
key2: 1,
|
||||||
|
key3: 1,
|
||||||
data: [],
|
data: [],
|
||||||
settingsBreadCrumbs: [
|
settingsBreadCrumbs: [
|
||||||
{
|
{
|
||||||
@@ -83,8 +87,10 @@ export default {
|
|||||||
this.key1++;
|
this.key1++;
|
||||||
break;
|
break;
|
||||||
case 2:
|
case 2:
|
||||||
|
this.key2++;
|
||||||
break;
|
break;
|
||||||
case 3:
|
case 3:
|
||||||
|
this.key3++;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -137,7 +143,7 @@ export default {
|
|||||||
};
|
};
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -30,6 +30,8 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import api from "./../../api/index";
|
import api from "./../../api/index";
|
||||||
|
import eventBus from "../EventBus/eventBus";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "ModalClaimCase",
|
name: "ModalClaimCase",
|
||||||
components: {},
|
components: {},
|
||||||
@@ -57,14 +59,15 @@ export default {
|
|||||||
api.cases.claim(this.data).then((response) => {
|
api.cases.claim(this.data).then((response) => {
|
||||||
if (response.status === 200) {
|
if (response.status === 200) {
|
||||||
that.$refs["modal-claim-case"].hide();
|
that.$refs["modal-claim-case"].hide();
|
||||||
that.$parent.$emit("onUpdateDataCase", {
|
//TODO Trigger onUpdateDataCase
|
||||||
|
eventBus.$emit("home-update-datacase", {
|
||||||
APP_UID: this.data.APP_UID,
|
APP_UID: this.data.APP_UID,
|
||||||
DEL_INDEX: this.data.DEL_INDEX,
|
DEL_INDEX: this.data.DEL_INDEX,
|
||||||
PRO_UID: this.data.PRO_UID,
|
PRO_UID: this.data.PRO_UID,
|
||||||
TAS_UID: this.data.TAS_UID,
|
TAS_UID: this.data.TAS_UID,
|
||||||
ACTION: "todo",
|
ACTION: "todo",
|
||||||
});
|
});
|
||||||
that.$parent.$emit("onUpdatePage", "XCase");
|
eventBus.$emit("home-update-page", "XCase");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -55,8 +55,10 @@ export default {
|
|||||||
api.cases.unpause(this.data).then((response) => {
|
api.cases.unpause(this.data).then((response) => {
|
||||||
if (response.statusText == "OK") {
|
if (response.statusText == "OK") {
|
||||||
that.$refs["modal-unpause-case"].hide();
|
that.$refs["modal-unpause-case"].hide();
|
||||||
|
if (that.$parent.$refs["vueTable"]) { // TODO this component should be return a event to parent to code in the parent
|
||||||
that.$parent.$refs["vueTable"].getData();
|
that.$parent.$refs["vueTable"].getData();
|
||||||
}
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -53054,3 +53054,28 @@ msgstr "Send email to participants"
|
|||||||
#: LABEL/ID_TRYING_CANCEL
|
#: LABEL/ID_TRYING_CANCEL
|
||||||
msgid "You are tying to cancel the current case. Please be aware this action cannot be undone"
|
msgid "You are tying to cancel the current case. Please be aware this action cannot be undone"
|
||||||
msgstr "You are tying to cancel the current case. Please be aware this action cannot be undone"
|
msgstr "You are tying to cancel the current case. Please be aware this action cannot be undone"
|
||||||
|
|
||||||
|
|
||||||
|
# TRANSLATION
|
||||||
|
# LABEL/ID_TASK_RISK_LEVEL0_INFO
|
||||||
|
#: LABEL/ID_TASK_RISK_LEVEL0_INFO
|
||||||
|
msgid "Select a task status option to drill down by status for all processes. Then view can be changed as pie or bar chart."
|
||||||
|
msgstr "Select a task status option to drill down by status for all processes. Then view can be changed as pie or bar chart."
|
||||||
|
|
||||||
|
# TRANSLATION
|
||||||
|
# LABEL/ID_TASK_RISK_LEVEL1_INFO
|
||||||
|
#: LABEL/ID_TASK_RISK_LEVEL1_INFO
|
||||||
|
msgid "Select the 'Drill' option of a Process in the Chart, to Drill Down By a Range of Dates listing the number of tasks By Task Status of the Process, or use the 'Data' option to open the Task List displaying all Tasks of the Process and Status"
|
||||||
|
msgstr "Select the 'Drill' option of a Process in the Chart, to Drill Down By a Range of Dates listing the number of tasks By Task Status of the Process, or use the 'Data' option to open the Task List displaying all Tasks of the Process and Status"
|
||||||
|
|
||||||
|
# TRANSLATION
|
||||||
|
# LABEL/ID_TASK_RISK_LEVEL2_INFO
|
||||||
|
#: LABEL/ID_TASK_RISK_LEVEL2_INFO
|
||||||
|
msgid "Select the Drill option to have a Risk Matrix of the tasks or select the Data option to open the Task Folder listing all Tasks of the Process status by a range of date"
|
||||||
|
msgstr "Select the Drill option to have a Risk Matrix of the tasks or select the Data option to open the Task Folder listing all Tasks of the Process status by a range of date"
|
||||||
|
|
||||||
|
# TRANSLATION
|
||||||
|
# LABEL/ID_TASK_RISK_LEVEL3_INFO
|
||||||
|
#: LABEL/ID_TASK_RISK_LEVEL3_INFO
|
||||||
|
msgid "By selecting the task will be open automatically if the task is Inbox or Draft"
|
||||||
|
msgstr "By selecting the task will be open automatically if the task is Inbox or Draft"
|
||||||
@@ -61316,6 +61316,10 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
|
|||||||
( 'LABEL','ID_TAS_EDIT','en','Tasks (Edit mode)','2014-01-15') ,
|
( 'LABEL','ID_TAS_EDIT','en','Tasks (Edit mode)','2014-01-15') ,
|
||||||
( 'LABEL','ID_TAS_UID_PARAMETER_IS_EMPTY','en','The TAS_UID parameter is empty.','2016-04-08') ,
|
( 'LABEL','ID_TAS_UID_PARAMETER_IS_EMPTY','en','The TAS_UID parameter is empty.','2016-04-08') ,
|
||||||
( 'LABEL','ID_TAS_VIEW','en','Tasks (View mode)','2014-01-15') ,
|
( 'LABEL','ID_TAS_VIEW','en','Tasks (View mode)','2014-01-15') ,
|
||||||
|
( 'LABEL','ID_TASK_RISK_LEVEL0_INFO','en','Select a task status option to drill down by status for all processes. Then view can be changed as pie or bar chart.','2020-08-26') ,
|
||||||
|
( 'LABEL','ID_TASK_RISK_LEVEL1_INFO','en','Select the "Drill" option of a Process in the Chart, to Drill Down By a Range of Dates listing the number of tasks By Task Status of the Process, or use the "Data" option to open the Task List displaying all Tasks of the Process and Status','2020-08-26'),
|
||||||
|
( 'LABEL','ID_TASK_RISK_LEVEL2_INFO','en','Select the Drill option to have a Risk Matrix of the tasks or select the Data option to open the Task Folder listing all Tasks of the Process status by a range of date','2020-08-26') ,
|
||||||
|
( 'LABEL','ID_TASK_RISK_LEVEL3_INFO','en','By selecting the task will be open automatically if the task is Inbox or Draft','2020-08-26') ,
|
||||||
( 'LABEL','ID_TEMPLATES','en','Templates','2014-01-15') ,
|
( 'LABEL','ID_TEMPLATES','en','Templates','2014-01-15') ,
|
||||||
( 'LABEL','ID_TEMPLATE_FILE_NOT_EXIST','en','Template file ''{FILE_TEMPLATE}'' does not exist.','2014-01-15') ,
|
( 'LABEL','ID_TEMPLATE_FILE_NOT_EXIST','en','Template file ''{FILE_TEMPLATE}'' does not exist.','2014-01-15') ,
|
||||||
( 'LABEL','ID_TEMPLATE_PARAMETER_EMPTY','en','The TEMPLATE parameter is empty.','2016-04-08') ,
|
( 'LABEL','ID_TEMPLATE_PARAMETER_EMPTY','en','The TEMPLATE parameter is empty.','2016-04-08') ,
|
||||||
|
|||||||
Reference in New Issue
Block a user