interlock_client/src/views/module_interLock/InterlockSummary/modules/InterlockConditionForm.vue

<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container>
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-divider orientation="left"> <span style="font-size: 12px;">基本信息</span> </a-divider>
          <a-col :span="24">
            <a-form-model-item label="联锁条件位号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="interlockConditionData">
              <a-cascader
                v-model="model.interlockConditionData"
                :options="tagDataOptions"
                :display-render="displayRender"
                :fieldNames="customFieldNames"
                expand-trigger="hover"
                placeholder="请选择点位"/>
                <!-- @change="dianwerChange" -->
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="联锁设定值" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="interlockSetValue">
              <a-input v-model="model.interlockSetValue" placeholder="请输入描述"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="当前值位号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="currentValueData">
              <a-cascader
                v-model="model.currentValueData"
                :options="tagDataOptions"
                :display-render="displayRender"
                :fieldNames="customFieldNames"
                expand-trigger="hover"
                placeholder="请选择当前值位号"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="输入卡件状态位号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="inputStatusData">
              <a-cascader
                v-model="model.inputStatusData"
                :options="tagDataOptions"
                :display-render="displayRender"
                :fieldNames="customFieldNames"
                expand-trigger="hover"
                placeholder="请选择输入卡件状态位号"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="输出卡件状态位号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="outputStatusData">
              <a-cascader
                v-model="model.outputStatusData"
                :options="tagDataOptions"
                :display-render="displayRender"
                :fieldNames="customFieldNames"
                expand-trigger="hover"
                placeholder="请选择输出卡件状态位号"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="MP状态位号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="mpStatusData">
              <a-cascader
                v-model="model.mpStatusData"
                :options="tagDataOptions"
                :display-render="displayRender"
                :fieldNames="customFieldNames"
                expand-trigger="hover"
                placeholder="请选择MP状态位号"
              />
            </a-form-model-item>
          </a-col>
          <!-- 仪表状态开始 -->
          <a-divider orientation="left"> <span style="font-size: 12px;">仪表状态</span> </a-divider>
          <a-col :span="24">
            <a-form-model-item label="仪表状态判定依据" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="instrumentStatusJuge">
              <a-radio-group name="radioGroup" v-model="model.instrumentStatusJuge" @change="instrumentStatusJugeChange">
                <a-radio :value="'0'"> 位号读取 </a-radio>
                <a-radio :value="'1'"> 高低限判断 </a-radio>
                <a-radio :value="'2'"> 突变超限判断 </a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
          <template v-if="model.instrumentStatusJuge === '0'">
            <a-col :span="24">
              <a-form-model-item label="仪表状态位号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="instrumentStatusData">
                <a-cascader
                v-model="model.instrumentStatusData"
                :options="tagDataOptions"
                :display-render="displayRender"
                :fieldNames="customFieldNames"
                expand-trigger="hover"
                placeholder="请选择仪表状态位号"/>
              </a-form-model-item>
            </a-col>
          </template>
          <template v-if="model.instrumentStatusJuge === '1'">
            <a-col :span="24">
              <a-form-model-item label="原始模拟量位号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ysmnlData">
                <a-cascader
                  v-model="model.ysmnlData"
                  :options="tagDataOptions"
                  :display-render="displayRender"
                  :fieldNames="customFieldNames"
                  expand-trigger="hover"
                  placeholder="请选择原始模拟量位号"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="高限值" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="upperLimit">
                <a-auto-complete :data-source="['4258', '61948']" v-model="model.upperLimit" placeholder="请输入高限"></a-auto-complete>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="低限值" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="lowerLimit">
                <a-auto-complete :data-source="['737', '10722']" v-model="model.lowerLimit" placeholder="请输入低限"></a-auto-complete>
              </a-form-model-item>
            </a-col>
          </template>
          <template v-if="model.instrumentStatusJuge === '2'">
            <a-col :span="24">
              <a-form-model-item label="原始模拟量位号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ysmnlData">
                <a-cascader
                  v-model="model.ysmnlData"
                  :options="tagDataOptions"
                  :display-render="displayRender"
                  :fieldNames="customFieldNames"
                  expand-trigger="hover"
                  placeholder="请选择原始模拟量位号"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="突变判断公式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="upperLimit">
                （ <a-auto-complete :data-source="['4095', '59577']" v-model="model.upperLimit" placeholder="请输入高限" style="width: 29%;"></a-auto-complete>
                -
                <a-auto-complete :data-source="['819', '11915']" v-model="model.lowerLimit" placeholder="请输入低限" style="width: 29%;"></a-auto-complete> ）* 
                <a-auto-complete :data-source="['1']" v-model="model.thresholdValueN" placeholder="请输入阈值" style="width: 25%;"></a-auto-complete>
                %
                <!-- <a-input-group compact>
                  <a-select default-value="TRICON" @change="changeTbcxDefaultType">
                    <a-select-option value="TRICON">
                      TRICON
                    </a-select-option>
                    <a-select-option value="TSXPLUS">
                      TSXPLUS
                    </a-select-option>
                  </a-select>
                  <a-input
                    style=" width: 30px; border-right: 0; pointer-events: none; backgroundColor: #fff"
                    placeholder="("
                    disabled
                  />
                  <a-input v-model="model.upperLimit" placeholder="请输入高限" style="width: 20%;border-left: 0;"></a-input>
                  <a-input
                    style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff"
                    placeholder="-"
                    disabled
                  />
                  <a-input v-model="model.lowerLimit" placeholder="请输入低限" style="width: 20%;border-left: 0;"></a-input>
                  <a-input
                    style=" width: 50px; border-left: 0; pointer-events: none; backgroundColor: #fff"
                    placeholder=") * "
                    disabled
                  />
                  <a-input v-model="model.thresholdValueN" placeholder="请输入阈值" style="width: 15%;border-left: 0;"></a-input>
                  <a-input
                    style=" width: 40px; border-left: 0; pointer-events: none; backgroundColor: #fff"
                    placeholder="% "
                    disabled
                  />
                </a-input-group> -->
              </a-form-model-item>
            </a-col>
            <!-- <a-col :span="24">
              <a-form-model-item label="高限值" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="upperLimit">
                <a-input v-model="model.upperLimit" placeholder="请输入高限"></a-input>
            </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="低限值" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="lowerLimit">
                <a-input v-model="model.lowerLimit" placeholder="请输入低限"></a-input>
              </a-form-model-item>
            </a-col> -->
            <a-col :span="24">
              <a-form-model-item label="突变判断时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="thresholdTime">
                <a-input v-model="model.thresholdTime" suffix="S" placeholder="请输入时间"></a-input>
                <!-- suffix="S" -->
              </a-form-model-item>
            </a-col>
            <!-- <a-col :span="24"> -->
              <!-- <a-form-model-item label="阈值" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="thresholdValueN">
                <a-input v-model="model.thresholdValueN" suffix="%" placeholder="请输入阈值"></a-input> -->
                <!-- addon-after="%" -->
              <!-- </a-form-model-item> -->
            <!-- </a-col> -->
          </template>
          <a-col :span="24">
            <a-form-model-item label="描述" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="description">
              <a-input v-model="model.description" placeholder="请输入描述"></a-input>
            </a-form-model-item>
          </a-col>
          <!-- 仪表状态结束 -->

          <!-- 是否旁路 -->
          <a-divider orientation="left"> <span style="font-size: 12px;">旁路状态</span> </a-divider>
          <a-col :span="24">
            <a-form-model-item label="是否有旁路位号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ifBypass">
              <a-radio-group name="radioGroup" v-model="model.ifBypass">
                <!--  :default-value="model.ifBypass" -->
                <a-radio :value="'1'"> 是 </a-radio>
                <a-radio :value="'0'"> 否 </a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
          <template v-if="model.ifBypass === '1'">
            <a-col :span="24">
              <a-form-model-item label="旁路位号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bypassData">
                <a-cascader
                v-model="model.bypassData"
                :options="tagDataOptions"
                :display-render="displayRender"
                :fieldNames="customFieldNames"
                expand-trigger="hover"
                placeholder="请选择旁路位号"/>
              </a-form-model-item>
            </a-col>
          </template>
          <template v-if="model.ifBypass === '0'">
            <a-col :span="24">
              <a-form-model-item label="旁路状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bypassNo">
                <!-- <a-input v-model="model.bypassNo"></a-input> -->
                <!-- placeholder="无旁路" :default-value="bypassNo" -->
                <a-select v-model="model.bypassNo">
                  <a-select-option value="0"> 0 </a-select-option>
                  <a-select-option value="1"> 1 </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </template>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>
  import { httpAction, getAction, postAction } from '@/api/manage'

  export default {
    name: 'InterlockConditionForm',
    props: {
      //表单禁用
      // disabled: {
      //   type: Boolean,
      //   default: false,
      //   required: false
      // }
    },
    data () {
      return {
        model:{
          instrumentStatusJuge: '0',
          ifBypass: '1',
          bypassNo: '0',
          upperLimit: null,
          lowerLimit: null,
          thresholdTime: null,
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: true,
        validatorRules: {
          interlockConditionData: [{
            required: true, message: '请选择联锁条件位号!',
          }],
          instrumentStatusJuge: [{
            required: true, message: '请选择仪表状态判定依据!',
          }],
          instrumentStatusData: [{
            required: true, message: '请选择仪表状态位号!',
          }],
          // 高低限
          ysmnlData: [{
            required: true, message: '请选择原始模拟量位号!',
          }],
          upperLimit: [{
            required: true, message: '请输入高限值!',
          }],
          lowerLimit: [{
            required: true, message: '请输入低限值!',
          }],
          // 突变超限
          thresholdTime: [{
            required: true, message: '请输入时间!',
          }],
          thresholdValueN: [{
            required: true, message: '请输入阈值!',
          }],

          description: [{
            required: true, message: '请输入描述!',
          }],
          interlockSetValue: [{
            required: true, message: '请输入联锁设定值!',
          }],
          currentValueData: [{
            required: true, message: '请选择当前值位号!',
          }],
          ifBypass: [{
            required: true, message: '请选择是否旁路!',
          }],
          bypassData: [{
            required: true, message: '请选择旁路位号!',
          }],
          bypassNo: [{
            required: true, message: '请选择旁路状态!',
          }],
          inputStatusData: [{
            required: true, message: '请选择!',
          }],
          interlockConditionData: [{
            required: true, message: '请选择输入卡件状态位号!',
          }],
          outputStatusData: [{
            required: true, message: '请选择输出卡件状态位号!',
          }],
          mpStatusData: [{
            required: true, message: '请选择MP状态位号!',
          }],
          // interlockConditionData:{
          //   rules: [{
          //     required: true, message: '请选择!',
          //   }],
          // },
        },
        url: {
          interLockSelect: '/sys/dict/loadTreeData',
          add: "/summary/interlockSummary/add",
          edit: "/summary/interlockSummary/edit",
          queryById: "/summary/interlockSummary/queryById",
          getTagInfo: "/iotedgeCollectData/iotedgeCollectData/getTagInfo"
        },
        customFieldNames: {
          label: 'name',
          value: 'info',
          children: 'children'
        },
        tagDataOptions: [],
      }
    },
    created () {
      this.getTagInfo()
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      // 获取所有位号
      getTagInfo(){
        postAction(this.url.getTagInfo).then(res => {
          console.log(res)
          this.tagDataOptions = res.result
          this.confirmLoading = false
        })
      },
      displayRender({ labels }) {
        return labels[labels.length - 1];
      },
      // 点位选择改变
      dianwerChange(e){
        console.log(e)
      },
      // 点位状态依据改变时
      instrumentStatusJugeChange(e){
        console.log(e)
        this.model.upperLimit = null
        this.model.lowerLimit = null
        this.model.thresholdValueN = null
      },
      add () {  
        // this.edit(this.modelDefault);
      },
      edit (record) {
        console.log(record)
        this.model = Object.assign({}, record);
        // 联锁条件
        this.model.interlockConditionData = [record.interlockConditionDeviceId, record.interlockConditionModuleName, record.interlockConditionTag+'&'+record.interlockSetValue]
        // 仪表状态
        if(record.instrumentStatusJuge === '0'){
          // 仪表状态-仪表状态位号
          this.model.instrumentStatusData = [record.instrumentStatusDeviceId, record.instrumentStatusModuleName, record.instrumentStatusTag+'&'+record.instrumentStatusValue]
        }
        if(this.model.instrumentStatusJuge === '1' || this.model.instrumentStatusJuge === '2'){
          // 仪表状态-原始模拟量位号
          this.model.ysmnlData = [record.ysmnlDeviceId, record.ysmnlModuleName, record.ysmnlTag+'&'+record.ysmnlValue]
        }
        if(this.model.instrumentStatusJuge === '2'){
          // 仪表状态-阈值Math.round解决相乘会出现很多小数的情况
          this.model.thresholdValueN = Math.round(parseInt(record.thresholdValue)*100)
          // this.model.thresholdValueN = (parseInt(record.thresholdValue)*100).toFixed(0)
        }
        // 当前值
        this.model.currentValueData = [record.currentValueDeviceId, record.currentValueModuleName, record.currentValueTag+'&'+record.currentValue]
        // 旁路
        if(record.ifBypass === '0'){
          this.model.bypassNo = record.bypass
        }
        if(record.ifBypass === '1'){
          this.model.bypassNo = '0'
          this.model.bypassData = [record.bypassDeviceId, record.bypassModuleName, record.bypassTag+'&'+record.bypass]
        }
        // 输入卡件状态
        this.model.inputStatusData = [record.inputStatusDeviceId, record.inputStatusModuleName, record.inputStatusTag+'&'+record.inputStatus]
        // 输出卡件状态
        this.model.outputStatusData = [record.outputStatusDeviceId, record.outputStatusModuleName, record.outputStatusTag+'&'+record.outputStatus]
        // MP状态
        this.model.mpStatusData = [record.mpStatusDeviceId, record.mpStatusModuleName, record.mpStatusTag+'&'+record.mpStatus]

        this.visible = true;
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            // 拆分级联选择器的数据传递后端使用-设备id、模块名称、点位、值
            var conditionTableData = {}
            // 联锁条件
            this.model.interlockConditionDeviceId = this.model.interlockConditionData[0]
            this.model.interlockConditionModuleName = this.model.interlockConditionData[1]
            this.model.interlockConditionTag = (this.model.interlockConditionData[2].split('&'))[0]
            this.model.interlockCondition = (this.model.interlockConditionData[2].split('&'))[1]
            // 仪表状态
            if(this.model.instrumentStatusJuge === '0'){
              // 仪表状态-仪表状态位号
              this.model.instrumentStatusDeviceId = this.model.instrumentStatusData[0]
              this.model.instrumentStatusModuleName = this.model.instrumentStatusData[1]
              this.model.instrumentStatusTag = (this.model.instrumentStatusData[2].split('&'))[0]
              this.model.instrumentStatusValue = (this.model.instrumentStatusData[2].split('&'))[1]
            }
            if(this.model.instrumentStatusJuge === '1' || this.model.instrumentStatusJuge === '2'){
              // 仪表状态-原始模拟量位号
              this.model.ysmnlDeviceId = this.model.ysmnlData[0]
              this.model.ysmnlModuleName = this.model.ysmnlData[1]
              this.model.ysmnlTag = (this.model.ysmnlData[2].split('&'))[0]
              this.model.ysmnlValue = (this.model.ysmnlData[2].split('&'))[1]
            }
            if(this.model.instrumentStatusJuge === '2'){
              // 仪表状态-阈值--设置thresholdValueN是防止自身转换出现问题
              this.model.thresholdValue = parseInt(this.model.thresholdValueN)/100
            }
            
            // 当前值
            this.model.currentValueDeviceId = this.model.currentValueData[0]
            this.model.currentValueModuleName = this.model.currentValueData[1]
            this.model.currentValueTag = (this.model.currentValueData[2].split('&'))[0]
            this.model.currentValue = (this.model.currentValueData[2].split('&'))[1]

            // 旁路位号
            if(this.model.ifBypass === '0'){
              // 否
              this.model.bypass = this.model.bypassNo
            }
            if(this.model.ifBypass === '1'){
              // 是
              this.model.bypassDeviceId = this.model.bypassData[0]
              this.model.bypassModuleName = this.model.bypassData[1]
              this.model.bypassTag = (this.model.bypassData[2].split('&'))[0]
              this.model.bypass = (this.model.bypassData[2].split('&'))[1]
            }
            
            // 输入卡件状态
            this.model.inputStatusDeviceId = this.model.inputStatusData[0]
            this.model.inputStatusModuleName = this.model.inputStatusData[1]
            this.model.inputStatusTag = (this.model.inputStatusData[2].split('&'))[0]
            this.model.inputStatus = (this.model.inputStatusData[2].split('&'))[1]
            
            // 输出卡件状态 
            this.model.outputStatusDeviceId = this.model.outputStatusData[0]
            this.model.outputStatusModuleName = this.model.outputStatusData[1]
            this.model.outputStatusTag = (this.model.outputStatusData[2].split('&'))[0]
            this.model.outputStatus = (this.model.outputStatusData[2].split('&'))[1]

            // MP状态
            this.model.mpStatusDeviceId = this.model.mpStatusData[0]
            this.model.mpStatusModuleName = this.model.mpStatusData[1]
            this.model.mpStatusTag = (this.model.mpStatusData[2].split('&'))[0]
            this.model.mpStatus = (this.model.mpStatusData[2].split('&'))[1]

            console.log(this.model)
            this.$emit('ok', this.model)
          }
         
        })
      },
    }
  }
</script>