<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div id="tunnelinfo">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><h3><i class="el-icon-tickets" />&nbsp;通道信息综合查询</h3></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div>
      <span style="font-weight: bold">通道类型：</span>
      <el-select v-model="tunnelType" clearable placeholder="请选择通道类型" @change="tunnelChage">
        <el-option
          v-for="item in tunnelTypeList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <span style="font-weight: bold">规约类型：</span>
      <el-select v-model="proType" clearable placeholder="请选择规约类型" @change="proChage">
        <el-option
          v-for="item in proTypeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <vxe-button status="primary" size="small" icon="el-icon-search" @click="searchTunnel">查询</vxe-button>
      <vxe-button status="primary" size="small" icon="el-icon-plus" @click="addProtocol">添加通道</vxe-button>
      <!-- <vxe-button status="primary" size="small" icon="el-icon-download" @click="exportDataEvent">导出</vxe-button>-->
    </div>
    <!--表格-->
    <div style="padding-top: 10px">
      <vxe-table
        ref="xTable"
        border
        stripe
        row-id="id"
        max-height="500px"
        align="center"
        :cell-style="cellStyle"
        :expand-config="{expandRowKeys: ['1']}"
        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
      >
        <vxe-table-column type="seq" width="60" />
        <vxe-table-column type="expand" width="60">
          <template v-slot:content="{ row, rowIndex }">
            <vxe-form v-if="row.tunnelType==='FILEPARSE'">
              <el-row>
                <el-col :span="12">
                  <vxe-form-item title="通道id:" label-width="300px">
                    <span>{{ row.id }}</span>
                  </vxe-form-item>
                </el-col>
              </el-row>
            </vxe-form>
            <vxe-form v-if="row.tunnelType==='IEC104TCPMASTER'">
              <el-row>
                <el-col :span="12">
                  <vxe-form-item title="通道id:" label-width="300px">
                    <span>{{ row.id }}</span>
                  </vxe-form-item>
                </el-col>
                <el-col :span="4">
                  <vxe-form-item title="公共地址位:" label-width="125px">
                    <span>{{ row.publicAddress }}</span>
                  </vxe-form-item>
                </el-col>
                <el-col :span="4">
                  <vxe-form-item title="远端ip:" label-width="125px">
                    <span>{{ row.remoteIp }}</span>
                  </vxe-form-item>
                </el-col>
                <el-col :span="4">
                  <vxe-form-item title="远端端口:" label-width="125px">
                    <span>{{ row.remotePort }}</span>
                  </vxe-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <vxe-form-item title="备用远端ip:" label-width="125px">
                    <span>{{ row.remoteSpareIp }}</span>
                  </vxe-form-item>
                </el-col>
                <el-col :span="6">
                  <vxe-form-item title="备用远端端口:" label-width="125px">
                    <span>{{ row.remoteSparePort }}</span>
                  </vxe-form-item>
                </el-col>
                <el-col :span="6">
                  <vxe-form-item title="自身ip:" label-width="125px">
                    <span>{{ row.selfIp }}</span>
                  </vxe-form-item>
                </el-col>
                <el-col :span="6">
                  <vxe-form-item title="自身端口:" label-width="125px">
                    <span>{{ row.selfPort }}</span>
                  </vxe-form-item>
                </el-col>
              </el-row>
            </vxe-form>
            <vxe-form v-if="row.tunnelType==='IEC104TCPSLAVE'">
              <el-row>
                <el-col :span="12">
                  <vxe-form-item title="通道id:" label-width="300px">
                    <span>{{ row.id }}</span>
                  </vxe-form-item>
                </el-col>
                <el-col :span="4">
                  <vxe-form-item title="公共地址位:" label-width="125px">
                    <span>{{ row.publicAddress }}</span>
                  </vxe-form-item>
                </el-col>
                <el-col :span="4">
                  <vxe-form-item title="自身ip:" label-width="125px">
                    <span>{{ row.selfIp }}</span>
                  </vxe-form-item>
                </el-col>
                <el-col :span="4">
                  <vxe-form-item title="自身端口:" label-width="125px">
                    <span>{{ row.selfPort }}</span>
                  </vxe-form-item>
                </el-col>
                <el-col :span="12">
                  <vxe-form-item title="对端ip:" label-width="125px">
                    <span>{{ row.remotePort }}</span>
                  </vxe-form-item>
                </el-col>
              </el-row>
            </vxe-form>
            <vxe-form v-if="row.tunnelType==='MODBUSTCPMASTER'">
              <el-row>
                <el-col :span="12">
                  <vxe-form-item title="通道id:" label-width="300px">
                    <span>{{ row.id }}</span>
                  </vxe-form-item>
                </el-col>
                <el-col :span="4">
                  <vxe-form-item title="公共地址位:" label-width="125px">
                    <span>{{ row.publicAddress }}</span>
                  </vxe-form-item>
                </el-col>
                <el-col :span="4">
                  <vxe-form-item title="远端ip:" label-width="125px">
                    <span>{{ row.remoteIp }}</span>
                  </vxe-form-item>
                </el-col>
                <el-col :span="4">
                  <vxe-form-item title="远端端口:" label-width="125px">
                    <span>{{ row.remotePort }}</span>
                  </vxe-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <vxe-form-item title="备用远端ip:" label-width="125px">
                    <span>{{ row.remoteSpareIp }}</span>
                  </vxe-form-item>
                </el-col>
                <el-col :span="6">
                  <vxe-form-item title="备用远端端口:" label-width="125px">
                    <span>{{ row.remoteSparePort }}</span>
                  </vxe-form-item>
                </el-col>
                <el-col :span="6">
                  <vxe-form-item title="自身ip:" label-width="125px">
                    <span>{{ row.selfIp }}</span>
                  </vxe-form-item>
                </el-col>
                <el-col :span="6">
                  <vxe-form-item title="自身端口:" label-width="125px">
                    <span>{{ row.selfPort }}</span>
                  </vxe-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <vxe-form-item title="功能码:" label-width="125px">
                    <span>{{ row.functionCode }}</span>
                  </vxe-form-item>
                </el-col>
                <!--<el-col :span="6">
                  <vxe-form-item title="数据类型:" label-width="125px">
                    <span>{{ row.protocolDataType }}</span>
                  </vxe-form-item>
                </el-col>-->
              </el-row>
            </vxe-form>
            <vxe-form v-if="row.tunnelType==='MODBUSTCPSLAVE'">
              <el-row>
                <el-col :span="12">
                  <vxe-form-item title="通道id:" label-width="300px">
                    <span>{{ row.id }}</span>
                  </vxe-form-item>
                </el-col>
                <el-col :span="4">
                  <vxe-form-item title="公共地址位:" label-width="125px">
                    <span>{{ row.publicAddress }}</span>
                  </vxe-form-item>
                </el-col>
                <el-col :span="4">
                  <vxe-form-item title="自身ip:" label-width="125px">
                    <span>{{ row.selfIp }}</span>
                  </vxe-form-item>
                </el-col>
                <el-col :span="4">
                  <vxe-form-item title="自身端口:" label-width="125px">
                    <span>{{ row.selfPort }}</span>
                  </vxe-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <vxe-form-item title="设备地址:" label-width="125px">
                    <span>{{ row.slaveId }}</span>
                  </vxe-form-item>
                </el-col>
                <el-col :span="6">
                  <vxe-form-item title="功能码:" label-width="125px">
                    <span>{{ row.functionCode }}</span>
                  </vxe-form-item>
                </el-col>
                <el-col :span="12">
                  <vxe-form-item title="对端ip:" label-width="125px">
                    <span>{{ row.remotePort }}</span>
                  </vxe-form-item>
                </el-col>
                <!--<el-col :span="6">
                  <vxe-form-item title="数据类型:" label-width="125px">
                    <span>{{ row.protocolDataType }}</span>
                  </vxe-form-item>
                </el-col>-->
              </el-row>
            </vxe-form>
            <vxe-form v-if="row.tunnelType==='MODBUSRTUMASTER' || row.tunnelType==='MODBUSRTUSLAVE'">
              <el-row>
                <el-col :span="12">
                  <vxe-form-item title="通道id:" label-width="300px">
                    <span>{{ row.id }}</span>
                  </vxe-form-item>
                </el-col>
                <el-col :span="6">
                  <vxe-form-item title="串口名称:" label-width="125px">
                    <span>{{ row.serialName }}</span>
                  </vxe-form-item>
                </el-col>
                <el-col :span="6">
                  <vxe-form-item title="波特率:" label-width="125px">
                    <span>{{ row.baudRate }}</span>
                  </vxe-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <vxe-form-item title="功能码:" label-width="125px">
                    <span>{{ row.functionCode }}</span>
                  </vxe-form-item>
                </el-col>
                <el-col :span="6">
                  <vxe-form-item title="设备地址:" label-width="125px">
                    <span>{{ row.slaveId }}</span>
                  </vxe-form-item>
                </el-col>
                <!--<el-col :span="6">
                  <vxe-form-item title="数据类型:" label-width="125px">
                    <span>{{ row.protocolDataType }}</span>
                  </vxe-form-item>
                </el-col>-->
                <el-col :span="6">
                  <vxe-form-item title="奇偶校验:" label-width="125px">
                    <span>{{ row.parity }}</span>
                  </vxe-form-item>
                </el-col>
              </el-row>
            </vxe-form>
            <vxe-form v-if="row.tunnelType==='CDTRTUMASTER' || row.tunnelType==='CDTRTUSLAVE'">
              <el-row>
                <el-col :span="12">
                  <vxe-form-item title="通道id:" label-width="300px">
                    <span>{{ row.id }}</span>
                  </vxe-form-item>
                </el-col>
                <el-col :span="6">
                  <vxe-form-item title="串口名称:" label-width="125px">
                    <span>{{ row.serialName }}</span>
                  </vxe-form-item>
                </el-col>
                <el-col :span="6">
                  <vxe-form-item title="波特率:" label-width="125px">
                    <span>{{ row.baudRate }}</span>
                  </vxe-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <vxe-form-item title="同步字1:" label-width="125px">
                    <span>{{ row.synchronousWord1 }}</span>
                  </vxe-form-item>
                </el-col>
                <el-col :span="6">
                  <vxe-form-item title="同步字2:" label-width="125px">
                    <span>{{ row.synchronousWord2 }}</span>
                  </vxe-form-item>
                </el-col>
                <el-col :span="6">
                  <vxe-form-item title="奇偶校验:" label-width="125px">
                    <span>{{ row.parity }}</span>
                  </vxe-form-item>
                </el-col>
              </el-row>
            </vxe-form>
            <vxe-form v-if="row.tunnelType==='TCPSERVERASMODBUSMASTER'">
              <el-row>
                <el-col :span="12">
                  <vxe-form-item title="通道id:" label-width="300px">
                    <span>{{ row.id }}</span>
                  </vxe-form-item>
                </el-col>
                <el-col :span="4">
                  <vxe-form-item title="远端ip:" label-width="125px">
                    <span>{{ row.remoteIp }}</span>
                  </vxe-form-item>
                </el-col>
                <el-col :span="4">
                  <vxe-form-item title="自身ip:" label-width="125px">
                    <span>{{ row.selfIp }}</span>
                  </vxe-form-item>
                </el-col>
                <el-col :span="4">
                  <vxe-form-item title="自身端口:" label-width="125px">
                    <span>{{ row.selfPort }}</span>
                  </vxe-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <vxe-form-item title="功能码:" label-width="125px">
                    <span>{{ row.functionCode }}</span>
                  </vxe-form-item>
                </el-col>
                <el-col :span="6">
                  <vxe-form-item title="设备地址:" label-width="125px">
                    <span>{{ row.slaveId }}</span>
                  </vxe-form-item>
                </el-col>
              </el-row>
            </vxe-form>
            <vxe-form v-if="row.tunnelType==='TCPCLIENTASMODBUSMASTER'">
              <el-row>
                <el-col :span="12">
                  <vxe-form-item title="通道id:" label-width="300px">
                    <span>{{ row.id }}</span>
                  </vxe-form-item>
                </el-col>
                <el-col :span="6">
                  <vxe-form-item title="远端ip:" label-width="125px">
                    <span>{{ row.remoteIp }}</span>
                  </vxe-form-item>
                </el-col>
                <el-col :span="6">
                  <vxe-form-item title="远端端口:" label-width="125px">
                    <span>{{ row.remotePort }}</span>
                  </vxe-form-item>
                </el-col>

              </el-row>
              <el-row>
                <el-col :span="6">
                  <vxe-form-item title="备用远端ip:" label-width="125px">
                    <span>{{ row.remoteSpareIp }}</span>
                  </vxe-form-item>
                </el-col>
                <el-col :span="6">
                  <vxe-form-item title="备用远端端口:" label-width="125px">
                    <span>{{ row.remoteSparePort }}</span>
                  </vxe-form-item>
                </el-col>
                <el-col :span="6">
                  <vxe-form-item title="自身ip:" label-width="125px">
                    <span>{{ row.selfIp }}</span>
                  </vxe-form-item>
                </el-col>
                <el-col :span="6">
                  <vxe-form-item title="自身端口:" label-width="125px">
                    <span>{{ row.selfPort }}</span>
                  </vxe-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <vxe-form-item title="功能码:" label-width="125px">
                    <span>{{ row.functionCode }}</span>
                  </vxe-form-item>
                </el-col>
                <el-col :span="6">
                  <vxe-form-item title="设备地址:" label-width="125px">
                    <span>{{ row.slaveId }}</span>
                  </vxe-form-item>
                </el-col>
              </el-row>
            </vxe-form>
          </template>
        </vxe-table-column>
        <!--   <vxe-table-column field="id" title="通道"></vxe-table-column>-->
        <vxe-table-column field="tunnelName" title="通道名称" />
        <vxe-table-column field="tunnelType" title="通道类型" :filters="proTypeList" :formatter="formateProType" />
        <vxe-table-column field="refreshInterval" title="时间间隔(s)" />
        <vxe-table-column
          field="isEnable"
          title="是否启用通道"
          :filters="options"
          :edit-render="{name: '$select', options: options}"
        />
        <vxe-table-column title="操作" width="150" show-overflow>
          <template v-slot="{ row }">
            <vxe-button status="primary" size="small" round @click="editEvent(row)">编辑</vxe-button>
            <vxe-button status="danger" size="small" round @click="removeEvent(row)">删除</vxe-button>
          </template>
        </vxe-table-column>
      </vxe-table>
      <vxe-pager
        perfect
        :current-page.sync="currentPage"
        :page-size.sync="pageSize"
        :total="totalResult"
        :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
      />
    </div>
    <!--添加弹框-->
    <div>
      <el-dialog
        :visible.sync="addVisible"
        :before-close="handleDialogClose"
        :close-on-click-modal="false"
        title="通道信息维护"
        width="1000px"
      >
        <el-form ref="form" :model="form" :rules="rules" label-position="right">
          <fieldset>
            <legend>通道基本信息</legend>
            <el-row class="row-bg el-row-two" justify="space-between">
              <el-col :span="12">
                <el-form-item label="所属场站：" prop="efiId" label-width="150px">
                  <el-select v-model="form.efiId" placeholder="请选择" style="width: 100%" filterable>
                    <el-option
                      v-for="(item,index) in elTableData"
                      :key="index"
                      :label="item.name"
                      :value="item.stationCode"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否启用：" prop="isEnable" label-width="150px">
                  <el-switch
                    v-model="form.isEnable"
                    active-color="#13ce66"
                    :width="50"
                    active-text="开启"
                    inactive-text="关闭"
                    inactive-color="#ff4949"
                    :disabled="form.proType=='FILEPARSE'"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="row-bg el-row-two" justify="space-between">
              <!--<el-col :span="12">
                  <el-form-item label="通道ID：" prop="proID" label-width="150px">
                    <el-input v-model="form.proID"  style="width: 100%" placeholder="通道ID唯一" />
                  </el-form-item>
                </el-col>-->
              <el-col :span="12">
                <el-form-item label="通道名称：" prop="tunnelName" label-width="150px">
                  <el-input v-model="form.tunnelName" :maxlength="32" style="width: 100%" placeholder="请填写通道名称" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="通道类型：" prop="tunnelType" label-width="150px">
                  <el-select
                    v-model="form.tunnelType"
                    placeholder="请选择"
                    style="width: 100%"
                    :disabled="disabled"
                    @change="tunnelTypeChange"
                  >
                    <el-option
                      v-for="item in tunnelTypeList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="row-bg el-row-two" justify="space-between">
              <el-col :span="12">
                <el-form-item label="规约类型：" prop="proType" label-width="150px">
                  <el-select v-model="form.proType" placeholder="请选择" style="width: 100%" :disabled="disabled" @change="changeProType">
                    <el-option
                      v-for="item in proTypeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="时间间隔(s)：" prop="refreshInterval" label-width="150px">
                  <el-input v-model="form.refreshInterval" :maxlength="32" style="width: 100%" placeholder="数据刷新时间间隔" />
                </el-form-item>
              </el-col>
            </el-row>
          </fieldset>
          <!--send 104tcp-->
          <div id="ids104tcp" style="display: none">
            <fieldset>
              <legend>规约类型信息</legend>
              <el-row class="row-bg el-row-two" justify="space-between">
                <el-col :span="12">
                  <el-form-item label="本机ip：" label-width="150px" prop="selfIpsend104tcp">
                    <el-input v-model="form.selfIpsend104tcp" :maxlength="16" style="width: 100%" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="本机端口：" label-width="150px" prop="selfPortsend104tcp">
                    <el-input v-model="form.selfPortsend104tcp" :maxlength="11" placeholder="必填项" style="width: 100%" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="row-bg el-row-two" justify="space-between">
                <el-col :span="12">
                  <el-form-item label="对端ip：" label-width="150px" prop="remoteIpSend104tcp">
                    <el-input v-model="form.remoteIpSend104tcp" placeholder="仅作为信息记录" style="width: 100%" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item ref="proCommAddr104" label="公共地址位：" label-width="150px" prop="publicAddress">
                    <el-input v-model="form.publicAddresssend104tcp" placeholder="必填项" style="width: 100%" />
                  </el-form-item>
                </el-col>
              </el-row>
            </fieldset>
          </div>
          <!--send modbustcp-->
          <div id="idsmodbustcp" ref="idsmodbustcp" style="display: none">
            <fieldset>
              <legend>规约类型信息</legend>
              <el-row class="row-bg el-row-two" justify="space-between">
                <el-col :span="12">
                  <el-form-item ref="selfIpsmodbustcp" label="自身ip：" label-width="150px" prop="selfIpsmodbustcp">
                    <el-input v-model="form.selfIpsmodbustcp" :maxlength="16" style="width: 100%" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item ref="selfPortsmodbustcp" label="自身端口：" label-width="150px" prop="selfPortsmodbustcp">
                    <el-input v-model="form.selfPortsmodbustcp" :maxlength="11" placeholder="必填项" style="width: 100%" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="row-bg el-row-two" justify="space-between">
                <el-col :span="12">
                  <el-form-item ref="functionCodesmodbustcp" label="功能码：" label-width="150px" prop="functionCode">
                    <el-input v-model="form.functionCodesmodbustcp" placeholder="必填项" style="width: 100%" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item ref="proTransCauseBytessmodbustcp" label="设备地址：" label-width="150px" prop="slaveId">
                    <el-input v-model="form.slaveIdsmodbustcp" placeholder="必填项" style="width: 100%" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="row-bg el-row-two" justify="space-between">
                <el-col :span="12">
                  <el-form-item label="对端ip：" label-width="150px" prop="remoteIpModbustcp">
                    <el-input v-model="form.remoteIpModbustcp" placeholder="仅作为信息记录" style="width: 100%" />
                  </el-form-item>
                </el-col>
                <!--<el-col :span="12">-->
                <!--<el-form-item ref="protocolDataType" label="数据类型：" label-width="150px" prop="functionCode">-->
                <!--<el-select v-model="form.protocolDataTypesmodbustcp" placeholder="请选择" style="width: 100%" @change="changeProType">-->
                <!--<el-option-->
                <!--v-for="item in enums.ProtocolDataType"-->
                <!--:key="item.value"-->
                <!--:label="item.label"-->
                <!--:value="item.value"-->
                <!--/>-->
                <!--</el-select>-->
                <!--</el-form-item>-->
                <!--</el-col>-->
              </el-row>
            </fieldset>
          </div>
          <!--get 104tcp-->
          <div id="id104tcp" style="display: none">
            <fieldset>
              <legend>规约类型信息</legend>
              <el-row class="row-bg el-row-two" justify="space-between">
                <el-col :span="12">
                  <el-form-item label="远端ip：" label-width="150px" prop="remoteIp">
                    <el-input v-model="form.remoteIp" :maxlength="16" placeholder="必填项" style="width: 100%" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="远端端口：" label-width="150px" prop="remotePort">
                    <el-input v-model="form.remotePort" :maxlength="11" placeholder="必填项" style="width: 100%" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="row-bg el-row-two" justify="space-between">
                <el-col :span="12">
                  <el-form-item label="远端备用ip：" label-width="150px" prop="remoteSpareIp">
                    <el-input v-model="form.remoteSpareIp" :maxlength="16" style="width: 100%" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="远端备用端口：" label-width="150px" prop="remoteSparePort">
                    <el-input v-model="form.remoteSparePort" :maxlength="11" style="width: 100%" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="row-bg el-row-two" justify="space-between">
                <el-col :span="12">
                  <el-form-item label="本机ip：" label-width="150px" prop="selfIp">
                    <el-input v-model="form.selfIp" :maxlength="16" style="width: 100%" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="本机端口：" label-width="150px" prop="selfPort">
                    <el-input v-model="form.selfPort" :maxlength="11" style="width: 100%" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="row-bg el-row-two" justify="space-between">
                <el-col :span="12">
                  <el-form-item ref="proCommAddr104" label="公共地址位：" label-width="150px" prop="publicAddress">
                    <el-input v-model="form.publicAddress" placeholder="必填项" style="width: 100%" />
                  </el-form-item>
                </el-col>
              </el-row>
            </fieldset>
          </div>
          <!--get modbustcp-->
          <div id="idmodbustcp" style="display: none">
            <fieldset>
              <legend>规约类型信息</legend>
              <el-row class="row-bg el-row-two" justify="space-between">
                <el-col :span="12">
                  <el-form-item label="远端ip：" label-width="150px" prop="remoteIp">
                    <el-input v-model="form.remoteIpmtcp" :maxlength="16" placeholder="必填项" style="width: 100%" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="远端端口：" label-width="150px" prop="remotePort">
                    <el-input v-model="form.remotePortmtcp" :maxlength="11" placeholder="必填项" style="width: 100%" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="row-bg el-row-two" justify="space-between">
                <el-col :span="12">
                  <el-form-item label="远端备用ip：" label-width="150px" prop="remoteSpareIpmtcp">
                    <el-input v-model="form.remoteSpareIpmtcp" :maxlength="16" placeholder="必填项" style="width: 100%" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="远端备用端口：" label-width="150px" prop="remoteSparePortmtcp">
                    <el-input v-model="form.remoteSparePortmtcp" :maxlength="11" placeholder="必填项" style="width: 100%" />
                  </el-form-item>
                </el-col>
              </el-row>
              <!--<el-row class="row-bg el-row-two" justify="space-between">
                <el-col :span="12">
                  <el-form-item label="本机ip：" label-width="150px" prop="selfIp">
                    <el-input v-model="form.selfIpmtcp" :maxlength="16" placeholder="必填项" style="width: 100%" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="本机端口：" label-width="150px" prop="selfPort">
                    <el-input v-model="form.selfPortmtcp" :maxlength="11" placeholder="必填项" style="width: 100%" />
                  </el-form-item>
                </el-col>
              </el-row>-->
              <el-row class="row-bg el-row-two" justify="space-between">
                <el-col :span="12">
                  <el-form-item ref="functionCodemodbus" label="功能码：" label-width="150px" prop="functionCode">
                    <el-select v-model="form.functionCode" placeholder="请选择" style="width: 100%">
                      <el-option
                        v-for="item in functionCodeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item ref="slaveIdmodbus" label="设备地址：" label-width="150px" prop="slaveId">
                    <el-input v-model="form.slaveId" placeholder="必填项" style="width: 100%" />
                  </el-form-item>
                </el-col>
              </el-row>
              <!--<el-row class="row-bg el-row-two" justify="space-between">
                <el-col :span="12">
                  <el-form-item ref="protocolDataType" label="数据类型：" label-width="150px" prop="functionCode">
                    <el-select v-model="form.protocolDataType" placeholder="请选择" style="width: 100%">
                      <el-option
                        v-for="item in enums.ProtocolDataType"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>

              </el-row>-->
            </fieldset>
          </div>
          <!--get modbusRtu-->
          <div id="idmodbusRtu" style="display: none">
            <fieldset>
              <legend>规约类型信息</legend>
              <el-row class="row-bg el-row-two" justify="space-between">
                <el-col :span="12">
                  <el-form-item label="串口名称：" label-width="150px" prop="serialName">
                    <el-select v-model="form.serialName" placeholder="请选择" style="width: 100%" filterable>
                      <el-option
                        v-for="item in serialPortsList"
                        :key="item"
                        :label="item"
                        :value="item"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="波特率：" label-width="150px" prop="baudRate">
                    <el-select v-model="form.baudRate" placeholder="请选择" style="width: 100%" filterable>
                      <el-option
                        v-for="item in proBaudrateOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="row-bg el-row-two" justify="space-between">
                <el-col :span="12">
                  <el-form-item label="功能码：" label-width="150px" prop="functionCode">
                    <el-select v-model="form.functionCodeRtu" placeholder="请选择" style="width: 100%">
                      <el-option
                        v-for="item in functionCodeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="设备地址：" label-width="150px" prop="slaveId">
                    <el-input v-model="form.slaveIdRtu" placeholder="必填项" style="width: 100%" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="row-bg el-row-two" justify="space-between">
                <el-col :span="12">
                  <el-form-item label="奇偶校验：" label-width="150px" prop="parity">
                    <!--<el-input v-model="form.parity"  placeholder="必填项" style="width: 100%"/>-->
                    <el-select v-model="form.parity" placeholder="请选择" style="width: 100%">
                      <el-option
                        v-for="item in parityOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="12">
                  <el-form-item ref="protocolDataTypeRtu" label="数据类型：" label-width="150px" prop="functionCode">
                    <el-select v-model="form.protocolDataTypeRtu" placeholder="请选择" style="width: 100%" @change="changeProType">
                      <el-option
                        v-for="item in enums.ProtocolDataType"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>-->
              </el-row>
            </fieldset>
          </div>
          <!--get cdtRtu-->
          <div id="idcdtRtu" style="display: none">
            <fieldset>
              <legend>规约类型信息</legend>
              <el-row class="row-bg el-row-two" justify="space-between">
                <el-col :span="12">
                  <el-form-item label="串口名称：" label-width="150px" prop="serialNamecdt">
                    <el-select v-model="form.serialNamecdt" placeholder="请选择" style="width: 100%" filterable>
                      <el-option
                        v-for="item in serialPortsList"
                        :key="item"
                        :label="item"
                        :value="item"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="波特率：" label-width="150px" prop="baudRate">
                    <el-select v-model="form.baudRatecdt" placeholder="请选择" style="width: 100%" filterable>
                      <el-option
                        v-for="item in proBaudrateOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="row-bg el-row-two" justify="space-between">
                <el-col :span="12">
                  <el-form-item ref="proInfBaseAddrVarcdtRtu" label="同步字1：0X" label-width="150px" prop="synchronousWord1">
                    <el-input v-model="form.synchronousWord1" :maxlength="4" placeholder="必填项" style="width: 100%" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item ref="proInfBaseAddrVarcdtRtu" label="同步字2：0X" label-width="150px" prop="synchronousWord2">
                    <el-input v-model="form.synchronousWord2" :maxlength="4" placeholder="必填项" style="width: 100%" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="row-bg el-row-two" justify="space-between">
                <el-col :span="12">
                  <el-form-item label="奇偶校验：" label-width="150px" prop="parity">
                    <el-select v-model="form.paritycdt" placeholder="请选择" style="width: 100%">
                      <el-option
                        v-for="item in parityOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </fieldset>
          </div>
          <div id="tcpClient" style="display: none">
            <fieldset>
              <legend>规约类型信息</legend>
              <el-row class="row-bg el-row-two" justify="space-between">
                <el-col :span="12">
                  <el-form-item label="远端ip：" label-width="150px" prop="remoteIp">
                    <el-input v-model="form.remoteIpTcpClient" :maxlength="16" placeholder="必填项" style="width: 100%" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="远端端口：" label-width="150px" prop="remotePort">
                    <el-input v-model="form.remotePortTcpClient" :maxlength="11" placeholder="必填项" style="width: 100%" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="row-bg el-row-two" justify="space-between">
                <el-col :span="12">
                  <el-form-item label="远端备用ip：" label-width="150px" prop="remoteSpareIpmtcp">
                    <el-input v-model="form.remoteSpareIpTcpClient" :maxlength="16" placeholder="必填项" style="width: 100%" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="远端备用端口：" label-width="150px" prop="remoteSparePortmtcp">
                    <el-input v-model="form.remoteSparePortTcpClient" :maxlength="11" placeholder="必填项" style="width: 100%" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="row-bg el-row-two" justify="space-between">
                <el-col :span="12">
                  <el-form-item label="本机ip：" label-width="150px" prop="selfIp">
                    <el-input v-model="form.selfIpTcpClient" :maxlength="16" style="width: 100%" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="本机端口：" label-width="150px" prop="selfPort">
                    <el-input v-model="form.selfPortTcpClient" :maxlength="11" style="width: 100%" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="row-bg el-row-two" justify="space-between">
                <el-col :span="12">
                  <el-form-item label="功能码：" label-width="150px" prop="functionCode">
                    <el-input v-model="form.functionCodeTcpClient" placeholder="必填项" style="width: 100%" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="设备地址：" label-width="150px" prop="slaveId">
                    <el-input v-model="form.slaveIdTcpClient" placeholder="必填项" style="width: 100%" />
                  </el-form-item>
                </el-col>
              </el-row>
            </fieldset>
          </div>
          <div id="tcpServer" style="display: none">
            <fieldset>
              <legend>规约类型信息</legend>
              <el-row class="row-bg el-row-two" justify="space-between">
                <el-col :span="12">
                  <el-form-item label="远端ip：" label-width="150px" prop="remoteIp">
                    <el-input v-model="form.remoteIpTcpServer" :maxlength="16" placeholder="必填项" style="width: 100%" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="本机ip：" label-width="150px" prop="selfIp">
                    <el-input v-model="form.selfIpTcpServer" :maxlength="16" style="width: 100%" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="row-bg el-row-two" justify="space-between">
                <el-col :span="12">
                  <el-form-item label="本机端口：" label-width="150px" prop="selfPort">
                    <el-input v-model="form.selfPortTcpServer" :maxlength="11" style="width: 100%" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="功能码：" label-width="150px" prop="functionCode">
                    <el-input v-model="form.functionCodeTcpServer" placeholder="必填项" style="width: 100%" />
                  </el-form-item>
                </el-col>

              </el-row>
              <el-row class="row-bg el-row-two" justify="space-between">
                <el-col :span="12">
                  <el-form-item label="设备地址：" label-width="150px" prop="slaveId">
                    <el-input v-model="form.slaveIdTcpServer" placeholder="必填项" style="width: 100%" />
                  </el-form-item>
                </el-col>
              </el-row>
            </fieldset>
          </div>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <vxe-button @click="cancelForm('form')">取 消</vxe-button>
          <vxe-button v-show="buttonVisible" @click="resetForm('form')">重 置</vxe-button>
          <vxe-button :disabled="isDisabled" status="primary" @click="saveProtocol('form')">保 存</vxe-button>
        </span>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import enumerations from '../../enumeration'

export default {
  data() {
    const checkProID = (rule, value, callback) => {
      var v6 = this.tableData
      if (this.form.proID == null || this.form.proID === '') {
        callback(new Error('不许为空'))
      }
      for (let i = 0; i < v6.length; i++) {
        if (this.modiId === '') {
          // 新增
          if ((this.form.proID === v6[i].proID)) {
            callback(new Error('通道号不能重复'))
          }
        } else {
          // 修改
          if (this.idx !== i) {
            if ((this.form.proID === v6[i].proID)) {
              callback(new Error('通道号不能重复'))
            }
          }
        }
      }
      callback()
    }
    const checktunnelName = (rule, value, callback) => {
      var s6 = this.tableData
      if (this.checkFlag === 2) {
        s6 = editCheckDate(this.tableData, this.form)
      }
      if (this.form.tunnelName == null || this.form.tunnelName === '') {
        callback(new Error('不许为空'))
      }
      for (let i = 0; i < s6.length; i++) {
        if (this.modiId === '') {
          // 新增
          if ((this.form.tunnelName.replace(/(^\s*)|(\s*$)/g, '') === s6[i].tunnelName)) {
            callback(new Error('通道名称不能重复'))
          }
        } else {
          // 修改
          if (this.idx !== s6[i].id) {
            if (this.form.tunnelName != null) {
              if ((this.form.tunnelName.replace(/(^\s*)|(\s*$)/g, '') === s6[i].tunnelName)) {
                callback(new Error('通道名称不能重复'))
              }
            }
          }
        }
      }
      callback()
    }
    const checkRefreshInterval = (rule, value, callback) => {
      var reg = /^[+]{0,1}(\d+)$/
      if (!reg.test(this.form.refreshInterval)) {
        callback(new Error('数据间隔只能是正整数'))
      }
    }
    const checkserialName = (rule, value, callback) => {
      var s6 = this.tableData
      if (this.checkFlag === 2) {
        s6 = editCheckDate(this.tableData, this.form)
      }
      if (this.form.serialName == null || this.form.serialName === '') {
        callback(new Error('不许为空'))
      }
      for (let i = 0; i < s6.length; i++) {
        if (this.modiId !== s6[i].id && this.form.serialName === s6[i].serialName) {
          callback(new Error('该串口已有通道使用，串口名称不能重复'))
        }
      }
      callback()
    }
    const checkserialNamecdt = (rule, value, callback) => {
      var s6 = this.tableData
      if (this.checkFlag === 2) {
        s6 = editCheckDate(this.tableData, this.form)
      }
      if (this.form.serialNamecdt == null || this.form.serialNamecdt === '') {
        callback(new Error('不许为空'))
      }
      for (let i = 0; i < s6.length; i++) {
        if (this.modiId !== s6[i].id && this.form.serialNamecdt === s6[i].serialName) {
          callback(new Error('该串口已有通道使用，串口名称不能重复'))
        }
      }
      callback()
    }

    // v1:展示数据集合 v2:当前编辑的数据对象
    function editCheckDate(v1, v2) {
      const v3 = []
      for (let i = 0; i < v1.length; i++) {
        if (v2.id === v1[i].id) {
          continue
        }
        v3.push(v1[i])
      }
      return v3
    }

    return {
      disabled: false,
      saveVisible: false,
      tableLoading: false,
      typeTableData1a: [],
      tunnelType: '',
      proType: '',
      // 后台传入场站数据
      elTableData: [],
      StartEndTime: [],
      typeTable: [],
      checkFlag: 0,
      // 防止重复提交
      isDisabled: false,
      // 后台传入数据
      tableData: [],
      keywords: '',
      protocol: [],
      linuxDev: [],
      errorstr: '',
      filetype: '',
      currentid: 1,
      // 分页
      currentPage: 1,
      pageSize: 10,
      totalResult: 0,
      // 修改编辑弹出框标识；初始为 false，不弹出
      buttonVisible: true,
      // 存修改通道的主键
      modiId: '',
      // 删除弹出框标识；初始为 false，不弹出
      delVisible: false,
      // 添加弹出框标识；初始为 false，不弹出
      addVisible: false,
      // 数据下标
      idx: -1,
      proIndex: '',
      // 下拉框数据
      enums: enumerations,
      options: [
        { value: false, label: '停用中' },
        { value: true, label: '使用中' }
      ],
      tunnelTypeList: [{ value: 'Master', label: '数据接入' }, { value: 'Slave', label: '数据上送' }],
      proTypeOptions: [],
      proBaudrateOptions: [
        { value: 300, label: 'B300' },
        { value: 600, label: 'B600' },
        { value: 1200, label: 'B1200' },
        { value: 1800, label: 'B1800' },
        { value: 2400, label: 'B2400' },
        { value: 4800, label: 'B4800' },
        { value: 9600, label: 'B9600' },
        { value: 19200, label: 'B19200' },
        { value: 38400, label: 'B38400' },
        { value: 57600, label: 'B57600' },
        { value: 115200, label: 'B115200' }
      ],
      proTypeList: [
        { value: 'IEC104TCPMASTER', label: '采集104tcp' },
        { value: 'IEC104TCPSLAVE', label: '转发104tcp' },
        { value: 'MODBUSTCPMASTER', label: '采集modbustcp' },
        { value: 'MODBUSTCPSLAVE', label: '转发modbustcp' },
        { value: 'MODBUSRTUMASTER', label: '采集modbusRtu' },
        { value: 'MODBUSRTUSLAVE', label: '转发modbusRtu' },
        { value: 'CDTRTUMASTER', label: '采集cdtRtu' },
        { value: 'CDTRTUSLAVE', label: '转发cdtRtu' },
        { value: 'TCPSERVERASMODBUSMASTER', label: 'TCPServerAsModBus' },
    /*    { value: 'TCPCLIENTASMODBUSMASTER', label: 'TCPClientAsModBus' },*/
        { value: 'FILEPARSE', label: '隔离文件解析' }
      ],
      parityOptions: [
        { value: 0, label: '无校验' },
        { value: 1, label: '奇校验' },
        { value: 2, label: '偶校验' },
        { value: 3, label: '0校验' },
        { value: 4, label: '1校验' }],
      functionCodeOptions: [
        { value: 1, label: '1' },
        { value: 2, label: '2' },
        { value: 3, label: '3' },
        { value: 4, label: '4' }],
      proProgramOptions: [],
      serialPortsList: [],
      proProgramList: [],
      saveForm: {},
      rules: {
        tunnelName: [{ required: true, trigger: 'blur', validator: checktunnelName }],
        refreshInterval: [{ required: true, trigger: 'blur', validator: checkRefreshInterval }],
        efiId: [{ required: true, message: '请选择所属场站', trigger: 'blur' }],
        proType: [{ required: true, message: '不能为空', trigger: 'change' }],
        isEnable: [{ required: true, message: '不能为空', trigger: 'blur' }],
        tunnelType: [{ required: true, message: '不能为空', trigger: 'change' }],
        /* 数据接入modbustcp*/
        remoteIpmtcp: [{ required: true, message: '不能为空', trigger: 'blur' },
          {
            pattern: /^(?=(\b|\D))(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))(?=(\b|\D))/,
            message: '请填写正确的ip',
            trigger: 'blur'
          }],
        remotePortmtcp: [{ required: true, message: '不能为空', trigger: 'blur' },
          { pattern: /^[0-9]*$/, message: '请填写正确的端口' }],
        remoteSpareIpmtcp: [
          { required: false, trigger: 'blur' },
          {
            pattern: /^(?=(\b|\D))(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))(?=(\b|\D))/,
            trigger: 'blur',
            required: false,
            message: '请填写正确的ip'
          }],
        remoteSparePortmtcp: [{ required: false, trigger: 'blur' }, { pattern: /^[0-9]*$/, trigger: 'blur', required: false, message: '请填写正确的端口' }],
        slaveId: [{ required: true, message: '不能为空', trigger: 'blur' },
          { pattern: /^\+?[0-9][0-9]*$/, message: '请填写正整数' }],
        functionCode: [{ required: true, message: '不能为空', trigger: 'blur' },
          { pattern: /^\+?[0-9][0-9]*$/, message: '请填写正整数' }],
        /* 数据接入modbusRtu*/
        serialName: [{ required: true, validator: checkserialName, trigger: 'change' }],
        baudRate: [{ required: true, message: '不能为空', trigger: 'blur' }],
        functionCodeRtu: [{ required: true, message: '不能为空', trigger: 'blur' }],
        slaveIdRtu: [{ required: true, message: '不能为空', trigger: 'blur' }],
        parity: [{ required: true, message: '不能为空', trigger: 'blur' }],
        /* 数据接入 cdtRtu*/
        serialNamecdt: [{ required: true, validator: checkserialNamecdt, trigger: 'change' }],
        baudRatecdt: [{ required: true, message: '不能为空', trigger: 'blur' }],
        synchronousWord1: [{ required: true, message: '不能为空', trigger: 'blur' },
          { pattern: /^[0-9a-fxA-FX]{1,4}$/, message: '请填写16进制' }], // 正则有问题
        synchronousWord2: [{
          required: true,
          message: '不能为空',
          trigger: 'blur'
        }, { pattern: /^[0-9a-fxA-FX]{1,4}$/, message: '请填写16进制' }],
        /* send 104tcp*/
        selfIpsend104tcp: [{ required: false, trigger: 'blur' },
          {
            pattern: /^(?=(\b|\D))(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))(?=(\b|\D))/,
            message: '请填写正确的ip'
          }],
        selfPortsend104tcp: [{ required: false,trigger: 'blur' },
          { pattern: /^[0-9]*$/, message: '请填写正确的端口' }],
        publicAddresssend104tcp: [{ required: true, message: '不能为空', trigger: 'blur' }],
        remoteIpSend104tcp: [{ required: false, trigger: 'blur' },
          { pattern: /^(?=(\b|\D))(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))(?=(\b|\D))/,
            message: '请填写正确的ip' }],
        proCommand0cdtRtu: [{ required: true, message: '不能为空', trigger: 'blur' },
          { pattern: /^\+?[0-9][0-9]*$/, message: '请填写正整数' }],
        proDevNumber: [{ required: true, message: '不能为空', trigger: 'blur' },
          { pattern: /^\+?[0-9][0-9]*$/, message: '请填写正整数' }],
        /* send modbustcp*/
        selfIpsmodbustcp: [{ required: false, trigger: 'blur' },
          {
            pattern: /^(?=(\b|\D))(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))(?=(\b|\D))/,
            message: '请填写正确的ip'
          }],
        remoteIpModbustcp: [{ required: false, trigger: 'blur' },
          { pattern: /^(?=(\b|\D))(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))(?=(\b|\D))/,
            message: '请填写正确的ip' }],
        selfPortsmodbustcp: [{ required: false, trigger: 'blur' },
          { pattern: /^[0-9]*$/, message: '请填写正确的端口' }],
        functionCodesmodbustcp: [{ required: true, message: '不能为空', trigger: 'blur' }],
        slaveIdsmodbustcp: [{ required: true, message: '不能为空', trigger: 'blur' }],
        // protocolDataTypesmodbustcp: [], // 16或者10进制的正则
        /* 数据接入104tcp*/
        selfPort: [{ required: false, trigger: 'blur' },
          { pattern: /^[0-9]*$/, message: '请填写正确的端口' }],
        selfIp: [{ required: false, trigger: 'blur' },
          {
            pattern: /^(?=(\b|\D))(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))(?=(\b|\D))/,
            message: '请填写正确的ip'
          }],
        remotePort: [{ required: true, message: '不能为空', trigger: 'blur' },
          { pattern: /^[0-9]*$/, message: '请填写正确的端口' }],
        remoteSparePort: [{ required: false, trigger: 'blur' },
          { pattern: /^[0-9]*$/, message: '请填写正确的端口' }],
        remoteSpareIp: [{ required: false, trigger: 'blur' },
          {
            pattern: /^(?=(\b|\D))(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))(?=(\b|\D))/,
            message: '请填写正确的ip'
          }],
        remoteIp: [{ required: true, message: '不能为空', trigger: 'blur' },
          {
            pattern: /^(?=(\b|\D))(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))(?=(\b|\D))/,
            message: '请填写正确的ip'
          }],
        publicAddress: [{ required: true, message: '不能为空', trigger: 'blur' },
          { pattern: /^\+?[0-9][0-9]*$/, message: '请填写正整数' }]
      },
      form: {
        id: '',
        efiId: '',
        proID: '',
        tunnelName: '',
        proType: '',
        isEnable: true,
        tunnelType: '',
        refreshInterval: 5,
        /* get modbustcp*/
        remoteIpmtcp: '127.0.0.1',
        remotePortmtcp: 502,
        remoteSpareIpmtcp: '',
        remoteSparePortmtcp: '',
        selfIpmtcp: '',
        selfPortmtcp: '',
        slaveId: 1,
        functionCode: 3,
        protocolDataType: 'A',
        /* get104tcp*/
        publicAddress: 1,
        selfIp: '',
        selfPort: '',
        remoteIp: '127.0.0.1',
        remotePort: 2404,
        remoteSpareIp: '',
        remoteSparePort: '',
        /* get/send modbusRtu*/
        serialName: '',
        baudRate: 9600,
        functionCodeRtu: 3,
        slaveIdRtu: 1,
        parity: 0,
        protocolDataTypeRtu: 'A',
        /* get/send cdtRut*/
        serialNamecdt: '',
        baudRatecdt: 9600,
        paritycdt: 0,
        synchronousWord1: 'EB',
        synchronousWord2: '90',
        /* send 104tcp*/
        selfIpsend104tcp: '',
        remoteIpSend104tcp: '',
        selfPortsend104tcp: 2404,
        publicAddresssend104tcp: 1,
        /* send modbustcp*/
        selfIpsmodbustcp: '',
        remoteIpModbustcp: '',
        selfPortsmodbustcp: 502,
        functionCodesmodbustcp: 3,
        slaveIdsmodbustcp: 1,
        protocolDataTypesmodbustcp: 'A',
        /*tcpSever*/
        remoteIpTcpServer: '127.0.0.1',
        selfIpTcpServer: '',
        selfPortTcpServer: 502,
        functionCodeTcpServer: 3,
        slaveIdTcpServer: 1,
        /*tcpClient*/
        remoteIpTcpClient: '127.0.0.1',
        remotePortTcpClient: 502,
        remoteSpareIpTcpClient: '',
        remoteSparePortTcpClient: '',
        selfIpTcpClient: '',
        selfPortTcpClient: '',
        functionCodeTcpClient: 3,
        slaveIdTcpClient: 1,
      },
      ef: ''
    }
  },
  mounted() {
    this.getData()
    this.getEl()
    this.getSerialPorts()
  },
  methods: {
    getData() {
      this.$axios.get('/TunnelInfo/getAllTunnel').then(res => {
        console.log(res.data)
        this.tableData = res.data
        this.totalResult = this.tableData.length
        this.currentPage = 1
      })
    },
    getSerialPorts() {
      this.$axios.get('/TunnelInfo/getServerSerialPorts/').then(res => {
        if (res.code === 0) {
          this.serialPortsList = res.data
          for (var i = 0; i < this.serialPortsList.length; i++) {
            if (this.serialPortsList[i].substring(0, 3) === 'tty') {
              this.serialPortsList[i] = '/dev/' + this.serialPortsList[i]
            }
          }
        }
      })
    },
    getEl() {
      this.$axios.get('/electricField/').then(res => {
        this.elTableData.length=0
        this.elTableData.push(res.data)
        this.form.efiId = this.elTableData[0].stationCode
        this.ef = this.elTableData[0].stationCode
      })
    },
    handleDialogClose() {
      if (this.addVisible === true) {
        this.cancelForm('form')
      }
      this.addVisible = false
      this.getData()
    },
    searchTunnel() {
      if ((this.proType === '' && this.tunnelType === '') || (this.proType === null && this.tunnelType === null)) {
        this.getData()
      } else if (this.proType === '' || this.proType === null) {
        this.$axios.get('/TunnelInfo/getTunnel/' + this.tunnelType).then(res => {
          this.tableData = res.data
          this.totalResult = this.tableData.length
          this.currentPage = 1
        })
      } else {
        if (this.proChage()) {
          this.getData()
        } else {
          this.$axios.get('/TunnelInfo/getTunnel/' + this.proType).then(res => {
            /* console.log(res.data)*/
            this.tableData = res.data
            this.totalResult = this.tableData.length
            this.currentPage = 1
          })
        }
      }
    },
    cellStyle({ row, column }) {
      if (column.property === 'isEnable') {
        if (row.isEnable) {
          return {
            color: '#168822'
          }
        } else {
          return {
            color: '#881513'
          }
        }
      }
    },
    proChage() {
      if (this.tunnelType === '') {
        this.$message.error('请选择通道类型')
        return true
      }
    },
    addProtocol() {
      this.modiId = ''
      this.saveVisible = false
      this.addVisible = true
      this.buttonVisible = true
      this.disabled = false
    },
    // 编辑赋值
    editEvent(row) {
      console.log(row.proType)
      this.disabled = true
      this.idx = row.id
      this.checkFlag = 2
      this.addVisible = true
      this.buttonVisible = false
      this.saveVisible = true
      this.transTunnelType(row)
      this.tunnelChage(row.tunnelType)
      const item = row
      // 场站
      this.form.efiId = this.ef
      // 通道id
      this.modiId = item.id
      // 启用标志
      this.form.isEnable = item.isEnable
      // 通道名称
      this.form.tunnelName = item.tunnelName
      // 时间间隔
      this.form.refreshInterval = item.refreshInterval
      // 通道类型
      this.form.tunnelType = item.tunnelType
      // 规约类型
      this.form.proType = item.proType
      this.$nextTick(function() {
        // this.cancelValidate('form')
        this.changeProType(row.proType)
      })
      if (item.proType === 'IEC104TCPSLAVE') {
        // 本机ip
        this.form.selfIpsend104tcp = item.selfIp
        // 本机端口
        this.form.selfPortsend104tcp = item.selfPort
        // 公共地址位
        this.form.publicAddresssend104tcp = item.publicAddress
        // 远端ip
        this.form.remoteIpSend104tcp = item.remoteIp
      }
      if (item.proType === 'MODBUSTCPSLAVE') {
        // 自身ip
        this.form.selfIpsmodbustcp = item.selfIp
        // 自身端口
        this.form.selfPortsmodbustcp = item.selfPort
        // 功能码
        this.form.functionCodesmodbustcp = item.functionCode
        // 设备地址
        this.form.slaveIdsmodbustcp = item.slaveId
        // 远端ip
        this.form.remoteIpModbustcp = item.remoteIp
        // 数据类型
        // this.form.protocolDataTypesmodbustcp = item.protocolDataType
      }
      if (item.proType === 'IEC104TCPMASTER') {
        // 远端ip
        this.form.remoteIp = item.remoteIp
        // 远端端口
        this.form.remotePort = item.remotePort
        // 远端备用ip
        this.form.remoteSpareIp = item.remoteSpareIp
        // 远端备用端口
        this.form.remoteSparePort = item.remoteSparePort
        // 本机ip
        this.form.selfIp = item.selfIp
        // 本机端口
        this.form.selfPort = item.selfPort
        // 公共地址位
        this.form.publicAddress = item.publicAddress
      }
      if (item.proType === 'MODBUSTCPMASTER') {
        // 远端ip
        this.form.remoteIpmtcp = item.remoteIp
        // 远端端口
        this.form.remotePortmtcp = item.remotePort
        // 远端备用ip
        this.form.remoteSpareIpmtcp = item.remoteSpareIp
        // 远端备用端口
        this.form.remoteSparePortmtcp = item.remoteSparePort
        // 本机ip
        this.form.selfIpmtcp = item.selfIp
        // 本机端口
        this.form.selfPortmtcp = item.selfPort
        // 功能码
        this.form.functionCode = item.functionCode
        // 设备地址
        this.form.slaveId = item.slaveId
        // 数据类型
        // this.form.protocolDataType = item.protocolDataType
      }
      if (item.proType === 'MODBUSRTUMASTER' || item.proType === 'MODBUSRTUSLAVE') {
        // 串口名称
        this.form.serialName = item.serialName
        // 波特率
        this.form.baudRate = item.baudRate
        // 功能码
        this.form.functionCodeRtu = item.functionCode
        // 设备地址
        this.form.slaveIdRtu = item.slaveId
        // 奇偶校验
        this.form.parity = item.parity
        // 数据类型
        // this.form.protocolDataTypeRtu = item.protocolDataType
      }
      if (item.proType === 'CDTRTUMASTER' || item.proType === 'CDTRTUSLAVE') {
        // 串口名称
        this.form.serialNamecdt = item.serialName
        // 波特率
        this.form.baudRatecdt = item.baudRate
        // 同步字1
        this.form.synchronousWord1 = item.synchronousWord1.toString(16)
        // 同步字2
        this.form.synchronousWord2 = item.synchronousWord2.toString(16)
        this.form.paritycdt = item.parity
      }
      if (item.proType === 'TCPSERVERASMODBUSMASTER') {
        // 远端ip
        this.form.remoteIpTcpServer = item.remoteIp
        // 本机ip
        this.form.selfIpTcpServer = item.selfIp
        // 本机端口
        this.form.selfPortTcpServer = item.selfPort
        // 功能码
        this.form.functionCodeTcpServer = item.functionCode
        // 设备地址
        this.form.slaveIdTcpServer = item.slaveId
      }
      if (item.proType === 'TCPCLIENTASMODBUSMASTER') {
        // 远端ip
        this.form.remoteIpTcpClient = item.remoteIp
        // 远端端口
        this.form.remotePortTcpClient = item.remotePort
        // 远端备用ip
        this.form.remoteSpareIpTcpClient = item.remoteSpareIp
        // 远端备用端口
        this.form.remoteSparePortTcpClient = item.remoteSparePort
        // 本机ip
        this.form.selfIpTcpClient = item.selfIp
        // 本机端口
        this.form.selfPortTcpClient = item.selfPort
        // 功能码
        this.form.functionCodeTcpClient = item.functionCode
        // 设备地址
        this.form.slaveIdTcpClient = item.slaveId
      }
    },
    tunnelChage(row) {
      if (row === 'Master') {
        // 数据接入[规约类型：104tcp、ModbusRTU、ModbusTCP、cdtRtu]
        this.proTypeOptions = [{ value: 'IEC104TCPMASTER', label: '104tcp' },
          { value: 'MODBUSRTUMASTER', label: 'ModbusRTU' },
          { value: 'MODBUSTCPMASTER', label: 'ModbusTCP' },
          { value: 'CDTRTUMASTER', label: 'cdtRtu' },
          { value: 'TCPSERVERASMODBUSMASTER', label: 'TCPServerAsModbus' },
         /* { value: 'TCPCLIENTASMODBUSMASTER', label: 'TCPClientAsModBus' },*/
          { value: 'FILEPARSE', label: '隔离文件解析' }]
      }
      if (row === 'Slave') {
        this.proTypeOptions = [{ value: 'IEC104TCPSLAVE', label: '104tcp' },
          { value: 'MODBUSRTUSLAVE', label: 'ModbusRTU' },
          { value: 'MODBUSTCPSLAVE', label: 'ModbusTCP' },
          { value: 'CDTRTUSLAVE', label: 'cdtRtu' }]
      }
    },
    // 通道类型下拉框改变
    tunnelTypeChange(row) {
      if (this.form.proType !== undefined) {
        this.form.proType = ''
      }
      this.tunnelChage(row)
      if (this.checkFlag !== 2) {
        document.getElementById('id104tcp').style.display = 'none'
        document.getElementById('idmodbustcp').style.display = 'none'
        document.getElementById('idmodbusRtu').style.display = 'none'
        document.getElementById('idcdtRtu').style.display = 'none'
        document.getElementById('idsmodbustcp').style.display = 'none'
        document.getElementById('ids104tcp').style.display = 'none'
      }
    },
    // 规约类型下拉框改变
    changeProType(row) {
      // //////////////加载规约类型对应属性字段/////////////////
      if (this.form.tunnelType === 'Master') {
        if (row === 'IEC104TCPMASTER') {
          document.getElementById('id104tcp').style.display = ''
          document.getElementById('idmodbustcp').style.display = 'none'
          document.getElementById('idmodbusRtu').style.display = 'none'
          document.getElementById('idcdtRtu').style.display = 'none'
          document.getElementById('idsmodbustcp').style.display = 'none'
          document.getElementById('ids104tcp').style.display = 'none'
          document.getElementById('tcpServer').style.display = 'none'
          document.getElementById('tcpClient').style.display = 'none'
        } else if (row === 'MODBUSTCPMASTER') {
          document.getElementById('id104tcp').style.display = 'none'
          document.getElementById('idmodbustcp').style.display = ''
          document.getElementById('idmodbusRtu').style.display = 'none'
          document.getElementById('idcdtRtu').style.display = 'none'
          document.getElementById('idsmodbustcp').style.display = 'none'
          document.getElementById('ids104tcp').style.display = 'none'
          document.getElementById('tcpServer').style.display = 'none'
          document.getElementById('tcpClient').style.display = 'none'
        } else if (row === 'MODBUSRTUMASTER') {
          document.getElementById('id104tcp').style.display = 'none'
          document.getElementById('idmodbustcp').style.display = 'none'
          document.getElementById('idmodbusRtu').style.display = ''
          document.getElementById('idcdtRtu').style.display = 'none'
          document.getElementById('idsmodbustcp').style.display = 'none'
          document.getElementById('ids104tcp').style.display = 'none'
          document.getElementById('tcpServer').style.display = 'none'
          document.getElementById('tcpClient').style.display = 'none'
        } else if (row === 'CDTRTUMASTER') {
          document.getElementById('id104tcp').style.display = 'none'
          document.getElementById('idmodbustcp').style.display = 'none'
          document.getElementById('idmodbusRtu').style.display = 'none'
          document.getElementById('idcdtRtu').style.display = ''
          document.getElementById('idsmodbustcp').style.display = 'none'
          document.getElementById('ids104tcp').style.display = 'none'
          document.getElementById('tcpServer').style.display = 'none'
          document.getElementById('tcpClient').style.display = 'none'
        } else if (row === 'FILEPARSE') {
          document.getElementById('id104tcp').style.display = 'none'
          document.getElementById('idmodbustcp').style.display = 'none'
          document.getElementById('idmodbusRtu').style.display = 'none'
          document.getElementById('idcdtRtu').style.display = 'none'
          document.getElementById('idsmodbustcp').style.display = 'none'
          document.getElementById('ids104tcp').style.display = 'none'
          document.getElementById('tcpServer').style.display = 'none'
          document.getElementById('tcpClient').style.display = 'none'
        }
        else if (row === 'TCPSERVERASMODBUSMASTER') {
          document.getElementById('tcpServer').style.display = ''
          document.getElementById('tcpClient').style.display = 'none'
          document.getElementById('id104tcp').style.display = 'none'
          document.getElementById('idmodbustcp').style.display = 'none'
          document.getElementById('idmodbusRtu').style.display = 'none'
          document.getElementById('idcdtRtu').style.display = 'none'
          document.getElementById('idsmodbustcp').style.display = 'none'
          document.getElementById('ids104tcp').style.display = 'none'
        }
        else if (row === 'TCPCLIENTASMODBUSMASTER') {
          document.getElementById('tcpServer').style.display = 'none'
          document.getElementById('tcpClient').style.display = ''
          document.getElementById('id104tcp').style.display = 'none'
          document.getElementById('idmodbustcp').style.display = 'none'
          document.getElementById('idmodbusRtu').style.display = 'none'
          document.getElementById('idcdtRtu').style.display = 'none'
          document.getElementById('idsmodbustcp').style.display = 'none'
          document.getElementById('ids104tcp').style.display = 'none'

        }
      } else {
        if (row === 'IEC104TCPSLAVE') {
          document.getElementById('id104tcp').style.display = 'none'
          document.getElementById('idmodbustcp').style.display = 'none'
          document.getElementById('idmodbusRtu').style.display = 'none'
          document.getElementById('idcdtRtu').style.display = 'none'
          document.getElementById('idsmodbustcp').style.display = 'none'
          document.getElementById('ids104tcp').style.display = ''
          document.getElementById('tcpServer').style.display = 'none'
          document.getElementById('tcpClient').style.display = 'none'
        } else if (row === 'MODBUSTCPSLAVE') {
          document.getElementById('id104tcp').style.display = 'none'
          document.getElementById('idmodbustcp').style.display = 'none'
          document.getElementById('idmodbusRtu').style.display = 'none'
          document.getElementById('idcdtRtu').style.display = 'none'
          document.getElementById('idsmodbustcp').style.display = ''
          document.getElementById('ids104tcp').style.display = 'none'
          document.getElementById('tcpServer').style.display = 'none'
          document.getElementById('tcpClient').style.display = 'none'
        } else if (row === 'MODBUSRTUSLAVE') {
          document.getElementById('id104tcp').style.display = 'none'
          document.getElementById('idmodbustcp').style.display = 'none'
          document.getElementById('idmodbusRtu').style.display = ''
          document.getElementById('idcdtRtu').style.display = 'none'
          document.getElementById('idsmodbustcp').style.display = 'none'
          document.getElementById('ids104tcp').style.display = 'none'
          document.getElementById('tcpServer').style.display = 'none'
          document.getElementById('tcpClient').style.display = 'none'
        } else if (row === 'CDTRTUSLAVE') {
          document.getElementById('id104tcp').style.display = 'none'
          document.getElementById('idmodbustcp').style.display = 'none'
          document.getElementById('idmodbusRtu').style.display = 'none'
          document.getElementById('idcdtRtu').style.display = ''
          document.getElementById('idsmodbustcp').style.display = 'none'
          document.getElementById('ids104tcp').style.display = 'none'
          document.getElementById('tcpServer').style.display = 'none'
          document.getElementById('tcpClient').style.display = 'none'
        }
      }
    },
    commonValidate(field) {
      this.$refs.form.validateField(field, (error) => {
        if (error) {
          this.errorstr = 'false'
        }
      })
    },
    // 删除通道
    removeEvent(row) {
      this.$XModal.confirm('您确定要删除该数据?').then(type => {
        if (type === 'confirm') {
          this.$axios.delete('/TunnelInfo/' + row.id + '/' + row.tunnelType).then((res) => {
            if (res.data === 1) {
              this.$message.success(`删除通道号为 ${row.id} 的通道成功！！！`)
              this.$refs.xTable.remove(row)
              this.$XModal.confirm('是否删除通道下的点表').then(type => {
                if (type === 'confirm') {
                  this.$axios.delete('/TunnelInfo/deleteDataPointById/' + row.id + '/' + row.tunnelType).then((res) => {
                    if (res.data === 1) {
                      this.$message.success(`删除通道号为 ${row.id} 下的点表成功！！！`)
                    } else {
                      this.$message.error(`删除通道号为 ${row.id} 下的点表失败！！！`)
                    }
                  })
                }
              })
            } else {
              this.$message.error(`删除通道号为 ${row.id} 的通道失败！！！`)
            }
            this.getData()
          })
        }
      })
    },
    // 保存的通道
    saveProtocol(formName) {
      this.isDisabled = true
      this.errorstr = 'true'
      // 校验通道基本信息
      this.commonValidate('tunnelName')
      this.commonValidate('refreshInterval')
      // /////////// 获取通道基本信息/////////////////
      this.saveForm = {}
      // 实体主键
      if (this.modiId !== '') {
        this.saveForm.id = this.modiId
      }
      // 启用标志
      this.saveForm.isEnable = this.form.isEnable
      // 通道程序名称
      this.saveForm.tunnelName = this.form.tunnelName
      this.saveForm.refreshInterval = this.form.refreshInterval
      this.saveForm.stationCode = this.form.efiId
      // ///////////send 104tcp//////////////////
      if (this.form.tunnelType === 'Slave' && this.form.proType === 'IEC104TCPSLAVE') {
        this.commonValidate('selfIpsend104tcp')
        this.commonValidate('selfPortsend104tcp')
        this.commonValidate('publicAddresssend104tcp')
        this.commonValidate('remoteIpSend104tcp')
        // 本地地址
        this.saveForm.selfIp = this.form.selfIpsend104tcp
        // 本地端口
        this.saveForm.selfPort = this.form.selfPortsend104tcp
        // 设备地址
        this.saveForm.publicAddress = this.form.publicAddresssend104tcp
        // 远端ip
        this.saveForm.remoteIp = this.form.remoteIpSend104tcp

      }
      // ///////////send modbustcp//////////////////
      if (this.form.proType === 'MODBUSTCPSLAVE') {
        this.commonValidate('selfIpsmodbustcp')
        this.commonValidate('selfPortsmodbustcp')
        this.commonValidate('functionCodesmodbustcp')
        this.commonValidate('slaveIdsmodbustcp')
        this.commonValidate('remoteIpModbustcp')
        // this.commonValidate('protocolDataTypesmodbustcp')
        // 本地地址
        this.saveForm.selfIp = this.form.selfIpsmodbustcp
        // 本地端口
        this.saveForm.selfPort = this.form.selfPortsmodbustcp
        // 功能码
        this.saveForm.functionCode = this.form.functionCodesmodbustcp
        // 设备地址
        this.saveForm.slaveId = this.form.slaveIdsmodbustcp
        // 远端ip
        this.saveForm.remoteIp = this.form.remoteIpModbustcp
        // 数据类型
        // this.saveForm.protocolDataType = this.form.protocolDataTypesmodbustcp


      }
      // ///////////send ModbusRTU//////////////////
      if (this.form.proType === 'MODBUSRTUSLAVE') {
        this.commonValidate('serialName')
        this.commonValidate('baudRate')
        this.commonValidate('functionCodeRtu')
        this.commonValidate('slaveIdRtu')
        this.commonValidate('parity')
        // this.commonValidate('protocolDataTypeRtu')
        // 串口名称
        this.saveForm.serialName = this.form.serialName
        // 波特值
        this.saveForm.baudRate = this.form.baudRate
        // 功能码
        this.saveForm.functionCode = this.form.functionCodeRtu
        // 设备地址
        this.saveForm.slaveId = this.form.slaveIdRtu
        // 奇偶校验
        this.saveForm.parity = this.form.parity

        // 数据类型
        // this.saveForm.protocolDataType = this.form.protocolDataTypeRtu

      }
      // ///////////send cdtRut//////////////////
      if (this.form.proType === 'CDTRTUSLAVE') {
        this.commonValidate('serialNamecdt')
        this.commonValidate('baudRatecdt')
        this.commonValidate('synchronousWord1')
        this.commonValidate('synchronousWord2')
        // this.commonValidate('paritycdt')
        // 串口名称
        this.saveForm.serialName = this.form.serialNamecdt
        // 波特值
        this.saveForm.baudRate = this.form.baudRatecdt
        // 同步字1
        this.saveForm.synchronousWord1 = parseInt(this.form.synchronousWord1, 16)
        // 同步字2
        this.saveForm.synchronousWord2 = parseInt(this.form.synchronousWord2, 16)
        this.saveForm.parity = this.form.paritycdt


      }
      // ///////////get 104tcp//////////////////
      if (this.form.proType === 'IEC104TCPMASTER') {
        /* this.commonValidate('selfIp')
                    this.commonValidate('selfPort')*/
        this.commonValidate('remoteIp')
        this.commonValidate('remotePort')
        /* this.commonValidate('remoteSpareIp')
                    this.commonValidate('remoteSparePort')*/
        this.commonValidate('publicAddress')
        // 本地地址
        this.saveForm.selfIp = this.form.selfIp
        // 本地端口
        this.saveForm.selfPort = this.form.selfPort
        // 远端地址
        this.saveForm.remoteIp = this.form.remoteIp
        // 远端端口
        this.saveForm.remotePort = this.form.remotePort
        // 备用远端地址
        this.saveForm.remoteSpareIp = this.form.remoteSpareIp
        // 备用远端端口
        this.saveForm.remoteSparePort = this.form.remoteSparePort
        // 公共地址
        this.saveForm.publicAddress = this.form.publicAddress
        /* this.tableLoading = true*/
      }
      // ///////////get modbustcp//////////////////
      if (this.form.proType === 'MODBUSTCPMASTER') {
        /* this.commonValidate('selfIpmtcp')
                    this.commonValidate('selfPortmtcp')*/
        this.commonValidate('remoteIpmtcp')
        this.commonValidate('remotePortmtcp')
        /* this.commonValidate('remoteSpareIpmtcp')
                    this.commonValidate('remoteSparePortmtcp')*/
        this.commonValidate('slaveId')
        this.commonValidate('functionCode')
        this.commonValidate('protocolDataType')
        // 本地地址
        this.saveForm.selfIp = this.form.selfIpmtcp
        // 本地端口
        this.saveForm.selfPort = this.form.selfPortmtcp
        // 远端地址
        this.saveForm.remoteIp = this.form.remoteIpmtcp
        // 远端端口
        this.saveForm.remotePort = this.form.remotePortmtcp
        // 备用远端地址
        this.saveForm.remoteSpareIp = this.form.remoteSpareIpmtcp
        // 备用远端端口
        this.saveForm.remoteSparePort = this.form.remoteSparePortmtcp
        // 公共地址
        this.saveForm.slaveId = this.form.slaveId
        // 状态码
        this.saveForm.functionCode = this.form.functionCode
        // 数据状态
        // this.saveForm.protocolDataType = this.form.protocolDataType


      }
      // ///////////get modbustcp//////////////////
      if (this.form.proType === 'MODBUSRTUMASTER') {
        this.commonValidate('serialName')
        this.commonValidate('baudRate')
        this.commonValidate('functionCodeRtu')
        this.commonValidate('slaveIdRtu')
        this.commonValidate('parity')
        // this.commonValidate('protocolDataTypeRtu')
        // 串口名称
        this.saveForm.serialName = this.form.serialName
        // 波特值
        this.saveForm.baudRate = this.form.baudRate
        // 功能码
        this.saveForm.functionCode = this.form.functionCodeRtu
        // 设备地址
        this.saveForm.slaveId = this.form.slaveIdRtu
        // 奇偶校验
        this.saveForm.parity = this.form.parity
        // 奇偶校验
        // this.saveForm.protocolDataType = this.form.protocolDataTypeRtu


      }
      // ///////////get cdtRut//////////////////
      if (this.form.proType === 'CDTRTUMASTER') {
        this.commonValidate('serialNamecdt')
        this.commonValidate('baudRatecdt')
        this.commonValidate('synchronousWord1')
        this.commonValidate('synchronousWord2')
        // this.commonValidate('parity')
        // 串口名称
        this.saveForm.serialName = this.form.serialNamecdt
        // 波特值
        this.saveForm.baudRate = this.form.baudRatecdt
        // 同步字1
        this.saveForm.synchronousWord1 = parseInt(this.form.synchronousWord1, 16)
        // 同步字2
        this.saveForm.synchronousWord2 = parseInt(this.form.synchronousWord2, 16)
        this.saveForm.parity = this.form.paritycdt


      }
      // ///////////get tcpServer//////////////////
      if (this.form.proType === 'TCPSERVERASMODBUSMASTER') {
        this.commonValidate('remoteIp')
        this.commonValidate('slaveId')
        this.commonValidate('functionCode')
        // 本地地址
        this.saveForm.selfIp = this.form.selfIpTcpServer
        // 本地端口
        this.saveForm.selfPort = this.form.selfPortTcpServer
        // 远端地址
        this.saveForm.remoteIp = this.form.remoteIpTcpServer
        // 公共地址
        this.saveForm.slaveId = this.form.slaveIdTcpServer
        // 状态码
        this.saveForm.functionCode = this.form.functionCodeTcpServer
      }
      // ///////////get tcpClient//////////////////
      if (this.form.proType === 'TCPCLIENTASMODBUSMASTER') {
        this.commonValidate('remoteIpmtcp')
        this.commonValidate('remotePortmtcp')
        this.commonValidate('slaveId')
        this.commonValidate('functionCode')
        // 本地地址
        this.saveForm.selfIp = this.form.selfIpTcpClient
        // 本地端口
        this.saveForm.selfPort = this.form.selfPortTcpClient
        // 远端地址
        this.saveForm.remoteIp = this.form.remoteIpTcpClient
        // 远端端口
        this.saveForm.remotePort = this.form.remotePortTcpClient
        // 备用远端地址
        this.saveForm.remoteSpareIp = this.form.remoteSpareIpTcpClient
        // 备用远端端口
        this.saveForm.remoteSparePort = this.form.remoteSparePortTcpClient
        // 公共地址
        this.saveForm.slaveId = this.form.slaveIdTcpClient
        // 状态码
        this.saveForm.functionCode = this.form.functionCodeTcpClient
      }
      if (this.errorstr === 'false') {
        this.isDisabled = false
        return
      }
      //保存
      this.saveForm.tunnelType = this.form.proType
      if (this.saveVisible) {
        this.saveForm.id = this.modiId
        this.$axios.put('/TunnelInfo', this.saveForm).then((res) => {
          if (res.data !== '') {
            this.$message.success(`修改通道名为 ${this.saveForm.tunnelName} 的通道成功！！！`)
          } else {
            this.$message.error(`修改通道名为 ${this.saveForm.tunnelName} 的通道失败！！！`)
          }
          this.resetForm('form')
          this.getData()
        })
      } else {
        this.$axios.post('/TunnelInfo', this.saveForm).then((res) => {
          if (res.data !== '') {
            this.$message.success(`保存通道名为 ${this.saveForm.tunnelName} 的通道成功！！！`)
          } else {
            this.$message.error(`保存通道名为 ${this.saveForm.tunnelName} 的通道失败！！！`)
          }
          this.resetForm('form')
          this.getData()
        })
      }
      this.resetForm('form')
      this.addVisible = false
      this.isDisabled = false
      this.checkFlag = 0
      this.saveVisible = false
    },
    // 导出
    exportDataEvent() {
      this.$refs.xTable.exportData({
        filename: `通道信息`,
        type: 'csv'
      })
    },
    // 重置表单
    resetForm(formName) {
      // 规约类型
      this.$nextTick(function() {
        document.getElementById('id104tcp').style.display = 'none'
        document.getElementById('idsmodbustcp').style.display = 'none'
        document.getElementById('idmodbustcp').style.display = 'none'
        document.getElementById('idcdtRtu').style.display = 'none'
        document.getElementById('idsmodbustcp').style.display = 'none'
        document.getElementById('ids104tcp').style.display = 'none'
        document.getElementById('tcpServer').style.display = 'none'
        document.getElementById('tcpClient').style.display = 'none'
      })
      this.proTypeOptions = []
      this.form = {
        id: '',
        efiId: '',
        proID: '',
        tunnelName: '',
        proType: '',
        isEnable: true,
        tunnelType: '',
        refreshInterval: 5,
        /* get modbustcp*/
        remoteIpmtcp: '127.0.0.1',
        remotePortmtcp: 502,
        remoteSpareIpmtcp: '',
        remoteSparePortmtcp: '',
        selfIpmtcp: '',
        selfPortmtcp: '',
        slaveId: 1,
        functionCode: 3,
        protocolDataType: 'A',
        /* get104tcp*/
        publicAddress: 1,
        selfIp: '',
        selfPort: '',
        remoteIp: '127.0.0.1',
        remotePort: 2404,
        remoteSpareIp: '',
        remoteSparePort: '',
        /* get/send modbusRtu*/
        serialName: '',
        baudRate: 9600,
        functionCodeRtu: 3,
        slaveIdRtu: 1,
        parity: 0,
        protocolDataTypeRtu: 'A',
        /* get/send cdtRut*/
        serialNamecdt: '',
        baudRatecdt: 9600,
        paritycdt: 0,
        synchronousWord1: 'EB',
        synchronousWord2: '90',
        /* send 104tcp*/
        selfIpsend104tcp: '',
        remoteIpSend104tcp: '',
        selfPortsend104tcp: 2404,
        publicAddresssend104tcp: 1,
        /* send modbustcp*/
        selfIpsmodbustcp: '',
        remoteIpModbustcp: '',
        selfPortsmodbustcp: 502,
        functionCodesmodbustcp: 3,
        slaveIdsmodbustcp: 1,
        protocolDataTypesmodbustcp: 'A',
        /*tcpSever*/
        remoteIpTcpServer: '127.0.0.1',
        selfIpTcpServer: '',
        selfPortTcpServer: 502,
        functionCodeTcpServer: 3,
        slaveIdTcpServer: 1,
        /*tcpClient*/
        remoteIpTcpClient: '127.0.0.1',
        remotePortTcpClient: 502,
        remoteSpareIpTcpClient: '',
        remoteSparePortTcpClient: '',
        selfIpTcpClient: '',
        selfPortTcpClient: '',
        functionCodeTcpClient: 3,
        slaveIdTcpClient: 1,
      }
      if (this.addVisible === true) {
        this.$refs[formName].resetFields()
      }
    },
    // 通道类型转换
    transTunnelType(row) {
      if (row.tunnelType === 'IEC104TCPSLAVE') {
        row.tunnelType = 'Slave'
        row.proType = 'IEC104TCPSLAVE'
      } else if (row.tunnelType === 'IEC104TCPMASTER') {
        row.tunnelType = 'Master'
        row.proType = 'IEC104TCPMASTER'
      } else if (row.tunnelType === 'MODBUSTCPMASTER') {
        row.tunnelType = 'Master'
        row.proType = 'MODBUSTCPMASTER'
      } else if (row.tunnelType === 'MODBUSTCPSLAVE') {
        row.tunnelType = 'Slave'
        row.proType = 'MODBUSTCPSLAVE'
      } else if (row.tunnelType === 'MODBUSRTUMASTER') {
        row.tunnelType = 'Master'
        row.proType = 'MODBUSRTUMASTER'
      } else if (row.tunnelType === 'MODBUSRTUSLAVE') {
        row.tunnelType = 'Slave'
        row.proType = 'MODBUSRTUSLAVE'
      } else if (row.tunnelType === 'CDTRTUMASTER') {
        row.tunnelType = 'Master'
        row.proType = 'CDTRTUMASTER'
      } else if (row.tunnelType === 'CDTRTUSLAVE') {
        row.tunnelType = 'Slave'
        row.proType = 'CDTRTUSLAVE'
      } else if (row.tunnelType === 'FILEPARSE') {
        row.tunnelType = 'Master'
        row.proType = 'FILEPARSE'
      }else if (row.tunnelType === 'TCPSERVERASMODBUSMASTER') {
        row.tunnelType = 'Master'
        row.proType = 'TCPSERVERASMODBUSMASTER'
      }else if (row.tunnelType === 'TCPCLIENTASMODBUSMASTER') {
        row.tunnelType = 'Master'
        row.proType = 'TCPCLIENTASMODBUSMASTER'
      }
    },
    // 设备id转名称
    formateProType({ cellValue }) {
      const item = this.proTypeList.find(item => item.value === cellValue)
      return item ? item.label : ''
    },
    /**
             * 关闭对话框的回调
             **/
    cancelForm(formName) {
      this.resetForm(formName)
      this.addVisible = false
      this.getData()
      this.getEl()
    },
    cancelValidate(formName) {
      this.$nextTick(function() {
        this.$refs[formName].clearValidate()
      })
    }
  }
}
</script>

<style scoped>
  #tunnelinfo {
    padding-left: 20px;
  }
</style>
