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

Issue #169: Done.

Browse Source
This commit is contained in:
chiayin
2023-10-19 14:11:40 +08:00
parent b32e1b3b61
commit 6c032ca94a
5 changed files with 74 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/Discover/Map/Filter/Trace.vue
View File

@@ -72,10 +72,10 @@ export default {
setup() {
const allMapDataStore = AllMapDataStore();
const loadingStore = LoadingStore();
const { infinit404, infiniteStart, traces, traceTaskSeq, cases } = storeToRefs(allMapDataStore);
const { infinit404, baseInfiniteStart, baseTraces, baseTraceTaskSeq, baseCases } = storeToRefs(allMapDataStore);
const { isLoading } = storeToRefs(loadingStore);
return {allMapDataStore, infinit404, infiniteStart, traces, traceTaskSeq, cases, isLoading}
return {allMapDataStore, infinit404, baseInfiniteStart, baseTraces, baseTraceTaskSeq, baseCases, isLoading}
},
data() {
return {
@@ -92,13 +92,13 @@ export default {
},
computed: {
traceTotal: function() {
return this.traces.length;
return this.baseTraces.length;
},
traceCountTotal: function() {
return this.traces.map(trace => trace.count).reduce((acc, cur) => acc + cur, 0);
return this.baseTraces.map(trace => trace.count).reduce((acc, cur) => acc + cur, 0);
},
traceList: function() {
return this.traces.map(trace => {
return this.baseTraces.map(trace => {
return {
id: trace.id,
value: this.progressWidth(Number(((trace.count / this.traceCountTotal) * 100).toFixed(1))),
@@ -116,9 +116,9 @@ export default {
chartData: function() {
const start = this.selectArea[0];
const end = this.selectArea[1] - 1;
const labels = this.traces.map(trace => `#${trace.id}`);
const data = this.traces.map(trace => this.getPercentLabel(trace.count / this.traceCountTotal));
const selectAreaData = this.traces.map((trace, index) => index >= start && index <= end ? 'rgba(0,153,255)' : 'rgba(203, 213, 225)');
const labels = this.baseTraces.map(trace => `#${trace.id}`);
const data = this.baseTraces.map(trace => this.getPercentLabel(trace.count / this.traceCountTotal));
const selectAreaData = this.baseTraces.map((trace, index) => index >= start && index <= end ? 'rgba(0,153,255)' : 'rgba(203, 213, 225)');
return { // 要呈現的資料
labels,
@@ -223,9 +223,9 @@ export default {
this.infinit404 = null;
this.infinitMaxItems = false;
this.showTraceId = id;
this.infiniteStart = 0;
this.allMapDataStore.traceId = id;
this.infiniteData = await this.allMapDataStore.getTraceDetail();
this.baseInfiniteStart = 0;
this.allMapDataStore.baseTraceId = id;
this.infiniteData = await this.allMapDataStore.getBaseTraceDetail();
this.createCy();
this.isLoading = false;
},
@@ -236,7 +236,7 @@ export default {
// 避免每次渲染都重複累加
this.processMap.nodes = [];
// 將 api call 回來的資料帶進 node
this.traceTaskSeq.forEach((node, index) => {
this.baseTraceTaskSeq.forEach((node, index) => {
this.processMap.nodes.push({
data: {
id: index,
@@ -255,7 +255,7 @@ export default {
*/
setEdgesData(){
this.processMap.edges = [];
this.traceTaskSeq.forEach((edge, index) => {
this.baseTraceTaskSeq.forEach((edge, index) => {
this.processMap.edges.push({
data: {
source: `${index}`,
@@ -283,7 +283,7 @@ export default {
* @param {element} event
*/
handleScroll(event) {
if(this.infinitMaxItems || this.cases.length < 20) return;
if(this.infinitMaxItems || this.baseCases.length < 20) return;
const container = event.target;
const overScrollHeight = container.scrollTop + container.clientHeight >= container.scrollHeight;
@@ -295,9 +295,9 @@ export default {
*/
async fetchData() {
try {
this.infiniteStart += 20;
await this.allMapDataStore.getTraceDetail();
this.infiniteData = [...this.infiniteData, ...this.cases];
this.baseInfiniteStart += 20;
await this.allMapDataStore.getBaseTraceDetail();
this.infiniteData = [...this.infiniteData, ...this.baseCases];
} catch(error) {
console.error('Failed to load data:', error);
}