Conformance: time duration component fix bug.

src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue

@@ -5,12 +5,9 @@
     <p>min: {{ timeData.min }}</p>
     <p>max: {{ timeData.max }}</p>
     <div class="flex justify-between items-center">
-      <!-- <Durationjs :max="max" :min="min" :size="'min'" @total-seconds="minTotalSeconds"></Durationjs>
+      <Durationjs :max="minVuemax" :min="minVuemin" :size="'min'" @total-seconds="minTotalSeconds"></Durationjs>
         <span>~</span>
-      <Durationjs :max="max" :min="min" :size="'max'" @total-seconds="maxTotalSeconds"></Durationjs> -->
-      <Durationjs :max="minVuemax" :min="minVuemin" :size="'min'" ></Durationjs>
-        <span>~</span>
-      <Durationjs :max="maxVuemax" :min="maxVuemin" :size="'max'" ></Durationjs>
+      <Durationjs :max="maxVuemax" :min="maxVuemin" :size="'max'" @total-seconds="maxTotalSeconds"></Durationjs>
     </div>
   </div>
 </div>
@@ -26,23 +23,33 @@ export default {
         min: 0,
         max: 0,
       },
+      timeRangeMin: 0,
+      timeRangeMax: 0,
     }
   },
   components: {
     Durationjs,
   },
-  computed: { // 一定得用 computed 傳遞資料，不要拿父元件 props 的數值，不然子元件會交互影響。
+  computed: {
     minVuemin() {
-      return this.time ? this.time.min : 0;
+      let min = 0;
+      min = JSON.parse(JSON.stringify(this.timeData.min)); // 深拷貝原始 timeData 的內容
+      return min;
     },
     minVuemax() {
-      return this.time ? this.time.max : 0;
+      let max = 0;
+      max = JSON.parse(JSON.stringify(this.timeData.max)); // 深拷貝原始 timeData 的內容
+      return max;
     },
     maxVuemin() {
-      return this.time ? this.time.min : 0;
+      let min = 0;
+      min = JSON.parse(JSON.stringify(this.timeData.min)); // 深拷貝原始 timeData 的內容
+      return min;
     },
     maxVuemax() {
-      return this.time ? this.time.max : 0;
+      let max = 0;
+      max = JSON.parse(JSON.stringify(this.timeData.max)); // 深拷貝原始 timeData 的內容
+      return max;
     },
   },
   watch: {
@@ -57,15 +64,17 @@ export default {
           min: newValue.min,
           max: newValue.max
         };
-      };
+      }
     },
   },
   methods: {
     minTotalSeconds(e) {
-      // console.log('min:', e);
+      console.log('min:', e);
+      this.timeRangeMin = e;
     },
     maxTotalSeconds(e) {
-      // console.log('max:', e);
+      console.log('max:', e);
+      this.timeRangeMax = e;
     },
   },
 }

src/components/Discover/Conformance/ConformanceSidebar/ResultDot.vue

@@ -19,7 +19,7 @@ export default {
   watch: {
     timeResultData: {
       handler(newValue) {
-        console.log(newValue);
+        // console.log(newValue);
         this.data = newValue;
       },
       immediate: true,

src/components/Discover/Conformance/MoreModal.vue

@@ -43,6 +43,7 @@
             <div id="cfmTrace" ref="cfmTrace" class="h-full min-w-full relative"></div>
           </div>
         </div>
+        {{ caseData }}
         <div class="overflow-y-auto overflow-x-auto scrollbar h-[calc(100%_-_264px)] infiniteTable" @scroll="handleScroll">
             <DataTable :value="caseData" showGridlines tableClass="text-sm " breakpoint="0">
               <div v-for="(col, index) in columnData" :key="index">
@@ -100,6 +101,12 @@ export default {
       if(this.infiniteData !== null){
         const data = JSON.parse(JSON.stringify(this.infiniteData)); // 深拷貝原始 cases 的內容
         data.forEach(item => {
+          // item.facets.forEach((facet, index) => {
+          //   console.log(facet.value);
+          //   item[`fac_${index}`] = facet.value.join(', '); // 建立新的 key-value pair
+          // });
+          // delete item.facets; // 刪除原本的 attributes 屬性
+
           item.attributes.forEach((attribute, index) => {
             item[`att_${index}`] = attribute.value; // 建立新的 key-value pair
           });