longdianningxing/acs2/nladmin-ui/src/views/acs/protocolConfig/config.vue

<template>
  <!--标准版-输送机-控制点-->
  <div>
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span class="role-span">设备协议：</span>
      </div>
    </el-card>
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span class="role-span">PLC读取协议：</span>
      </div>
      <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="78px">
        <el-table
          v-loading="false"
          :data="data1"
          :max-height="550"
          size="small"
          style="width: 100%;margin-bottom: 15px"
        >
          <el-table-column prop="name" label="意义" />
          <el-table-column prop="db" label="地址">
            <template slot-scope="scope">
              <el-input
                v-model="data1[scope.$index].db"
                size="mini"
                class="edit-input"
                @input="finishReadEdit(data1[scope.$index])"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </el-card>

    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span class="role-span">PLC写入协议：</span>
      </div>
      <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="78px">
        <el-table
          v-loading="false"
          :data="data2"
          :max-height="550"
          size="small"
          style="width: 100%;margin-bottom: 15px"
        >

          <el-table-column prop="name" label="意义" />
          <el-table-column prop="db" label="地址">
            <template slot-scope="scope">
              <el-input
                v-model="data2[scope.$index].db"
                size="mini"
                class="edit-input"
                @input="finishWriteEdit(data2[scope.$index])"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </el-card>

    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span class="role-span" />
        <el-button
          :loading="false"
          icon="el-icon-download"
          size="mini"
          style="float: right; padding: 6px 9px"
          type="primary"
          @click="doSubmit"
        >导出协议
        </el-button>
      </div>
    </el-card>

  </div>
</template>

<script>
import {
  downloadProtocolConfig,
  queryDBInfoByDriverCode
} from '@/api/acs/device/driverConfig'

import crud from '@/mixins/crud'
import { downloadFile } from '@/utils'

export default {
  name: 'StandardConveyorControl',
  mixins: [crud],
  props: {
    parentForm: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      device_code: '',
      device_id: '',
      plc_id: '',
      plc_code: '',
      address: '',
      opc_id: '',
      opc_code: '',
      configLoading: false,
      dataOpcservers: [],
      dataOpcPlcs: [],
      deviceList: [],
      data1: [],
      data2: [],
      rules: {}
    }
  },
  created() {
    this.$nextTick(() => {
      queryDBInfoByDriverCode(this.$props.parentForm.driver_code).then(data => {
        console.log(data)
        this.data1 = data.rs
        this.data2 = data.ws
        this.sliceItem()
      })
    })
  },
  methods: {
    finishReadEdit(data) {
      // 编辑的是code列,并且值包含mode
      if (data.code.indexOf('mode') !== -1) {
        const dbValue = data.db
        // .之前的字符串
        const beforeStr = dbValue.match(/(\S*)\./)[1]
        // .之后的字符串
        const afterStr = dbValue.match(/\.(\S*)/)[1]
        // 取最后数字
        const endNumber = afterStr.substring(1)
        // 最后为非数字
        if (isNaN(parseInt(endNumber))) {
          return
        }
        for (const val in this.data1) {
          if (this.data1[val].code.indexOf('move') !== -1) {
            this.data1[val].db = beforeStr + '.' + afterStr.substring(0, 1) + (parseInt(endNumber) + 1)
          }
          if (this.data1[val].code.indexOf('action') !== -1) {
            this.data1[val].db = beforeStr + '.' + afterStr.substring(0, 1) + (parseInt(endNumber) + 2)
          }
          if (this.data1[val].code.indexOf('ioaction') !== -1) {
            this.data1[val].db = beforeStr + '.' + afterStr.substring(0, 1) + (parseInt(endNumber) + 3)
          }
          if (this.data1[val].code.indexOf('height') !== -1) {
            this.data1[val].db = beforeStr + '.' + afterStr.substring(0, 1) + (parseInt(endNumber) + 4)
          }
          if (this.data1[val].code.indexOf('error') !== -1) {
            this.data1[val].db = beforeStr + '.' + afterStr.substring(0, 1) + (parseInt(endNumber) + 5)
          }
          if (this.data1[val].code.indexOf('direction') !== -1) {
            this.data1[val].db = beforeStr + '.' + afterStr.substring(0, 1) + (parseInt(endNumber) + 6)
          }
          if (this.data1[val].code.indexOf('operation_type') !== -1) {
            this.data1[val].db = beforeStr + '.' + afterStr.substring(0, 1) + (parseInt(endNumber) + 7)
          }
          if (this.data1[val].code.indexOf('task') !== -1) {
            this.data1[val].db = beforeStr + '.' + 'D' + (parseInt(endNumber) + 21)
          }
        }
      }
    },
    finishWriteEdit(data) {
      // 编辑的是code列,并且值包含mode
      if (data.code.indexOf('to_command') !== -1) {
        const dbValue = data.db
        // .之前的字符串
        const beforeStr = dbValue.match(/(\S*)\./)[1]
        // .之后的字符串
        const afterStr = dbValue.match(/\.(\S*)/)[1]
        // 取最后数字
        const endNumber = afterStr.substring(1)
        // 最后为非数字
        if (isNaN(parseInt(endNumber))) {
          return
        }
        for (const val in this.data2) {
          if (this.data2[val].code.indexOf('to_target') !== -1) {
            this.data2[val].db = beforeStr + '.' + afterStr.substring(0, 1) + (parseInt(endNumber) + 2)
          }
          if (this.data2[val].code.indexOf('to_task') !== -1) {
            this.data2[val].db = beforeStr + '.' + 'D' + (parseInt(endNumber) + 6)
          }
        }
      }
    },
    doSubmit() {
      const param = {
        'form': this.parentForm,
        'rs': this.data1,
        'ws': this.data2
      }
      this.$refs['form'].validate((valid) => {
        if (valid) {
          downloadProtocolConfig(param).then(res => {
            downloadFile(res, '', 'xlsx')
          })
        }
      })
    },
    sliceItem() { // 拼接DB的Item值
      this.data1.forEach(item => {
        const str = item.code
        // 是否包含.
        if (str.search('.') !== -1) {
          // 截取最后一位
          item.code = this.opc_code + '.' + this.plc_code + '.' + this.device_code + '.' + str.slice(str.lastIndexOf('.') + 1)
        } else {
          item.code = this.opc_code + '.' + this.plc_code + '.' + this.device_code + '.' + item.code
        }
      })
      this.data2.forEach(item => {
        const str = item.code
        // 是否包含.
        if (str.search('.') !== -1) {
          // 截取最后一位
          item.code = this.opc_code + '.' + this.plc_code + '.' + this.device_code + '.' + str.slice(str.lastIndexOf('.') + 1)
        } else {
          item.code = this.opc_code + '.' + this.plc_code + '.' + this.device_code + '.' + item.code
        }
      })
    }
  }
}
</script>

<style scoped>

</style>