Migrate all Vue components from Options API to <script setup>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -19,7 +19,7 @@
|
||||
<div class="blue-dot w-3 h-3 bg-[#0099FF] rounded-full mr-2"></div><span>{{ currentMapFile }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
<ul class="pb-4 border-b border-neutral-300">
|
||||
<li>
|
||||
<p class="h2">Cases</p>
|
||||
@@ -121,16 +121,16 @@
|
||||
<p class="h2">Most Frequent</p>
|
||||
<ul class="list-disc ml-6 mb-2 text-sm">
|
||||
<li class="leading-5">Activity:
|
||||
<span class="text-[#0099FF] break-words bg-[#F1F5F9] px-2 rounded mx-1" v-for="(value, key) in
|
||||
<span class="text-[#0099FF] break-words bg-[#F1F5F9] px-2 rounded mx-1" v-for="(value, key) in
|
||||
insights.most_freq_tasks" :key="key">{{ value }}</span>
|
||||
</li>
|
||||
<li class="leading-5">Inbound connections:
|
||||
<span class="text-[#0099FF] break-words bg-[#F1F5F9] px-2 rounded mx-1" v-for="(value, key) in
|
||||
<span class="text-[#0099FF] break-words bg-[#F1F5F9] px-2 rounded mx-1" v-for="(value, key) in
|
||||
insights.most_freq_in" :key="key">{{ value }}
|
||||
</span>
|
||||
</li>
|
||||
<li class="leading-5">Outbound connections:
|
||||
<span class="text-[#0099FF] break-words bg-[#F1F5F9] px-2 rounded mx-1" v-for="(value, key) in
|
||||
<span class="text-[#0099FF] break-words bg-[#F1F5F9] px-2 rounded mx-1" v-for="(value, key) in
|
||||
insights.most_freq_out" :key="key">{{ value }}
|
||||
</span>
|
||||
</li>
|
||||
@@ -138,7 +138,7 @@
|
||||
<p class="h2">Most Time-Consuming</p>
|
||||
<ul class="list-disc ml-6 mb-4 text-sm">
|
||||
<li class="w-full leading-5">Activity:
|
||||
<span class="text-primary break-words bg-[#F1F5F9] px-2 rounded mx-1" v-for="(value, key)
|
||||
<span class="text-primary break-words bg-[#F1F5F9] px-2 rounded mx-1" v-for="(value, key)
|
||||
in insights.most_time_tasks" :key="key">{{ value }}
|
||||
</span>
|
||||
</li>
|
||||
@@ -241,8 +241,8 @@
|
||||
</Sidebar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { computed, ref, } from 'vue';
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import { usePageAdminStore } from '@/stores/pageAdmin';
|
||||
import { useMapPathStore } from '@/stores/mapPathStore';
|
||||
import { getTimeLabel } from '@/module/timeLabel.js';
|
||||
@@ -252,120 +252,106 @@ import { INSIGHTS_FIELDS_AND_LABELS } from '@/constants/constants';
|
||||
|
||||
// 刪除第一個和第二個元素
|
||||
const fieldNamesAndLabelNames = [...INSIGHTS_FIELDS_AND_LABELS].slice(2);
|
||||
export default {
|
||||
props:{
|
||||
sidebarState: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
},
|
||||
stats: {
|
||||
type: Object,
|
||||
required: false,
|
||||
},
|
||||
insights: {
|
||||
type: Object,
|
||||
required: false,
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
sidebarState: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
},
|
||||
setup(props){
|
||||
const pageAdmin = usePageAdminStore();
|
||||
const mapPathStore = useMapPathStore();
|
||||
|
||||
const activeTrace = ref(0);
|
||||
const currentMapFile = computed(() => pageAdmin.currentMapFile);
|
||||
const clickedPathListIndex = ref(0);
|
||||
const isBPMNOn = computed(() => mapPathStore.isBPMNOn);
|
||||
|
||||
const onActiveTraceClick = (clickedActiveTraceIndex) => {
|
||||
mapPathStore.clearAllHighlight();
|
||||
activeTrace.value = clickedActiveTraceIndex;
|
||||
mapPathStore.highlightClickedPath(clickedActiveTraceIndex, clickedPathListIndex.value);
|
||||
}
|
||||
|
||||
const onPathOptionClick = (clickedPath) => {
|
||||
clickedPathListIndex.value = clickedPath;
|
||||
mapPathStore.highlightClickedPath(activeTrace.value, clickedPath);
|
||||
};
|
||||
|
||||
const onResetTraceBtnClick = () => {
|
||||
if(isBPMNOn.value) {
|
||||
return;
|
||||
}
|
||||
clickedPathListIndex.value = undefined;
|
||||
}
|
||||
|
||||
return {
|
||||
currentMapFile,
|
||||
i18next,
|
||||
fieldNamesAndLabelNames,
|
||||
clickedPathListIndex,
|
||||
onPathOptionClick,
|
||||
onActiveTraceClick,
|
||||
onResetTraceBtnClick,
|
||||
activeTrace,
|
||||
isBPMNOn,
|
||||
i18next,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tab: 'summary',
|
||||
valueCases: 0,
|
||||
valueTraces: 0,
|
||||
valueTaskInstances: 0,
|
||||
valueTasks: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* @param {string} switch Summary or Insight
|
||||
*/
|
||||
switchTab(tab) {
|
||||
this.tab = tab;
|
||||
},
|
||||
/**
|
||||
* @param {number} time use timeLabel.js
|
||||
*/
|
||||
timeLabel(time){ // sonar-qube prevent super-linear runtime due to backtracking; change * to ?
|
||||
//
|
||||
const label = getTimeLabel(time).replace(/\s+/g, ' '); // 將所有連續空白字符壓縮為一個空白
|
||||
const result = label.match(/^(\d+)\s?([a-zA-Z]+)$/); // add ^ and $ to meet sonar-qube need
|
||||
return result;
|
||||
},
|
||||
/**
|
||||
* @param {number} time use moment
|
||||
*/
|
||||
moment(time){
|
||||
return getMoment(time).format('YYYY-MM-DD HH:mm');
|
||||
},
|
||||
/**
|
||||
* Number to percentage
|
||||
* @param {number} val 原始數字
|
||||
* @returns {string} 轉換完成的百分比字串
|
||||
*/
|
||||
getPercentLabel(val){
|
||||
if((val * 100).toFixed(1) >= 100) return `100%`;
|
||||
else return `${(val * 100).toFixed(1)}%`;
|
||||
},
|
||||
/**
|
||||
* Behavior when show
|
||||
*/
|
||||
show(){
|
||||
this.valueCases = this.stats.cases.ratio * 100;
|
||||
this.valueTraces= this.stats.traces.ratio * 100;
|
||||
this.valueTaskInstances = this.stats.task_instances.ratio * 100;
|
||||
this.valueTasks = this.stats.tasks.ratio * 100;
|
||||
},
|
||||
/**
|
||||
* Behavior when hidden
|
||||
*/
|
||||
hide(){
|
||||
this.valueCases = 0;
|
||||
this.valueTraces= 0;
|
||||
this.valueTaskInstances = 0;
|
||||
this.valueTasks = 0;
|
||||
},
|
||||
stats: {
|
||||
type: Object,
|
||||
required: false,
|
||||
},
|
||||
insights: {
|
||||
type: Object,
|
||||
required: false,
|
||||
}
|
||||
});
|
||||
|
||||
const pageAdmin = usePageAdminStore();
|
||||
const mapPathStore = useMapPathStore();
|
||||
|
||||
const activeTrace = ref(0);
|
||||
const currentMapFile = computed(() => pageAdmin.currentMapFile);
|
||||
const clickedPathListIndex = ref(0);
|
||||
const isBPMNOn = computed(() => mapPathStore.isBPMNOn);
|
||||
|
||||
const tab = ref('summary');
|
||||
const valueCases = ref(0);
|
||||
const valueTraces = ref(0);
|
||||
const valueTaskInstances = ref(0);
|
||||
const valueTasks = ref(0);
|
||||
|
||||
function onActiveTraceClick(clickedActiveTraceIndex) {
|
||||
mapPathStore.clearAllHighlight();
|
||||
activeTrace.value = clickedActiveTraceIndex;
|
||||
mapPathStore.highlightClickedPath(clickedActiveTraceIndex, clickedPathListIndex.value);
|
||||
}
|
||||
|
||||
function onPathOptionClick(clickedPath) {
|
||||
clickedPathListIndex.value = clickedPath;
|
||||
mapPathStore.highlightClickedPath(activeTrace.value, clickedPath);
|
||||
}
|
||||
|
||||
function onResetTraceBtnClick() {
|
||||
if(isBPMNOn.value) {
|
||||
return;
|
||||
}
|
||||
clickedPathListIndex.value = undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} newTab Summary or Insight
|
||||
*/
|
||||
function switchTab(newTab) {
|
||||
tab.value = newTab;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} time use timeLabel.js
|
||||
*/
|
||||
function timeLabel(time){ // sonar-qube prevent super-linear runtime due to backtracking; change * to ?
|
||||
//
|
||||
const label = getTimeLabel(time).replace(/\s+/g, ' '); // 將所有連續空白字符壓縮為一個空白
|
||||
const result = label.match(/^(\d+)\s?([a-zA-Z]+)$/); // add ^ and $ to meet sonar-qube need
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} time use moment
|
||||
*/
|
||||
function moment(time){
|
||||
return getMoment(time).format('YYYY-MM-DD HH:mm');
|
||||
}
|
||||
|
||||
/**
|
||||
* Number to percentage
|
||||
* @param {number} val 原始數字
|
||||
* @returns {string} 轉換完成的百分比字串
|
||||
*/
|
||||
function getPercentLabel(val){
|
||||
if((val * 100).toFixed(1) >= 100) return `100%`;
|
||||
else return `${(val * 100).toFixed(1)}%`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Behavior when show
|
||||
*/
|
||||
function show(){
|
||||
valueCases.value = props.stats.cases.ratio * 100;
|
||||
valueTraces.value = props.stats.traces.ratio * 100;
|
||||
valueTaskInstances.value = props.stats.task_instances.ratio * 100;
|
||||
valueTasks.value = props.stats.tasks.ratio * 100;
|
||||
}
|
||||
|
||||
/**
|
||||
* Behavior when hidden
|
||||
*/
|
||||
function hide(){
|
||||
valueCases.value = 0;
|
||||
valueTraces.value = 0;
|
||||
valueTaskInstances.value = 0;
|
||||
valueTasks.value = 0;
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user