fix: 修改网络组件下通道管理，服务器管理中的协议获取

src/views/iot/network/server/create.vue

@@ -92,19 +92,9 @@
             <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="98px">
               <el-form-item label="协议">
                 <el-select v-model="form.protocol.name" placeholder="请选择协议适配">
-                  <el-option v-for="dict in network_protocols" :key="dict.value" :label="dict.label" :value="dict.value">
-                  </el-option>
-                  <!-- <el-option label="Modbus RTU" value="Modbus RTU" />
-                                    <el-option label="Modbus TCP" value="Modbus TCP" />
-                                    <el-option label="Omron Hostlink" value="Omron Hostlink" />
-                                    <el-option label="Omron FINS UDP" value="Omron FINS UDP" />
-                                    <el-option label="Omron FINS TCP" value="Omron FINS TCP" />
-                                    <el-option label="Simatic S7-200 Smart" value="Simatic S7-200 Smart" />
-                                    <el-option label="Simatic S7-200" value="Simatic S7-200" />
-                                    <el-option label="Simatic S7-300" value="Simatic S7-300" />
-                                    <el-option label="Simatic S7-400" value="Simatic S7-400" />
-                                    <el-option label="Simatic S7-1200" value="Simatic S7-1200" />
-                                    <el-option label="Simatic S7-1500" value="Simatic S7-1500" /> -->
+                  <el-option v-for="dict in messageData" :key="dict.types" :label="dict.title" :value="dict.name"></el-option>
+                  <!-- 增加系统默认的mqtt选项 -->
+                  <el-option label="Sagoo Mqtt" value="SagooMqtt"> </el-option>
                 </el-select>
               </el-form-item>
               <el-form-item label="协议参数">
@@ -135,6 +125,7 @@ import { useRoute } from 'vue-router';
 
 import api from '/@/api/network';
 import api2 from '/@/api/system';
+import deviceApi from '/@/api/device'
 
 interface TableDataState {
   // ids: number[];
@@ -148,6 +139,7 @@ interface TableDataState {
   detail: object,
   form: object,
   certificateList: object[];
+  messageData: object[];
   stick: {
     // 分隔符
     "delimit,omitempty": string,
@@ -218,6 +210,7 @@ export default defineComponent({
       detail: {},
       activeViewName: ['1', '2', '3'],
       certificateList: [],
+      messageData: [],
       form: {
         id: "",
         // AccessToken
@@ -260,6 +253,11 @@ export default defineComponent({
         devices: []
       }
     });
+
+    deviceApi.product.getTypesAll({ types: 'protocol' }).then((res: any) => {
+      state.messageData = res || [];
+    });
+
     const mirrorRef = ref('mirrorRef')
     const activeName = ref('first')
     const getDetail = () => {

src/views/iot/network/server/edit.vue

@@ -92,8 +92,9 @@
             <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="98px">
               <el-form-item label="协议">
                 <el-select v-model="form.protocol.name" placeholder="请选择协议适配">
-                  <el-option v-for="dict in network_protocols" :key="dict.value" :label="dict.label" :value="dict.value">
-                  </el-option>
+                  <el-option v-for="dict in messageData" :key="dict.types" :label="dict.title" :value="dict.name"></el-option>
+                  <!-- 增加系统默认的mqtt选项 -->
+                  <el-option label="Sagoo Mqtt" value="SagooMqtt"> </el-option>
                 </el-select>
               </el-form-item>
               <el-form-item label="协议参数">
@@ -123,6 +124,7 @@ import { useRoute, useRouter } from 'vue-router';
 
 import api from '/@/api/network';
 import api2 from '/@/api/system';
+import deviceApi from '/@/api/device'
 
 interface TableDataState {
   activeViewName: string[];
@@ -133,6 +135,7 @@ interface TableDataState {
   detail: object,
   form: object,
   certificateList: object[];
+  messageData: object[];
   stick: {
     // 分隔符
     "delimit,omitempty": string,
@@ -201,6 +204,7 @@ export default defineComponent({
         mode: '',
         content: ''
       },
+      messageData: [],
       certificateList: [],
       detail: {},
       activeViewName: ['1', '2', '3'],
@@ -245,6 +249,11 @@ export default defineComponent({
         devices: []
       }
     });
+
+    deviceApi.product.getTypesAll({ types: 'protocol' }).then((res: any) => {
+      state.messageData = res || [];
+    });
+
     const mirrorRef = ref('mirrorRef')
     const activeName = ref('first')
     const getDetail = () => {

src/views/iot/network/tunnel/create.vue

@@ -81,8 +81,9 @@
             <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="68px">
               <el-form-item label="协议">
                 <el-select v-model="form.protoccol.name" placeholder="请选择协议适配">
-                  <el-option v-for="dict in network_protocols" :key="dict.value" :label="dict.label" :value="dict.value">
-                  </el-option>
+                  <el-option v-for="dict in messageData" :key="dict.types" :label="dict.title" :value="dict.name"></el-option>
+                  <!-- 增加系统默认的mqtt选项 -->
+                  <el-option label="Sagoo Mqtt" value="SagooMqtt"> </el-option>
                 </el-select>
               </el-form-item>
               <el-form-item label="协议参数">
@@ -108,9 +109,11 @@ import serverDetail from './component/serverDetail.vue'
 import { useRoute, useRouter } from 'vue-router';
 
 import api from '/@/api/network';
+import deviceApi from '/@/api/device'
 
 interface TableDataState {
   activeViewName: string[];
+  messageData: any[];
   resourceModalPro: {
     mode: string,
     content: string,
@@ -142,6 +145,7 @@ export default defineComponent({
         content: ''
       },
       detail: {},
+      messageData: [],
       activeViewName: ['1', '2', '3', '4', '5'],
       form: {
         // 名称
@@ -185,6 +189,10 @@ export default defineComponent({
         ]
       }
     });
+    
+    deviceApi.product.getTypesAll({ types: 'protocol' }).then((res: any) => {
+      state.messageData = res || [];
+    });
 
     const mirrorRef = ref('mirrorRef')
     const activeName = ref('first')

src/views/iot/network/tunnel/edit.vue

@@ -1,104 +1,105 @@
 <template>
-    <el-card class="system-dic-container" style="position: relative;">
-        <el-tabs v-model="activeName">
-            <el-tab-pane label="编辑通道" name="first">
-                <el-collapse v-model="activeViewName">
-                    <el-collapse-item title="基本信息" name="1">
-                        <div class="collapse-wrap">
-                            <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="68px">
-                                <el-form-item label="名称">
-                                    <el-input v-model="form.name" show-word-limit maxlength="20" placeholder="请填写名称" />
-                                </el-form-item>
-                                <el-form-item label="类型">
-                                    <el-select v-model="form.types" placeholder="请选择类型">
-                                        <el-option v-for="dict in network_tunnel_type" :key="dict.value" :label="dict.label" :value="dict.value">
-                                        </el-option>
-                                    </el-select>
-                                </el-form-item>
-                                <el-form-item v-show="form.types != 'serial'" label="地址">
-                                    <el-input v-model="form.addr" placeholder="端口号，IP:端口" />
-                                </el-form-item>
-                                <el-form-item label="启用">
-                                    <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
-                                </el-form-item>
-                            </el-form>
-                        </div>
-                    </el-collapse-item>
-                    <el-collapse-item v-show="form.types == 'serial'" title="串口参数" name="2">
-                        <div class="collapse-wrap">
-                            <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="68px">
-                                <el-form-item label="端口">
-                                    <el-button>/dev/ttyS0</el-button>
-                                </el-form-item>
-                                <el-form-item label="波特率">
-                                    <el-select v-model="form.serial.baud_rate" placeholder="请选择波特率">
-                                        <el-option v-for="dict in tunnel_serial_baudrate" :key="dict.value" :label="dict.label" :value="dict.value">
-                                        </el-option>
-                                    </el-select>
-                                </el-form-item>
-                                <el-form-item label="数据位">
-                                    <el-select v-model="form.serial.data_bits" placeholder="请选择数据位">
-                                        <el-option v-for="dict in tunnel_serial_databits" :key="dict.value" :label="dict.label" :value="dict.value">
-                                        </el-option>
-                                    </el-select>
-                                </el-form-item>
-                                <el-form-item label="停止位">
-                                    <el-select v-model="form.serial.stop_bits" placeholder="请选择停止位">
-                                        <el-option v-for="dict in tunnel_serial_stopbits" :key="dict.value" :label="dict.label" :value="dict.value">
-                                        </el-option>
-                                    </el-select>
-                                </el-form-item>
-                                <el-form-item label="检验位">
-                                    <el-select v-model="form.serial.parity" placeholder="请选择检验位">
-                                        <el-option v-for="dict in tunnel_serial_parity" :key="dict.value" :label="dict.label" :value="dict.value">
-                                        </el-option>
-                                    </el-select>
-                                </el-form-item>
-                            </el-form>
-                        </div>
-                    </el-collapse-item>
-                    <el-collapse-item v-show="form.type != 'serial'" title="心跳包" name="4">
-                        <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="68px">
-                            <el-form-item label="启用">
-                                <el-switch v-model="form.heartbeat.enable" />
-                            </el-form-item>
-                        </el-form>
-                    </el-collapse-item>
-                    <el-collapse-item v-if="form.types == 'serial' || form.types == 'tcp-client' || form.types == 'udp-client'" title="断线重连" name="4">
-                        <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="68px">
-                            <el-form-item label="启用">
-                                <el-switch v-model="form.retry.enable" />
-                            </el-form-item>
-                            <el-form-item label="间隔">
-                                <el-input-number v-model="form.retry.timeout" :min="0" @change="handleChange" />
-                            </el-form-item>
-                            <el-form-item label="最大次数">
-                                <el-input-number v-model="form.retry.maximum" :min="0" @change="handleChange" />
-                            </el-form-item>
-                        </el-form>
-                    </el-collapse-item>
-                    <el-collapse-item title="协议适配" name="5">
-                        <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="68px">
-                            <el-form-item label="协议">
-                                <el-select v-model="form.protoccol.name" placeholder="请选择协议适配">
-                                    <el-option v-for="dict in network_protocols" :key="dict.value" :label="dict.label" :value="dict.value">
-                                    </el-option>
-                                </el-select>
-                            </el-form-item>
-                            <el-form-item label="协议参数">
-                                <codeEditor class="params" ref="mirrorRef" :mode="resourceModalPro.mode" :content="resourceModalPro.content">
-                                </codeEditor>
-                            </el-form-item>
-                        </el-form>
-                    </el-collapse-item>
-                </el-collapse>
-            </el-tab-pane>
-        </el-tabs>
-        <div style="position: absolute;right:20px;top: 20px;">
-            <el-button size="medium" @click="$router.replace('/iotmanager/network/tunnel')">取消</el-button>
-            <el-button @click="submit" size="medium" type="primary">提交</el-button>
-        </div>
-    </el-card>
+  <el-card class="system-dic-container" style="position: relative;">
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="编辑通道" name="first">
+        <el-collapse v-model="activeViewName">
+          <el-collapse-item title="基本信息" name="1">
+            <div class="collapse-wrap">
+              <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="68px">
+                <el-form-item label="名称">
+                  <el-input v-model="form.name" show-word-limit maxlength="20" placeholder="请填写名称" />
+                </el-form-item>
+                <el-form-item label="类型">
+                  <el-select v-model="form.types" placeholder="请选择类型">
+                    <el-option v-for="dict in network_tunnel_type" :key="dict.value" :label="dict.label" :value="dict.value">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item v-show="form.types != 'serial'" label="地址">
+                  <el-input v-model="form.addr" placeholder="端口号，IP:端口" />
+                </el-form-item>
+                <el-form-item label="启用">
+                  <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
+                </el-form-item>
+              </el-form>
+            </div>
+          </el-collapse-item>
+          <el-collapse-item v-show="form.types == 'serial'" title="串口参数" name="2">
+            <div class="collapse-wrap">
+              <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="68px">
+                <el-form-item label="端口">
+                  <el-button>/dev/ttyS0</el-button>
+                </el-form-item>
+                <el-form-item label="波特率">
+                  <el-select v-model="form.serial.baud_rate" placeholder="请选择波特率">
+                    <el-option v-for="dict in tunnel_serial_baudrate" :key="dict.value" :label="dict.label" :value="dict.value">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="数据位">
+                  <el-select v-model="form.serial.data_bits" placeholder="请选择数据位">
+                    <el-option v-for="dict in tunnel_serial_databits" :key="dict.value" :label="dict.label" :value="dict.value">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="停止位">
+                  <el-select v-model="form.serial.stop_bits" placeholder="请选择停止位">
+                    <el-option v-for="dict in tunnel_serial_stopbits" :key="dict.value" :label="dict.label" :value="dict.value">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="检验位">
+                  <el-select v-model="form.serial.parity" placeholder="请选择检验位">
+                    <el-option v-for="dict in tunnel_serial_parity" :key="dict.value" :label="dict.label" :value="dict.value">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+              </el-form>
+            </div>
+          </el-collapse-item>
+          <el-collapse-item v-show="form.type != 'serial'" title="心跳包" name="4">
+            <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="68px">
+              <el-form-item label="启用">
+                <el-switch v-model="form.heartbeat.enable" />
+              </el-form-item>
+            </el-form>
+          </el-collapse-item>
+          <el-collapse-item v-if="form.types == 'serial' || form.types == 'tcp-client' || form.types == 'udp-client'" title="断线重连" name="4">
+            <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="68px">
+              <el-form-item label="启用">
+                <el-switch v-model="form.retry.enable" />
+              </el-form-item>
+              <el-form-item label="间隔">
+                <el-input-number v-model="form.retry.timeout" :min="0" @change="handleChange" />
+              </el-form-item>
+              <el-form-item label="最大次数">
+                <el-input-number v-model="form.retry.maximum" :min="0" @change="handleChange" />
+              </el-form-item>
+            </el-form>
+          </el-collapse-item>
+          <el-collapse-item title="协议适配" name="5">
+            <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="68px">
+              <el-form-item label="协议">
+                <el-select v-model="form.protoccol.name" placeholder="请选择协议适配">
+                  <el-option v-for="dict in messageData" :key="dict.types" :label="dict.title" :value="dict.name"></el-option>
+                  <!-- 增加系统默认的mqtt选项 -->
+                  <el-option label="Sagoo Mqtt" value="SagooMqtt"> </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="协议参数">
+                <codeEditor class="params" ref="mirrorRef" :mode="resourceModalPro.mode" :content="resourceModalPro.content">
+                </codeEditor>
+              </el-form-item>
+            </el-form>
+          </el-collapse-item>
+        </el-collapse>
+      </el-tab-pane>
+    </el-tabs>
+    <div style="position: absolute;right:20px;top: 20px;">
+      <el-button size="medium" @click="$router.replace('/iotmanager/network/tunnel')">取消</el-button>
+      <el-button @click="submit" size="medium" type="primary">提交</el-button>
+    </div>
+  </el-card>
 </template>
 <script lang="ts">
 import { toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance } from 'vue';
@@ -110,165 +111,173 @@ import serverDetail from './component/serverDetail.vue'
 import { useRoute, useRouter } from 'vue-router';
 
 import api from '/@/api/network';
+import deviceApi from '/@/api/device'
 
 interface TableDataState {
-    activeViewName: string[];
-    resourceModalPro: {
-        mode: string,
-        content: string,
-    },
-    detail: object,
-    form: object
+  activeViewName: string[];
+  messageData: any[];
+  resourceModalPro: {
+    mode: string,
+    content: string,
+  },
+  detail: object,
+  form: object
 }
 export default defineComponent({
-    name: 'tunnelCreate',
-    components: { codeEditor, serverDetail },
-    props: {
-        type: {
-            type: String,
-            default: ''
+  name: 'tunnelCreate',
+  components: { codeEditor, serverDetail },
+  props: {
+    type: {
+      type: String,
+      default: ''
+    }
+  },
+
+  setup(props, context) {
+    const { proxy } = getCurrentInstance() as any;
+    const route = useRoute();
+    const router = useRouter();
+    const { network_tunnel_type, tunnel_serial_baudrate, tunnel_serial_databits, tunnel_serial_stopbits, tunnel_serial_parity, network_protocols } = proxy.useDict('network_tunnel_type', 'tunnel_serial_baudrate', 'tunnel_serial_databits', 'tunnel_serial_stopbits', 'tunnel_serial_parity', 'network_protocols');
+
+    const state = reactive<TableDataState>({
+      resourceModalPro: {
+        mode: '',
+        content: ''
+      },
+      detail: {},
+      activeViewName: ['1', '2', '3', '4', '5'],
+      messageData: [],
+      form: {
+        id: '',
+        // 名称
+        name: '新建通道',
+        // 类型
+        types: 'serial',
+        // 禁用
+        status: false,
+        // 地址
+        addr: '',
+        // 串口参数
+        serial: {
+          baud_rate: "9600",
+          data_bits: "6",
+          stop_bits: "1",
+          parity: '0'
+        },
+        // 断线重连
+        retry: {
+          enable: true,
+          timeout: 30,
+          maximum: 0,
+        },
+        // 协议适配
+        protoccol: {
+          name: "Modbus RTU",
+          options: {}
+        },
+        // 心跳包
+        heartbeat: {
+          enable: false,
+          hex: "",
+          regex: "^\\w+$",
+          text: "",
+          timeout: 30
         }
-    },
+      }
+    });
 
-    setup(props, context) {
-        const { proxy } = getCurrentInstance() as any;
-        const route = useRoute();
-        const router = useRouter();
-        const { network_tunnel_type, tunnel_serial_baudrate, tunnel_serial_databits, tunnel_serial_stopbits, tunnel_serial_parity, network_protocols } = proxy.useDict('network_tunnel_type', 'tunnel_serial_baudrate', 'tunnel_serial_databits', 'tunnel_serial_stopbits', 'tunnel_serial_parity', 'network_protocols');
+    deviceApi.product.getTypesAll({ types: 'protocol' }).then((res: any) => {
+      state.messageData = res || [];
+    });
 
-        const state = reactive<TableDataState>({
-            resourceModalPro: {
-                mode: '',
-                content: ''
-            },
-            detail: {},
-            activeViewName: ['1', '2', '3', '4', '5'],
-            form: {
-                id: '',
-                // 名称
-                name: '新建通道',
-                // 类型
-                types: 'serial',
-                // 禁用
-                status: false,
-                // 地址
-                addr: '',
-                // 串口参数
-                serial: {
-                    baud_rate: "9600",
-                    data_bits: "6",
-                    stop_bits: "1",
-                    parity: '0'
-                },
-                // 断线重连
-                retry: {
-                    enable: true,
-                    timeout: 30,
-                    maximum: 0,
-                },
-                // 协议适配
-                protoccol: {
-                    name: "Modbus RTU",
-                    options: {}
-                },
-                // 心跳包
-                heartbeat: {
-                    enable: false,
-                    hex: "",
-                    regex: "^\\w+$",
-                    text: "",
-                    timeout: 30
-                }
-            }
-        });
-        const activeName = ref('first')
-        const mirrorRef = ref('mirrorRef')
-        const submit = () => {
-            // 串口参数-检验位-无
-            if (state.form.serial.parity == 0) {
-                state.form.serial.rs485 = false
-                delete state.form.serial.port
-            }
-            // 串口参数-检验位-偶/奇
-            if (state.form.serial.parity == 1 || state.form.serial.parity == 2) {
-                state.form.serial.port = null
-                delete state.form.serial.rs485
-            }
-            // return
-            api.tunnel.editItem({ ...state.form }).then((res: any) => {
-                ElMessage.success('修改成功')
-                router.go(-1);
-            });
-        };
-        const getDetail = () => {
-            const id = route.params && route.params.id;
-            api.tunnel.getDetail({ "id": id }).then((res: any) => {
-                const { id, name, types, status, addr, serial, retry, protoccol, heartbeat } = res
-                state.form['name'] = name
-                state.form['types'] = types
-                state.form['addr'] = addr
-                state.form['status'] = status
-                state.form['serial'] = JSON.parse(serial || '{}')
-                state.form['retry'] = JSON.parse(retry || '{}')
-                state.form['heartbeat'] = JSON.parse(heartbeat || '{}')
-                state.form['protoccol'] = protoccol ? JSON.parse(protoccol) : { name: "Modbus RTU", options: {} }
-                state.form['id'] = id
-                if (protoccol) {
-                    let jsonData = JSON.stringify(JSON.parse(protoccol).options)
-                    state.resourceModalPro.content = JSON.stringify(JSON.parse(jsonData), null, 4);
-                    mirrorRef.value.setValue(state.resourceModalPro.content);
-                }
-            })
-        };
-        onMounted(() => {
-            getDetail();
-        });
-        return {
-            mirrorRef,
-            activeName,
-            getDetail,
-            network_tunnel_type,
-            tunnel_serial_baudrate,
-            tunnel_serial_databits,
-            tunnel_serial_stopbits,
-            tunnel_serial_parity,
-            network_protocols,
-            submit,
-            ...toRefs(props),
-            ...toRefs(state),
-        };
-    },
+    const activeName = ref('first')
+    const mirrorRef = ref('mirrorRef')
+    const submit = () => {
+      // 串口参数-检验位-无
+      if (state.form.serial.parity == 0) {
+        state.form.serial.rs485 = false
+        delete state.form.serial.port
+      }
+      // 串口参数-检验位-偶/奇
+      if (state.form.serial.parity == 1 || state.form.serial.parity == 2) {
+        state.form.serial.port = null
+        delete state.form.serial.rs485
+      }
+      // return
+      api.tunnel.editItem({ ...state.form }).then((res: any) => {
+        ElMessage.success('修改成功')
+        router.go(-1);
+      });
+    };
+    const getDetail = () => {
+      const id = route.params && route.params.id;
+      api.tunnel.getDetail({ "id": id }).then((res: any) => {
+        const { id, name, types, status, addr, serial, retry, protoccol, heartbeat } = res
+        state.form['name'] = name
+        state.form['types'] = types
+        state.form['addr'] = addr
+        state.form['status'] = status
+        state.form['serial'] = JSON.parse(serial || '{}')
+        state.form['retry'] = JSON.parse(retry || '{}')
+        state.form['heartbeat'] = JSON.parse(heartbeat || '{}')
+        state.form['protoccol'] = protoccol ? JSON.parse(protoccol) : { name: "Modbus RTU", options: {} }
+        state.form['id'] = id
+        if (protoccol) {
+          let jsonData = JSON.stringify(JSON.parse(protoccol).options)
+          state.resourceModalPro.content = JSON.stringify(JSON.parse(jsonData), null, 4);
+          mirrorRef.value.setValue(state.resourceModalPro.content);
+        }
+      })
+    };
+    onMounted(() => {
+      getDetail();
+    });
+    return {
+      mirrorRef,
+      activeName,
+      getDetail,
+      network_tunnel_type,
+      tunnel_serial_baudrate,
+      tunnel_serial_databits,
+      tunnel_serial_stopbits,
+      tunnel_serial_parity,
+      network_protocols,
+      submit,
+      ...toRefs(props),
+      ...toRefs(state),
+    };
+  },
 });
 </script>
 
 <style>
 .CodeMirror {
-    width: 100%;
-    height: 600px;
-    font-size: 16px;
+  width: 100%;
+  height: 600px;
+  font-size: 16px;
 }
 </style>
 <style lang="scss" scoped>
 ::v-deep .el-collapse-item__header {
-    position: relative;
-    padding-left: 20px;
+  position: relative;
+  padding-left: 20px;
 
-    .el-collapse-item__arrow {
-        margin: 0 !important;
-        position: absolute;
-        left: 0;
-        right: 0;
+  .el-collapse-item__arrow {
+    margin: 0 !important;
+    position: absolute;
+    left: 0;
+    right: 0;
 
-    }
+  }
 }
 
 ::v-deep .el-input,
 ::v-deep .el-input-number {
-    width: 500px;
+  width: 500px;
 }
 
 ::v-deep .params {
-    width: 600px;
+  width: 600px;
 }
 </style>