From 107ee7bebf2afac0c625f27584ce244a7ddb1cc8 Mon Sep 17 00:00:00 2001
From: dylanmay <670374839@qq.com>
Date: Mon, 10 Feb 2025 16:53:10 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E8=AE=BE=E5=A4=87?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  1 +
 .../device/detail/DeviceDetailConfig.vue      | 87 +++++++++++++++++++
 src/views/iot/device/device/detail/index.vue  |  4 +
 3 files changed, 92 insertions(+)
 create mode 100644 src/views/iot/device/device/detail/DeviceDetailConfig.vue

diff --git a/package.json b/package.json
index 2fe60432..f9bffc0c 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,7 @@
     "sortablejs": "^1.15.3",
     "steady-xml": "^0.1.0",
     "url": "^0.11.3",
+    "v3-jsoneditor": "^0.0.6",
     "video.js": "^7.21.5",
     "vue": "3.5.12",
     "vue-dompurify-html": "^4.1.4",
diff --git a/src/views/iot/device/device/detail/DeviceDetailConfig.vue b/src/views/iot/device/device/detail/DeviceDetailConfig.vue
new file mode 100644
index 00000000..f27d338c
--- /dev/null
+++ b/src/views/iot/device/device/detail/DeviceDetailConfig.vue
@@ -0,0 +1,87 @@
+<template>
+  <div>
+    <el-alert
+      title="IoT平台支持远程更新设备的配置文件(SON格式)，您可以在下方编辑配置模板，对设备的系统参数、网络参数等进行远程配置，通过批量更新对设备进行批量远程维护和管理。"
+      type="info"
+      show-icon
+      class="my-4"
+      description="如需编辑文件，请点击下方编辑按钮"
+    />
+    
+    <Vue3Jsoneditor
+      ref="editor"
+      v-if="isEditing"
+      v-model="deviceConfig"
+      :options="editorOptions"
+      height="500px"
+      currentMode="code"
+      @error="onError"
+    />
+    <Vue3Jsoneditor
+      ref="editor"
+      v-else
+      v-model="deviceConfig"
+      :options="editorOptions"
+      height="500px"
+      currentMode="view"
+      @error="onError"
+    />
+    <div class="button-group">
+      <el-button v-if="isEditing" @click="cancelEdit">取消</el-button>
+      <el-button v-if="isEditing" type="primary" @click="saveConfig">保存</el-button>
+      <el-button v-else @click="enableEdit">编辑</el-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
+import Vue3Jsoneditor from 'v3-jsoneditor/src/Vue3Jsoneditor.vue';
+
+// 定义设备配置的状态
+const deviceConfig = ref({
+  "name": "dyla1n"
+});
+
+// 编辑状态
+const isEditing = ref(false);
+
+// JSON 编辑器的选项
+const editorOptions = computed(() => ({
+  mainMenuBar: false,
+  navigationBar: false,
+  statusBar: false,
+}));
+
+// 启用编辑模式的函数
+const enableEdit = () => {
+  isEditing.value = true;
+};
+
+// 取消编辑的函数
+const cancelEdit = () => {
+  isEditing.value = false;
+  // 逻辑代码
+  console.log('取消编辑');
+};
+
+// 保存配置的函数
+const saveConfig = () => {
+  isEditing.value = false;
+  // 逻辑代码
+  console.log('保存配置');
+};
+
+// 处理 JSON 编辑器错误的函数
+const onError = (e: any) => {
+  console.log('onError', e);
+};
+</script>
+
+<style scoped>
+.button-group {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/iot/device/device/detail/index.vue b/src/views/iot/device/device/detail/index.vue
index 8e51503d..3c0a48a8 100644
--- a/src/views/iot/device/device/detail/index.vue
+++ b/src/views/iot/device/device/detail/index.vue
@@ -26,6 +26,9 @@
           :device="device"
         />
       </el-tab-pane>
+      <el-tab-pane label="设备配置" name="config">
+        <DeviceDetailConfig />
+      </el-tab-pane>
     </el-tabs>
   </el-col>
 </template>
@@ -38,6 +41,7 @@ import DeviceDetailsInfo from './DeviceDetailsInfo.vue'
 import DeviceDetailsModel from './DeviceDetailsModel.vue'
 import DeviceDetailsLog from './DeviceDetailsLog.vue'
 import DeviceDetailsSimulator from './DeviceDetailsSimulator.vue'
+import DeviceDetailConfig from './DeviceDetailConfig.vue';
 
 defineOptions({ name: 'IoTDeviceDetail' })