魔墙添加缩放功能

src/components/AdvancedDebugDialog.vue

@@ -69,15 +69,7 @@
                   :disable="loading"
                 />
               </q-item-section>
-              <q-item-section avatar>
+
-                <q-btn
-                  @click="setDeviceAttribute"
-                  :label="$t('commit')"
-                  no-caps
-                  outline
-                  color="primary"
-                />
-              </q-item-section>
             </q-item>
             <q-item>
               <q-item-section avatar></q-item-section>
@@ -85,12 +77,33 @@
                 <q-checkbox
                   v-model="function_custom_ISV"
                   :label="$t('Custom ISV')"
-                  class="offset-md-1 col"
                   color="cyan"
+                  class="col"
                   :loading="loading"
                   :disable="loading"
                 />
               </q-item-section>
+
+              <q-item-section>
+                <q-checkbox
+                  v-model="function_magic_wall"
+
+                  :label="$t('magic wall')"
+                  color="cyan"
+                  class="offset-md-1 col"
+                  :loading="loading"
+                  :disable="loading"
+                />
+              </q-item-section>
+              <q-item-section avatar>
+                <q-btn
+                  @click="setDeviceAttribute"
+                  :label="$t('commit')"
+                  no-caps
+                  outline
+                  color="primary"
+                />
+              </q-item-section>
             </q-item>
             <q-item>
               <q-item-section avatar>
@@ -198,6 +211,9 @@ export default defineComponent({
     const function_mirroring_output = ref(
       $store.state.custom_defines.function_mirroring_output
     );
+    const function_magic_wall = ref(
+      $store.state.custom_defines.function_magic_wall
+    );
     const target_language = ref("zh-CN");
 
     return {
@@ -206,6 +222,7 @@ export default defineComponent({
       function_center_control,
       function_output_board,
       function_custom_ISV,
+      function_magic_wall,
       function_mirroring_output,
       target_language,
 
@@ -219,6 +236,8 @@ export default defineComponent({
           $store.state.custom_defines.function_output_board;
         function_mirroring_output.value =
           $store.state.custom_defines.function_mirroring_output;
+        function_magic_wall.value =
+          $store.state.custom_defines.function_magic_wall;
       },
       resetData() {
         loading.value = false;
@@ -227,6 +246,7 @@ export default defineComponent({
         function_output_board.value = false;
         function_mirroring_output.value = false;
         function_custom_ISV.value = false;
+        function_magic_wall.value=false;
       },
 
       restartDevice() {
@@ -319,6 +339,9 @@ export default defineComponent({
         if (function_custom_ISV.value) {
           attribute |= EDeviceAttribute.CustomISV;
         }
+        if (function_magic_wall.value) {
+            attribute |= EDeviceAttribute.ProductMagicWall;
+        }
 
         GlobalData.getInstance()
           .getCurrentClient()

src/components/ControlPanelDialog.vue

@@ -66,10 +66,8 @@
                     </q-item-section>
                     <q-item-section>
                       <q-input v-if="(current_index > -1)" type="number" :min="min_x()"
-                        v-model="test_monitor_wall[current_index].centerx" 
+                        v-model="test_monitor_wall[current_index].centerx" @update:model-value="center_x()"
-                        @update:model-value="center_x()"
+                        :max="max_x()" :rules="[
-                        :max="max_x()"
-                        :rules="[
                           (val) =>
                             (val != null &&
                               val != undefined &&
@@ -93,6 +91,7 @@
                 </div>
                 <br />
 
+
                 <div class="row ">
                   <q-item>
                     <q-item-section avatar>
@@ -100,9 +99,7 @@
                     </q-item-section>
                     <q-item-section>
                       <q-input v-if="(current_index > -1)" :hint="''" type="number" :min="min_y()" :max="max_y()"
-                        v-model="test_monitor_wall[current_index].centery" 
+                        v-model="test_monitor_wall[current_index].centery" @update:model-value="center_y()" :rules="[
-                        @update:model-value="center_y()"
-                        :rules="[
                           (val) =>
                             (val != null &&
                               val != undefined &&
@@ -129,9 +126,14 @@
 
               <q-card-section @dragenter="onDragEnter" @dragleave="onDragLeave" @dragover="onDragOver" @drop="onDrop"
                 style="max-height: 80vh; width: 55vw ; position: relative;">
-                <div class="text-h6">{{ $t("topology diagram") }}</div>
+                <div class="text-h6 row">
+                  <div for="" class="col-1"> 缩放</div>
+                  <q-slider class="col" style="font-size:0.7rem" v-model="percenter"
+                    @update:model-value="changePercenter()" label :label-value="percenter" markers
+                    switch-marker-labels-side label-always :min="0.1" :max="2" :step="0.1" />
+                </div>
                 <div style="position: absolute;  height: 85%; width: 95%; text-align: center;"
-                  :class="$store.state.power_state ? 'wall' : ''"  >
+                  :class="$store.state.power_state ? 'wall' : ''">
                   <div class="row" v-for="i in (64 / 8)" :key="i" style="height:12.5%;align-items: center;"
                     :class="(i % 2) == 0 ? 'wall_row' : ''">
                     <div class="col" v-for="j in 8" :key="j">
@@ -141,18 +143,15 @@
                 </div>
                 <div ref="wall" v-if="$store.state.power_state"
                   style="position: absolute;  height: 85%; width: 95%; overflow: hidden;" @click="canel_active()">
-                  <div v-for=" (item, index) of test_monitor_wall"  @click.stop="Unchecked==false">
+                  <div v-for=" (item, index) of test_monitor_wall" @click.stop="Unchecked == false">
                     <vue3-resize-drag v-if="item.isShow" :w="item.w" :h="item.h" :x="parseInt(item.currentx.toString())"
-                      :y="parseInt(item.currenty.toString())"
+                      :y="parseInt(item.currenty.toString())" :isActive="true" :isGuide="(true && item.angle == 0)"
-                      :isActive="item.active" :isGuide="(true && item.angle == 0)" :rotate="parseInt(item.angle.toString())"
+                      :rotate="parseInt(item.angle.toString())" :is-resizable="false" :resizeIconSize="10"
-                      :is-resizable="false" :resizeIconSize="10"
                       style="background-color: grey; text-align: center;position: absolute; "
                       @moveHandler="moveingMonitor(item, $event, index)" @moveEndHandler="moveMonitor(item, $event)"
-                      @mousedown="activeMouseDown(item, index)" @rotateHandler="rotateMonitor(item, $event)"
+                      @mousedown="activeMouseDown(item, index)" :z-index="item.active ? 99 : 0">
-                      :z-index="item.active ? 99 : 0">
                       <div class="full-height full-width" :class="item.active ? 'monitor_selected' : ''"
-                        style="text-align:center;"
+                        style="text-align:center;" :style="{ lineHeight: show_box_line_height(item.h) }">
-                        :style="{ lineHeight: show_box_line_height(item.h) }">
                         <q-popup-proxy context-menu>
                           <q-list>
                             <q-item clickable v-close-popup>
@@ -188,7 +187,7 @@
             <q-separator></q-separator>
             <q-card-section horizontal>
               <q-list key="uuid" class=" full-width">
-                <div v-for="item in (Math.ceil(test_monitor_list.length / 4))">
+                <div v-for="item in (Math.ceil(test_monitor_list.length / 4))" class="row justify-around">
                   <div v-for="(j) in 4" style="display:inline-block"
                     v-if="(item < test_monitor_list.length / 4 || (test_monitor_list.length % 4 == 0))"
                     :style="{ lineHeight: box_height(item, j) }">
@@ -273,12 +272,14 @@ class test_monitor {
   active = false;
   start_x = 0;
   start_y = 0;
+  InitialW = 0;
+  InitialH = 0;
   w = 0;
   h = 0;
   currentx = 0;
   currenty = 0;
-  centerx=0;
+  centerx = 0;
-  centery=0;
+  centery = 0;
   angle = 0;
   id = 0;
   resize = 0;
@@ -293,13 +294,15 @@ class test_monitor {
     this.h = 0;
     this.currentx = 0;
     this.currenty = 0;
-    this.centerx=0;
+    this.centerx = 0;
-    this.centery=0;
+    this.centery = 0;
     this.angle = 0;
     this.id = 0;
     this.isHide = false;//列表隐藏
     this.isShow = false;//墙显示
     this.resize = 0;
+    this.InitialW = 0;
+    this.InitialW = 0;
   }
   constructor(id: number, uuid: string, w: number, h: number, resize: number) {
     this.reset();
@@ -334,7 +337,10 @@ export default defineComponent({
 
     const aw = 128; const ah = 72;
     const bw = 160; const bh = 90;
-    const ar = 0.2; const br = 0.6;
+    //调整与背景的百分比
+    const percenter = ref(1);
+    const ar = 0.5;
+    const br = 0.6;
     let test_monitor_list: Ref<test_monitor[]> = ref([
       new test_monitor(0, "01", aw, ah, ar),
       new test_monitor(1, "02", aw, ah, ar),
@@ -355,7 +361,6 @@ export default defineComponent({
       left: number;
       top: number;
       angle: number;
-
     };
     let showMonitor = reactive({
       x: 0,
@@ -365,65 +370,65 @@ export default defineComponent({
       active: false
     });
     let test_monitor_wall: Ref<test_monitor[]> = ref([]);
-    const set_x=()=>{
+    const set_x = () => {
-        const wall_dom = wall.value
-        const item = test_monitor_wall.value[current_index.value]
-        const rx: number = item.currentx + item.w;
-        if (wall_dom) {
-          if (rx > wall_dom.offsetWidth) {
-            item.currentx = Math.round(wall_dom.offsetWidth - item.w)
-            return parseInt(item.currentx.toString());
-          }else{
-            return item.currentx
-          }
-        }
-        
-    };
-    const min_x=()=>{
       const wall_dom = wall.value
       const item = test_monitor_wall.value[current_index.value]
-        if (wall_dom) {
+      const rx: number = item.currentx + item.w;
-          return Math.floor(item.w/2)
+      if (wall_dom) {
+        if (rx > wall_dom.offsetWidth) {
+          item.currentx = Math.round(wall_dom.offsetWidth - item.w)
+          return parseInt(item.currentx.toString());
+        } else {
+          return item.currentx
         }
+      }
+
     };
-    const max_x=()=>{
+    const min_x = () => {
       const wall_dom = wall.value
-        const item = test_monitor_wall.value[current_index.value]
+      const item = test_monitor_wall.value[current_index.value]
-        if (wall_dom) {
+      if (wall_dom) {
-          return Math.round(wall_dom.offsetWidth -item.w/2)
+        return Math.floor(item.w / 2)
-        }
+      }
     };
-    const set_y=()=>{
+    const max_x = () => {
-       //输入框正向溢出
-        const wall_dom = wall.value
-        const item = test_monitor_wall.value[current_index.value]
-        const ry: number = item.currenty + item.h;
-        if (wall_dom) {
-          if (ry > wall_dom.offsetHeight) {
-            item.currenty = Math.round(wall_dom.offsetHeight - item.h)
-            return parseInt(item.currenty.toString());
-          }else{
-            return parseInt(item.currenty.toString());
-          }
-        }
-        
-    };
-    const min_y=()=>{
       const wall_dom = wall.value
-        const item = test_monitor_wall.value[current_index.value]
+      const item = test_monitor_wall.value[current_index.value]
-        if (wall_dom) {
+      if (wall_dom) {
-          return Math.floor(item.h/2)
+        return Math.round(wall_dom.offsetWidth - item.w / 2)
-        }
+      }
     };
-    const max_y=()=>{
+    const set_y = () => {
-        const wall_dom = wall.value
+      //输入框正向溢出
-        const item = test_monitor_wall.value[current_index.value]
+      const wall_dom = wall.value
-        if (wall_dom) {
+      const item = test_monitor_wall.value[current_index.value]
-          return Math.round(wall_dom.offsetHeight - item.h/2)
+      const ry: number = item.currenty + item.h;
+      if (wall_dom) {
+        if (ry > wall_dom.offsetHeight) {
+          item.currenty = Math.round(wall_dom.offsetHeight - item.h)
+          return parseInt(item.currenty.toString());
+        } else {
+          return parseInt(item.currenty.toString());
         }
+      }
     };
-    let Unchecked=ref(false);
+    const min_y = () => {
+      const wall_dom = wall.value
+      const item = test_monitor_wall.value[current_index.value]
+      if (wall_dom) {
+        return Math.floor(item.h / 2)
+      }
+    };
+    const max_y = () => {
+      const wall_dom = wall.value
+      const item = test_monitor_wall.value[current_index.value]
+      if (wall_dom) {
+        return Math.round(wall_dom.offsetHeight - item.h / 2)
+      }
+    };
+    let Unchecked = ref(false);
     const moveingMonitor = (item: test_monitor, rect: show__Rect, index: number) => {
+      item.active = true;
       if (item.active) {
         test_monitor_wall.value.forEach(element => {
           element.active = false
@@ -431,47 +436,48 @@ export default defineComponent({
       }
       const wall_dom = wall.value
       if (wall_dom) {
-        item.h = wall_dom.offsetHeight * item.resize;
+        item.h = item.InitialH * percenter.value;
-        item.w = wall_dom.offsetWidth * item.resize;
+        item.w = item.InitialW * percenter.value;
       }
       item.active = true;
       item.currentx = parseInt(rect.left.toString())
       item.currenty = parseInt(rect.top.toString())
-      item.centerx=Math.round(item.currentx+item.w/2)
+      item.centerx = Math.round(item.currentx + item.w / 2)
-      item.centery=Math.round(item.currenty+item.h/2)
+      item.centery = Math.round(item.currenty + item.h / 2)
       if (Number.isNaN(rect.left || rect.left < 0)) {
         item.currentx = 0
       }
     };
-    const rotateMonitor = (item: test_monitor, rect: show__Rect) => {
+
-    };
     const moveMonitor = (item: test_monitor, rect: show__Rect) => {
       //计算是否超出，然后放回
       const wall_dom = wall.value
       if (rect.left < 0) {
         item.currentx = 0
-      } else if(wall_dom&&rect.left>wall_dom.offsetWidth-item.w) {
+      } else if (wall_dom && rect.left > wall_dom.offsetWidth - item.w) {
-        item.currentx =set_x()??0;
+        item.currentx = set_x() ?? 0;
-      }else{
+      } else {
         item.currentx = parseInt(rect.left.toString())
       }
       if (rect.top < 0) {
         item.currenty = 0
-      } else if(wall.value&&rect.top>wall.value.offsetHeight-item.h){
+      } else if (wall.value && rect.top > wall.value.offsetHeight - item.h) {
-        item.currenty =set_y()??0;
+        item.currenty = set_y() ?? 0;
-      }else{
+      } else {
         item.currenty = parseInt(rect.top.toString())
       }
-      item.centerx=Math.floor(item.currentx+item.w/2)
+      item.centerx = Math.floor(item.currentx + item.w / 2)
-      item.centery=Math.floor(item.currenty+item.h/2)
+      item.centery = Math.floor(item.currenty + item.h / 2)
     };
     let test_delete_flag = false;
     EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
       const wall_dom = wall.value
       if (wall_dom) {
         test_monitor_wall.value.forEach((element) => {
-          element.h = wall_dom.offsetHeight * element.resize;
+          element.InitialH = wall_dom.offsetHeight * element.resize;
-          element.w = wall_dom.offsetWidth * element.resize;
+          element.InitialW = wall_dom.offsetWidth * element.resize;
+          element.h = element.InitialH * percenter.value;
+          element.w = element.InitialW * percenter.value;
         })
       }
     });
@@ -483,6 +489,7 @@ export default defineComponent({
       current_index,
       test_monitor_list,
       test_monitor_wall,
+      percenter,
       wall,
       set_x,
       min_x,
@@ -492,7 +499,6 @@ export default defineComponent({
       max_y,
       moveMonitor,
       moveingMonitor,
-      rotateMonitor,
       loga(a: any) {
         console.log(a);
       },
@@ -509,10 +515,14 @@ export default defineComponent({
               extend(true, item, test_monitor_list.value[element.index])
               item.currentx = Math.round(element.lt.x * wall_dom.offsetWidth);
               item.currenty = Math.round(element.lt.y * wall_dom.offsetHeight);
-              item.h = wall_dom.offsetHeight * element.h;
+              percenter.value = parseFloat(element.percenter.toString());
-              item.w = wall_dom.offsetWidth * element.w;
+              console.log(element.percenter)
-              item.centerx=Math.floor(item.currentx+item.w/2);
+              item.InitialH = element.initial_h;
-              item.centery=Math.floor(item.currenty+item.h/2);
+              item.InitialW = element.initial_w;
+              item.h = parseInt((item.InitialH * percenter.value).toString());
+              item.w = parseInt((item.InitialW * percenter.value).toString());
+              item.centerx = Math.floor(item.currentx + item.w / 2);
+              item.centery = Math.floor(item.currenty + item.h / 2);
               item.angle = element.angle
               item.isShow = true;
               test_monitor_wall.value.push(item);
@@ -534,6 +544,7 @@ export default defineComponent({
       resetData() {
         test_monitor_wall.value = [];
         current_index.value = -1;
+        percenter.value = 1
         test_monitor_list.value.forEach(element => {
           element.isHide = false;
         })
@@ -546,17 +557,24 @@ export default defineComponent({
         if (client && wall_dom) {
           const response = await client.getMagicWallConfig();
           const cloud_monitor_list = new MagicWallConfig();
-          cloud_monitor_list.magic_wall_enable = response?.config.magic_wall_enable ?? true;
+          cloud_monitor_list.magic_wall_enable = true;//response?.config.magic_wall_enable ?? true;
-          cloud_monitor_list.col = response?.config.col ?? 2;
+          cloud_monitor_list.col = parseInt((GlobalData.getInstance().applicationConfig?.wall_col ?? 2).toString()) // response?.config.col ?? 2;
-          cloud_monitor_list.row = response?.config.row ?? 2;
+          cloud_monitor_list.row = parseInt((GlobalData.getInstance().applicationConfig?.wall_row ?? 2).toString())  // response?.config.row ?? 2;
           let tep_width = 0;
           test_monitor_wall.value.forEach((element, index) => {
             if (element.isShow) {
               cloud_monitor_list.windows.push({
-                index: element.id, lt: new PointF(element.currentx / wall_dom.offsetWidth, element.currenty / wall_dom.offsetHeight), h: element.h / wall_dom.offsetHeight, w: element.w / wall_dom.offsetWidth, angle: parseInt(element.angle.toString())
+                index: element.id,
+                lt: new PointF(element.currentx / wall_dom.offsetWidth, element.currenty / wall_dom.offsetHeight),
+                h: element.h / wall_dom.offsetHeight,
+                w: element.w / wall_dom.offsetWidth,
+                angle: parseInt(element.angle.toString()),
+                initial_h: element.InitialH, initial_w: element.InitialW,
+                percenter: percenter.value,
               })
             }
           });
+          console.log("set")
           const setMagic = await client.setMagicWallConfig(cloud_monitor_list);
           $q.notify({
             color: setMagic?.success ? "positive" : "negative",
@@ -575,7 +593,7 @@ export default defineComponent({
       },
       activeMouseDown(item: test_monitor, index: number) {
         item.active = true;
-        Unchecked.value=false;
+        Unchecked.value = false;
         if (item.active) {
           test_monitor_wall.value.forEach(element => {
             element.active = false
@@ -623,18 +641,19 @@ export default defineComponent({
           const wall_dom = wall.value
           item.isShow = true;
           if (wall_dom) {
-            item.h = wall_dom?.offsetHeight * item.resize;
+            item.InitialH = wall_dom?.offsetHeight * (item.resize);
-            item.w = wall_dom?.offsetWidth * item.resize;
+            item.InitialW = wall_dom?.offsetWidth * (item.resize);
-            if(item.currentx> wall_dom?.offsetWidth-item.w){
+            item.h = item.InitialH * percenter.value;
-              item.currentx=Math.round(wall_dom?.offsetWidth-item.w)
+            item.w = item.InitialW * percenter.value;
+            if (item.currentx > wall_dom?.offsetWidth - item.w) {
+              item.currentx = Math.round(wall_dom?.offsetWidth - item.w)
             }
-            if(item.currenty> wall_dom?.offsetHeight-item.h){
+            if (item.currenty > wall_dom?.offsetHeight - item.h) {
-              item.currenty=Math.round(wall_dom?.offsetHeight-item.h)
+              item.currenty = Math.round(wall_dom?.offsetHeight - item.h)
             }
-            item.centerx=Math.round(item.currentx+item.w/2);
+            item.centerx = Math.round(item.currentx + item.w / 2);
-            item.centery=Math.round(item.currenty+item.h/2);
+            item.centery = Math.round(item.currenty + item.h / 2);
           }
-          
           if (test_monitor_wall.value.indexOf(item) == -1) {
             test_monitor_wall.value.push(item);
             test_delete_flag = true;
@@ -704,22 +723,34 @@ export default defineComponent({
       show_box_line_height(height: number) {
         return height * 0.5 + "px"
       },
-      center_x(){
+      center_x() {
         const wall_dom = wall.value
         const item = test_monitor_wall.value[current_index.value]
-        item.currentx=Math.round(item.centerx-item.w/2);
+        item.currentx = Math.round(item.centerx - item.w / 2);
       },
-      center_y(){
+      center_y() {
         const wall_dom = wall.value
         const item = test_monitor_wall.value[current_index.value]
-        item.currenty=Math.round(item.centery-item.h/2);
+        item.currenty = Math.round(item.centery - item.h / 2);
       },
-      canel_active(){
+      changePercenter() {
-        Unchecked.value=true;
+        let tep = false;
-        if(Unchecked){
+        test_monitor_wall.value.forEach((element) => {
-          current_index.value=-1
+          element.w = element.InitialW * percenter.value;
-          test_monitor_wall.value.forEach((element)=>{
+          element.h = element.InitialH * percenter.value;
-            element.active=false;
+          element.centerx = element.currentx + Math.floor(element.w / 2);
+          element.centery = element.currenty + Math.floor(element.h / 2);
+          if (element.isShow) {
+            tep = true;
+          }
+        })
+      },
+      canel_active() {
+        Unchecked.value = true;
+        if (Unchecked) {
+          current_index.value = -1
+          test_monitor_wall.value.forEach((element) => {
+            element.active = false;
           })
         }
       },

src/components/RegisterDialog.vue

@@ -303,6 +303,15 @@
                     :loading="loading"
                     :disable="loading"
                   />
+                  <q-checkbox
+                  v-model="function_magic_wall"
+
+                  :label="$t('magic wall')"
+                  color="cyan"
+                  class="offset-md-1 col"
+                  :loading="loading"
+                  :disable="loading"
+                />
                 </div>
               </q-item-section>
             </q-item>
@@ -419,6 +428,7 @@ export default defineComponent({
     const function_output_board = ref(false);
     const function_mirroring_output = ref(false);
     const function_custom_ISV = ref(false);
+    const function_magic_wall = ref(false);
 
     const trial_days = ref(0);
     const last_days = ref(0);
@@ -441,6 +451,7 @@ export default defineComponent({
       function_output_board.value = false;
       function_mirroring_output.value = false;
       function_custom_ISV.value = false;
+      function_magic_wall.value=false;
     };
 
     const showDialog = async () => {
@@ -477,6 +488,9 @@ export default defineComponent({
       const function_mirroring_output = ref(
         $store.state.custom_defines.function_mirroring_output
       );
+      const function_magic_wall = ref(
+      $store.state.custom_defines.function_magic_wall
+    );
     };
 
     return {
@@ -498,6 +512,7 @@ export default defineComponent({
       server_address,
       function_output_board,
       function_custom_ISV,
+      function_magic_wall,
       function_center_control,
       function_mirroring_output,
       target_language,
@@ -626,6 +641,9 @@ export default defineComponent({
             if (function_custom_ISV.value) {
               attribute |= EDeviceAttribute.CustomISV;
             }
+            if (function_magic_wall.value) {
+            attribute |= EDeviceAttribute.ProductMagicWall;
+        }
 
             GlobalData.getInstance()
               .getCurrentClient()

src/entities/EDeviceAttribute.ts

@@ -22,7 +22,7 @@ export enum EDeviceAttribute {
   Reserve18 = 0x00040000,
   Reserve19 = 0x00080000,
   Reserve20 = 0x00100000,
-  Reserve21 = 0x00200000,
+  ProductMagicWall = 0x00200000,
   Reserve22 = 0x00400000,
   Reserve23 = 0x00800000,
   Reserve24 = 0x01000000,

src/entities/RectF.ts

@@ -34,4 +34,7 @@ export class RotatedRectF extends RectF {
 }
 export class RotatedRectFWithIndex extends RotatedRectF{
   index:number=0;
+  percenter:number=0;
+  initial_h:number=0;
+  initial_w:number=0;
 }

src/i18n/en-US/index.ts

@@ -57,6 +57,7 @@ export default {
   Accept: "Accept",
   "move speed": "Move Speed",
   "y offset": "Y Offset",
+  "the number must be greater than 0":"the number must be greater than 0",
   "pos x": "X Position",
   "pos y": "Y Position",
   width: "Width",
@@ -401,7 +402,7 @@ export default {
   "Please input vaild host. example: 192.168.1.1 or 192.168.1.1:8080":
     "Please Input Vaild Host. Example: 192.168.1.1 or 192.168.1.1:8080",
   "equipment data": "Equipment Data",
-  "set magic wall":"Set Magic wall Success",
+  "set magic wall":"Set Magic wall",
   "magic wall":"Magic Wall",
   "angle":"Angle",
   "topology diagram":"Topology Diagram",

src/i18n/zh-CN/index.ts

@@ -499,7 +499,7 @@ export default {
   Warning: "警告",
   function: "功能",
   commit: "提交",
-  "set device function": "设置设备功能成功",
+  "set device function": "设置设备功能",
   operator_play_signal_source: "信号源",
   "toolbar edit window rect": "窗口大小",
   exit: "退出",

src/pages/TopToolBar.vue

@@ -318,6 +318,7 @@
             :disable="!$store.state.power_state"
             v-close-popup
             @click="$refs.control_panel_dialog.showDialog()"
+            v-if="$store.state.custom_defines.function_magic_wall"
           >
             <q-item-section avatar>
               <!-- <q-icon name="image" /> -->

src/store/index.ts

@@ -37,6 +37,7 @@ export class CustomDefines {
   function_output_board = false;
   function_center_control = false;
   function_mirroring_output = false;
+  function_magic_wall=false;
 }
 
 export interface StateInterface {
@@ -389,6 +390,8 @@ export default store(function (/* { ssrContext } */) {
             (state.device_attribute & EDeviceAttribute.CenterControl) != 0;
           state.custom_defines.function_mirroring_output =
             (state.device_attribute & EDeviceAttribute.MirroringOutput) != 0;
+          state.custom_defines.function_magic_wall =
+            (state.device_attribute & EDeviceAttribute.ProductMagicWall) != 0;
         }
       },
       setAvancedDebug(state: StateInterface, playload?: any) {