增加网格设置界面切换时缓存

src/components/FusionSettings/FusionLocale.vue

@@ -61,7 +61,8 @@
                         (val > -1 && val < 1920) || $t('Please enter 0-100'),
                     ]" />
                 </div>
-                <div class="col-3"><span>{{$t('Whether to operate synchronously')}}</span><q-checkbox v-model="auto_sync" /></div>
+                <div class="col-3"><span>{{ $t('Whether to operate synchronously') }}</span><q-checkbox
+                    v-model="auto_sync" /></div>
               </div>
             </div>
           </div>
@@ -163,7 +164,7 @@ export default defineComponent({
       { alpha: 0, p: 0, gamma: 0, isshow: false, value: 0 },
       { alpha: 0, p: 0, gamma: 0, isshow: false, value: 0 },
     ]);
-    const auto_sync=ref(false)
+    const auto_sync = ref(false)
     //正确的 索引编号
     let arr = [1, 0, 2, 3];
     let serverconfig = JSON.parse($store.state.fusion_configuration);
@@ -386,7 +387,7 @@ export default defineComponent({
             array[1].isshow,
             Number(array[1].value)
           );
-          if(auto_sync.value)left_right_auto_add(newVal-oldVal);
+        if (auto_sync.value) left_right_auto_add(newVal - oldVal);
         save_set_cache();
       },
       { deep: true }
@@ -402,7 +403,7 @@ export default defineComponent({
             array[2].isshow,
             Number(array[2].value)
           );
-          if(auto_sync.value)left_right_auto_add(newVal-oldVal);
+        if (auto_sync.value) left_right_auto_add(newVal - oldVal);
         save_set_cache();
       },
       { deep: true }
@@ -450,7 +451,7 @@ export default defineComponent({
             array[1].isshow,
             Number(array[1].value)
           );
-          if(auto_sync.value)left_right_auto_add(0);
+        if (auto_sync.value) left_right_auto_add(0);
         save_set_cache();
       },
       { deep: true }
@@ -466,7 +467,7 @@ export default defineComponent({
             array[2].isshow,
             Number(array[2].value)
           );
-          if(auto_sync.value)left_right_auto_add(0);
+        if (auto_sync.value) left_right_auto_add(0);
         save_set_cache();
       },
       { deep: true }
@@ -547,7 +548,7 @@ export default defineComponent({
         if (ste_status.value == 0) {
           set_cache_tmp[2].value = Number(set_cache_tmp[2].value) + difference
           set_cache_tmp[2].isshow = array[1].isshow
-          set?.SetBlendingOverlap(0, 0, 2, set_cache_tmp[2].isshow , Number(set_cache_tmp[2].value));
+          set?.SetBlendingOverlap(0, 0, 2, set_cache_tmp[2].isshow, Number(set_cache_tmp[2].value));
           set_cache.value[0] = JSON.stringify(set_cache_tmp);
         }
       }

src/components/FusionSettings/GridSettings.vue

@@ -26,7 +26,8 @@
             <div class="col-4 q-pt-sm">
               <div class="row">
                 <div class="col-4"><span>{{ $t('line color') }}</span></div>
-                <div class="col-8 border" @click="isshowhex = true; index = 0" :style="{ 'background-color': color[0] }"></div>
+                <div class="col-8 border" @click="isshowhex = true; index = 0"
+                  :style="{ 'background-color': color[0] }"></div>
               </div>
             </div>
           </div>
@@ -37,7 +38,8 @@
             <div class="col-4 q-pt-sm">
               <div class="row">
                 <div class="col-4"><span>{{ $t('background color') }}</span></div>
-                <div class="col-8 border" @click="isshowhex = true; index = 1" :style="{ 'background-color': color[1] }"></div>
+                <div class="col-8 border" @click="isshowhex = true; index = 1"
+                  :style="{ 'background-color': color[1] }"></div>
               </div>
             </div>
           </div>
@@ -75,17 +77,18 @@
 </template>
 
 <style scoped>
-.border{
+.border {
   border: 1px solid;
 }
 </style>
 
 <script lang="ts">
 import vue3ResizeDrag from "/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue";
-import { defineComponent, ref, reactive } from "vue";
+import { defineComponent, ref, reactive, onBeforeUnmount } from "vue";
 import { useStore } from "src/store";
 import { useI18n } from "vue-i18n";
 import GlobalData from "src/common/GlobalData";
+import { json } from "body-parser";
 
 export default defineComponent({
   name: "ComponentGridSettings",
@@ -155,16 +158,36 @@ export default defineComponent({
         }
       }, 100);
     }
-    const use_server_config =()=>{
+    const use_server_config = () => {
-      let server_conf=JSON.parse($store.state.fusion_configuration).options
+      let server_conf = JSON.parse($store.state.fusion_configuration).options
-      model[0]=Number(server_conf.blending_grids_row)
+      model[0] = Number(server_conf.blending_grids_row)
-      model[1]=Number(server_conf.blending_grids_column)
+      model[1] = Number(server_conf.blending_grids_column)
-      color[0]=server_conf.blending_grids_line_color
+      color[0] = server_conf.blending_grids_line_color
-      RowsColumns[0]=server_conf.blending_grids_hide_row==="false"?false:true
+      RowsColumns[0] = server_conf.blending_grids_hide_row === "false" ? false : true
-      RowsColumns[1]=server_conf.blending_grids_hide_column==="false"?false:true
+      RowsColumns[1] = server_conf.blending_grids_hide_column === "false" ? false : true
-
     }
     use_server_config()
+
+    onBeforeUnmount(() => {
+      set_sessionStorage()
+    });
+    const set_sessionStorage = () => {
+      let tmp = { RowsColumns: RowsColumns, color: color, model: model }
+      sessionStorage.GridSettings = JSON.stringify(tmp)
+    }
+    const get_sessionStorage = () => {
+      let tmp = JSON.parse(sessionStorage.GridSettings)
+      for (let index = 0; index < tmp.RowsColumns.length; index++) {
+        RowsColumns[index] = tmp.RowsColumns[index];
+      }
+      for (let index = 0; index < tmp.color.length; index++) {
+        color[index] = tmp.color[index];
+      }
+      for (let index = 0; index < tmp.model.length; index++) {
+        model[index] = tmp.model[index];
+      }
+    }
+    if (sessionStorage.GridSettings) get_sessionStorage()
     return {
       model,
       options,

src/components/FusionSettingsDialog.vue

@@ -64,7 +64,7 @@
                   ]" />
               </div>
               <div style="min-height: 72vh">
-                <component  :is="options" />
+                <component :is="options" />
               </div>
             </div>
           </div>
@@ -76,12 +76,12 @@
           <span>{{ $t("Whether to hide the desktop") }}</span><q-checkbox style="justify-content: flex-start"
             v-model="hide_desktop_value" @click="send_hide_desktop" />
           <span>{{ $t("disable blending params") }}</span>
-          <q-checkbox style="justify-content: flex-start"
+          <q-checkbox style="justify-content: flex-start" v-model="disable_blending_params"
-            v-model="disable_blending_params" @click="send_disable_blending_params" />
+            @click="send_disable_blending_params" />
           <span>{{ $t("show blending grids") }}</span>
-          <q-checkbox style="justify-content: flex-start"
+          <q-checkbox style="justify-content: flex-start" v-model="show_blending_grids"
-            v-model="show_blending_grids" @click="send_show_blending_grids" />
+            @click="send_show_blending_grids" />
-            <div class="q-space" data-v-39efcd1f=""></div>
+          <div class="q-space" data-v-39efcd1f=""></div>
           <q-btn color="white" @click="resetall" text-color="black" :label="$t('resetall config')" />
           <div class="q-space" data-v-39efcd1f=""></div>
           <q-btn flat :label="$t('Cancel')" no-caps color="primary" v-close-popup
@@ -104,7 +104,7 @@
 </style>
 
 <script lang="ts">
-  import {
+import {
   defineComponent,
   ref,
   Ref,
@@ -112,180 +112,180 @@
   computed,
   onMounted,
   onBeforeMount,
-  } from "vue";
+} from "vue";
-  import { useStore } from "src/store";
+import { useStore } from "src/store";
-  import { useQuasar, copyToClipboard } from "quasar";
+import { useQuasar, copyToClipboard } from "quasar";
-  import { useI18n } from "vue-i18n";
+import { useI18n } from "vue-i18n";
-  import GlobalData from "src/common/GlobalData";
+import GlobalData from "src/common/GlobalData";
-  import { Protocol } from "src/entities/WSProtocol";
+import { Protocol } from "src/entities/WSProtocol";
-  import { EDeviceAttribute } from "src/entities/EDeviceAttribute";
+import { EDeviceAttribute } from "src/entities/EDeviceAttribute";
 
-  import ProjectorItem from "src/components/FusionSettings/ProjectorItem.vue";
+import ProjectorItem from "src/components/FusionSettings/ProjectorItem.vue";
 
-  import FusionLocale from "src/components/FusionSettings/FusionLocale.vue";
+import FusionLocale from "src/components/FusionSettings/FusionLocale.vue";
-  import FourPointCalibration from "src/components/FusionSettings/FourPointCalibration.vue";
+import FourPointCalibration from "src/components/FusionSettings/FourPointCalibration.vue";
-  import GridSettings from "src/components/FusionSettings/GridSettings.vue";
+import GridSettings from "src/components/FusionSettings/GridSettings.vue";
-  import SurfaceCorrection from "src/components/FusionSettings/SurfaceCorrection.vue";
+import SurfaceCorrection from "src/components/FusionSettings/SurfaceCorrection.vue";
-  import DensityCorrection from "src/components/FusionSettings/DensityCorrection.vue";
+import DensityCorrection from "src/components/FusionSettings/DensityCorrection.vue";
 
-  export default defineComponent({
+export default defineComponent({
   name: "ComponentFusionSettingsDialog",
   components: {
-  ProjectorItem,
+    ProjectorItem,
-  FusionLocale,
+    FusionLocale,
-  FourPointCalibration,
+    FourPointCalibration,
-  GridSettings,
+    GridSettings,
-  SurfaceCorrection,
+    SurfaceCorrection,
-  DensityCorrection,
+    DensityCorrection,
   },
   setup() {
-  let set = GlobalData.getInstance().getCurrentClient();
+    let set = GlobalData.getInstance().getCurrentClient();
-  let $store = useStore();
+    let $store = useStore();
-  let $q = useQuasar();
+    let $q = useQuasar();
-  let $t = useI18n();
+    let $t = useI18n();
-  let show_dialog = ref(false);
+    let show_dialog = ref(false);
-  const showDialog = async () => {
+    const showDialog = async () => {
-  show_dialog.value = true;
+      show_dialog.value = true;
-  };
+    };
-  const send_hide_desktop = () => {
+    const send_hide_desktop = () => {
-  set?.SetBlendingOption(hide_desktop_value_id.value, hide_desktop_value.value ? "1" : "0");
+      set?.SetBlendingOption(hide_desktop_value_id.value, hide_desktop_value.value ? "1" : "0");
-  };
+    };
-  const send_disable_blending_params = () => {
+    const send_disable_blending_params = () => {
-  set?.SetBlendingOption(disable_blending_params_id.value, disable_blending_params.value ? "1" : "0");
+      set?.SetBlendingOption(disable_blending_params_id.value, disable_blending_params.value ? "1" : "0");
-  };
+    };
-  const send_show_blending_grids = () => {
+    const send_show_blending_grids = () => {
-  set?.SetBlendingOption(show_blending_grids_id.value, show_blending_grids.value ? "1" : "0");
+      set?.SetBlendingOption(show_blending_grids_id.value, show_blending_grids.value ? "1" : "0");
-  };
+    };
-  const resetall=()=>{
+    const resetall = () => {
-  set?.ResetBlendingConfig()
+      set?.ResetBlendingConfig()
-  }
-  const config = ref({ col: 0, row: 0 });
-  const EnableBlending = ref(false);
-  let optionsstr = ref();
-  optionsstr.value = "FusionLocale";
-  const hide_desktop_value_id = ref("0");
-  const hide_desktop_value = ref(false);
-  const disable_blending_params_id = ref("1");
-  const disable_blending_params = ref(false);
-  const show_blending_grids_id = ref("blending_grids_show");
-  const show_blending_grids = ref(false);
-  const options = computed({
-  get() {
-  return optionsstr.value;
-  },
-  set(newValue) {
-  optionsstr.value = newValue;
-  },
-  });
-  watch(
-  () => EnableBlending,
-  (newVal, oldVal) => {
-  $store.commit("setEnablefusion", newVal.value);
-  set?.EnableBlending(newVal.value);
-  },
-  { deep: true }
-  );
-
-  const erroe = () => {
-  $q.notify({
-  color: "negative",
-  icon: "warning",
-  message: "数据获取失败!",
-  position: "top",
-  timeout: 1500,
-  });
-  };
-  const save = () => {
-  set?.SaveBlendingConfig("");
-  show_dialog.value = false;
-  clear();
-  set?.GetBlendingConfig("").then((res) => {
-  let tmp = JSON.parse(res ? res.config : "");
-  EnableBlending.value = tmp.enable;
-  $store.commit("setEnablefusion", tmp.enable);
-  config.value.col = tmp.col;
-  config.value.row = tmp.row;
-  $store.commit("setfusion_configuration", res?.config);
-  });
-  $store.commit("setSelectedProjector", "0/0");
-  };
-  const getconfig = () => {
-  try {
-  set?.GetBlendingConfig("").then((res) => {
-  let tmp = JSON.parse(res ? res.config : "");
-  $store.commit("setEnablefusion", tmp.enable);
-  $store.commit("setfusion_configuration", res?.config);
-  });
-  } catch (error) { }
-  };
-  const clear = () => {
-  show_blending_grids.value = false;
-  send_show_blending_grids();
-  $store.commit("setSelectedProjector", "0/0");
-  setTimeout(() => {
-  sessionStorage.removeItem("FusionLocale");
-  sessionStorage.removeItem("SurfaceCorrection");
-  sessionStorage.removeItem("DensityCorrection");
-  sessionStorage.removeItem("FourPointCalibration");
-  }, 500);
-  getconfig();
-  };
-
-  onBeforeMount(() => {
-  setTimeout(() => {
-  try {
-  set?.GetBlendingConfig("").then((res) => {
-  let tmp = JSON.parse(res ? res.config : "");
-  EnableBlending.value = tmp.enable;
-  $store.commit("setEnablefusion", tmp.enable);
-  config.value.col = tmp.col;
-  config.value.row = tmp.row;
-  $store.commit("setfusion_configuration", res?.config);
-  });
-  } catch (error) {
-  erroe();
-  }
-  }, 1000);
-  });
-  onMounted(() => {
-  setTimeout(() => {
-  set?.GetBlendingConfig("").then((res) => {
-  let tmp = JSON.parse(res ? res.config : "");
-  //console.log(tmp.options[0][1])
-  let local_options = [
-  [hide_desktop_value_id, hide_desktop_value],
-  [disable_blending_params_id, disable_blending_params],
-  [show_blending_grids_id, show_blending_grids]
-  ];
-  let k:any;
-  for(k in local_options) {
-  let local_opt = local_options[k];
-  let opt = tmp.options[(<any>local_opt[0].value)];
-    if (opt)
-    {
-      local_opt[1].value = ("0" == opt || "false" == opt.toLowerCase() ? false : true);
     }
-  }
+    const config = ref({ col: 0, row: 0 });
-  });
+    const EnableBlending = ref(false);
-  }, 1000);
+    let optionsstr = ref();
-  });
+    optionsstr.value = "FusionLocale";
-  return {
+    const hide_desktop_value_id = ref("0");
-  send_hide_desktop,
+    const hide_desktop_value = ref(false);
-  hide_desktop_value,
+    const disable_blending_params_id = ref("1");
-  send_disable_blending_params,
+    const disable_blending_params = ref(false);
-  disable_blending_params,
+    const show_blending_grids_id = ref("blending_grids_show");
-  send_show_blending_grids,
+    const show_blending_grids = ref(false);
-  show_blending_grids,
+    const options = computed({
-  clear,
+      get() {
-  show_dialog,
+        return optionsstr.value;
-  options,
+      },
-  copyToClipboard,
+      set(newValue) {
-  showDialog,
+        optionsstr.value = newValue;
-  EnableBlending,
+      },
-  config,
+    });
-  save,
+    watch(
-  resetall
+      () => EnableBlending,
-  };
+      (newVal, oldVal) => {
+        $store.commit("setEnablefusion", newVal.value);
+        set?.EnableBlending(newVal.value);
+      },
+      { deep: true }
+    );
+
+    const erroe = () => {
+      $q.notify({
+        color: "negative",
+        icon: "warning",
+        message: "数据获取失败!",
+        position: "top",
+        timeout: 1500,
+      });
+    };
+    const save = () => {
+      set?.SaveBlendingConfig("");
+      show_dialog.value = false;
+      clear();
+      set?.GetBlendingConfig("").then((res) => {
+        let tmp = JSON.parse(res ? res.config : "");
+        EnableBlending.value = tmp.enable;
+        $store.commit("setEnablefusion", tmp.enable);
+        config.value.col = tmp.col;
+        config.value.row = tmp.row;
+        $store.commit("setfusion_configuration", res?.config);
+      });
+      $store.commit("setSelectedProjector", "0/0");
+    };
+    const getconfig = () => {
+      try {
+        set?.GetBlendingConfig("").then((res) => {
+          let tmp = JSON.parse(res ? res.config : "");
+          $store.commit("setEnablefusion", tmp.enable);
+          $store.commit("setfusion_configuration", res?.config);
+        });
+      } catch (error) { }
+    };
+    const clear = () => {
+      show_blending_grids.value = false;
+      send_show_blending_grids();
+      $store.commit("setSelectedProjector", "0/0");
+      setTimeout(() => {
+        sessionStorage.removeItem("FusionLocale");
+        sessionStorage.removeItem("SurfaceCorrection");
+        sessionStorage.removeItem("DensityCorrection");
+        sessionStorage.removeItem("FourPointCalibration");
+        sessionStorage.removeItem("GridSettings");
+      }, 500);
+      getconfig();
+    };
+
+    onBeforeMount(() => {
+      setTimeout(() => {
+        try {
+          set?.GetBlendingConfig("").then((res) => {
+            let tmp = JSON.parse(res ? res.config : "");
+            EnableBlending.value = tmp.enable;
+            $store.commit("setEnablefusion", tmp.enable);
+            config.value.col = tmp.col;
+            config.value.row = tmp.row;
+            $store.commit("setfusion_configuration", res?.config);
+          });
+        } catch (error) {
+          erroe();
+        }
+      }, 1000);
+    });
+    onMounted(() => {
+      setTimeout(() => {
+        set?.GetBlendingConfig("").then((res) => {
+          let tmp = JSON.parse(res ? res.config : "");
+          //console.log(tmp.options[0][1])
+          let local_options = [
+            [hide_desktop_value_id, hide_desktop_value],
+            [disable_blending_params_id, disable_blending_params],
+            [show_blending_grids_id, show_blending_grids]
+          ];
+          let k: any;
+          for (k in local_options) {
+            let local_opt = local_options[k];
+            let opt = tmp.options[(<any>local_opt[0].value)];
+            if (opt) {
+              local_opt[1].value = ("0" == opt || "false" == opt.toLowerCase() ? false : true);
+            }
+          }
+        });
+      }, 1000);
+    });
+    return {
+      send_hide_desktop,
+      hide_desktop_value,
+      send_disable_blending_params,
+      disable_blending_params,
+      send_show_blending_grids,
+      show_blending_grids,
+      clear,
+      show_dialog,
+      options,
+      copyToClipboard,
+      showDialog,
+      EnableBlending,
+      config,
+      save,
+      resetall
+    };
   },
-  });
+});
 </script>