feat: 增加代码编辑器yaml格式显示，优化远程配置页面根据配置格式切换动态切换编辑器格式。优化远程配置页面查看和配置操作的格式兼容，显示优化等

src/components/codeEditor/index.vue

@@ -6,6 +6,7 @@ import { reactive, ref, watch } from 'vue';
 import Codemirror from 'codemirror-editor-vue3';
 // 编辑器代码格式
 import 'codemirror/mode/javascript/javascript.js';
+import 'codemirror/mode/yaml/yaml.js';
 // 自动刷新
 import 'codemirror/addon/display/autorefresh';
 // 主题

src/views/iot/device/product/component/dataParse.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="flex" style="align-items: stretch;">
-		<codeEditor class="params flex1" ref="mirrorRef" style="height: calc(100vh - 340px)" mode="application/json" :content="content"></codeEditor>
+		<codeEditor class="params flex1" ref="mirrorRef" style="height: calc(100vh - 340px)" mode="javascript" :content="content"></codeEditor>
 		<div class="mock" style="width: 300px;margin-left: 20px;">
 			<el-radio-group v-model="functionName">
 				<el-radio-button label="parse">parse</el-radio-button>

src/views/iot/iotmanager/dashboard.vue

@@ -672,6 +672,7 @@ $homeNavLengh: 8;
 		align-items: center;
 		justify-content: space-around;
 		gap: 12px;
+		white-space: nowrap;
 
 		.split {
 			border-right: 1px solid var(--el-border-color-light);

src/views/iot/operate/remoteconf/index.vue

@@ -5,13 +5,13 @@
       <div class="container">
         <div class="selectContainer">
           <article style="margin-right: 20px">
-						<span class="label">产品:</span>
+            <span class="label">产品:</span>
             <el-select v-model="product" filterable @change="handleChange">
               <el-option v-for="item in productOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
             </el-select>
           </article>
           <article>
-						<span class="label">配置格式:</span>
+            <span class="label">配置格式:</span>
             <el-select v-model="currentConfig.configFormat" filterable>
               <el-option v-for="item in configTypeOptions" :key="item.key" :label="item.key" :value="item.key"> </el-option>
             </el-select>
@@ -33,16 +33,9 @@
             <el-switch v-model="onlineOpen" active-color="#13ce66" inactive-color="#ddd"></el-switch>
           </div>
         </div>
-<!--        <div style="border: 1px solid #ccc; border-top: none">-->
+        <!--        <div style="border: 1px solid #ccc; border-top: none">-->
         <div style="border-top: none">
-          <codeEditor
-              class="params flex1"
-              ref="mirrorRef"
-              mode=""
-              :onchange="onchange"
-              :readOnly="true"
-              :content="currentConfig.configContent"
-              :cursorBlinkRate="-1"></codeEditor>
+          <codeEditor class="params flex1" ref="mirrorRef" :mode="currentConfig.configFormat" :onchange="onchange" :readOnly="true" :content="currentConfig.configContent" :cursorBlinkRate="-1"></codeEditor>
         </div>
         <div class="btnContainer">
           <div v-if="!onlineOpen">
@@ -55,12 +48,7 @@
           <div v-else><el-button type="primary" @click="updateDialogVisible = true">批量更新</el-button></div>
         </div>
         <h2>配置版本记录</h2>
-        <el-table :data="tableData.data"
-            style="width: 100%"
-            row-key="id"
-            default-expand-all
-            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-            v-loading="tableData.loading">
+        <el-table :data="tableData.data" style="width: 100%" row-key="id" default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" v-loading="tableData.loading">
           <el-table-column prop="configNumber" label="编号" width="200"> </el-table-column>
           <el-table-column prop="gmtCreate" label="版本更新时间"></el-table-column>
           <el-table-column label="操作" width="200">
@@ -86,10 +74,10 @@
         </div>
       </div>
       <template #footer>
-				<span class="dialog-footer">
-					<el-button @click="updateDialogHandle" type="primary">确认更新</el-button>
-					<el-button @click="updateDialogVisible = false">取消</el-button>
-				</span>
+        <span class="dialog-footer">
+          <el-button @click="updateDialogHandle" type="primary">确认更新</el-button>
+          <el-button @click="updateDialogVisible = false">取消</el-button>
+        </span>
       </template>
     </el-dialog>
     <el-dialog v-model="saveDialogVisible" width="40%">
@@ -104,27 +92,21 @@
         </div>
       </div>
       <template #footer>
-				<span class="dialog-footer">
-					<el-button @click="saveHandle" type="primary">确认</el-button>
-					<el-button @click="saveDialogVisible = false">取消</el-button>
-				</span>
+        <span class="dialog-footer">
+          <el-button @click="saveHandle" type="primary">确认</el-button>
+          <el-button @click="saveDialogVisible = false">取消</el-button>
+        </span>
       </template>
     </el-dialog>
     <el-dialog v-model="lookDialogVisible" width="40%">
       <div class="saveDialogContainer" v-if="lookDialogVisible">
-        <codeEditor class="params flex1"
-            ref="mirrorRefDialog"
-            mode=""
-            :onchange="onchange"
-            :readOnly="true"
-            :content="tableData.data[lookIndex!].content"
-            :cursorBlinkRate="-1"></codeEditor>
+        <codeEditor class="params flex1" ref="mirrorRefDialog" mode="" :onchange="onchange" :readOnly="true" :content="tableData.data[lookIndex!].content" :cursorBlinkRate="-1"></codeEditor>
       </div>
       <template #footer>
-				<span class="dialog-footer">
-					<el-button @click="lookSureDialogVisible = true" type="primary">恢复至此版本</el-button>
-					<el-button @click="lookDialogVisible = false">取消</el-button>
-				</span>
+        <span class="dialog-footer">
+          <el-button @click="lookSureDialogVisible = true" type="primary">恢复至此版本</el-button>
+          <el-button @click="lookDialogVisible = false">取消</el-button>
+        </span>
       </template>
     </el-dialog>
     <el-dialog v-model="lookSureDialogVisible" width="40%">
@@ -140,10 +122,10 @@
         </div>
       </div>
       <template #footer>
-				<span class="dialog-footer">
-					<el-button @click="sureRestore" type="primary">确认</el-button>
-					<el-button @click="lookSureDialogVisible = false">取消</el-button>
-				</span>
+        <span class="dialog-footer">
+          <el-button @click="sureRestore" type="primary">确认</el-button>
+          <el-button @click="lookSureDialogVisible = false">取消</el-button>
+        </span>
       </template>
     </el-dialog>
   </div>
@@ -166,11 +148,11 @@ export default defineComponent({
     const onlineOpen = ref(false)
     const mirrorRef = ref<any>() // 编辑器
     const mirrorRefDialog = ref<any>()
-    const configTypeOptions = [{ key: 'json' }, { key: 'yaml' }]
+    const configTypeOptions = [{ key: 'application/json' }, { key: 'text/yaml' }]
     const selectProduct = ref(); // 选中产品名称
     const currentConfig = ref({
       configContent: '',
-      configFormat: 'json',
+      configFormat: 'application/json',
       configNumber: '',
       gmtCreate: '',
       id: '',
@@ -205,17 +187,17 @@ export default defineComponent({
     const saveDialogVisible = ref(false)
     const updateDialogVisible = ref(false)
     watch(
-        () => onlineOpen.value,
-        () => {
-          //初始化  然后由false变为 true 不用管
-          // 这里是 由false变为true
-          if (!onlineOpen.value) {
-            canSave.value = false
-            mirrorRef.value.setOption('readOnly', true)
-            // 隐藏光标
-            mirrorRef.value.setOption('cursorBlinkRate', -1);
-          }
+      () => onlineOpen.value,
+      () => {
+        //初始化  然后由false变为 true 不用管
+        // 这里是 由false变为true
+        if (!onlineOpen.value) {
+          canSave.value = false
+          mirrorRef.value.setOption('readOnly', true)
+          // 隐藏光标
+          mirrorRef.value.setOption('cursorBlinkRate', -1);
         }
+      }
     )
     watch(() => product.value, () => {
       //product.value 就是那个key options里面转化了
@@ -245,9 +227,9 @@ export default defineComponent({
             currentConfig.value = res.remoteconf[0]
             mirrorRef.value.setValue(currentConfig.value.configContent)
           }
-      }).catch((error: any) => {
-        ElMessage.error(error)
-      })
+        }).catch((error: any) => {
+          ElMessage.error(error)
+        })
     }
     const size = ref('0')
 
@@ -301,8 +283,9 @@ export default defineComponent({
       lookDialogVisible.value = true
       lookIndex.value = index
       setTimeout(() => {
-        mirrorRefDialog.value.setValue(tableData.data[index].configContent)
-      }, 4)
+        mirrorRefDialog.value.setMode(tableData.data[lookIndex.value!].configFormat)
+        mirrorRefDialog.value.setValue(tableData.data[lookIndex.value!].configContent)
+      }, 0)
     }
     const sureRestore = () => {
       lookDialogVisible.value = false
@@ -349,57 +332,70 @@ export default defineComponent({
 .selectContainer {
   display: flex;
 }
+
 .label {
   display: inline-block;
   padding-right: 12px;
 }
+
 h2 {
   margin-bottom: 10px;
 }
+
 article {
   margin-bottom: 10px;
 }
+
 .container :deep(.ql-toolbar.ql-snow) {
   display: none;
 }
+
 .editorTitle {
   width: 100%;
   //border: 1px solid #ccc;
   padding: 10px;
-  height: 50px
-  //background-color: #eee;
+  height: 50px //background-color: #eee;
 }
+
 .leftLabel {
   float: left;
   height: 32px;
   line-height: 32px;
   font-weight: 600;
 }
+
 .rightLabel {
   float: right;
+
   span {
     display: inline-block;
     margin: 0 10px;
   }
+
   .icon {
     float: left;
     margin-top: 6px;
   }
 }
+
 .btnContainer {
   width: 200px;
   margin: 10px auto;
   display: flex;
 }
+
 .saveDialogContainer {
   display: flex;
+
   h2 {
     color: #333;
   }
+
   p {
     color: #999;
     margin: 8px 0;
   }
+
   .icon {
     margin: 2px 10px;
   }