setup settings store

src/components/RealtimeTable.vue

@@ -58,7 +58,7 @@ store.$subscribe((mutation, state) => {
 
 <style scoped>
 .realtime-table {
-  background: #00f3;
+  /* background: #00f3; */
   height: 160px;
   width: 80%;
   align-self: self-start;

src/components/SettingDialog.vue

@@ -1,21 +1,18 @@
 <script setup>
 import { ref } from 'vue';
+import { useSettings } from '../store/settings'
+
 const emit = defineEmits(["close"]);
-const setting = ref({
-    resolution: {
-        width: null,
-        height: null
-    },
-    carousel: null,
-    fullscreen: false,
-    status: false,
-});
+const { settings } = useSettings();
 
 function handleCancel() {
     emit('close')
 }
 
-function handleConfirm() { }
+function handleConfirm() {
+    // alert(JSON.stringify(settings, null, 2))
+    emit('close')
+}
 </script>
 
 <template>
@@ -24,25 +21,25 @@ function handleConfirm() { }
         <div class="main-content">
             <div class="form-item">
                 <label for="carousel">轮播时间</label>
-                <input id="carousel" type="number" v-model="setting.carousel" />
+                <input id="carousel" type="number" v-model="settings.carouselTime" />
                 <span>秒</span>
             </div>
             <div class="form-item">
                 <label for="resolution1">分辨率</label>
-                <input id="resolution1" type="number" v-model="setting.resolution.width" />
+                <input id="resolution1" type="number" v-model="settings.resolution.width" />
                 <span>X</span>
-                <input id="resolution2" type="number" v-model="setting.resolution.height" />
+                <input id="resolution2" type="number" v-model="settings.resolution.height" />
                 <span>px</span>
             </div>
             <div class="form-item selector">
                 <div class="opt opt1">
-                    <input type="checkbox" id="fullscreen" name="fullscreen" :class="[setting.fullscreen ? 'checked' : '']"
-                        v-model="setting.fullscreen" />
+                    <input type="checkbox" id="fullscreen" name="fullscreen" :class="[settings.fullscreen ? 'checked' : '']"
+                        v-model="settings.fullscreen" />
                     <label for="fullscreen">全屏显示</label>
                 </div>
                 <div class="opt opt2">
-                    <input type="checkbox" id="status" name="status" :class="[setting.status ? 'checked' : '']"
-                        v-model="setting.status" />
+                    <input type="checkbox" id="status" name="status" :class="[settings.eqStatus ? 'checked' : '']"
+                        v-model="settings.eqStatus" />
                     <label for="status">设备状态</label>
                 </div>
             </div>