加入融合界面微调功能

src/components/FusionSettings/FusionLocale.vue

@@ -8,30 +8,18 @@
             <div class="col-4 offset-4">
               <div class="row">
                 <div class="col-3">
-                  <q-toggle
+                  <q-toggle class="float-right" v-model="array[0].isshow" label="" />
-                    class="float-right"
-                    v-model="array[0].isshow"
-                    label=""
-                  />
                 </div>
                 <div class="col-6">
-                  <q-input
+                  <q-input filled type="number" :autofocus="group == 0" :bg-color="group == 0 ? 'cyan-1' : ''"
-                    filled
+                    @focus="group = 0" v-model="array[0].value" :label="$t('upper fusion zone parameters')" lazy-rules
-                    type="number"
-                    :autofocus="group == 0"
-                    :bg-color="group == 0 ? 'cyan-1' : ''"
-                    @focus="group = 0"
-                    v-model="array[0].value"
-                    :label="$t('upper fusion zone parameters')"
-                    lazy-rules
                     :rules="[
                       (val) =>
                         (val !== null && val !== '') ||
                         $t('Please enter a number'),
                       (val) =>
                         (val > -1 && val < 1080) || $t('Please enter 0-100'),
-                    ]"
+                    ]" />
-                  />
                 </div>
               </div>
             </div>
@@ -42,60 +30,36 @@
             <div class="col-6">
               <div class="row">
                 <div class="col-3">
-                  <q-toggle
+                  <q-toggle class="float-right" v-model="array[1].isshow" label="" />
-                    class="float-right"
-                    v-model="array[1].isshow"
-                    label=""
-                  />
                 </div>
                 <div class="col-6">
-                  <q-input
+                  <q-input filled type="number" :autofocus="group == 1" :bg-color="group == 1 ? 'cyan-1' : ''"
-                    filled
+                    @focus="group = 1" v-model="array[1].value" :label="$t('Left fusion Band Parameters')" lazy-rules
-                    type="number"
-                    :autofocus="group == 1"
-                    :bg-color="group == 1 ? 'cyan-1' : ''"
-                    @focus="group = 1"
-                    v-model="array[1].value"
-                    :label="$t('Left fusion Band Parameters')"
-                    lazy-rules
                     :rules="[
                       (val) =>
                         (val !== null && val !== '') ||
                         $t('Please enter a number'),
                       (val) =>
                         (val > -1 && val < 1920) || $t('Please enter 0-100'),
-                    ]"
+                    ]" />
-                  />
                 </div>
               </div>
             </div>
             <div class="col-6">
               <div class="row">
                 <div class="col-3">
-                  <q-toggle
+                  <q-toggle class="float-right" v-model="array[2].isshow" label="" />
-                    class="float-right"
-                    v-model="array[2].isshow"
-                    label=""
-                  />
                 </div>
                 <div class="col-6">
-                  <q-input
+                  <q-input filled type="number" :autofocus="group == 2" :bg-color="group == 2 ? 'cyan-1' : ''"
-                    filled
+                    @focus="group = 2" v-model="array[2].value" :label="$t('Right fusion Band Parameters')" lazy-rules
-                    type="number"
-                    :autofocus="group == 2"
-                    :bg-color="group == 2 ? 'cyan-1' : ''"
-                    @focus="group = 2"
-                    v-model="array[2].value"
-                    :label="$t('Right fusion Band Parameters')"
-                    lazy-rules
                     :rules="[
                       (val) =>
                         (val !== null && val !== '') ||
                         $t('Please enter a number'),
                       (val) =>
                         (val > -1 && val < 1920) || $t('Please enter 0-100'),
-                    ]"
+                    ]" />
-                  />
                 </div>
               </div>
             </div>
@@ -106,30 +70,18 @@
             <div class="col-4 offset-4">
               <div class="row">
                 <div class="col-3">
-                  <q-toggle
+                  <q-toggle class="float-right" v-model="array[3].isshow" label="" />
-                    class="float-right"
-                    v-model="array[3].isshow"
-                    label=""
-                  />
                 </div>
                 <div class="col-6">
-                  <q-input
+                  <q-input filled type="number" :autofocus="group == 3" :bg-color="group == 3 ? 'cyan-1' : ''"
-                    filled
+                    @focus="group = 3" v-model="array[3].value" :label="$t('Lower fusion Zone Parameters')" lazy-rules
-                    type="number"
-                    :autofocus="group == 3"
-                    :bg-color="group == 3 ? 'cyan-1' : ''"
-                    @focus="group = 3"
-                    v-model="array[3].value"
-                    :label="$t('Lower fusion Zone Parameters')"
-                    lazy-rules
                     :rules="[
                       (val) =>
                         (val !== null && val !== '') ||
                         $t('Please enter a number'),
                       (val) =>
                         (val > -1 && val < 1080) || $t('Please enter 0-100'),
-                    ]"
+                    ]" />
-                  />
                 </div>
               </div>
             </div>
@@ -141,59 +93,33 @@
       <p class="text-center">{{ $t("Set Fusion Band Parameters") }}</p>
       <div style="display: flex; justify-content: space-evenly">
         <div>
-          <q-slider
+          <div><q-icon size="1.5rem" name="arrow_upward" @click="add('alpha')"></q-icon></div>
-            v-model="array[group].alpha"
+          <q-slider v-model="array[group].alpha" :min="0.0" @change="chang('alpha')" :max="1" :step="0.01" color="green"
-            :min="0.0"
+            vertical reverse label-always />
-            @change="chang('alpha')"
+          <div><q-icon size="1.5rem" name="south"  @click="reduce('alpha')"></q-icon></div>
-            :max="1"
-            :step="0.01"
-            color="green"
-            vertical
-            reverse
-            label-always
-          />
           <p class="text-center">alpha</p>
         </div>
 
         <div>
-          <q-slider
+          <div><q-icon size="1.5rem" name="arrow_upward" @click="add('p')"></q-icon></div>
-            v-model="array[group].p"
+          <q-slider v-model="array[group].p" :min="0" @change="chang('p')" :max="2.5" :step="0.01" color="green"
-            :min="0"
+            vertical reverse label-always />
-            @change="chang('p')"
+          <div><q-icon size="1.5rem" name="south"  @click="reduce('p')"></q-icon></div>
-            :max="2.5"
-            :step="0.01"
-            color="green"
-            vertical
-            reverse
-            label-always
-          />
           <p class="text-center">p</p>
         </div>
 
         <div>
-          <q-slider
+          <div><q-icon size="1.5rem" name="arrow_upward" @click="add('gamma')" ></q-icon></div>
-            v-model="array[group].gamma"
+          <q-slider v-model="array[group].gamma" :min="0" @change="chang('gamma')" :max="2.5" :step="0.01" color="green"
-            :min="0"
+            vertical reverse label-always />
-            @change="chang('gamma')"
+          <div><q-icon size="1.5rem" name="south" @click="reduce('gamma')"></q-icon></div>
-            :max="2.5"
-            :step="0.01"
-            color="green"
-            vertical
-            reverse
-            label-always
-          />
           <p class="text-center">gamma</p>
         </div>
       </div>
     </div>
   </div>
   <div>
-    <q-btn
+    <q-btn color="white" @click="resetall" text-color="black" :label="$t('resetall')" />
-      color="white"
-      @click="resetall"
-      text-color="black"
-      :label="$t('resetall')"
-    />
   </div>
 </template>
 
@@ -218,6 +144,7 @@ import { useStore } from "src/store";
 import { useI18n } from "vue-i18n";
 import GlobalData from "src/common/GlobalData";
 import { number } from "@intlify/core-base";
+import { switchCase } from "@babel/types";
 
 export default defineComponent({
   name: "ComponentFusionLocale",
@@ -244,6 +171,40 @@ export default defineComponent({
         $store.getters.GetTheCurrentlySelectedCamera[1]
       );
     });
+    const add = (type: string) => {
+      let tmp:Number;
+      tmp=0.01;
+      switch (type) {
+        case "alpha":
+        array[group.value].alpha=Number((array[group.value].alpha+=tmp).toFixed(2))
+          break;
+        case "p":
+        array[group.value].p=Number((array[group.value].p+=tmp).toFixed(2))
+          break;
+        case "gamma":
+        array[group.value].gamma=Number((array[group.value].gamma+=tmp).toFixed(2))
+          break;
+        default:
+          break;
+      }
+    }
+    const reduce = (type: string) => {
+      let tmp:Number;
+      tmp=-0.01;
+      switch (type) {
+        case "alpha":
+        array[group.value].alpha=Number((array[group.value].alpha+=tmp).toFixed(2))
+          break;
+        case "p":
+        array[group.value].p=Number((array[group.value].p+=tmp).toFixed(2))
+          break;
+        case "gamma":
+        array[group.value].gamma=Number((array[group.value].gamma+=tmp).toFixed(2))
+          break;
+        default:
+          break;
+      }
+    }
     const ste_status = ref(0);
     const use_set_cache = () => {
       if (set_cache.value[selectedprojector.value] != null) {
@@ -357,9 +318,9 @@ export default defineComponent({
       ste_status.value = 1;
       config = JSON.parse(JSON.stringify(fortmp));
       for (let index = 0; index < array.length - 1; index++) {
-        array[arr[index]].gamma = config.params[index].gamma.toFixed(2);
+        array[arr[index]].gamma = Number(config.params[index].gamma.toFixed(2));
-        array[arr[index]].alpha = config.params[index].alpha.toFixed(2);
+        array[arr[index]].alpha = Number(config.params[index].alpha.toFixed(2));
-        array[arr[index]].p = config.params[index].power.toFixed(2);
+        array[arr[index]].p = Number(config.params[index].power.toFixed(2));
         array[arr[index]].isshow = config.params[index].enable;
         array[arr[index]].value = Number(config.params[index].size);
       }
@@ -371,9 +332,9 @@ export default defineComponent({
     };
     const startconfig = () => {
       for (let index = 0; index < array.length - 1; index++) {
-        array[arr[index]].gamma = config.params[index].gamma.toFixed(2);
+        array[arr[index]].gamma = Number(config.params[index].gamma.toFixed(2));
-        array[arr[index]].alpha = config.params[index].alpha.toFixed(2);
+        array[arr[index]].alpha = Number(config.params[index].alpha.toFixed(2));
-        array[arr[index]].p = config.params[index].power.toFixed(2);
+        array[arr[index]].p = Number(config.params[index].power.toFixed(2));
         array[arr[index]].isshow = config.params[index].enable;
         array[arr[index]].value = Number(config.params[index].size);
       }
@@ -551,6 +512,8 @@ export default defineComponent({
       selectedprojector,
       resetall,
       set_cache,
+      reduce,
+      add
     };
   },
 });