| | |
| | | <el-form ref="formRef" |
| | | :model="form" |
| | | :rules="rules" |
| | | label-width="120px"> |
| | | label-position="top" |
| | | label-width="150px"> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="应急预案编码" |
| | | <el-form-item label="应急预案编码:" |
| | | prop="planCode"> |
| | | <el-input v-model="form.planCode" |
| | | placeholder="请输入应急预案编码" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="应急预案名称" |
| | | <el-form-item label="应急预案名称:" |
| | | prop="planName"> |
| | | <el-input v-model="form.planName" |
| | | placeholder="请输入应急预案名称" /> |
| | |
| | | </el-row> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="预案类型" |
| | | <el-form-item label="预案类型:" |
| | | prop="planType"> |
| | | <el-select v-model="form.planType" |
| | | placeholder="请选择预案类型" |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="备注" |
| | | <el-form-item label="备注:" |
| | | prop="remark"> |
| | | <el-input v-model="form.remark" |
| | | placeholder="请输入备注" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-form-item label="适用范围" |
| | | <el-form-item label="适用范围:" |
| | | prop="applyScope"> |
| | | <el-checkbox-group v-model="form.applyScope"> |
| | | <el-checkbox label="all">全体员工</el-checkbox> |
| | |
| | | <el-checkbox label="tech">技术部门</el-checkbox> |
| | | </el-checkbox-group> |
| | | </el-form-item> |
| | | <el-form-item label="应急处置步骤" |
| | | <el-form-item label="应急处置步骤:" |
| | | prop="execSteps"> |
| | | <div class="exec-steps-container" |
| | | style="width:100%"> |
| | |
| | | <div v-for="(step, index) in JSON.parse(currentKnowledge.execSteps)" |
| | | :key="index" |
| | | class="exec-step-view"> |
| | | <span class="step-number">{{ index + 1 }}.</span> |
| | | <!-- <span class="step-number">{{ index + 1 }}.</span> --> |
| | | <span class="step-title">{{ step.step }}:</span> |
| | | <span>{{ step.description }}</span> |
| | | </div> |
| | |
| | | |
| | | .exec-steps-container { |
| | | border: 1px solid #e4e7ed; |
| | | border-radius: 4px; |
| | | padding: 15px; |
| | | border-radius: 8px; |
| | | padding: 20px; |
| | | background-color: #f9fafc; |
| | | margin-top: 10px; |
| | | } |
| | | |
| | | .exec-step-item { |
| | | margin-bottom: 10px; |
| | | padding: 10px; |
| | | margin-bottom: 12px; |
| | | padding: 12px; |
| | | background-color: #ffffff; |
| | | border: 1px solid #e4e7ed; |
| | | border-radius: 4px; |
| | | border-radius: 6px; |
| | | transition: all 0.3s ease; |
| | | } |
| | | |
| | | .exec-step-item:hover { |
| | | box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
| | | border-color: #c6e2ff; |
| | | } |
| | | |
| | | .step-header { |
| | | display: flex; |
| | | align-items: flex-start; |
| | | flex-direction: column; |
| | | gap: 8px; |
| | | } |
| | | |
| | | .exec-step-view { |
| | | margin-bottom: 8px; |
| | | padding-left: 20px; |
| | | margin-bottom: 16px; |
| | | padding-left: 24px; |
| | | position: relative; |
| | | line-height: 1.6; |
| | | } |
| | | |
| | | .exec-step-view::before { |
| | | content: ""; |
| | | position: absolute; |
| | | left: 10px; |
| | | top: 20px; |
| | | bottom: -16px; |
| | | width: 2px; |
| | | background-color: #eaeaea; |
| | | } |
| | | |
| | | .exec-step-view:last-child::before { |
| | | display: none; |
| | | } |
| | | |
| | | .step-number { |
| | | position: absolute; |
| | | left: 0; |
| | | top: 0; |
| | | width: 20px; |
| | | height: 20px; |
| | | line-height: 20px; |
| | | text-align: center; |
| | | font-weight: bold; |
| | | color: #409eff; |
| | | color: #ffffff; |
| | | background-color: #409eff; |
| | | border-radius: 50%; |
| | | font-size: 12px; |
| | | z-index: 1; |
| | | } |
| | | |
| | | .step-title { |
| | | font-weight: bold; |
| | | margin-right: 5px; |
| | | font-weight: 600; |
| | | margin-right: 8px; |
| | | color: #395a9c; |
| | | } |
| | | |
| | | .no-data { |
| | | color: #909399; |
| | | font-style: italic; |
| | | text-align: center; |
| | | padding: 20px; |
| | | background-color: #f8f9fa; |
| | | border-radius: 4px; |
| | | margin-top: 10px; |
| | | } |
| | | </style> |