feat: 同步协议处理、前端交互与业务联调改动

wanshenmean

2026-03-17 94ad631d316da04c46266ddb1fc6e63e6f8f2fae

 Code/WCS/WIDESEAWCS_S7Simulator/WIDESEAWCS_S7Simulator.Web/src/views/CreateView.vue

@@ -1,4 +1,4 @@
<template>
<template>
  <div>
    <div class="page-header">
      <div class="header-left">
@@ -6,7 +6,7 @@
          <el-icon :size="24"><Plus /></el-icon>
          创建实例
        </h2>
        <p class="text-muted">创建新的 S7 PLC 仿真器实例</p>
        <p class="text-muted">创建新的 S7 PLC 仿真实例</p>
      </div>
      <el-button @click="$router.push('/')">
        <el-icon><Back /></el-icon>
@@ -83,6 +83,21 @@
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="协议模板" prop="protocolTemplateId">
                  <el-select v-model="form.protocolTemplateId" style="width: 100%">
                    <el-option
                      v-for="tpl in protocolTemplates"
                      :key="tpl.id"
                      :label="`${tpl.name} (${tpl.id})`"
                      :value="tpl.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 内存配置 -->
            <el-divider content-position="left">
              <h3>内存配置</h3>
@@ -90,7 +105,7 @@

            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="M区域大小">
                <el-form-item label="M区大小">
                  <el-input-number
                    v-model="form.mRegionSize"
                    :min="0"
@@ -99,7 +114,7 @@
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="I区域大小">
                <el-form-item label="I区大小">
                  <el-input-number
                    v-model="form.iRegionSize"
                    :min="0"
@@ -108,7 +123,7 @@
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="Q区域大小">
                <el-form-item label="Q区大小">
                  <el-input-number
                    v-model="form.qRegionSize"
                    :min="0"
@@ -120,11 +135,16 @@

            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="DB块数量">
                  <el-input-number
                    v-model="form.dbBlockCount"
                    :min="0"
                <el-form-item label="DB块列表">
                  <el-select
                    v-model="form.dbBlockNumbers"
                    multiple
                    filterable
                    allow-create
                    default-first-option
                    :reserve-keyword="false"
                    style="width: 100%"
                    placeholder="输入块号后回车，例如 50、900、901"
                  />
                </el-form-item>
              </el-col>
@@ -172,13 +192,13 @@
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { Plus, Back, QuestionFilled } from '@element-plus/icons-vue'
import * as api from '../api'
import type { InstanceConfig, MemoryRegionConfig, SiemensPLCType } from '../types'
import type { InstanceConfig, MemoryRegionConfig, ProtocolTemplate, SiemensPLCType } from '../types'

const router = useRouter()
const formRef = ref<FormInstance>()
@@ -190,9 +210,11 @@
  port: 102,
  activationKey: '4b86f3fc-f650-3b08-5924-b0f8278d6ed2',
  autoStart: false,
  protocolTemplateId: '',
  mRegionSize: 1024,
  dbBlockCount: 100,
  dbBlockSize: 1024,
  dbBlockCount: 0,
  dbBlockNumbers: [] as Array<number | string>,
  dbBlockSize: 65536,
  iRegionSize: 256,
  qRegionSize: 256,
  tRegionCount: 64,
@@ -200,6 +222,7 @@
})

const submitting = ref(false)
const protocolTemplates = ref<ProtocolTemplate[]>([])

const rules: FormRules = {
  id: [
@@ -214,9 +237,19 @@
  ],
  port: [
    { required: true, message: '请输入监听端口', trigger: 'blur' },
    { type: 'number', min: 1, max: 65535, message: '端口必须在1-65535之间', trigger: 'blur' }
    { type: 'number', min: 1, max: 65535, message: '端口必须在 1-65535 之间', trigger: 'blur' }
  ],
  protocolTemplateId: [
    { required: true, message: '请选择协议模板', trigger: 'change' }
  ]
}

onMounted(async () => {
  protocolTemplates.value = await api.getProtocolTemplates()
  if (protocolTemplates.value.length > 0) {
    form.value.protocolTemplateId = protocolTemplates.value[0].id
  }
})

async function handleSubmit() {
  if (!formRef.value) return
@@ -227,9 +260,16 @@
    submitting.value = true

    try {
      const dbBlockNumbers = normalizeDbBlockNumbers(form.value.dbBlockNumbers)
      if (dbBlockNumbers.length === 0) {
        ElMessage.error('请至少配置一个DB块号，例如 50,900,901')
        return
      }

      const memoryConfig: MemoryRegionConfig = {
        mRegionSize: form.value.mRegionSize > 0 ? form.value.mRegionSize : 1024,
        dbBlockCount: form.value.dbBlockCount > 0 ? form.value.dbBlockCount : 100,
        dbBlockCount: 0,
        dbBlockNumbers,
        dbBlockSize: form.value.dbBlockSize > 0 ? form.value.dbBlockSize : 1024,
        iRegionSize: form.value.iRegionSize > 0 ? form.value.iRegionSize : 256,
        qRegionSize: form.value.qRegionSize > 0 ? form.value.qRegionSize : 256,
@@ -244,6 +284,7 @@
        port: form.value.port,
        activationKey: form.value.activationKey || '',
        autoStart: form.value.autoStart,
        protocolTemplateId: form.value.protocolTemplateId,
        memoryConfig
      }

@@ -263,6 +304,14 @@
    }
  })
}

function normalizeDbBlockNumbers(input: Array<number | string>): number[] {
  return Array.from(new Set(
    input
      .map(x => Number(String(x).trim()))
      .filter(x => Number.isInteger(x) && x > 0)
  )).sort((a, b) => a - b)
}
</script>

<style scoped>