添加播放，停止，静音，轮询，模式，预案图标。

src/pad/BottomBar.vue

@@ -72,19 +72,23 @@
           <q-btn
             icon="img:pad/play_control/play_prev_icon.png"
             flat
-            size="1.1rem"
+            size="1.2rem"
             class="col-auto"
           />
           <q-btn
-            icon="img:pad/play_control/pause_icon.png"
+            :icon="
+              paused
+                ? 'img:pad/play_control/pause_icon.png'
+                : 'img:pad/play_control/play_icon.png'
+            "
             flat
-            size="2.3rem"
+            size="2.4rem"
             class="col-auto q-mx-xs"
           />
           <q-btn
             icon="img:pad/play_control/play_next_icon.png"
             flat
-            size="1.1rem"
+            size="1.2rem"
             class="col-auto"
           />
           <q-space />
@@ -94,19 +98,23 @@
           <q-btn
             icon="img:pad/play_control/volume_down_icon.png"
             flat
-            size="1.1rem"
+            size="1.2rem"
             class="col-auto"
           />
           <q-btn
-            icon="img:pad/play_control/unmute_icon.png"
+            :icon="
+              muted
+                ? 'img:pad/play_control/unmute_icon.png'
+                : 'img:pad/play_control/mute_icon.png'
+            "
             flat
-            size="1.1rem"
+            size="1.2rem"
             class="col-auto q-mx-xs"
           />
           <q-btn
             icon="img:pad/play_control/volume_up_icon.png"
             flat
-            size="1.1rem"
+            size="1.2rem"
             class="col-auto"
           />
           <q-space />
@@ -119,7 +127,7 @@
 
 <style scoped>
 .__panel_item {
-  height: 26.5vh;
+  height: 27vh;
 }
 </style>
 
@@ -137,9 +145,14 @@ export default defineComponent({
     const $q = useQuasar();
     const $t = useI18n();
 
+    const paused = ref(false);
+    const muted = ref(false);
+
     const tab = ref("signal_source");
     return {
       tab,
+      paused,
+      muted,
       loga(a: any) {
         console.log(a);
       },

src/pad/ContentWall.vue

@@ -1,22 +1,231 @@
 <template>
-  <div class="row">avbccsadsad</div>
+  <div
+    ref="wall"
+    class="fit bg-white q-py-md q-mx-sm row items-center justify-evenly wall"
+  >
+    <div
+      ref="wall_content"
+      :style="{
+        width: wall_width + 'px',
+        height: wall_height + 'px',
+      }"
+      class="wall"
+    >
+      <div id="windows" style="position: absolute">
+        <vue3-resize-drag
+          :w="item.width * ($refs.wall?.clientWidth ?? 0)"
+          :h="item.height * ($refs.wall?.clientHeight ?? 0)"
+          :x="
+            ($refs.wall?.parentElement?.offsetLeft ?? 0) +
+            ($refs.wall?.offsetLeft ?? 0) +
+            item.x * ($refs.wall?.clientWidth ?? 0)
+          "
+          :y="
+            ($refs.wall?.parentElement?.offsetTop ?? 0) +
+            ($refs.wall?.offsetTop ?? 0) +
+            item.y * ($refs.wall?.clientHeight ?? 0)
+          "
+          :zIndex="
+            $store.state.windows_sort.findIndex(
+              (element) => element == item.uuid
+            )
+          "
+          :isActive="item.uuid == $store.state.selected_window"
+          :resizeIconSize="14"
+          :isGuide="true"
+          v-for="(item, index) in $store.state.windows"
+          :key="index"
+          @resizeEndHandler="resizeWindow(item.window_id, $event)"
+          @moveEndHandler="moveWindow(item.window_id, $event)"
+          style="position: fixed"
+        >
+          <window
+            @close_this_window="closeWindow"
+            @close_other_windows="closeOtherWindows"
+            @close_all_windows="closeAllWindows"
+            @replace_this_window="repliceWindow"
+            @top_window="topWindow"
+            @lower_window="lowerWindow"
+            @dblclick="(evt) => windowDBClick(item.window_id)"
+            @edit_volume="edit_volume"
+            @mute_unmute="mute_unmute"
+            @start_polling="start_polling"
+            @stop_polling="stop_polling"
+            @polling_setting="polling_setting"
+            :ref="'window_' + item.window_id"
+            :id="'window_' + item.window_id"
+            :uuid="item.uuid"
+            :disable="plan_running"
+            :mouse_area_flag="area_open_window_flag"
+            :signal_source_table_uuid="item.signal_source_table_uuid"
+            :window="item"
+            :plan_running="plan_running"
+            class="window fit"
+          >
+          </window>
+        </vue3-resize-drag>
+      </div>
+      <div ref="wall_grids">
+        <div
+          v-for="row in wall_rows"
+          :key="row"
+          class="row"
+          :style="{
+            height: cell_height + 'px',
+          }"
+        >
+          <div
+            :ref="'item' + (row - 1) * wall_cols + col"
+            v-for="col in wall_cols"
+            :key="col"
+            class="col wall_item wall_item_flag"
+            :style="{
+              width: cell_witdh + 'px',
+              height: cell_height + 'px',
+            }"
+          >
+            <q-popup-proxy
+              context-menu
+              @show="
+                {
+                  //last_context_menu_pos_x = $event.layerX;
+                  //last_context_menu_pos_y = $event.layerY;
+                }
+              "
+            >
+              <q-list>
+                <q-item
+                  :disable="plan_running"
+                  clickable
+                  v-close-popup
+                  @click="openWindowByLocalFile($event)"
+                >
+                  <q-item-section avatar>
+                    <q-icon name="open_in_browser" />
+                  </q-item-section>
+                  <q-item-section> {{ $t("open window") }} </q-item-section>
+                </q-item>
+                <q-item
+                  :disable="plan_running"
+                  clickable
+                  v-close-popup
+                  @click="closeAllWindows"
+                >
+                  <q-item-section avatar>
+                    <q-icon name="close" color="red" />
+                  </q-item-section>
+                  <q-item-section>
+                    {{ $t("close all windwos") }}
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-popup-proxy>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
+<style scoped>
+.wall {
+  border: 1px solid black;
+}
+
+.wall_item {
+  border: 1px solid gray;
+}
+
+.window {
+  position: absolute;
+}
+
+.wall_item_flag {
+}
+
+.mouse_area_mask {
+  background: #aacceec2;
+  border: 1px solid #0069bee7;
+}
+</style>
+
 <script lang="ts">
-import { defineComponent, Ref, ref } from "vue";
+import { defineComponent, Ref, ref, onMounted, computed } from "vue";
 import { useQuasar } from "quasar";
 import { useI18n } from "vue-i18n";
 import { useStore } from "src/store";
+const elementResizeDetectorMaker = require("element-resize-detector");
+
+import vue3ResizeDrag from "../third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue";
+import Window from "src/components/Window.vue";
 
 export default defineComponent({
   name: "PadContentWallPage",
-  components: {},
+  components: { Window, vue3ResizeDrag },
   setup() {
     const $store = useStore();
     const $q = useQuasar();
     const $t = useI18n();
 
+    const wall: Ref<any> = ref(null);
+
+    const wall_width = ref(0);
+    const wall_height = ref(0);
+
+    const wall_rows = computed({
+      get: () => $store.state.wall_row,
+      set: (val) => $store.commit("setWallRow", val),
+    });
+
+    const wall_cols = computed({
+      get: () => $store.state.wall_col,
+      set: (val) => $store.commit("setWallCol", val),
+    });
+    const cell_width = ref(0);
+    const cell_height = ref(0);
+
+    onMounted(() => {
+      if (wall.value && wall.value.parentElement) {
+        const wall_parent = wall.value.parentElement as HTMLElement;
+
+        elementResizeDetectorMaker().listenTo(
+          wall_parent,
+          (element: HTMLElement) => {
+            if (element) {
+              console.log();
+              let height = wall_parent.offsetHeight * 0.9;
+              let width = height / 0.56;
+
+              if (width > element.offsetWidth) {
+                width = element.offsetWidth * 0.9;
+                height = width * 0.56;
+              }
+
+              console.log(height);
+              console.log(width);
+              wall_height.value = height;
+              wall_width.value = width;
+
+              cell_height.value = wall_height.value / $store.state.wall_row;
+              cell_width.value = wall_width.value / $store.state.wall_col;
+            }
+          }
+        );
+      } else {
+        console.error("dom error");
+        console.error((wall.value as HTMLElement).parentElement);
+      }
+    });
+
     return {
+      wall,
+      wall_width,
+      wall_height,
+      wall_rows,
+      wall_cols,
+      cell_width,
+      cell_height,
+
       loga(a: any) {
         console.log(a);
       },