imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Conformance: Have activity Log Results chart, Effect done.

Browse Source
This commit is contained in:
chiayin
2023-07-20 15:45:22 +08:00
parent 97ac9535f9
commit dc4ede1d62
7 changed files with 496 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

503
src/components/Discover/Conformance/ConformanceResults.vue
View File

@@ -1,39 +1,45 @@
<template>
<section class="p-4 mr-0.5 space-y-2 h-full w-[calc(100vw_-_316px)] overflow-y-auto scrollbar float-right">
<!-- cover plate -->
<div v-show="isCoverPlate" class="w-[calc(100vw_-_300px)] h-screen-main fixed bottom-0 right-0 bg-gradient-to-tr from-neutral-500/50 to-neutral-900/50 z-[1]">
</div>
<!-- title -->
<p class="h2 text-base">Conformance Checking Results<span class="material-symbols-outlined text-base align-middle ml-2" v-tooltip.bottom="tooltip.results" type="text">info</span></p>
<!-- total group -->
<ul class=" text-neutral-10 text-sm flex gap-2 py-2">
<li class=" bg-cfm-primary rounded-full px-4 py-1 space-x-2">
<span class="material-symbols-outlined text-base align-middle mr-2">check_circle</span>Conforming<span>3,890</span>
<span class="material-symbols-outlined text-base align-middle mr-2">check_circle</span>Conforming<span>{{ data.counts.conforming }}</span>
</li>
<li class=" bg-cfm-secondary rounded-full px-4 py-1 space-x-2">
<span class="material-symbols-outlined text-base align-middle mr-2">cancel</span>Not Conforming<span>27,230</span>
<span class="material-symbols-outlined text-base align-middle mr-2">cancel</span>Not Conforming<span>{{ data.counts.not_conforming }}</span>
</li>
<li class=" bg-neutral-700 rounded-full px-4 py-1 space-x-2">
<iconNA class="inline-block mr-1"></iconNA>Not Applicable<span>7,780</span>
<li class=" bg-neutral-700 rounded-full px-4 py-1 space-x-2" v-show="data.counts.not_applicable != 0">
<iconNA class="inline-block mr-1"></iconNA>Not Applicable<span>{{ data.counts.not_applicable }}</span>
</li>
</ul>
<!-- chart -->
<div class="flex gap-4 w-full">
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 basis-1/3">
<div class="flex gap-4">
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-1/2">
<p class="h2 pl-2 flex justify-between items-center">
<span>Conformance Rate<span class="material-symbols-outlined text-sm align-middle ml-2" v-tooltip.bottom="tooltip.rate">info</span></span>
<span class="text-2xl">10%</span>
</p>
<span>Conformance Rate<span class="material-symbols-outlined text-sm align-middle ml-2" v-tooltip.bottom="tooltip.rate">info</span></span>
<span class="text-2xl">{{ data.charts.rate.rate }}%</span>
</p>
<Chart type="line" :data="rateChartData" :options="rateChartOptions" class=""/>
</div>
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 basis-1/3">
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-1/2">
<p class="h2 pl-2 flex justify-between items-center">
<span>Cases<span class="material-symbols-outlined text-sm align-middle ml-2">info</span></span>
<span class="text-2xl"><span class="text-cfm-primary">3.89K</span>/38.9K</span>
</p>
<span>Cases<span class="material-symbols-outlined text-sm align-middle ml-2">info</span></span>
<span class="text-2xl"><span class="text-cfm-primary">{{ data.charts.cases.conforming }}</span>&nbsp/&nbsp{{ data.charts.cases.total }}</span>
</p>
<Chart type="bar" :data="casesChartData" :options="casesChartOptions" class=""/>
</div>
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 basis-1/3">
<!-- Fitness 暫時不做 basis-1/3 → basis-1/2 -->
<!-- <div class="border rounded border-neutral-300 p-2 bg-neutral-10 basis-1/3">
<p class="h2 pl-2 flex justify-between items-center">
<span>Fitness<span class="material-symbols-outlined text-sm align-middle ml-2">info</span></span>
<span class="text-2xl">13.5</span>
</p>
</div>
<span>Fitness<span class="material-symbols-outlined text-sm align-middle ml-2">info</span></span>
<span class="text-2xl">{{ data.charts.fitness }}</span>
</p>
</div> -->
</div>
<!-- effect -->
<section>
@@ -41,34 +47,56 @@
<div class="flex gap-4 w-full">
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 basis-1/2">
<p class="h2 pl-2 mb-2">Throughput Time</p>
<p class="pl-2 space-x-2">
<span class="text-cfm-primary text-2xl font-medium">48</span>
<span>vs</span>
<span class="text-cfm-secondary text-2xl font-medium">56</span>
<span>days,</span>
<span class="text-2xl font-medium">-8</span>
<span>days of difference.</span>
</p>
<div v-if="data.effect.time !== null">
<p class="pl-2 space-x-2" v-if="data.effect.time.not_conforming === null">
<span>All cases are conforming to set rules. Average throughput time is</span>
<span class="text-cfm-primary text-2xl font-medium">{{ data.effect.time.conforming }}</span>
<span>days.</span>
</p>
<p class="pl-2 space-x-2" v-else-if="data.effect.time.conforming === null">
<span>None of the cases is conforming to set rules. Average throughput time is</span>
<span class="text-cfm-secondary text-2xl font-medium">{{ data.effect.time.not_conforming }}</span>
<span>days.</span>
</p>
<p class="pl-2 space-x-2 max-w-full" v-else>
<span class="text-cfm-primary text-2xl font-medium">{{ data.effect.time.conforming }}</span>
<span>vs</span>
<span class="text-cfm-secondary text-2xl font-medium">{{ data.effect.time.not_conforming }}</span>
<span>days,</span>
<span class="text-2xl font-medium">{{ data.effect.time.difference }}</span>
<span>days of difference.</span>
</p>
</div>
</div>
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 basis-1/2">
<p class="h2 pl-2 mb-2">Activities per Case</p>
<p class="pl-2 space-x-2">
<span class="text-cfm-primary text-2xl font-medium">7.0</span>
<span>vs</span>
<span class="text-cfm-secondary text-2xl font-medium">3.9</span>
<span>activities,</span>
<span class="text-2xl font-medium">3.1</span>
<span>activities of difference.</span>
</p>
<div v-if="data.effect.tasks !== null">
<p class="pl-2 space-x-2" v-if="data.effect.tasks.not_conforming === null">
<span>All cases are conforming to set rules. Average activities in per cases is</span>
<span class="text-cfm-primary text-2xl font-medium">{{ data.effect.tasks.conforming }}</span> .
</p>
<p class="pl-2 space-x-2" v-else-if="data.effect.tasks.conforming === null">
<span>None of the cases is conforming to set rules. Average activities in per cases is</span>
<span class="text-cfm-secondary text-2xl font-medium">{{ data.effect.tasks.not_conforming }}</span> .
</p>
<p class="pl-2 space-x-2 max-w-full" v-else>
<span class="text-cfm-primary text-2xl font-medium">{{ data.effect.tasks.conforming }}</span>
<span>vs</span>
<span class="text-cfm-secondary text-2xl font-medium">{{ data.effect.tasks.not_conforming }}</span>
<span>activities,</span>
<span class="text-2xl font-medium">{{ data.effect.tasks.difference }}</span>
<span>activities of difference.</span>
</p>
</div>
</div>
</div>
</section>
<!-- Issues group -->
<section>
<p class="h2 text-base">Non-conformance Issues</p>
<div class="flex gap-4 w-full">
<div class="flex gap-4 w-full" v-if="data.issues !== null">
<!-- Issues chart -->
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-full">
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-full" v-if="null">
<p class="h2 pl-2 flex justify-between items-center">
<span>Time Trend<span class="material-symbols-outlined text-sm align-middle ml-2">info</span></span>
<span class="text-2xl"><span class="text-cfm-secondary">3.89K</span>/38.9K</span>
@@ -79,106 +107,7 @@
<p class="h2 pl-2 mb-2">Issue List</p>
<table class="text-sm min-w-full table-fixed">
<tbody>
<tr v-for="(trace, key) in traceList" :key="key">
<td class="p-2 pl-6 truncate max-w-0 w-1/3">
<span class="material-symbols-outlined disc text-sm align-middle mr-1">fiber_manual_record</span>{{ trace.issue }}
</td>
<td class="p-2 min-w-[96px] w-2/5">
<div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
<div class="h-full bg-primary" :style="trace.value"></div>
</div>
</td>
<td class="p-2 text-right truncate">{{ trace.count }}</td>
<td class="p-2 text-center">{{ trace.ratio }}%</td>
<td class="p-2 text-center">
<div class="btn btn-sm btn-c-primary cursor-pointer" @click="issusModal = true">More</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- title -->
<p class="h2 text-base">Conformance Checking Results<span class="material-symbols-outlined text-base align-middle ml-2" v-tooltip.bottom="tooltip.results" type="text">info</span></p>
<!-- total group -->
<ul class=" text-neutral-10 text-sm flex gap-2 py-2">
<li class=" bg-cfm-primary rounded-full px-4 py-1 space-x-2">
<span class="material-symbols-outlined text-base align-middle mr-2">check_circle</span>Conformance<span>3,890</span>
</li>
<li class=" bg-cfm-secondary rounded-full px-4 py-1 space-x-2">
<span class="material-symbols-outlined text-base align-middle mr-2">cancel</span>Non-Conformance<span>27,230</span>
</li>
<li class=" bg-neutral-700 rounded-full px-4 py-1 space-x-2">
<iconNA class="inline-block mr-1"></iconNA>Not Applicable<span>7,780</span>
</li>
</ul>
<!-- chart -->
<div class="flex gap-4 w-full">
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 basis-1/3">
<p class="h2 pl-2 flex justify-between items-center">
<span>Conformance Rate<span class="material-symbols-outlined text-sm align-middle ml-2" v-tooltip.bottom="tooltip.rate">info</span></span>
<span class="text-2xl">10%</span>
</p>
</div>
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 basis-1/3">
<p class="h2 pl-2 flex justify-between items-center">
<span>Cases<span class="material-symbols-outlined text-sm align-middle ml-2">info</span></span>
<span class="text-2xl"><span class="text-cfm-primary">3.89K</span>/38.9K</span>
</p>
</div>
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 basis-1/3">
<p class="h2 pl-2 flex justify-between items-center">
<span>Fitness<span class="material-symbols-outlined text-sm align-middle ml-2">info</span></span>
<span class="text-2xl">13.5</span>
</p>
</div>
</div>
<!-- effect -->
<section>
<p class="h2 text-base">Effect</p>
<div class="flex gap-4 w-full">
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 basis-1/2">
<p class="h2 pl-2 mb-2">Throughput Time</p>
<p class="pl-2 space-x-2">
<span class="text-cfm-primary text-2xl font-medium">48</span>
<span>vs</span>
<span class="text-cfm-secondary text-2xl font-medium">56</span>
<span>days,</span>
<span class="text-2xl font-medium">-8</span>
<span>days of difference.</span>
</p>
</div>
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 basis-1/2">
<p class="h2 pl-2 mb-2">Activities per Case</p>
<p class="pl-2 space-x-2">
<span class="text-cfm-primary text-2xl font-medium">7.0</span>
<span>vs</span>
<span class="text-cfm-secondary text-2xl font-medium">3.9</span>
<span>activities,</span>
<span class="text-2xl font-medium">3.1</span>
<span>activities of difference.</span>
</p>
</div>
</div>
</section>
<!-- Issues group -->
<section>
<p class="h2 text-base">Non-conformance Issues</p>
<div class="flex gap-4 w-full">
<!-- Issues chart -->
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-full">
<p class="h2 pl-2 flex justify-between items-center">
<span>Time Trend<span class="material-symbols-outlined text-sm align-middle ml-2">info</span></span>
<span class="text-2xl"><span class="text-cfm-secondary">3.89K</span>/38.9K</span>
</p>
</div>
<!-- Issues list -->
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-full">
<p class="h2 pl-2 mb-2">Issue List</p>
<table class="text-sm min-w-full table-fixed">
<tbody>
<tr v-for="(trace, key) in traceList" :key="key">
<tr v-for="(trace, key) in data.issues" :key="key">
<td class="p-2 pl-6 truncate max-w-0 w-1/3">
<span class="material-symbols-outlined disc text-sm align-middle mr-1">fiber_manual_record</span>{{ trace.issue }}
</td>
@@ -204,34 +133,52 @@
<script>
import iconNA from '@/components/icons/IconNA.vue';
import MoreModal from './MoreModal.vue';
import { storeToRefs } from 'pinia';
import ConformanceStore from '@/stores/conformance.js';
import getNumberLabel from '@/module/numberLabel.js';
import { setLineChartData, setBarChartData } from '@/module/setChartData.js';
import abbreviateNumber from '@/module/abbreviateNumber.js';
import getMoment from 'moment';
export default {
setup() {
const conformanceStore = ConformanceStore();
const { conformanceTempReportData } = storeToRefs(conformanceStore);
return { conformanceTempReportData, conformanceStore }
},
data() {
return {
data: {
counts: {
conforming: '--',
not_conforming: '--',
not_applicable: 0,
},
charts: {
rate: {
rate: '--',
chart: {},
},
cases: {
conforming: '--',
total: '--',
chart: {},
},
fitness: '--',
},
effect: {
time: null,
tasks: null,
},
issues: null
},
isCoverPlate: false,
issusModal: false,
traceList: [
{
id: 1,
issue: 'Skip',
value: this.progressWidth(80),
count: '1,234,567,890',
ratio: 80,
},
{
id: 2,
issue: 'Order Switch',
value: this.progressWidth(30),
count: '567,890',
ratio: 30,
},
{
id: 3,
issue: 'Activity不包含到院、出院、出院、出院',
value: this.progressWidth(70),
count: '4,567,890',
ratio: 70,
}
],
rateChartData: null,
rateChartOptions: null,
casesChartData: null,
casesChartOptions: null,
tooltip: {
results: {
value: 'This page will perform a conformance check based on the filtering results of the map.',
@@ -246,6 +193,14 @@ export default {
iconNA,
MoreModal,
},
watch: {
conformanceTempReportData: {
handler: function(newValue) {
// this.data = newValue;
this.data = this.setConformanceTempReportData(newValue);
},
}
},
methods: {
/**
* set progress bar width
@@ -255,7 +210,235 @@ export default {
progressWidth(value){
return `width:${value}%;`
},
}
/**
* Number to percentage
* @param {number} val
* @returns {string} 轉換完成的百分比字串
*/
getPercentLabel(val){
return (val * 100 === 100) ? (val * 100) : (val * 100).toFixed(1);
},
/**
* Convert seconds to days
* @param {number} sec
* @returns {number} day
*/
convertSecToDay(sec) {
return (sec / 86400)
},
/**
* set conformance report data
* @param {object} data new watch's value
*/
setConformanceTempReportData(data){
let sum = Object.values(data.counts).reduce((acc, cur) => acc + cur, 0);
let rate = ((data.counts.conforming / sum) * 100).toFixed(1);
let isNullTime = value => value === null ? null : getNumberLabel((value / 86400).toFixed(1));
let isNullCase = value => value === null ? null : getNumberLabel(value.toFixed(1));
let result = {
counts: {
conforming: getNumberLabel(data.counts.conforming),
not_conforming: getNumberLabel(data.counts.not_conforming),
not_applicable: getNumberLabel(data.counts.not_applicable),
},
charts: {
rate: {
rate: rate,
data: setLineChartData(data.charts.rate.data, data.charts.rate.x_axis.max, data.charts.rate.x_axis.min),
},
cases: {
conforming: getNumberLabel(data.counts.conforming),
total: getNumberLabel(sum),
data: {
conforming: setBarChartData(data.charts.cases.data.filter(item => item.label === 'conforming').map(item => item.data)[0]),
not_conforming: setBarChartData(data.charts.cases.data.filter(item => item.label === 'not-conforming').map(item => item.data)[0]),
}
},
fitness: getNumberLabel(data.charts.fitness),
},
effect: {
time: {
conforming: isNullTime(data.effect.time.conforming),
not_conforming: isNullTime(data.effect.time.not_conforming),
difference: isNullTime(data.effect.time.conforming - data.effect.time.not_conforming),
},
tasks: {
conforming: isNullCase(data.effect.tasks.conforming),
not_conforming: isNullCase(data.effect.tasks.not_conforming),
difference: isNullCase(data.effect.tasks.conforming - data.effect.tasks.not_conforming),
},
},
issues: data.issues.map(item => {
return {
no: item.no,
issue: item.description,
value: `width:${this.getPercentLabel(item.count / sum)}%;`,
count: item.count,
ratio: this.getPercentLabel(item.count / sum),
}
})
};
this.setRateChartData(result.charts.rate.data); // 建立圖表 Rate Chart.js
this.setCasesChartData(result.charts.cases.data.conforming, result.charts.cases.data.not_conforming, data.charts.cases.x_axis.max, data.charts.cases.x_axis.min); // 建立圖表 Cases Chart.js
return result;
},
setRateChartData(data){
this.rateChartData = {
labels:[],
datasets: [
{
label: 'Rate',
data: data,
fill: false,
pointRadius: 0, // 隱藏點
pointHoverRadius: 0, // 隱藏點的 hover
tension: 0.4,
borderColor: '#0099FF',
x: 'x',
y: 'y',
}
]
};
this.rateChartOptions = {
responsive: true,
maintainAspectRatio: false,
aspectRatio: 0.6,
plugins: {
legend: false, // 圖例
tooltip: {
enabled: false // 隱藏 工具提示框
}
},
scales: {
x: {
type: 'time',
// time: {
// max: '2022-01-12T02:29:42',
// min: '2022-01-03T00:56:25',
// displayFormats: {
// day: 'yyyy/M/d'
// }
// },
ticks: {
maxRotation: 0, // 不旋轉 lable 0~50
color: '#334155',
source: 'data',
align: 'inner', // label 在軸線的位置
callback: function(value, index, values) {
return (index === 0 || index === values.length - 1) ? getMoment(value).format('YYYY/M/D') : null;
},
},
grid: {
display: false, // 隱藏 x 軸網格
},
border: {
color: '#334155',
},
},
y: {
beginAtZero: true, // scale 包含 0
suggestedMin: 0,
suggestedMax: 1,
ticks:{ // 設定間隔數值
includeBounds: true,
color: '#334155',
align: 'inner',
callback: function(value, index, values) {
if (value === 0) return `${value * 100}%`;
else if (value === 1) return `${value * 100}%`;
},
},
grid: {
display: false, // 隱藏 y 軸網格
},
border: {
color: '#334155',
},
},
},
};
},
setCasesChartData(conformingData, notConformingData, xMax, xMin){
this.casesChartData = {
datasets: [
{
type: 'bar',
label: 'Conforming',
data: conformingData,
backgroundColor: '#0099FF',
},
{
type: 'bar',
label: 'Not Conforming',
data: notConformingData,
backgroundColor: '#FFAA44',
},
]
};
this.casesChartOptions = {
responsive: true,
maintainAspectRatio: false,
aspectRatio: 0.8,
plugins: {
tooltips: {
mode: 'index',
intersect: false
},
legend: false, // 圖例
},
scales: {
x: {
stacked: true,
ticks: {
autoSkip: false,
maxRotation: 0, // 不旋轉 lable 0~50
color: '#334155',
align: 'center', // label 在軸線的位置
callback: function(value, index, values) {
if(index === 0) return getMoment(xMin).format('yyyy/M/D');
else if(index === values.length - 1) return getMoment(xMax).format('yyyy/M/D');
else return null;
},
},
grid: {
display: false, // 隱藏 x 軸網格
},
border: {
color: '#334155',
},
},
y: {
stacked: true,
beginAtZero: true, // scale 包含 0
ticks:{
color: '#334155',
align: 'inner',
callback: function(value, index, values) {
if (index === 0) return abbreviateNumber(value);
else if (index === values.length - 1) return abbreviateNumber(value);
},
},
grid: {
// display: false, // 隱藏 y 軸網格
color: function(context) {
return context.tick.value === 0 ? '#334155' : null;
},
drawTicks: false,
},
border: {
color: '#334155',
},
},
},
};
},
},
created() {
this.$emitter.on('coverPlate', boolean => {
this.isCoverPlate = boolean;
});
},
}
</script>
<style scoped>

47
src/components/Discover/Conformance/ConformanceSidebar.vue
View File

@@ -1,10 +1,9 @@
<template>
<section class="h-full shadow-[1px_0px_4px_rgba(0,0,0,0.25)] bg-neutral-100 absolute inset-y-0 left-0" :class="isShowBar?'w-full':'w-[300px]'">
<section class="h-full shadow-[1px_0px_4px_rgba(0,0,0,0.25)] bg-neutral-100 absolute inset-y-0 left-0 z-10" :class="isShowBar?'w-full':'w-[300px]'">
<!-- header -->
<div class="bg-neutral-200 px-4">
<p class="h2">Rule Settings</p>
</div>
<!-- contanier -->
<div class="p-4 h-[calc(100%_-_40px)] flex">
<div class="h-full flex flex-col justify-between w-[268px]">
@@ -23,7 +22,6 @@
<ConformanceTimeRange v-if="selectedRuleType === 'Activity duration' || selectedRuleType === 'Processing time' || selectedRuleType === 'Waiting time' || selectedRuleType === 'Cycle time'"></ConformanceTimeRange>
</div>
<!-- button -->
{{ selectConformanceTask }}
<div class="space-x-4 p-4 flex justify-center items-content border-t border-neutral-300">
<button type="button" class="btn btn-sm btn-neutral" @click="reset">Clear</button>
<button type="button" class="btn btn-sm btn-neutral" @click="submit">Apply</button>
@@ -37,6 +35,7 @@
<script>
import { storeToRefs } from 'pinia';
import LoadingStore from '@/stores/loading.js';
import ConformanceStore from '@/stores/conformance.js';
import ConformanceRadioGroup from './ConformanceSidebar/ConformanceRadioGroup.vue';
import ConformanceShowBar from './ConformanceSidebar/ConformanceShowBar.vue';
@@ -45,10 +44,12 @@ import ConformanceSelectResult from './ConformanceSidebar/ConformanceSelectResul
export default {
setup() {
const loadingStore = LoadingStore();
const conformanceStore = ConformanceStore();
const { isLoading } = storeToRefs(loadingStore);
const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo } = storeToRefs(conformanceStore);
return { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo }
return { isLoading, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceStore }
},
data() {
return {
@@ -65,21 +66,47 @@ export default {
},
methods: {
/**
* @param {boolean} massage true | false 清空選項
* @param {boolean} massage true | false 清空選單選項, 選擇的結果
*/
reset(massage) {
reset() {
// Results page Cover Plate
this.$emitter.emit('coverPlate', true);
// Have activity
this.selectConformanceTask = null;
this.$emitter.emit('reset', null);
// 成功訊息
massage ? this.$toast.success('Reset Success.') : null;
// reset 成功訊息
this.$toast.success('Reset Success.');
},
/**
* Apply button 發送選項，取得 Checker Id.
*/
async submit() {
let data;
if(this.selectedRuleType === 'Have activity') {
if(!this.selectConformanceTask?.length) return this.$toast.error('Not selected.');
else data = {
type: 'contains-tasks',
tasks: this.selectConformanceTask,
}
}
this.isLoading = true;
await this.conformanceStore.addLogConformanceTempCheckerId(data);
await this.conformanceStore.getLogConformanceTempReport();
this.isShowBar = false;
this.isLoading = false;
// Results page Cover Plate
this.$emitter.emit('coverPlate', false);
this.$toast.success('Apply Success. View the Conformance Checking Results.');
},
},
created() {
this.isShowBar = true;
// this.isShowBar = true;
this.$emitter.on('actListData', (data) => {
this.selectConformanceTask = data;
})
});
},
}
</script>

6
src/components/Discover/Conformance/StatusBar.vue
View File

@@ -1,5 +1,5 @@
<template>
<section class="w-full top-0 absolute shadow-[0px_6px_6px_inset_rgba(0,0,0,0.1)]">
<section class="w-full top-0 absolute shadow-[0px_6px_6px_inset_rgba(0,0,0,0.1)] z-20">
<!-- status content -->
<ul class="bg-neutral-100 flex justify-start shadow-[0px_1px_4px_rgba(0,0,0,0.2)] gap-3 p-3 text-sm overflow-x-auto scrollbar duration-700" v-show="isPanel" v-if="statData">
<li class="bg-neutral-10 rounded p-3 w-full">
@@ -137,7 +137,7 @@ export default {
ratio: this.getPercentLabel(this.stats.tasks.ratio)
},
started_at: getMoment(this.stats.started_at).format('YYYY-MM-DD HH:mm'),
completed_at: getMoment(this.stats.started_at).format('YYYY-MM-DD HH:mm'),
completed_at: getMoment(this.stats.completed_at).format('YYYY-MM-DD HH:mm'),
case_duration: {
min: getTimeLabel(this.stats.case_duration.min),
max: getTimeLabel(this.stats.case_duration.max),
@@ -151,7 +151,7 @@ export default {
if(this.$route.params.type === 'log') this.logId = this.$route.params.fileId;
await this.allMapDataStore.getAllMapData();
await this.getStatData();
this.isPanel = true;
// this.isPanel = true;
}
}
</script>

2
src/components/Loading.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="w-full h-full fixed inset-0 m-auto flex justify-center items-center bg-gradient-to-tr from-neutral-500/50 to-neutral-900/50 z-50">
<div class="w-full h-full fixed inset-0 m-auto flex justify-center items-center bg-gradient-to-tr from-neutral-500/50 to-neutral-900/50 z-[9999]">
<span class="loader block"></span>
</div>
</template>