feat: Compare SidebarStates API done.
This commit is contained in:
chiayin
Generated
+8
-9
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "frontend",
|
||||
"version": "0.99.7",
|
||||
"version": "0.99.8",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "frontend",
|
||||
"version": "0.99.7",
|
||||
"version": "0.99.8",
|
||||
"dependencies": {
|
||||
"autoprefixer": "^10.4.13",
|
||||
"axios": "^1.2.2",
|
||||
@@ -5048,11 +5048,10 @@
|
||||
"integrity": "sha512-KDeO94CbWI4pKsPnYpA1FPjo79EsY9I+M8ywoPBSf9XMXoe/0crjbUK7jcQEDHuc0ZMRIZsxH3TYLv4TUtHmAA=="
|
||||
},
|
||||
"node_modules/primevue": {
|
||||
"version": "3.23.0",
|
||||
"resolved": "https://registry.npmjs.org/primevue/-/primevue-3.23.0.tgz",
|
||||
"integrity": "sha512-WyJwvVRJbuCPAId3qDwQVPXgOli4gc9yxdZZyY/3Ml0/asHHH3LR7+MMvjIHXg/AN+XX5SBVPPJkObxP8cJuaw==",
|
||||
"version": "3.48.1",
|
||||
"resolved": "https://registry.npmjs.org/primevue/-/primevue-3.48.1.tgz",
|
||||
"integrity": "sha512-lyJ+E0ZCv2pR9jIpdPLBysU8zB2hOKrN7q78orloWelPx05zSYoMVKAWaqKTHNpunD52xffjaqovt1y6B/9XoQ==",
|
||||
"peerDependencies": {
|
||||
"primeicons": "^5.0.0 || ^6.0.0",
|
||||
"vue": "^3.0.0"
|
||||
}
|
||||
},
|
||||
@@ -10345,9 +10344,9 @@
|
||||
"integrity": "sha512-KDeO94CbWI4pKsPnYpA1FPjo79EsY9I+M8ywoPBSf9XMXoe/0crjbUK7jcQEDHuc0ZMRIZsxH3TYLv4TUtHmAA=="
|
||||
},
|
||||
"primevue": {
|
||||
"version": "3.23.0",
|
||||
"resolved": "https://registry.npmjs.org/primevue/-/primevue-3.23.0.tgz",
|
||||
"integrity": "sha512-WyJwvVRJbuCPAId3qDwQVPXgOli4gc9yxdZZyY/3Ml0/asHHH3LR7+MMvjIHXg/AN+XX5SBVPPJkObxP8cJuaw==",
|
||||
"version": "3.48.1",
|
||||
"resolved": "https://registry.npmjs.org/primevue/-/primevue-3.48.1.tgz",
|
||||
"integrity": "sha512-lyJ+E0ZCv2pR9jIpdPLBysU8zB2hOKrN7q78orloWelPx05zSYoMVKAWaqKTHNpunD52xffjaqovt1y6B/9XoQ==",
|
||||
"requires": {}
|
||||
},
|
||||
"process": {
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<section class="w-[204px] box-border pr-4">
|
||||
<div class="mb-4">
|
||||
<p class="h2">File Name</p>
|
||||
<p class="text-sm whitespace-nowrap break-keep overflow-hidden text-ellipsis" title="新光三越信義新天地母親節檔期 新光三越信義新天地母親節檔期 新光三越信義新天地母親節檔期">新光三越信義新天地母親節檔期 新光三越信義新天地母親節檔期 新光三越信義新天地母親節檔期</p>
|
||||
<p class="text-sm whitespace-nowrap break-keep overflow-hidden text-ellipsis" :title="primaryStatData.name">{{ primaryStatData.name }}</p>
|
||||
</div>
|
||||
<!-- Stats -->
|
||||
<ul class="pb-4 border-b border-neutral-300">
|
||||
@@ -20,40 +20,40 @@
|
||||
<p class="h2">Cases</p>
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="w-full mr-4">
|
||||
<span class="block text-sm">{{ statData.cases.count }} / {{ statData.cases.total }}</span>
|
||||
<ProgressBar :value="valueCases" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
|
||||
<span class="block text-sm">{{ primaryStatData.cases.count }} / {{ primaryStatData.cases.total }}</span>
|
||||
<ProgressBar :value="primaryValueCases" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-primary"></ProgressBar>
|
||||
</div>
|
||||
<span class="block text-primary text-2xl text-right font-medium basis-28">{{ statData.cases.ratio }}%</span>
|
||||
<span class="block text-primary text-2xl text-right font-medium basis-28">{{ primaryStatData.cases.ratio }}%</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<p class="h2">Traces</p>
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="w-full mr-4">
|
||||
<span class="block text-sm">{{ statData.traces.count }} / {{ statData.traces.total }}</span>
|
||||
<ProgressBar :value="valueTraces" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
|
||||
<span class="block text-sm">{{ primaryStatData.traces.count }} / {{ primaryStatData.traces.total }}</span>
|
||||
<ProgressBar :value="primaryValueTraces" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-primary"></ProgressBar>
|
||||
</div>
|
||||
<span class="block text-primary text-2xl text-right font-medium basis-28">{{ statData.traces.ratio }}%</span>
|
||||
<span class="block text-primary text-2xl text-right font-medium basis-28">{{ primaryStatData.traces.ratio }}%</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<p class="h2">Activity Instances</p>
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="w-full mr-4">
|
||||
<span class="block text-sm">{{ statData.task_instances.count }} / {{ statData.task_instances.total }}</span>
|
||||
<ProgressBar :value="valueTaskInstances" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
|
||||
<span class="block text-sm">{{ primaryStatData.task_instances.count }} / {{ primaryStatData.task_instances.total }}</span>
|
||||
<ProgressBar :value="primaryValueTaskInstances" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-primary"></ProgressBar>
|
||||
</div>
|
||||
<span class="block text-primary text-2xl text-right font-medium basis-28">{{ statData.task_instances.ratio }}%</span>
|
||||
<span class="block text-primary text-2xl text-right font-medium basis-28">{{ primaryStatData.task_instances.ratio }}%</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<p class="h2">Activities</p>
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="w-full mr-4">
|
||||
<span class="block text-sm">{{ statData.tasks.count }} / {{ statData.tasks.total }}</span>
|
||||
<ProgressBar :value="valueTasks" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
|
||||
<span class="block text-sm">{{ primaryStatData.tasks.count }} / {{ primaryStatData.tasks.total }}</span>
|
||||
<ProgressBar :value="primaryValueTasks" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-primary"></ProgressBar>
|
||||
</div>
|
||||
<span class="block text-primary text-2xl text-right font-medium basis-28">{{ statData.tasks.ratio }}%</span>
|
||||
<span class="block text-primary text-2xl text-right font-medium basis-28">{{ primaryStatData.tasks.ratio }}%</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -61,19 +61,19 @@
|
||||
<div class="pt-1 pb-4 border-b border-neutral-300">
|
||||
<p class="h2">Log Timeframe</p>
|
||||
<div class="space-y-2 text-sm text-center">
|
||||
<span class="block">{{ statData.started_at }} </span>
|
||||
<span class="block">{{ primaryStatData.started_at }} </span>
|
||||
<span class="block">~</span>
|
||||
<span class="block"> {{ statData.completed_at }}</span>
|
||||
<span class="block"> {{ primaryStatData.completed_at }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Case Duration -->
|
||||
<div class="pt-1 pb-4">
|
||||
<p class="h2">Case Duration</p>
|
||||
<ul class="space-y-1 text-sm">
|
||||
<li><Tag value="MIN" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ statData.case_duration.min }}</li>
|
||||
<li><Tag value="AVG" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ statData.case_duration.average }}</li>
|
||||
<li><Tag value="MED" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ statData.case_duration.median }}</li>
|
||||
<li><Tag value="MAX" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ statData.case_duration.max }}</li>
|
||||
<li><Tag value="MIN" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ primaryStatData.case_duration.min }}</li>
|
||||
<li><Tag value="AVG" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ primaryStatData.case_duration.average }}</li>
|
||||
<li><Tag value="MED" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ primaryStatData.case_duration.median }}</li>
|
||||
<li><Tag value="MAX" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ primaryStatData.case_duration.max }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
@@ -81,7 +81,7 @@
|
||||
<section class="w-[204px] box-border pl-4">
|
||||
<div class="mb-4">
|
||||
<p class="h2">File Name</p>
|
||||
<p class="text-sm whitespace-nowrap break-keep overflow-hidden text-ellipsis" title="新光三越信義新天地母親節檔期 新光三越信義新天地母親節檔期 新光三越信義新天地母親節檔期">新光三越信義新天地母親節檔期 新光三越信義新天地母親節檔期 新光三越信義新天地母親節檔期</p>
|
||||
<p class="text-sm whitespace-nowrap break-keep overflow-hidden text-ellipsis" :title="secondaryStatData.name">{{ secondaryStatData.name }}</p>
|
||||
</div>
|
||||
<!-- Stats -->
|
||||
<ul class="pb-4 border-b border-neutral-300">
|
||||
@@ -89,40 +89,40 @@
|
||||
<p class="h2">Cases</p>
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="w-full mr-4">
|
||||
<span class="block text-sm">{{ statData.cases.count }} / {{ statData.cases.total }}</span>
|
||||
<ProgressBar :value="valueCases" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
|
||||
<span class="block text-sm">{{ secondaryStatData.cases.count }} / {{ secondaryStatData.cases.total }}</span>
|
||||
<ProgressBar :value="secondaryValueTraces" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-secondary"></ProgressBar>
|
||||
</div>
|
||||
<span class="block text-primary text-2xl text-right font-medium basis-28">{{ statData.cases.ratio }}%</span>
|
||||
<span class="block text-secondary text-2xl text-right font-medium basis-28">{{ secondaryStatData.cases.ratio }}%</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<p class="h2">Traces</p>
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="w-full mr-4">
|
||||
<span class="block text-sm">{{ statData.traces.count }} / {{ statData.traces.total }}</span>
|
||||
<ProgressBar :value="valueTraces" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
|
||||
<span class="block text-sm">{{ secondaryStatData.traces.count }} / {{ secondaryStatData.traces.total }}</span>
|
||||
<ProgressBar :value="secondaryValueTraces" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-secondary"></ProgressBar>
|
||||
</div>
|
||||
<span class="block text-primary text-2xl text-right font-medium basis-28">{{ statData.traces.ratio }}%</span>
|
||||
<span class="block text-secondary text-2xl text-right font-medium basis-28">{{ secondaryStatData.traces.ratio }}%</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<p class="h2">Activity Instances</p>
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="w-full mr-4">
|
||||
<span class="block text-sm">{{ statData.task_instances.count }} / {{ statData.task_instances.total }}</span>
|
||||
<ProgressBar :value="valueTaskInstances" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
|
||||
<span class="block text-sm">{{ secondaryStatData.task_instances.count }} / {{ secondaryStatData.task_instances.total }}</span>
|
||||
<ProgressBar :value="secondaryValueTaskInstances" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-secondary"></ProgressBar>
|
||||
</div>
|
||||
<span class="block text-primary text-2xl text-right font-medium basis-28">{{ statData.task_instances.ratio }}%</span>
|
||||
<span class="block text-secondary text-2xl text-right font-medium basis-28">{{ secondaryStatData.task_instances.ratio }}%</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<p class="h2">Activities</p>
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="w-full mr-4">
|
||||
<span class="block text-sm">{{ statData.tasks.count }} / {{ statData.tasks.total }}</span>
|
||||
<ProgressBar :value="valueTasks" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
|
||||
<span class="block text-sm">{{ secondaryStatData.tasks.count }} / {{ secondaryStatData.tasks.total }}</span>
|
||||
<ProgressBar :value="secondaryValueTasks" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-secondary"></ProgressBar>
|
||||
</div>
|
||||
<span class="block text-primary text-2xl text-right font-medium basis-28">{{ statData.tasks.ratio }}%</span>
|
||||
<span class="block text-secondary text-2xl text-right font-medium basis-28">{{ secondaryStatData.tasks.ratio }}%</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -130,38 +130,35 @@
|
||||
<div class="pt-1 pb-4 border-b border-neutral-300">
|
||||
<p class="h2">Log Timeframe</p>
|
||||
<div class="space-y-2 text-sm text-center">
|
||||
<span class="block">{{ statData.started_at }} </span>
|
||||
<span class="block">{{ secondaryStatData.started_at }} </span>
|
||||
<span class="block">~</span>
|
||||
<span class="block"> {{ statData.completed_at }}</span>
|
||||
<span class="block"> {{ secondaryStatData.completed_at }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Case Duration -->
|
||||
<div class="pt-1 pb-4">
|
||||
<p class="h2">Case Duration</p>
|
||||
<ul class="space-y-1 text-sm">
|
||||
<li><Tag value="MIN" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ statData.case_duration.min }}</li>
|
||||
<li><Tag value="AVG" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ statData.case_duration.average }}</li>
|
||||
<li><Tag value="MED" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ statData.case_duration.median }}</li>
|
||||
<li><Tag value="MAX" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ statData.case_duration.max }}</li>
|
||||
<li><Tag value="MIN" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ secondaryStatData.case_duration.min }}</li>
|
||||
<li><Tag value="AVG" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ secondaryStatData.case_duration.average }}</li>
|
||||
<li><Tag value="MED" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ secondaryStatData.case_duration.median }}</li>
|
||||
<li><Tag value="MAX" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ secondaryStatData.case_duration.max }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</Sidebar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { storeToRefs } from 'pinia';
|
||||
import AllMapDataStore from '@/stores/allMapData.js';
|
||||
import CompareStore from '@/stores/compare.js';
|
||||
import { getTimeLabel } from '@/module/timeLabel.js';
|
||||
import getMoment from 'moment';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const allMapDataStore = AllMapDataStore();
|
||||
const { logId, stats, createFilterId } = storeToRefs(allMapDataStore);
|
||||
const compareStore = CompareStore();
|
||||
|
||||
return { logId, stats, createFilterId, allMapDataStore };
|
||||
return { compareStore };
|
||||
},
|
||||
props:{
|
||||
sidebarState: {
|
||||
@@ -171,11 +168,16 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
valueCases: 0,
|
||||
valueTraces: 0,
|
||||
valueTaskInstances: 0,
|
||||
valueTasks: 0,
|
||||
statData: null,
|
||||
primaryValueCases: 0,
|
||||
primaryValueTraces: 0,
|
||||
primaryValueTaskInstances: 0,
|
||||
primaryValueTasks: 0,
|
||||
secondaryValueCases: 0,
|
||||
secondaryValueTraces: 0,
|
||||
secondaryValueTaskInstances: 0,
|
||||
secondaryValueTasks: 0,
|
||||
primaryStatData: null,
|
||||
secondaryStatData: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -190,36 +192,40 @@ export default {
|
||||
},
|
||||
/**
|
||||
* setting stats data
|
||||
* @param { object } data fetch API stats data
|
||||
* @param { string } fileName file Name
|
||||
* @returns { object } primaryStatData | secondaryStatData
|
||||
*/
|
||||
getStatData() {
|
||||
this.statData = {
|
||||
getStatData(data, fileName) {
|
||||
return {
|
||||
name: fileName,
|
||||
cases: {
|
||||
count: this.stats.cases.count.toLocaleString('en-US'),
|
||||
total: this.stats.cases.total.toLocaleString('en-US'),
|
||||
ratio: this.getPercentLabel(this.stats.cases.ratio)
|
||||
count: data.cases.count.toLocaleString('en-US'),
|
||||
total: data.cases.total.toLocaleString('en-US'),
|
||||
ratio: this.getPercentLabel(data.cases.ratio)
|
||||
},
|
||||
traces: {
|
||||
count: this.stats.traces.count.toLocaleString('en-US'),
|
||||
total: this.stats.traces.total.toLocaleString('en-US'),
|
||||
ratio: this.getPercentLabel(this.stats.traces.ratio)
|
||||
count: data.traces.count.toLocaleString('en-US'),
|
||||
total: data.traces.total.toLocaleString('en-US'),
|
||||
ratio: this.getPercentLabel(data.traces.ratio)
|
||||
},
|
||||
task_instances: {
|
||||
count: this.stats.task_instances.count.toLocaleString('en-US'),
|
||||
total: this.stats.task_instances.total.toLocaleString('en-US'),
|
||||
ratio: this.getPercentLabel(this.stats.task_instances.ratio)
|
||||
count: data.task_instances.count.toLocaleString('en-US'),
|
||||
total: data.task_instances.total.toLocaleString('en-US'),
|
||||
ratio: this.getPercentLabel(data.task_instances.ratio)
|
||||
},
|
||||
tasks: {
|
||||
count: this.stats.tasks.count.toLocaleString('en-US'),
|
||||
total: this.stats.tasks.total.toLocaleString('en-US'),
|
||||
ratio: this.getPercentLabel(this.stats.tasks.ratio)
|
||||
count: data.tasks.count.toLocaleString('en-US'),
|
||||
total: data.tasks.total.toLocaleString('en-US'),
|
||||
ratio: this.getPercentLabel(data.tasks.ratio)
|
||||
},
|
||||
started_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'),
|
||||
started_at: getMoment(data.started_at).format('YYYY.MM.DD HH:mm'),
|
||||
completed_at: getMoment(data.completed_at).format('YYYY.MM.DD HH:mm'),
|
||||
case_duration: {
|
||||
min: getTimeLabel(this.stats.case_duration.min, 2),
|
||||
max: getTimeLabel(this.stats.case_duration.max, 2),
|
||||
average: getTimeLabel(this.stats.case_duration.average, 2),
|
||||
median: getTimeLabel(this.stats.case_duration.median, 2),
|
||||
min: getTimeLabel(data.case_duration.min, 2),
|
||||
max: getTimeLabel(data.case_duration.max, 2),
|
||||
average: getTimeLabel(data.case_duration.average, 2),
|
||||
median: getTimeLabel(data.case_duration.median, 2),
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -227,51 +233,54 @@ export default {
|
||||
* Behavior when show
|
||||
*/
|
||||
show(){
|
||||
this.valueCases = this.statData.cases.ratio * 100;
|
||||
this.valueTraces= this.statData.traces.ratio * 100;
|
||||
this.valueTaskInstances = this.statData.task_instances.ratio * 100;
|
||||
this.valueTasks = this.statData.tasks.ratio * 100;
|
||||
this.primaryValueCases = this.primaryStatData.cases.ratio;
|
||||
this.primaryValueTraces= this.primaryStatData.traces.ratio;
|
||||
this.primaryValueTaskInstances = this.primaryStatData.task_instances.ratio;
|
||||
this.primaryValueTasks = this.primaryStatData.tasks.ratio;
|
||||
this.secondaryValueCases = this.secondaryStatData.cases.ratio;
|
||||
this.secondaryValueTraces= this.secondaryStatData.traces.ratio;
|
||||
this.secondaryValueTaskInstances = this.secondaryStatData.task_instances.ratio;
|
||||
this.secondaryValueTasks = this.secondaryStatData.tasks.ratio;
|
||||
},
|
||||
/**
|
||||
* Behavior when hidden
|
||||
*/
|
||||
hide(){
|
||||
this.valueCases = 0;
|
||||
this.valueTraces= 0;
|
||||
this.valueTaskInstances = 0;
|
||||
this.valueTasks = 0;
|
||||
this.primaryValueCases = 0;
|
||||
this.primaryValueTraces= 0;
|
||||
this.primaryValueTaskInstances = 0;
|
||||
this.primaryValueTasks = 0;
|
||||
this.secondaryValueCases = 0;
|
||||
this.secondaryValueTraces= 0;
|
||||
this.secondaryValueTaskInstances = 0;
|
||||
this.secondaryValueTasks = 0;
|
||||
},
|
||||
},
|
||||
async mounted() {
|
||||
// log: 695977238 ; filter: 746150051
|
||||
// let params = this.$route.params;
|
||||
const routeParams = this.$route.params;
|
||||
const primaryType = routeParams.primaryType;
|
||||
const secondaryType = routeParams.secondaryType;
|
||||
const primaryId = routeParams.primaryId;
|
||||
const secondaryId = routeParams.secondaryId;
|
||||
const primaryData = await this.compareStore.getStateData(primaryType, primaryId);
|
||||
const secondaryData = await this.compareStore.getStateData(secondaryType, secondaryId);
|
||||
|
||||
const primaryFileName = await this.compareStore.getFileName(primaryId)
|
||||
const secondaryFileName = await this.compareStore.getFileName(secondaryId)
|
||||
this.primaryStatData = await this.getStatData(primaryData, primaryFileName);
|
||||
this.secondaryStatData = await this.getStatData(secondaryData, secondaryFileName);
|
||||
|
||||
// switch (params.type) {
|
||||
// case 'log':
|
||||
// this.logId = params.fileId;
|
||||
// break;
|
||||
// case 'filter':
|
||||
// this.createFilterId = params.fileId;
|
||||
// break;
|
||||
// case 'rule':
|
||||
// switch (params.checkType) {
|
||||
// case 'log':
|
||||
// this.logId = params.checkFileId;
|
||||
// break;
|
||||
// case 'filter':
|
||||
// this.createFilterId = params.checkFileId;
|
||||
// }
|
||||
// break;
|
||||
// }
|
||||
this.logId = 695977238;
|
||||
await this.allMapDataStore.getAllMapData();
|
||||
await this.getStatData();
|
||||
this.isPanel = false; // 預設不打開
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
:deep(.p-progressbar .p-progressbar-value) {
|
||||
@apply bg-primary
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
.progressbar-primary {
|
||||
--bg-color: #0099FF;
|
||||
}
|
||||
.progressbar-secondary {
|
||||
--bg-color: #FFAA44;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -142,8 +142,7 @@ export default defineStore('allMapDataStore', {
|
||||
this.allStats = response.data.stats;
|
||||
this.allInsights = response.data.insights;
|
||||
} catch(error) {
|
||||
console.dir(error)
|
||||
// apiError(error, 'Failed to load the Map.');
|
||||
apiError(error, 'Failed to load the Map.');
|
||||
};
|
||||
},
|
||||
/**
|
||||
|
||||
@@ -26,6 +26,42 @@ export default defineStore('compareStore', {
|
||||
} catch(error) {
|
||||
apiError(error, 'Failed to load the Compare.');
|
||||
}
|
||||
},
|
||||
/**
|
||||
* fetch discover api, get stats.
|
||||
*/
|
||||
async getStateData(type, id) {
|
||||
let api = '';
|
||||
|
||||
switch (type) {
|
||||
case 'log':
|
||||
api = `/api/logs/${id}/discover`;
|
||||
break;
|
||||
case 'filter':
|
||||
api = `/api/filters/${id}/discover`
|
||||
break;
|
||||
}
|
||||
try {
|
||||
const response = await this.$axios.get(api);
|
||||
|
||||
return response.data.stats;
|
||||
} catch(error) {
|
||||
apiError(error, "Failed to load the Compare's States.");
|
||||
};
|
||||
},
|
||||
/**
|
||||
* Get file's name
|
||||
*/
|
||||
async getFileName(id) {
|
||||
id = Number(id)
|
||||
try {
|
||||
const response = await this.$axios.get('/api/files');
|
||||
const file = response.data.find(i => i.id === id);
|
||||
|
||||
if(file) return file.name;
|
||||
} catch(error) {
|
||||
apiError(error, "Failed to load the Compare's file name.");
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
</section>
|
||||
</aside>
|
||||
<!-- graph -->
|
||||
<article class="w-full h-full overflow-x-hidden overflow-y-auto scrollbar scroll-smooth">
|
||||
<article class="w-full h-full pr-2 mr-2 overflow-x-hidden overflow-y-auto scrollbar scroll-smooth">
|
||||
<section>
|
||||
<p class="h2 px-4 border-b border-neutral-900"><span class="material-symbols-outlined mr-2 align-middle">schedule</span>Time Usage</p>
|
||||
<ul class="list-disc list-inside px-4 pl-7">
|
||||
@@ -80,21 +80,19 @@
|
||||
</ul>
|
||||
</section>
|
||||
</article>
|
||||
<!-- Sidebar: State -->
|
||||
<div class="bg-transparent z-10">
|
||||
<ul class="flex flex-col justify-center items-center">
|
||||
<li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary" @click="sidebarState = !sidebarState" :class="{'border-primary': sidebarState}" id="iconState">
|
||||
<span class="material-symbols-outlined text-2xl text-neutral-500 hover:text-primary p-1.5" :class="[sidebarState ? 'text-primary' : 'text-neutral-500']">
|
||||
info
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<SidebarStates v-model:visible="sidebarState"></SidebarStates>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar: State -->
|
||||
<div class="bg-transparent py-4 w-14 h-screen-main z-10 bottom-0 right-0 absolute">
|
||||
<ul class="flex flex-col justify-center items-center">
|
||||
<li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary" @click="sidebarState = !sidebarState" :class="{'border-primary': sidebarState}" id="iconState">
|
||||
<span class="material-symbols-outlined text-2xl text-neutral-500 hover:text-primary p-1.5" :class="[sidebarState ? 'text-primary' : 'text-neutral-500']">
|
||||
info
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<SidebarStates v-model:visible="sidebarState"></SidebarStates>
|
||||
|
||||
</main>
|
||||
</template>
|
||||
<script>
|
||||
@@ -104,7 +102,6 @@ import CompareStore from '@/stores/compare.js';
|
||||
import SidebarStates from '@/components/Compare/SidebarStates.vue';
|
||||
import { setLineChartData } from '@/module/setChartData.js';
|
||||
import { simpleTimeLabel, followTimeLabel, dateLabel } from '@/module/timeLabel.js';
|
||||
// import { compareDashboardData } from '@/views/Compare/Dashboard/data.js';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
Reference in New Issue
Block a user