diff --git a/back/src/assets/img/deleteRed.png b/back/src/assets/img/deleteRed.png
new file mode 100644
index 00000000..5a2ff7c7
Binary files /dev/null and b/back/src/assets/img/deleteRed.png differ
diff --git a/back/src/assets/img/jiahao.png b/back/src/assets/img/jiahao.png
new file mode 100644
index 00000000..a5349a21
Binary files /dev/null and b/back/src/assets/img/jiahao.png differ
diff --git a/back/src/assets/img/uploadAdd.png b/back/src/assets/img/uploadAdd.png
new file mode 100644
index 00000000..8427af53
Binary files /dev/null and b/back/src/assets/img/uploadAdd.png differ
diff --git a/back/src/views/modules/ability/assignedScene/area-add.vue b/back/src/views/modules/ability/assignedScene/area-add.vue
new file mode 100644
index 00000000..97a3289a
--- /dev/null
+++ b/back/src/views/modules/ability/assignedScene/area-add.vue
@@ -0,0 +1,561 @@
+<template>
+  <div>
+    <el-dialog custom-class="customClass" :visible.sync="areaVisibleCopy" :title="modalTypeText[modalType]"
+      @close="closeModal" :close-on-click-modal="false" :close-on-press-escape="false">
+     
+
+      <!-- 挂载和修改   -->
+      <div class="right">
+        <el-form :model="dataForm" :rules="rules" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
+          :label-width="$i18n.locale === 'en-US' ? '120px' : '100px'">
+          <!-- 基本信息 -->
+          <div class="scrollBox" id="anchor1">
+            
+            <div class="baseInner">
+              <el-form-item label="所属区市:" prop="unit">
+                <el-select v-model="dataForm.area" placeholder="请选择">
+                  <el-option v-for="item in areas" :key="item.data" :label="item.name"
+                    :value="item.name"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="赋能领域:" prop="unit">
+                <el-select v-model="dataForm.applicationArea" placeholder="请选择">
+                  <el-option v-for="item in sceneAreas" :key="item.data" :label="item.dict_label"
+                    :value="item.dict_value"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="场景名称:" prop="name">
+                <el-input v-model="dataForm.name" placeholder="请输入名称" style="width:90%"></el-input>
+              </el-form-item>
+
+              <el-form-item label="场景描述:" prop="description">
+                <el-input type="textarea" :rows="3" v-model="dataForm.description" placeholder="请输入描述"
+                  style="width:90%">
+                </el-input>
+              </el-form-item>
+              <el-form-item label="场景入口:">
+                <el-input v-model="dataForm.sceneUrl" placeholder="请输入场景入口" style="width:90%"></el-input>
+              </el-form-item>
+
+              <el-form-item label="场景图片:">
+                <el-upload ref="editUpload" class="upload-demo" :action="fileUploadUrl"
+                  :on-success="eidtHandleAvatarSuccess" :before-upload="editBeforeAvatarUpload" :limit="1"
+                  :file-list="[]" :on-remove="editUploadRemoveFile" :on-exceed="handleExceed" list-type="picture">
+                  <div slot="tip" class="el-upload__tip">只能上传图片文件</div>
+                  <div class="button-new">
+                    <div>点击上传</div>
+                  </div>
+
+                  <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+                </el-upload>
+              </el-form-item>
+            </div>
+          </div>
+
+ 
+        </el-form>
+      </div>
+      <template slot="footer">
+        <el-button type="primary" @click="dataFormSubmitHandle()">提交</el-button>
+        <el-button @click="closeModal">{{ $t("cancel") }}</el-button>
+
+      </template>
+    </el-dialog>
+  </div>
+</template>
+  
+<script>
+import debounce from 'lodash/debounce'
+import qs from 'qs'
+import Cookies from 'js-cookie'
+import upload from '@/views/modules/components/upload'
+
+// 模态框标题
+export const modalTypeText = {
+  add: '场景挂接',
+  update: '场景修改'
+}
+
+export default {
+  components: {
+    upload 
+  },
+  watch: {
+  
+    dataForm: {
+      handler(newVal) {
+        this.dataForm = newVal
+      },
+      deep: true,
+      immediate: true
+    },
+    areaVisible: {
+      handler(newVal) {
+        this.getSceneArea()
+        this.getArea()
+        this.areaVisibleCopy = newVal
+        if (this.modalType == 'add' && newVal) {
+          this.getDetail(this.dataForm)
+        }
+      },
+      immediate: true
+    }
+  },
+  props: {
+    modalType: {
+      type: String,
+      default: 'add'
+    },
+    areaVisible: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  data() {
+    return {
+      areas:[],//所属区市
+      sceneAreas:[],
+      fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload',
+      dataForm: {
+        district: 1,//0市级，1基层
+        area: '',//所属区市
+        infrastructureCount: null,
+        dataSourceCount: null,
+        componentCount: null,
+        name: '',
+        applicationArea: '',//赋能领域
+        description: '',
+        sceneUrl: '',
+        fuseAttrList: [
+          {
+            attrType: '构建步骤',
+            attrValue: [{ question: '', answer: [{ 'answer': '' }, { 'answer': '' }] }]
+          },
+          {
+            attrType: '基础设施',
+            attrValue: [{ name: '', type: '', dept: '' }]
+          },
+          {
+            attrType: '组件服务',
+            attrValue: [{ name: '', type: '', dept: '' }]
+          },
+          {
+            attrType: '数据资源',
+            attrValue: [{ name: '', type: '', dept: '' }]
+          },
+          {
+            attrType: '场景痛点',
+            attrValue: [{ description: '' }]
+          },
+          {
+            attrType: '解决方案',
+            attrValue: [{ description: '' }]
+          },
+          {
+            attrType: '服务图片',
+            attrValue: ''
+          }
+        ],
+
+      },
+      rules: {
+        name: [
+          {
+            required: true,
+            message: '请输入名称',
+            trigger: 'change'
+          }
+        ],
+        description: [
+          {
+            required: true,
+            message: '请输入描述',
+            trigger: 'change'
+          }
+        ]
+      },
+     
+      areaVisibleCopy: this.areaVisible,
+      displayInfo: {
+        name: '名称',
+        description: '描述'
+      },
+      modalTypeText: modalTypeText,
+    
+      abilityListObj: {},
+      imgData: [],
+      // 限定图片
+      handleExceed() {
+        this.$message({ type: 'error', message: '最多支持一张图片上传' })
+      },
+      imageUrl: ''
+    }
+  },
+
+  methods: {
+   //获取所属区市
+    getArea(){
+      const params = {
+        pid: '250000'
+      }
+      this.$http
+        .get('/sys/region/list/', {
+          params
+        })
+        .then((res) => {
+          this.areas = res.data.data
+        })
+    },
+    //获取赋能场景
+    getSceneArea() {
+      const params = {
+        topCategoryName: '应用资源'
+      }
+      this.$http
+        .get('/category/getAllFilterCriteriaByTopCategory/', {
+          params
+        })
+        .then((res) => {
+          this.sceneAreas = res.data.data[0].typeList
+        })
+    },
+
+    clearForm() {
+      this.$refs.dataForm && this.$refs.dataForm.resetFields()
+    },
+    closeModal() {
+      this.$emit('closeModal')
+    },
+
+
+    // 表单提交
+    dataFormSubmitHandle: debounce(
+      function () {
+
+        this.$refs.dataForm.validate((valid) => {
+          if (!valid) {
+            this.$message.error('请检查表单是否填写完整')
+            return false
+          }
+          const methodsObj = {
+            add: 'post',
+            update: 'put'
+          }
+
+          // if (this.imageUrl == '') {
+          //   this.$message.error('请上传图片！')
+          //   return
+          // }
+          this.dataForm.fuseAttrList.find(v => v.attrType == '服务图片').attrValue = this.imageUrl || ''
+          const _obj = Object.assign({}, this.dataForm, {
+            type: '赋能场景'
+          })
+         
+          this.dataForm.fuseAttrList.forEach(item => {
+            if(item.attrType!=='服务图片'){
+            item.attrValue = JSON.stringify(item.attrValue);
+            }
+
+          })
+          this.$http
+          [methodsObj[this.modalType]]('/fuse', _obj)
+            .then(({ data: res }) => {
+              if (res.code !== 0) {
+                return this.$message.error(res.msg)
+              }
+              this.$message({
+                message: this.$t('prompt.success'),
+                type: 'success',
+                duration: 500,
+                onClose: () => {
+                  this.$refs.dataForm && this.$refs.dataForm.resetFields()
+                  this.$emit('refreshDataList')
+                  this.$emit('closeModal')
+                }
+              })
+            })
+            .catch((err) => {
+              this.$message.error(err)
+            })
+        })
+      },
+      1000,
+      { leading: true, trailing: false }
+    ),
+    // 详情
+    getDetail(data) {
+      this.dataForm = data  
+    },
+    handleAvatarSuccess(res, file) {
+      if (res.code !== 0) {
+        return this.$message.error(res.msg)
+      }
+      this.imageUrl = res.data
+    },
+    beforeAvatarUpload(file) {
+      const isImage =
+        file.type === 'image/jpeg' ||
+        file.type === 'image/jpg' ||
+        file.type === 'image/png'
+      if (!isImage) {
+        this.$message.error('上传头像图片只能是 jpg/png 格式!')
+      }
+      return isImage
+    },
+    addUploadRemoveFile(file, fileList) {
+      this.$refs.addUpload.clearFiles()
+      this.imageUrl = ''
+    },
+    editBeforeAvatarUpload(file) {
+      const isImage =
+        file.type === 'image/jpeg' ||
+        file.type === 'image/jpg' ||
+        file.type === 'image/png'
+
+      if (!isImage) {
+        this.$message.error('上传头像图片只能是 jpg/png 格式!')
+      }
+      return isImage
+    },
+    editUploadRemoveFile(file, fileList) {
+      this.$refs.editUpload.clearFiles()
+      this.imageUrl = ''
+    },
+    eidtHandleAvatarSuccess(res, file) {
+      if (res.code !== 0) {
+        return this.$message.error(res.msg)
+      }
+      this.imageUrl = res.data
+    }
+  },
+  mounted() { 
+  },
+  beforeDestroy() {
+    this.clearForm()
+
+  }
+}
+</script>
+  
+<style lang="scss" scoped>
+.fixed {
+  position: sticky;
+  z-index: 10012;
+  top: 0;
+  left: 50%;
+  margin-left: -9.56rem;
+}
+
+.button-new {
+  height: 90px;
+  width: 128px;
+  border: 1px dashed rgba(198, 198, 198, 0.5);
+  border-radius: 2px;
+  background: #e9eff8;
+  color: #666666;
+  font-size: 14px;
+  margin-right: 8px;
+}
+
+.button-new div {
+  background: url('~@/assets/img/uploadAdd.png') no-repeat;
+  color: #666666;
+  background-position: center;
+  text-align: center;
+  height: 90px;
+  padding-top: 41px;
+  background-position-y: 22px;
+}
+
+
+
+.right {
+  width: 770px;
+  margin-left: 100px;
+  margin-top: 24px;
+
+
+  .info-inner {
+
+    margin-left: 10px;
+
+    margin-right: 10px;
+  }
+
+  .info-title {
+    font-size: 14px;
+    font-weight: bold;
+  }
+
+  .baseInfo {
+
+    border-radius: 2px;
+
+
+  }
+
+  .baseTitle {
+    padding-left: 20px;
+    color: #212121;
+    font-size: 16px;
+    margin-bottom: 10px;
+    margin-top: 32px;
+    background: url("~@/assets/img/biaoti.png") no-repeat;
+    background-position-y: 2px;
+
+
+  }
+
+  .baseInner {
+    background: rgba(244, 245, 248, 0.8);
+    padding: 24px 120px;
+  }
+
+  .baseInner1 {
+    background: rgba(244, 245, 248, 0.8);
+    padding: 24px 24px;
+  }
+}
+
+::v-deep .el-dialog__header {
+  background: #0058e1;
+  // height: 50px;
+}
+
+::v-deep .el-dialog__title {
+  line-height: 18px;
+  font-size: 18px;
+  color: #fff;
+}
+
+::v-deep .el-upload {
+  display: inline-flex;
+}
+
+::v-deep .el-dialog__body {
+  padding: 0px;
+  height: 580px;
+  overflow: auto;
+
+
+}
+
+.icon-input ::v-deep .el-input__inner {
+  cursor: pointer;
+}
+
+.detial-form ::v-deep {
+  .el-form-item {
+    margin-bottom: 0px;
+    line-height: 32px;
+  }
+
+  .el-form-item__label {
+    line-height: 32px;
+  }
+
+  .el-form-item__content {
+    line-height: 32px;
+  }
+}
+
+::v-deep .el-checkbox-button__inner {
+  width: 130px;
+  margin: 0 10px 5px;
+  border-left: unset !important;
+  border-radius: unset !important;
+  border: 1px solid #dcdfe6 !important;
+}
+</style>
+  
+<style lang="scss" scoped>
+.mod-sys__menu {
+
+  .menu-list,
+  .icon-list {
+
+    .el-input__inner,
+    .el-input__suffix {
+      cursor: pointer;
+    }
+  }
+
+  &-icon-popover {
+    width: 458px;
+    overflow: hidden;
+  }
+
+  &-icon-inner {
+    width: 478px;
+    max-height: 258px;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  &-icon-list {
+    width: 458px;
+    padding: 0;
+    margin: -8px 0 0 -8px;
+
+    >.el-button {
+      padding: 8px;
+      margin: 8px 0 0 8px;
+
+      >span {
+        display: inline-block;
+        vertical-align: middle;
+        width: 18px;
+        height: 18px;
+        font-size: 18px;
+      }
+    }
+  }
+}
+
+.previewImg {
+  position: fixed;
+  z-index: 9999;
+}
+
+.name {
+  text-align: right;
+  vertical-align: middle;
+  font-size: 14px;
+  color: #606266;
+  line-height: 40px;
+  padding: 0 12px 0 0;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  line-height: 32px;
+  width: 120px;
+}
+
+.text {
+  margin-left: 132px;
+  font-size: 14px;
+  color: #606266;
+  line-height: 32px;
+}
+
+.title {
+  text-align: center;
+  font-weight: 600;
+  font-size: 18px;
+  margin-bottom: 10px;
+}
+
+.first-title {
+  text-align: center;
+  font-weight: 600;
+  font-size: 18px;
+  margin-bottom: 10px;
+}
+
+.avatar {
+  height: 100px;
+  width: 100px;
+  display: block;
+}
+</style>
+  
\ No newline at end of file
diff --git a/back/src/views/modules/ability/assignedScene/city-add.vue b/back/src/views/modules/ability/assignedScene/city-add.vue
new file mode 100644
index 00000000..ef905e15
--- /dev/null
+++ b/back/src/views/modules/ability/assignedScene/city-add.vue
@@ -0,0 +1,839 @@
+<template>
+  <div>
+    <el-dialog custom-class="customClass" :visible.sync="cityVisibleCopy" :title="modalTypeText[modalType]"
+      @close="closeModal" :close-on-click-modal="false" :close-on-press-escape="false">
+      <div class="left">
+        <div class="left-process">
+          <!-- <el-steps direction="vertical" :active="activeStep">
+            <el-step :key=index v-for="(item, index) in steps" :title=item @click.native="handleStep(index)"></el-step>
+          </el-steps> -->
+          <div class="li1" v-for="(item, index) in steps" :key="index" @click="handleStep(item, index)">
+            <div v-if="index == activeStepIndex">
+              <div class="node node1">{{ item.name }}</div>
+              <div class="borderLeft borderLeft1"></div>
+            </div>
+            <div v-else>
+              <div class="node">{{ item.name }}</div>
+              <div class="borderLeft"></div>
+            </div>
+            <div class="advice"></div>
+          </div>
+
+        </div>
+      </div>
+
+
+      <!-- 挂载和修改   -->
+      <div class="right">
+        <el-form :model="dataForm" :rules="rules" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
+          :label-width="$i18n.locale === 'en-US' ? '120px' : '100px'">
+          <!-- 基本信息 -->
+          <div class="scrollBox" id="anchor1">
+            <div class="baseTitle">
+              基本信息
+            </div>
+            <div class="baseInner">
+              <el-form-item label="赋能领域:" prop="unit">
+                <el-select v-model="dataForm.applicationArea" placeholder="请选择">
+                  <el-option v-for="item in sceneAreas" :key="item.data" :label="item.dict_label"
+                    :value="item.dict_value"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="场景名称:" prop="name">
+                <el-input v-model="dataForm.name" placeholder="请输入名称" style="width:90%"></el-input>
+              </el-form-item>
+
+              <el-form-item label="场景描述:" prop="description">
+                <el-input type="textarea" :rows="3" v-model="dataForm.description" placeholder="请输入描述"
+                  style="width:90%">
+                </el-input>
+              </el-form-item>
+              <el-form-item label="场景入口:">
+                <el-input v-model="dataForm.sceneUrl" placeholder="请输入场景入口" style="width:90%"></el-input>
+              </el-form-item>
+
+              <el-form-item label="场景图片:">
+                <el-upload ref="editUpload" class="upload-demo" :action="fileUploadUrl"
+                  :on-success="eidtHandleAvatarSuccess" :before-upload="editBeforeAvatarUpload" :limit="1"
+                  :file-list="[]" :on-remove="editUploadRemoveFile" :on-exceed="handleExceed" list-type="picture">
+                  <div slot="tip" class="el-upload__tip">只能上传图片文件</div>
+                  <div class="button-new">
+                    <div>点击上传</div>
+                  </div>
+
+                  <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+                </el-upload>
+              </el-form-item>
+            </div>
+          </div>
+
+          <!-- 场景痛点 -->
+          <div class="scrollBox" id="anchor2">
+            <div class="baseTitle">
+              场景痛点
+            </div>
+            <div class="baseInner">
+              <scene-one-input :dataForm="dataForm" title="场景痛点" @update="updateDataForm" ref="scenePainDom"
+                :keyTextObj="painKeyTextObj"></scene-one-input>
+            </div>
+          </div>
+
+          <!-- 解决方案 -->
+          <div class="scrollBox" id="anchor3">
+            <div class="baseTitle">
+              解决方案
+            </div>
+            <div class="baseInner">
+              <scene-one-input :dataForm="dataForm" title="解决方案" @update="updateDataForm" ref="solutionDom"
+                :keyTextObj="solutionKeyTextObj"></scene-one-input>
+            </div>
+          </div>
+
+          <!-- 使用能力 -->
+          <div class="scrollBox" id="anchor4">
+            <div class="baseTitle">
+              使用能力
+            </div>
+            <div class="baseInner1">
+              <div class="info-inner">
+                <ability-add :dataForm="dataForm" @update="updateDataForm" @updateCount="updateCount" ref="abilityAdd1"
+                  title="基础设施" :typeList="baseTypeList"></ability-add>
+              </div>
+              <div style="border-bottom: 1px dashed #d3d3d3;margin-bottom: 23px;"></div>
+              <div class="info-inner">
+                <ability-add :dataForm="dataForm" @update="updateDataForm" @updateCount="updateCount" ref="abilityAdd2"
+                  title="组件服务" :typeList="componetTypeList"></ability-add>
+              </div>
+              <div style="border-bottom: 1px dashed #d3d3d3;margin-bottom: 23px;"></div>
+              <div class="info-inner">
+                <ability-add :dataForm="dataForm" @update="updateDataForm" @updateCount="updateCount" ref="abilityAdd3"
+                  title="数据资源" :typeList="dataTypeList"></ability-add>
+              </div>
+            </div>
+            <!-- <InfrastructureModal v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="基础设施"
+                :modalType="modalType" ref="jcssDom"></InfrastructureModal>
+                <el-form-item label="基础设施总数" >
+             <el-input   v-model="dataForm.infrastructureCount"  onkeyup="value=value.replace(/[^\d]/g,0)" placeholder="请输入基础设施总数"></el-input>
+                </el-form-item>
+              <combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="数据资源" ref="sjzyDom"
+                :getDataParams="getListParams['数据资源']"></combine-ability>
+                <el-form-item label="数据资源总数" >
+             <el-input   v-model="dataForm.dataSourceCount"  onkeyup="value=value.replace(/[^\d]/g,0)" placeholder="请输入基础设施总数"></el-input>
+                </el-form-item>
+              <combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="组件服务" ref="zjfwDom"
+                :getDataParams="getListParams['组件服务']"></combine-ability>
+                <el-form-item label="组件服务总数" >
+             <el-input   v-model="dataForm.componentCount"  onkeyup="value=value.replace(/[^\d]/g,0)" placeholder="请输入基础设施总数"></el-input>
+                </el-form-item> -->
+          </div>
+
+          <!-- 构建步骤 -->
+          <div class="scrollBox" id="anchor5">
+            <div class="baseTitle">
+              构建步骤
+            </div>
+            <div class="baseInner1">
+              <scene-use-step :dataForm="dataForm" @update="updateDataForm" ref="sceneUseUpDom">
+              </scene-use-step>
+            </div>
+          </div>
+        </el-form>
+      </div>
+      <template slot="footer">
+        <el-button type="primary" @click="dataFormSubmitHandle()">提交</el-button>
+        <el-button @click="closeModal">{{ $t("cancel") }}</el-button>
+
+      </template>
+    </el-dialog>
+  </div>
+</template>
+  
+<script>
+import debounce from 'lodash/debounce'
+import qs from 'qs'
+import SceneUseStep from './components/scene-use-step.vue'
+import SceneOneInput from './components/scene-one-input.vue'
+import AbilityAdd from './components/ability-add.vue'
+import CombineAbility from '../components/combine-ability.vue'
+import CommonQuestion from '../components/common-question.vue'
+import InfrastructureModal from './components/infrastructure-modal.vue'
+import Cookies from 'js-cookie'
+import upload from '@/views/modules/components/upload'
+
+
+export const getDescJson = (text) => {
+  return {
+    descObj: {
+      text: `${text}描述`,
+      key: 'description'
+    }
+  }
+}
+
+// 模态框标题
+export const modalTypeText = {
+  add: '场景挂接',
+  update: '场景修改'
+}
+
+export default {
+  components: {
+    SceneUseStep,
+    CombineAbility,
+    SceneOneInput,
+    upload,
+    CommonQuestion,
+    InfrastructureModal,
+    AbilityAdd
+  },
+  watch: {
+  
+    dataForm: {
+      handler(newVal) {
+        this.dataForm = newVal
+      },
+      deep: true,
+      immediate: true
+    },
+    cityVisible: {
+      handler(newVal) {
+        this.getSceneArea()
+        this.cityVisibleCopy = newVal
+        if (this.modalType == 'add' && newVal) {
+         // localStorage.setItem('InfrastructureSearchData', JSON.stringify({}))
+          this.getDetail(this.dataForm)
+        }
+      },
+      immediate: true
+    }
+  },
+  props: {
+    modalType: {
+      type: String,
+      default: 'add'
+    },
+    cityVisible: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  data() {
+    return {
+      domArr: [],
+      scrollTop: 0,
+      selectNow: '',
+      activeStepIndex: 0,//选择的步骤
+      activeStepIndexs: 0,
+      baseTypeList: [{ value: '视频资源', label: '视频资源' }, { value: '云资源', label: '云资源' }, { value: '其他', label: '其他' }],
+      componetTypeList: [{ value: '智能算法', label: '智能算法' }, { value: ' 图层服务', label: ' 图层服务' },
+      { value: '开发组件', label: '开发组件' }, { value: '业务组件', label: '业务组件' }],
+      dataTypeList: [{ value: '数据', label: '数据' }],
+      sceneAreas: [],//赋能领域
+
+      steps: [{ 'name': '基本信息', 'id': "anchor1" },
+      { 'name': '场景痛点', 'id': "anchor2" },
+      { 'name': '解决方案', 'id': "anchor3" },
+      { 'name': '使用能力', 'id': "anchor4" },
+      { 'name': '构建步骤', 'id': "anchor5" }],
+      fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload',
+
+      painKeyTextObj: getDescJson('痛点'),
+      solutionKeyTextObj: getDescJson('方案'),
+      dataForm: {
+        district: 0,//市级
+        area: '',//所属区市
+        infrastructureCount: null,
+        dataSourceCount: null,
+        componentCount: null,
+        name: '',
+        applicationArea: '',//赋能领域
+        description: '',
+        sceneUrl: '',
+        fuseAttrList: [
+          {
+            attrType: '构建步骤',
+            attrValue: [{ question: '', answer: [{ 'answer': '' }, { 'answer': '' }] }]
+          },
+          {
+            attrType: '基础设施',
+            attrValue: [{ name: '', type: '', dept: '' }]
+          },
+          {
+            attrType: '组件服务',
+            attrValue: [{ name: '', type: '', dept: '' }]
+          },
+          {
+            attrType: '数据资源',
+            attrValue: [{ name: '', type: '', dept: '' }]
+          },
+          {
+            attrType: '场景痛点',
+            attrValue: [{ description: '' }]
+          },
+          {
+            attrType: '解决方案',
+            attrValue: [{ description: '' }]
+          },
+          {
+            attrType: '服务图片',
+            attrValue: ''
+          }
+        ],
+
+      },
+      rules: {
+        name: [
+          {
+            required: true,
+            message: '请输入名称',
+            trigger: 'change'
+          }
+        ],
+        description: [
+          {
+            required: true,
+            message: '请输入描述',
+            trigger: 'change'
+          }
+        ]
+      },
+      checkList: ['基本信息', '场景痛点', '解决方案', '使用能力', '构建步骤'],
+      cityVisibleCopy: this.cityVisible,
+      displayInfo: {
+        name: '名称',
+        description: '描述'
+      },
+      modalTypeText: modalTypeText,
+      refsParseArray: {
+        sceneUseUpDom: '构建步骤',
+        moreAbilityDom: '更多能力',
+        scenePainDom: '场景痛点',
+        solutionDom: '解决方案',
+        abilityAdd1: '基础设施',
+        abilityAdd2: '组件服务',
+        abilityAdd3: '数据资源'
+      },
+
+      abilityListObj: {},
+      imgData: [],
+      // 限定图片
+      handleExceed() {
+        this.$message({ type: 'error', message: '最多支持一张图片上传' })
+      },
+      imageUrl: ''
+    }
+  },
+
+  methods: {
+
+
+    handleStep(item, index) {
+      this.activeStepIndex = index
+      this.selectNow = item.id // 设置选中的锚点为当前点击的
+      let top = document.querySelector('#' + item.id).offsetTop - 100
+      document.querySelectorAll(".customClass .el-dialog__body")[0].scrollTop = top
+
+    },
+    //获取赋能场景
+    getSceneArea() {
+      const params = {
+        topCategoryName: '应用资源'
+      }
+      this.$http
+        .get('/category/getAllFilterCriteriaByTopCategory/', {
+          params
+        })
+        .then((res) => {
+          this.sceneAreas = res.data.data[0].typeList
+        })
+    },
+
+    clearForm() {
+      this.$refs.dataForm && this.$refs.dataForm.resetFields()
+    },
+    closeModal() {
+      this.$emit('closeModal')
+    },
+    // 更新表单
+    updateDataForm(data) {
+      this.dataForm.fuseAttrList.map(v => {
+        if (v.attrType === data.title) {
+          v.attrValue = data.list
+        }
+      })
+
+    },
+    //更新数量
+    updateCount(data) {
+      if (data.title === '基础设施') {
+        this.dataForm.infrastructureCount = data.count
+      }
+      if (data.title === '组件服务') {
+        this.dataForm.componentCount = data.count
+      }
+      if (data.title === '数据资源') {
+        this.dataForm.dataSourceCount = data.count
+      }
+
+    },
+
+    // 表单提交
+    dataFormSubmitHandle: debounce(
+      function () {
+
+        this.$refs.dataForm.validate((valid) => {
+          if (!valid) {
+            this.$message.error('请检查表单是否填写完整')
+            return false
+          }
+          const methodsObj = {
+            add: 'post',
+            update: 'put'
+          }
+
+          // if (this.imageUrl == '') {
+          //   this.$message.error('请上传图片！')
+          //   return
+          // }
+          this.dataForm.fuseAttrList.find(v => v.attrType == '服务图片').attrValue = this.imageUrl || ''
+          const _obj = Object.assign({}, this.dataForm, {
+            type: '赋能场景'
+          })
+          this.dataForm.fuseAttrList.forEach(item => {
+            if(item.attrType!=='服务图片'){
+            item.attrValue = JSON.stringify(item.attrValue);
+            }
+
+          })
+          this.$http
+          [methodsObj[this.modalType]]('/fuse', _obj)
+            .then(({ data: res }) => {
+              if (res.code !== 0) {
+                return this.$message.error(res.msg)
+              }
+              this.$message({
+                message: this.$t('prompt.success'),
+                type: 'success',
+                duration: 500,
+                onClose: () => {
+                  this.$refs.dataForm && this.$refs.dataForm.resetFields()
+                  this.$emit('refreshDataList')
+                  this.$emit('closeModal')
+                }
+              })
+            })
+            .catch((err) => {
+              this.$message.error(err)
+            })
+        })
+      },
+      1000,
+      { leading: true, trailing: false }
+    ),
+    // 详情
+    getDetail(data) {
+      this.dataForm = data
+      this.$nextTick(() => {
+        for (const key in this.refsParseArray) {
+          this.$refs[key] && this.$refs[key].getDataInfo && this.$refs[key].getDataInfo(data)
+        }
+        const _imgObj = data.fuseAttrList.find(v => v.attrType == '服务图片') || {}
+        this.imageUrl = _imgObj.attrValue
+       
+
+
+      })
+
+    },
+    handleAvatarSuccess(res, file) {
+      if (res.code !== 0) {
+        return this.$message.error(res.msg)
+      }
+      this.imageUrl = res.data
+    },
+    beforeAvatarUpload(file) {
+      const isImage =
+        file.type === 'image/jpeg' ||
+        file.type === 'image/jpg' ||
+        file.type === 'image/png'
+      if (!isImage) {
+        this.$message.error('上传头像图片只能是 jpg/png 格式!')
+      }
+      return isImage
+    },
+    addUploadRemoveFile(file, fileList) {
+      this.$refs.addUpload.clearFiles()
+      this.imageUrl = ''
+    },
+    editBeforeAvatarUpload(file) {
+      const isImage =
+        file.type === 'image/jpeg' ||
+        file.type === 'image/jpg' ||
+        file.type === 'image/png'
+
+      if (!isImage) {
+        this.$message.error('上传头像图片只能是 jpg/png 格式!')
+      }
+      return isImage
+    },
+    editUploadRemoveFile(file, fileList) {
+      this.$refs.editUpload.clearFiles()
+      this.imageUrl = ''
+    },
+    eidtHandleAvatarSuccess(res, file) {
+      if (res.code !== 0) {
+        return this.$message.error(res.msg)
+      }
+      this.imageUrl = res.data
+    }
+  },
+  mounted() {
+    const that = this;
+    this.$nextTick(() => {
+      document.querySelector(".el-dialog__body").onscroll = function () {
+
+        let top = document.querySelectorAll(".customClass .el-dialog__body")[0].scrollTop - 100
+
+        if (top < document.querySelector('#anchor1').offsetTop - 100) {
+          that.activeStepIndexs = 0
+        }
+        else if (top < document.querySelector('#anchor2').offsetTop - 100) {
+          that.activeStepIndexs = 1
+        }
+        else if (top < document.querySelector('#anchor3').offsetTop - 100) {
+          that.activeStepIndexs = 2
+        }
+        else if (top < document.querySelector('#anchor4').offsetTop - 100) {
+          that.activeStepIndexs = 3
+        }
+        else if (top < document.querySelector('#anchor5').offsetTop - 100) {
+          that.activeStepIndexs = 4
+        } else {
+          that.activeStepIndexs = 0
+        }
+        if (that.activeStepIndex !== that.activeStepIndexs) {
+          that.activeStepIndex = that.activeStepIndexs;
+          that.$forceUpdate();
+        }
+      }
+
+    })
+
+
+  },
+  beforeDestroy() {
+    this.clearForm()
+
+  }
+}
+</script>
+  
+<style lang="scss" scoped>
+.fixed {
+  position: sticky;
+  z-index: 10012;
+  top: 0;
+  left: 50%;
+  margin-left: -9.56rem;
+}
+
+.button-new {
+  height: 90px;
+  width: 128px;
+  border: 1px dashed rgba(198, 198, 198, 0.5);
+  border-radius: 2px;
+  background: #e9eff8;
+  color: #666666;
+  font-size: 14px;
+  margin-right: 8px;
+}
+
+.button-new div {
+  background: url('~@/assets/img/uploadAdd.png') no-repeat;
+  color: #666666;
+  background-position: center;
+  text-align: center;
+  height: 90px;
+  padding-top: 41px;
+  background-position-y: 22px;
+}
+
+.left {
+  width: 135px;
+  height: 650px;
+  position: fixed;
+  background: rgba(244, 245, 248, 0.8);
+
+  .left-process {
+    height: 300px;
+    position: fixed;
+    padding-left: 18px;
+    padding-top: 24px;
+
+    .li1 {
+      list-style: none;
+      box-sizing: border-box;
+      padding-left: 20px;
+      position: relative;
+    }
+
+    .borderLeft {
+      width: 1px;
+      height: 100%;
+      background-color: #1160e2;
+      position: absolute;
+      top: 11.225px;
+      bottom: 0;
+      left: -1px;
+    }
+
+    .borderLeft1 {
+      background-color: #1160e2;
+      ;
+    }
+
+    .node::before {
+      z-index: 1;
+      content: "";
+      background-color: #fff;
+      border: 1px solid #1160e2;
+      width: 12px;
+      height: 12px;
+      color: #fff;
+      position: absolute;
+      border-radius: 50%;
+      left: 0;
+      top: 11.225px;
+      transform: translate(-50%, -50%);
+    }
+
+    .node {
+      cursor: pointer;
+      font-size: 16px;
+      line-height: 22.5px;
+      font-weight: 500;
+      color: #212121;
+    }
+
+    .node1 {
+      color: #0058e1;
+    }
+
+    .node1::before {
+      width: 16px;
+
+      height: 16px;
+
+      background-color: #fff;
+
+      border-radius: 50%;
+
+      border: 4px solid #1160e2;
+    }
+
+
+
+
+    .advice {
+      font-size: 10px;
+      color: #1160e2;
+      padding-bottom: 46px;
+    }
+
+    .li1:last-child .borderLeft {
+      display: none;
+    }
+
+  }
+}
+
+.right {
+  width: 770px;
+  margin-left: 157px;
+  margin-top: -5px;
+
+
+  .info-inner {
+
+    margin-left: 10px;
+
+    margin-right: 10px;
+  }
+
+  .info-title {
+    font-size: 14px;
+    font-weight: bold;
+  }
+
+  .baseInfo {
+
+    border-radius: 2px;
+
+
+  }
+
+  .baseTitle {
+    padding-left: 20px;
+    color: #212121;
+    font-size: 16px;
+    margin-bottom: 10px;
+    margin-top: 32px;
+    background: url("~@/assets/img/biaoti.png") no-repeat;
+    background-position-y: 2px;
+
+
+  }
+
+  .baseInner {
+    background: rgba(244, 245, 248, 0.8);
+    padding: 24px 120px;
+  }
+
+  .baseInner1 {
+    background: rgba(244, 245, 248, 0.8);
+    padding: 24px 24px;
+  }
+}
+
+::v-deep .el-dialog__header {
+  background: #0058e1;
+  // height: 50px;
+}
+
+::v-deep .el-dialog__title {
+  line-height: 18px;
+  font-size: 18px;
+  color: #fff;
+}
+
+::v-deep .el-upload {
+  display: inline-flex;
+}
+
+::v-deep .el-dialog__body {
+  padding: 0px;
+  height: 580px;
+  overflow: auto;
+
+
+}
+
+.icon-input ::v-deep .el-input__inner {
+  cursor: pointer;
+}
+
+.detial-form ::v-deep {
+  .el-form-item {
+    margin-bottom: 0px;
+    line-height: 32px;
+  }
+
+  .el-form-item__label {
+    line-height: 32px;
+  }
+
+  .el-form-item__content {
+    line-height: 32px;
+  }
+}
+
+::v-deep .el-checkbox-button__inner {
+  width: 130px;
+  margin: 0 10px 5px;
+  border-left: unset !important;
+  border-radius: unset !important;
+  border: 1px solid #dcdfe6 !important;
+}
+</style>
+  
+<style lang="scss" scoped>
+.mod-sys__menu {
+
+  .menu-list,
+  .icon-list {
+
+    .el-input__inner,
+    .el-input__suffix {
+      cursor: pointer;
+    }
+  }
+
+  &-icon-popover {
+    width: 458px;
+    overflow: hidden;
+  }
+
+  &-icon-inner {
+    width: 478px;
+    max-height: 258px;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  &-icon-list {
+    width: 458px;
+    padding: 0;
+    margin: -8px 0 0 -8px;
+
+    >.el-button {
+      padding: 8px;
+      margin: 8px 0 0 8px;
+
+      >span {
+        display: inline-block;
+        vertical-align: middle;
+        width: 18px;
+        height: 18px;
+        font-size: 18px;
+      }
+    }
+  }
+}
+
+.previewImg {
+  position: fixed;
+  z-index: 9999;
+}
+
+.name {
+  text-align: right;
+  vertical-align: middle;
+  font-size: 14px;
+  color: #606266;
+  line-height: 40px;
+  padding: 0 12px 0 0;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  line-height: 32px;
+  width: 120px;
+}
+
+.text {
+  margin-left: 132px;
+  font-size: 14px;
+  color: #606266;
+  line-height: 32px;
+}
+
+.title {
+  text-align: center;
+  font-weight: 600;
+  font-size: 18px;
+  margin-bottom: 10px;
+}
+
+.first-title {
+  text-align: center;
+  font-weight: 600;
+  font-size: 18px;
+  margin-bottom: 10px;
+}
+
+.avatar {
+  height: 100px;
+  width: 100px;
+  display: block;
+}
+</style>
+  
\ No newline at end of file
diff --git a/back/src/views/modules/ability/assignedScene/components/ability-add.vue b/back/src/views/modules/ability/assignedScene/components/ability-add.vue
new file mode 100644
index 00000000..cb8a5fc5
--- /dev/null
+++ b/back/src/views/modules/ability/assignedScene/components/ability-add.vue
@@ -0,0 +1,239 @@
+<template>
+  <div>
+    <div class="info-title">{{ title }}</div>
+
+    <el-form :inline="true">
+      <el-form-item label="使用总数">
+        <el-input
+          v-model="count"
+          onkeyup="value=value.replace(/[^\d]/g,0)"
+          placeholder="请输入总数"
+          style="width: 320px"
+        ></el-input>
+      </el-form-item>
+      <el-form-item>
+        <div class="submit">
+          <a-button type="primary" @click="addBaseInfo">
+            <img
+              style="height: 12px; width: 12px; margin-top: -2px"
+              src="~@/assets/img/jiahao.png"
+              alt=""
+            />
+            <span style="margin-left: 4px">添加实例数据</span>
+          </a-button>
+        </div>
+      </el-form-item>
+    </el-form>
+    <div style="margin-bottom: 20px">
+      <el-table v-if="dataInfo.length > 0" :data="dataInfo" border>
+        <el-table-column label="序号" width="55">
+          <template slot-scope="scope">{{
+            scope.$index + 1 > 9 ? scope.$index + 1 : "0" + (scope.$index + 1)
+          }}</template>
+        </el-table-column>
+        <el-table-column label="数据名称" width="180">
+          <template slot-scope="scope">
+            <el-input
+              v-model="scope.row.name"
+              placeholder="请输入数据名称"
+            ></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="类型" width="200">
+          <template slot-scope="scope">
+            <el-select :ref="scope.row.id" v-model="scope.row.type">
+              <el-option
+                v-for="item in typeList"
+                :label="item.label"
+                :value="item.value"
+                :key="item.value"
+              ></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="来源部门" width="180">
+          <template slot-scope="scope">
+            <el-input
+              v-model="scope.row.dept"
+              placeholder="请输入来源部门"
+            ></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <span
+              style="color: #0058e1"
+              @click="handleDelete(scope.$index, scope.row)"
+              >删除</span
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    dataForm: {
+      type: Object,
+      default: () => {},
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    typeList: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  watch: {
+    dataInfo: {
+      handler(newVal) {
+        this.dataInfo = newVal;
+        this.$emit("update", {
+          title: this.title,
+          list: newVal,
+        });
+      },
+      deep: true,
+      immediate: true,
+    },
+    count: {
+      handler(newVal) {
+        this.count = newVal;
+        this.$emit("updateCount", {
+          title: this.title,
+          count: newVal,
+        });
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  data() {
+    return {
+      count: "",
+      dataInfo: [],
+    };
+  },
+
+  methods: {
+    addBaseInfo() {
+      let data = {
+        name: "",
+        type: "",
+        dept: "",
+      };
+      this.dataInfo.push(data);
+    },
+    handleDelete(row) {
+      this.dataInfo.splice(row, 1);
+    },
+    getDataInfo(dataForm) {
+      let arr = [];
+      if (dataForm && (dataForm.id || dataForm.id === 0)) {
+        if (this.title === "基础设施") {
+          this.count = dataForm.infrastructureCount;
+        }
+        if (this.title === "组件服务") {
+          this.count = dataForm.componentCount;
+        }
+        if (this.title === "数据资源") {
+          this.count = dataForm.dataSourceCount;
+        }
+
+        let fuseAttrList = dataForm.fuseAttrList || [];
+        let obj = fuseAttrList.find((v) => v.attrType === this.title) || {};
+        let attrValue = JSON.parse(obj.attrValue || "[]");
+        if (attrValue.length > 0) {
+          attrValue.map((v) => {
+            arr.push(v);
+          });
+        } else {
+          arr = [];
+        }
+      } else {
+        arr = [];
+      }
+
+      this.dataInfo = arr;
+    },
+    // 新增
+    addItem() {
+      let index = this.dataInfo.length - 1;
+      if (this.dataInfo[index][this.keyTextObj.descObj.key] === "") {
+        return this.$message.warning("请填写完整信息！");
+      }
+      this.dataInfo.push({
+        [this.keyTextObj.descObj.key]: "",
+      });
+    },
+    // 删除
+    deleteItem(index) {
+      this.$confirm("确认是否删除?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.$message({
+            type: "success",
+            message: "删除成功!",
+          });
+          this.dataInfo.splice(index, 1);
+        })
+        .catch(() => {});
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+::v-deep .el-table thead {
+  height: 40px;
+}
+
+::v-deep .el-table th {
+  font-weight: normal;
+  background-color: #e3e4e5 !important;
+}
+
+.submit {
+  font-size: 0.14rem;
+  margin-left: 8px;
+
+  .ant-btn {
+    width: 128px;
+    height: 32px;
+    text-align: center;
+    background: #fff;
+    color: #0558e1;
+    border: 1px solid #0558e1;
+    border-radius: 2px;
+    font-size: 14px;
+  }
+
+  .ant-btn:hover {
+    background: #fff;
+    color: #0558e1;
+    opacity: 0.8;
+  }
+
+  .ant-btn:active {
+    background: #fff;
+    color: #0558e1;
+    opacity: 0.8;
+  }
+}
+
+.info-title {
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 16px;
+}
+
+.add-btn {
+  margin-left: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/back/src/views/modules/ability/assignedScene/components/scene-one-input.vue b/back/src/views/modules/ability/assignedScene/components/scene-one-input.vue
index 9664655f..2b906467 100644
--- a/back/src/views/modules/ability/assignedScene/components/scene-one-input.vue
+++ b/back/src/views/modules/ability/assignedScene/components/scene-one-input.vue
@@ -1,20 +1,39 @@
 <template>
     <div class="question-box">
-        <div class="title">
+        <!-- <div class="title">
             {{ title }}
-        </div>
+        </div> -->
         <div v-for="(item, index) in dataInfo" :key="index">
-            <el-form-item :label="keyTextObj.descObj.text">
+            <el-form-item :label=keyTextObj.descObj.text+(index+1)>
                 <el-input type="textarea" :rows="2" v-model="item[keyTextObj.descObj.key]"
                     :placeholder="`请输入${keyTextObj.descObj.text}`" style="width:90%">
                 </el-input>
-                <el-button style="margin-left:10px" @click="deleteItem(index)" type="danger" size="small"
-                    v-if="dataInfo.length > 1">删除
-                </el-button>
+                <!-- <icon class="el-icon-remove" style="color:red;margin-left: 2px;"
+                @click="deleteItem(index)" type="danger" size="small"
+                    v-if="dataInfo.length > 1"></icon> -->
+                    <img
+                    style="color:red;margin-left: 6px;"
+                @click="deleteItem(index)" type="danger" size="small"
+                    v-if="dataInfo.length > 1"
+                src="~@/assets/img/deleteRed.png"
+                alt=""
+              />
+                <!-- <el-button style="margin-left:10px" >删除
+                </el-button> -->
             </el-form-item>
-            <el-button class="add-btn" size="small" v-if="index == dataInfo.length - 1" @click="addItem" type="primary">
-                添加
-            </el-button>
+            <!-- <el-button class="add-btn" icon="el-icon-circle-plus-outline" size="small" v-if="index == dataInfo.length - 1" @click="addItem" type="primary">
+               添加
+            </el-button> -->
+            <div class="submit">
+            <a-button type="primary"  v-if="index == dataInfo.length - 1" @click="addItem" >
+              <img
+                style="height: 12px; width: 12px;margin-top: -2px;"
+                src="~@/assets/img/jiahao.png"
+                alt=""
+              />
+              <span style="margin-left: 4px">添加{{keyTextObj.descObj.text}}</span>
+            </a-button>
+          </div>
         </div>
     </div>
 </template>
@@ -115,6 +134,31 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+     .submit {
+        font-size: 0.14rem;
+        margin-left: 100px;
+        .ant-btn {
+          width: 386px;
+          height: 32px;
+          text-align: center;
+          background: #fff;
+          color: #0558e1;
+          border: 1px solid #0558e1;
+          border-radius: 2px;
+          font-size: 14px;
+        }
+        .ant-btn:hover{
+          background: #fff;
+          color: #0558e1;
+          opacity: 0.8;
+        }
+        .ant-btn:active{
+          background: #fff;
+          color: #0558e1;
+          opacity: 0.8
+        }
+      }
+    
 .question-box {
     .title {
         text-align: center;
diff --git a/back/src/views/modules/ability/assignedScene/components/scene-use-step.vue b/back/src/views/modules/ability/assignedScene/components/scene-use-step.vue
index bc94ee0c..75894914 100644
--- a/back/src/views/modules/ability/assignedScene/components/scene-use-step.vue
+++ b/back/src/views/modules/ability/assignedScene/components/scene-use-step.vue
@@ -1,14 +1,102 @@
 <template>
-    <div class="question-box">
-        <div class="title">
-            能力使用步骤
+  <div>
+    <div v-for="(item, index) in dataInfo" :key="index">
+      <div class="question-box">
+        <span>步骤标题{{ index + 1 }}: </span>
+        <el-input
+          v-model="item.question"
+          placeholder="请输入标题"
+          style="width: 200px"
+          :disabled="disabledType"
+        >
+        </el-input>
+        <img
+          style="color: red; margin-left: 6px"
+          @click="deleteItem(index)"
+          type="danger"
+          size="small"
+          v-if="!disabledType && dataInfo.length > 1"
+          src="~@/assets/img/deleteRed.png"
+          alt=""
+        />
+      </div>
+      <div class="question-box1">
+        <div
+          class="question-box-right"
+          v-for="(itemson, index) in item.answer"
+          :key="index"
+        >
+          <span>步骤小节: </span>
+          <el-input
+            v-if="index != item.answer.length - 1"
+            v-model="itemson.answer"
+            placeholder="请输入步骤小节"
+            style="width: 200px"
+            :disabled="disabledType"
+          >
+          </el-input>
+          <div v-else style="display: inline">
+            <el-input
+              v-model="itemson.answer"
+              placeholder="请输入步骤小节"
+              style="width: 200px"
+              :disabled="disabledType"
+            >
+            </el-input>
+            <div class="submit1">
+              <a-button type="primary" @click="addAnswerItem(item.answer)">
+                <img
+                  style="height: 12px; width: 12px; margin-top: -2px"
+                  src="~@/assets/img/jiahao.png"
+                  alt=""
+                />
+                <span style="margin-left: 4px">添加小节</span>
+              </a-button>
+            </div>
+          </div>
         </div>
+        <!-- <a-button type="primary" v-if="!disabledType && index == dataInfo.length - 1"
+               @click="addItem">
+              <img
+                style="height: 12px; width: 12px;margin-top: -2px;"
+                src="~@/assets/img/jiahao.png"
+                alt=""
+              />
+              <span style="margin-left: 4px">添加小节</span>
+            </a-button> -->
+        <!-- <div class="question-box-right">
+                <span>步骤小节: </span>
+               <el-input  v-model="itemson.answer" placeholder="请输入步骤小节" style="width:200px"
+                   :disabled="disabledType">
+               </el-input>
+               
+            </div> -->
+      </div>
+
+      <div class="submit">
+        <a-button
+          type="primary"
+          v-if="!disabledType && index == dataInfo.length - 1"
+          @click="addItem"
+        >
+          <img
+            style="height: 12px; width: 12px; margin-top: -2px"
+            src="~@/assets/img/jiahao.png"
+            alt=""
+          />
+          <span style="margin-left: 4px">添加步骤</span>
+        </a-button>
+      </div>
+    </div>
+
+    <!-- <div class="question-box">
+       
         <div v-for="(item, index) in dataInfo" :key="index">
-            <el-form-item label="标题" prop="question">
+            <el-form-item label="步骤标题" prop="question">
                 <el-input v-model="item.question" placeholder="请输入标题" style="width:90%" :disabled="disabledType">
                 </el-input>
             </el-form-item>
-            <el-form-item label="解释说明" prop="question">
+            <el-form-item label="步骤" prop="question">
                 <el-input type="textarea" :rows="3" v-model="item.answer" placeholder="请输入解释说明" style="width:90%"
                     :disabled="disabledType">
                 </el-input>
@@ -19,123 +107,180 @@
             <el-button class="add-btn" size="small" v-if="!disabledType && index == dataInfo.length - 1"
                 @click="addItem" type="primary">添加
             </el-button>
-        </div>
+        </div> -->
 
-        <div class="step-box">
+    <!-- <div class="step-box">
             <el-steps :active="2">
                 <el-step status="finish" :title="item.question || `标题${index + 1}`" v-for="(item, index) in dataInfo"
                     :key="index">
                 </el-step>
             </el-steps>
-        </div>
-
-    </div>
+        </div> -->
+  </div>
 </template>
 <script>
 export default {
-    props: {
-        dataForm: {
-            type: Object,
-            default: () => { }
-        },
-        // 是否可编辑
-        disabledType: {
-            type: Boolean,
-            default: false
-        },
+  props: {
+    dataForm: {
+      type: Object,
+      default: () => {},
     },
-    data() {
-        return {
-            dataInfo: []
-        }
+    // 是否可编辑
+    disabledType: {
+      type: Boolean,
+      default: false,
     },
-    watch: {
-        dataInfo: {
-            handler(newVal) {
-                this.dataInfo = newVal;
-                this.$emit('update', {
-                    title: '使用步骤',
-                    list: newVal
-                })
-            },
-            deep: true,
-            immediate: true,
-        },
+  },
+  data() {
+    return {
+      dataInfo: [],
+    };
+  },
+  watch: {
+    dataInfo: {
+      handler(newVal) {
+        this.dataInfo = newVal;
+        this.$emit("update", {
+          title: "构建步骤",
+          list: newVal,
+        });
+      },
+      deep: true,
+      immediate: true,
     },
-    methods: {
-        getDataInfo(dataForm) {
-            let arr = []
-            let fuseAttrList = dataForm.fuseAttrList || [];
-            let obj = fuseAttrList.find(v => v.attrType === '使用步骤') || {}
-            let attrValue = JSON.parse(obj.attrValue || "[]")
+  },
+  methods: {
+    getDataInfo(dataForm) {
+      let arr = [];
+      let fuseAttrList = dataForm.fuseAttrList || [];
+      let obj = fuseAttrList.find((v) => v.attrType === "构建步骤") || {};
+      let attrValue = obj.attrValue || [];
+   
+      if (attrValue.length > 0) {
+        attrValue = JSON.parse(attrValue);
 
-            if (attrValue.length > 0) {
-                attrValue.map(v => {
-                    arr.push({
-                        question: v.question,
-                        answer: v.answer,
-                    })
-                })
-            } else {
-                arr = []
-                arr.push({
-                    question: "",
-                    answer: "",
-                })
-            }
-            this.dataInfo = arr;
-        },
-        // 新增
-        addItem() {
-            let index = this.dataInfo.length - 1;
-            if (this.dataInfo[index].question === '' || this.dataInfo[index].answer === '') {
-                return this.$message.warning('请填写完整信息！')
-            }
-            if (this.dataInfo.length >= 6) {
-                return this.$message.warning('最多添加6个使用步骤！')
-            }
-            this.dataInfo.push({
-                question: "",
-                answer: "",
-            })
-        },
-        // 删除
-        deleteItem(index) {
-            this.$confirm('确认是否删除?', '提示', {
-                confirmButtonText: '确定',
-                cancelButtonText: '取消',
-                type: 'warning'
-            }).then(() => {
-                this.$message({
-                    type: 'success',
-                    message: '删除成功!'
-                });
-                this.dataInfo.splice(index, 1)
-            }).catch(() => {
-            });
-        }
-    }
-}
+        attrValue.map((v) => {
+          arr.push({
+            question: v.question,
+            answer: v.answer,
+          });
+        });
+      } else {
+        arr = [];
+        arr.push({
+          question: "",
+          answer: [{ answer: "" }, { answer: "" }],
+        });
+      }
+      this.dataInfo = arr;
+    },
+    // 新增
+    addItem() {
+      let index = this.dataInfo.length - 1;
+      if (this.dataInfo[index].answer === "") {
+        return this.$message.warning("请填写完整信息！");
+      }
+      if (this.dataInfo.length >= 6) {
+        return this.$message.warning("最多添加6个使用步骤！");
+      }
+      this.dataInfo.push({
+        question: "",
+        answer: [{ answer: "" }, { answer: "" }],
+      });
+    },
+    addAnswerItem(itemson) {
+      itemson.push({});
+    },
+    // 删除
+    deleteItem(index) {
+      this.$confirm("确认是否删除?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.$message({
+            type: "success",
+            message: "删除成功!",
+          });
+          this.dataInfo.splice(index, 1);
+        })
+        .catch(() => {});
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
+.submit1 {
+  display: inline;
+  font-size: 0.14rem;
+  margin-left: 8px;
+  .ant-btn {
+    width: 94px;
+    height: 32px;
+    text-align: center;
+    background: #fff;
+    color: #0558e1;
+    border: 1px solid #0558e1;
+    border-radius: 2px;
+    font-size: 14px;
+  }
+  .ant-btn:hover {
+    background: #fff;
+    color: #0558e1;
+    opacity: 0.8;
+  }
+  .ant-btn:active {
+    background: #fff;
+    color: #0558e1;
+    opacity: 0.8;
+  }
+}
+.submit {
+  font-size: 0.14rem;
+  margin-left: 180px;
+  .ant-btn {
+    width: 370px;
+    height: 32px;
+    text-align: center;
+    background: #fff;
+    color: #0558e1;
+    border: 1px solid #0558e1;
+    border-radius: 2px;
+    font-size: 14px;
+  }
+  .ant-btn:hover {
+    background: #fff;
+    color: #0558e1;
+    opacity: 0.8;
+  }
+  .ant-btn:active {
+    background: #fff;
+    color: #0558e1;
+    opacity: 0.8;
+  }
+}
 .question-box {
-    margin-bottom: 20px;
-    margin-top: 40px;
-
-    .title {
-        text-align: center;
-        font-weight: 600;
-        font-size: 18px;
-        margin-bottom: 10px;
-    }
+  float: left;
+  width: 42%;
+}
+.question-box1 {
+  float: left;
+  width: 56%;
+  border-left: 1px solid #dfdfdf;
+  margin-bottom: 20px;
+}
+.question-box-right {
+  margin-left: 24px;
+  margin-bottom: 16px;
 }
 
 .step-box {
-    padding: 20px 10px 10px 10px;
+  padding: 20px 10px 10px 10px;
 }
 
 .add-btn {
-    margin-top: -12px;
-    margin-left: 100px;
+  margin-top: -12px;
+  margin-left: 100px;
 }
 </style>
\ No newline at end of file