style: device card

src/components/device-page/device-card/camera-card.vue

@@ -42,10 +42,15 @@ const selectedTab = ref('设备状态');
       </NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
       <NTabPane v-if="userStore.isSuperAdmin" name="原始数据" tab="原始数据">
-        <pre>{{ { ...ndmCamera, lastDiagInfo } }}</pre>
+        <pre class="raw-data">{{ { ...ndmCamera, lastDiagInfo } }}</pre>
       </NTabPane>
     </NTabs>
   </NCard>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.raw-data {
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+</style>

src/components/device-page/device-card/decoder-card.vue

@@ -59,10 +59,15 @@ const selectedTab = ref('设备状态');
       </NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
       <NTabPane v-if="userStore.isSuperAdmin" name="原始数据" tab="原始数据">
-        <pre>{{ { ...ndmDecoder, lastDiagInfo } }}</pre>
+        <pre class="raw-data">{{ { ...ndmDecoder, lastDiagInfo } }}</pre>
       </NTabPane>
     </NTabs>
   </NCard>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.raw-data {
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+</style>

src/components/device-page/device-card/keyboard-card.vue

@@ -33,10 +33,15 @@ const selectedTab = ref('设备状态');
       </NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
       <NTabPane v-if="userStore.isSuperAdmin" name="原始数据" tab="原始数据">
-        <pre>{{ { ...ndmKeyboard } }}</pre>
+        <pre class="raw-data">{{ { ...ndmKeyboard } }}</pre>
       </NTabPane>
     </NTabs>
   </NCard>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.raw-data {
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+</style>

src/components/device-page/device-card/nvr-card.vue

@@ -74,10 +74,15 @@ const selectedTab = ref('设备状态');
       </NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
       <NTabPane v-if="userStore.isSuperAdmin" name="原始数据" tab="原始数据">
-        <pre>{{ { ...ndmNvr, lastDiagInfo } }}</pre>
+        <pre class="raw-data">{{ { ...ndmNvr, lastDiagInfo } }}</pre>
       </NTabPane>
     </NTabs>
   </NCard>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.raw-data {
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+</style>

src/components/device-page/device-card/security-box-card.vue

@@ -70,10 +70,15 @@ const selectedTab = ref('设备状态');
       </NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
       <NTabPane v-if="userStore.isSuperAdmin" name="原始数据" tab="原始数据">
-        <pre>{{ { ...ndmSecurityBox, lastDiagInfo } }}</pre>
+        <pre class="raw-data">{{ { ...ndmSecurityBox, lastDiagInfo } }}</pre>
       </NTabPane>
     </NTabs>
   </NCard>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.raw-data {
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+</style>

src/components/device-page/device-card/server-card.vue

@@ -49,10 +49,15 @@ const selectedTab = ref('设备状态');
       </NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
       <NTabPane v-if="userStore.isSuperAdmin" name="原始数据" tab="原始数据">
-        <pre>{{ { ...ndmServer, lastDiagInfo } }}</pre>
+        <pre class="raw-data">{{ { ...ndmServer, lastDiagInfo } }}</pre>
       </NTabPane>
     </NTabs>
   </NCard>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.raw-data {
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+</style>

src/components/device-page/device-card/switch-card.vue

@@ -51,10 +51,15 @@ const selectedTab = ref('设备状态');
       </NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
       <NTabPane v-if="userStore.isSuperAdmin" name="原始数据" tab="原始数据">
-        <pre>{{ { ...ndmSwitch, lastDiagInfo } }}</pre>
+        <pre class="raw-data">{{ { ...ndmSwitch, lastDiagInfo } }}</pre>
       </NTabPane>
     </NTabs>
   </NCard>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.raw-data {
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+</style>