联锁管理样式

src/views/module_interLock/InterlockSummary/InterlockSummaryList.vue

@@ -325,7 +325,11 @@
             //移除 清除id 还原样式
             mouseleave: (event) => {
               this.mouseSummaryid = ''
-            }
+            },
+            // 点击合并行颜色未一起改变-待优化
+            click: (event) => {
+              this.mouseSummaryid = record.summaryid
+            },
           }
         }
       },

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

@@ -3,6 +3,7 @@
     <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
@@ -15,7 +16,60 @@
                 <!-- @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">
@@ -95,24 +149,8 @@
           </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-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">
@@ -143,42 +181,6 @@
               </a-form-model-item>
             </a-col>
           </template>
-          <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-row>
       </a-form-model>
     </j-form-container>

src/views/module_interLock/InterlockSummary/modules/InterlockSummaryForm.vue

@@ -2,128 +2,141 @@
   <a-spin :spinning="confirmLoading">
     <j-form-container :disabled="formDisabled">
       <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
-        <a-row>
-          <a-col :span="12">
-            <a-form-model-item label="装置" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="interlockApparatusId">
-              <a-select
-                v-model="model.interlockApparatusId"
-                show-search
-                placeholder="请选择装置"
-                @change="handleApparatusChange"
-                >
-                <!-- option-filter-prop="children" -->
-                <!-- :filter-option="filterOption" -->
-                <!-- @focus="handleFocus" -->
-                <!-- @blur="handleBlur" -->
-                <a-select-option v-for="(item) in apparatusData" :key="item.key" :value="item.key">{{ item.title }}</a-select-option>
-              </a-select>
-            </a-form-model-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-model-item label="系统" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="interlockSystemId">
-              <a-select
-                v-model="model.interlockSystemId"
-                show-search
-                placeholder="请选择系统"
-                @change="handleSystemChange"
-                >
-                <a-select-option v-for="(item) in systemData" :key="item.key" :value="item.key">{{ item.title }}</a-select-option>
-              </a-select>
-            </a-form-model-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-model-item label="联锁名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="interlockName">
-                <a-input v-model="model.interlockName" placeholder="请输入联锁名称"></a-input>
-            </a-form-model-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-model-item label="逻辑关系" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ljgx">
-              <a-input v-model="model.ljgx" placeholder="请输入逻辑关系"></a-input>
-            </a-form-model-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-model-item label="联锁输出值位号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="interlockOutValueData">
-              <a-cascader
-                v-model="model.interlockOutValueData"
-                :options="tagDataOptions"
-                :display-render="displayRender"
-                :fieldNames="customFieldNames"
-                expand-trigger="hover"
-                placeholder="请选择位号"
-                @change="dianwerChange"
-                />
-            </a-form-model-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
-              <a-input v-model="model.remark" placeholder="请输入备注"></a-input>
-            </a-form-model-item>
-          </a-col>
-        </a-row>
-        <div>
-          <a-button @click="handleAddCondition" type="primary" icon="plus">新增联锁条件</a-button>
+        <div class="interlock-summary-item">
+          <div class="interlock-summary-item-title">联锁基本信息</div>
+          <a-row>
+            <a-col :span="12">
+              <a-form-model-item label="装置" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="interlockApparatusId">
+                <a-select
+                  v-model="model.interlockApparatusId"
+                  show-search
+                  placeholder="请选择装置"
+                  @change="handleApparatusChange"
+                  >
+                  <!-- option-filter-prop="children" -->
+                  <!-- :filter-option="filterOption" -->
+                  <!-- @focus="handleFocus" -->
+                  <!-- @blur="handleBlur" -->
+                  <a-select-option v-for="(item) in apparatusData" :key="item.key" :value="item.key">{{ item.title }}</a-select-option>
+                </a-select>
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-model-item label="系统" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="interlockSystemId">
+                <a-select
+                  v-model="model.interlockSystemId"
+                  show-search
+                  placeholder="请选择系统"
+                  @change="handleSystemChange"
+                  >
+                  <a-select-option v-for="(item) in systemData" :key="item.key" :value="item.key">{{ item.title }}</a-select-option>
+                </a-select>
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-model-item label="联锁名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="interlockName">
+                  <a-input v-model="model.interlockName" placeholder="请输入联锁名称"></a-input>
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
+                <a-input v-model="model.remark" placeholder="请输入备注"></a-input>
+              </a-form-model-item>
+            </a-col>
+          </a-row>
+        </div>
+        <!-- 联锁条件信息 -->
+        <div class="interlock-summary-item" style="padding-bottom: 12px;">
+          <div class="interlock-summary-item-title u-flex-jab">
+            <div>联锁条件信息</div>
+            <a-button @click="handleAddCondition" type="primary" icon="plus">新增联锁条件</a-button>
+          </div>
+          <a-row>
+            <a-col :span="12">
+              <a-form-model-item label="逻辑关系" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ljgx">
+                <a-input v-model="model.ljgx" placeholder="请输入逻辑关系"></a-input>
+              </a-form-model-item>
+            </a-col>
+          </a-row>
+          <!-- 联锁条件表格 -->
+          <a-table
+            ref="table"
+            size="middle"
+            :scroll="{x:true}"
+            bordered
+            :rowKey="(record,index)=>{return index}"
+            :columns="columns"
+            :dataSource="conditionDataSource"
+            class="j-table-force-nowrap"
+            style="margin: 0 12px;">
+            <!-- 仪表状态依据 -->
+            <span slot="instrumentStatusJuge" slot-scope="text, record">
+              <template v-if="record.instrumentStatusJuge === '0'">
+                <span>位号读取</span>
+              </template>
+              <template v-if="record.instrumentStatusJuge === '1'">
+                <span>高低限判断</span>
+              </template>
+              <template v-if="record.instrumentStatusJuge === '2'">
+                <span>突变超限判断</span>
+              </template>
+            </span>
+            <!-- 仪表状态内容 -->
+            <span slot="instrumentStatusContent" slot-scope="text, record">
+              <template v-if="record.instrumentStatusJuge === '0'">
+                <span>位号：{{ record.instrumentStatusTag }}</span>
+              </template>
+              <template v-if="record.instrumentStatusJuge === '1'">
+                <span>位号：{{ record.ysmnlTag }}</span><br/>
+                <span>
+                  <span>高限值：{{ record.upperLimit }}</span>
+                  <span>低限值：{{ record.lowerLimit }}</span>
+                </span>
+              </template>
+              <template v-if="record.instrumentStatusJuge === '2'">
+                <span>位号：{{ record.ysmnlTag }}</span>
+                <span>
+                  <span>时间：{{ record.thresholdTime }}</span>
+                  <span>阈值：{{ record.thresholdValue }}</span>
+                </span>
+              </template>
+            </span>
+            <!-- 是否旁路 -->
+            <span slot="ifBypass" slot-scope="text, record">
+              <span v-if="record.ifBypass === '1'">{{ record.bypassTag }}</span>
+              <span v-if="record.ifBypass === '0'">{{ record.bypass }}</span>
+            </span>
+            <!-- 操作 -->
+            <span slot="action" slot-scope="text, record, index">
+              <a @click="handleEditCondition(record, index)">编辑</a>
+              <a-divider type="vertical" />
+              <a @click="handleCopyCondition(record, index)">复制</a>
+              <a-divider type="vertical" />
+              <a-popconfirm title="确定删除吗?" @confirm="() => handleDeleteCondition(record, index)">
+                <a>删除</a>
+              </a-popconfirm>
+            </span>
+          </a-table>
+        </div>
+        <!-- 联锁输出 -->
+        <div class="interlock-summary-item">
+          <div class="interlock-summary-item-title">联锁输出</div>
+          <a-row>
+            <a-col :span="12">
+              <a-form-model-item label="联锁输出值位号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="interlockOutValueData">
+                <a-cascader
+                  v-model="model.interlockOutValueData"
+                  :options="tagDataOptions"
+                  :display-render="displayRender"
+                  :fieldNames="customFieldNames"
+                  expand-trigger="hover"
+                  placeholder="请选择位号"
+                  @change="dianwerChange"
+                  />
+              </a-form-model-item>
+            </a-col>
+          </a-row>
         </div>
-        <!-- 联锁条件表格 -->
-        <a-table
-          ref="table"
-          size="middle"
-          :scroll="{x:true}"
-          bordered
-          :rowKey="(record,index)=>{return index}"
-          :columns="columns"
-          :dataSource="conditionDataSource"
-          class="j-table-force-nowrap">
-          <!-- :pagination="ipagination" -->
-          <!-- :loading="loading" -->
-          <!-- :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" -->
-          <!-- 仪表状态依据 -->
-          <span slot="instrumentStatusJuge" slot-scope="text, record">
-            <template v-if="record.instrumentStatusJuge === '0'">
-              <span>位号读取</span>
-            </template>
-            <template v-if="record.instrumentStatusJuge === '1'">
-              <span>高低限判断</span>
-            </template>
-            <template v-if="record.instrumentStatusJuge === '2'">
-              <span>突变超限判断</span>
-            </template>
-          </span>
-          <!-- 仪表状态内容 -->
-          <span slot="instrumentStatusContent" slot-scope="text, record">
-            <template v-if="record.instrumentStatusJuge === '0'">
-              <span>位号：{{ record.instrumentStatusTag }}</span>
-            </template>
-            <template v-if="record.instrumentStatusJuge === '1'">
-              <span>位号：{{ record.ysmnlTag }}</span><br/>
-              <span>
-                <span>高限值：{{ record.upperLimit }}</span>
-                <span>低限值：{{ record.lowerLimit }}</span>
-              </span>
-            </template>
-            <template v-if="record.instrumentStatusJuge === '2'">
-              <span>位号：{{ record.ysmnlTag }}</span>
-              <span>
-                <span>时间：{{ record.thresholdTime }}</span>
-                <span>阈值：{{ record.thresholdValue }}</span>
-              </span>
-            </template>
-          </span>
-          <!-- 是否旁路 -->
-          <span slot="ifBypass" slot-scope="text, record">
-            <span v-if="record.ifBypass === '1'">{{ record.bypassTag }}</span>
-            <span v-if="record.ifBypass === '0'">{{ record.bypass }}</span>
-          </span>
-          <!-- 操作 -->
-          <span slot="action" slot-scope="text, record, index">
-            <a @click="handleEditCondition(record, index)">编辑</a>
-            <a-divider type="vertical" />
-            <a @click="handleCopyCondition(record, index)">复制</a>
-            <a-divider type="vertical" />
-            <a-popconfirm title="确定删除吗?" @confirm="() => handleDeleteCondition(record, index)">
-              <a>删除</a>
-            </a-popconfirm>
-          </span>
-        </a-table>
         <!-- 新增联锁条件 -->
         <j-modal
           :title="conditionTitle"
@@ -446,4 +459,24 @@
       },
     }
   }
-</script>
+</script>
+<style lang="less">
+  .interlock-summary-item{
+    // box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+    margin-bottom: 12px;
+    // border-radius: 4px;
+  }
+  .interlock-summary-item-title{
+    background-color: #F5F7FA;
+    line-height: 40px;
+    font-size: 15px;
+    padding: 0 20px;
+    margin-bottom: 10px;
+    border-bottom: 1px solid #f3f3f3;
+  }
+  .u-flex-jab{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+</style>