fix: independent widget duration (#319)

src/views/dashboard/Widget.vue

@@ -87,10 +87,12 @@ limitations under the License. -->
         dashboardStore.setLayer(route.params.layer);
         dashboardStore.setEntity(route.params.entity);
         const { auto, autoPeriod } = config.value;
-
         if (auto) {
           await setDuration();
           appStoreWithOut.setReloadTimer(setInterval(setDuration, autoPeriod * 1000));
+        } else {
+          const duration = JSON.parse(route.params.duration as string);
+          appStoreWithOut.setDuration(duration);
         }
         await setSelector();
         await queryMetrics();

src/views/dashboard/components/WidgetLink.vue

@@ -20,14 +20,9 @@ limitations under the License. -->
     </div>
     <div v-if="hasDuration">
       <label>{{ t("duration") }}</label>
-      <TimePicker
-        :value="[appStore.durationRow.start, appStore.durationRow.end]"
-        position="right"
-        format="YYYY-MM-DD HH:mm"
-        @input="changeTimeRange"
-      />
+      <TimePicker :value="duration" position="right" format="YYYY-MM-DD HH:mm" @input="changeTimeRange" />
     </div>
-    <div v-if="!hasDuration">
+    <div v-else>
       <label>{{ t("auto") }}</label>
       <el-switch class="mr-5" v-model="auto" style="height: 25px" />
       <Selector v-model="freshOpt" :options="RefreshOptions" size="small" />
@@ -72,6 +67,7 @@ limitations under the License. -->
   const auto = ref<boolean>(true);
   const period = ref<number>(6);
   const freshOpt = ref<string>(RefreshOptions[0].value);
+  const duration = ref<string>(JSON.parse(JSON.stringify([appStore.durationRow.start, appStore.durationRow.end])));
 
   function changeTimeRange(val: Date[] | any) {
     dates.value = val;
@@ -127,7 +123,10 @@ limitations under the License. -->
         tips: encodeURIComponent(widget.tips || ""),
       };
     }
-    if (auto.value) {
+    if (hasDuration.value) {
+      opt.auto = 0;
+      opt.autoPeriod = 0;
+    } else {
       const f = RefreshOptions.filter((d: { value: string }) => d.value === freshOpt.value)[0] || {};
       opt.auto = Number(f.value) * 60 * 1000;
       opt.autoPeriod = period.value;

vite.config.ts

@@ -64,7 +64,7 @@ export default ({ mode }: ConfigEnv): UserConfig => {
       preprocessorOptions: {
         //define global scss variable
         scss: {
-          additionalData: `@import "@/styles/light.scss";`,
+          additionalData: `@use "@/styles/light.scss" as *;`,
         },
       },
     },