Merge branch 'hi-ucs-dev' of http://124.222.94.39:3000/wuhongjian/hi-ucs into hi-ucs-dev

back/src/views/modules/ability/IntegratedServices-add.vue

@@ -1,29 +1,37 @@
 <template>
   <div>
-    <el-dialog :visible.sync="addOrUpdateVisibleCopy" :title="modalTypeText[modalType]" @close="closeModal"
+    <el-dialog custom-class="customClass" :visible.sync="cityVisibleCopy" :title="modalTypeText[modalType]"
-      :close-on-click-modal="false" :close-on-press-escape="false">
+      @close="closeModal" :close-on-click-modal="false" :close-on-press-escape="false">
-      <div class="first-title">
+      <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>
-      <el-checkbox-group v-model="checkList" @change="changeBtn" style="margin-bottom: 20px">
-        <el-checkbox-button v-for="(item) in btnList" :label="item" :key="item">{{ item }}
-        </el-checkbox-button>
-      </el-checkbox-group>
 
-      <!-- 挂载和修改-->
+        </div>
-      <div key="1">
+      </div>
+
+      <!-- 挂载和修改   -->
+      <div class="right">
         <el-form :model="dataForm" :rules="rules" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
-          :label-width="$i18n.locale === 'en-US' ? '120px' : 'auto'">
+          :label-width="$i18n.locale === 'en-US' ? '150px' : '130px'">
           <!-- 基本信息 -->
-          <div style="margin-bottom:20px" v-show="checkList.includes('基本信息')">
+          <div class="scrollBox" id="anchor1">
-            <div style="
+            <div class="baseTitle">
-                text-align: center;
-                font-weight: 600;
-                font-size: 18px;
-                margin-bottom: 10px;
-              ">
               基本信息
             </div>
+            <div class="baseInner">
               <el-form-item label="融合服务名称" prop="name">
               <el-input class="input-box" v-model="dataForm.name" placeholder="请输入融合服务名称"></el-input>
             </el-form-item>
@@ -37,22 +45,29 @@
                 </el-option>
               </el-select>
             </el-form-item>
-            <el-form-item label="图片">
+            <el-form-item label="图片:">
                 <el-upload ref="editUpload" class="upload-demo" :action="fileUploadUrl"
-                :on-success="eidtHandleAvatarSuccess" :before-upload="editBeforeAvatarUpload" :limit="1" :file-list="[]"
+                  :on-success="eidtHandleAvatarSuccess" :before-upload="editBeforeAvatarUpload" :limit="1"
-                :on-remove="editUploadRemoveFile" :on-exceed="handleExceed" list-type="picture">
+                  :file-list="[]" :on-remove="editUploadRemoveFile" :on-exceed="handleExceed" list-type="picture">
-                <el-button size="small" type="primary" class="button-new">点击上传</el-button>
                   <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="" style="marigin-bottom:40px" v-show="checkList.includes('组合能力')">
+          <div class="scrollBox" id="anchor2">
-            <div class="title">
+            <div class="baseTitle">
               组合能力
             </div>
+            <div class="baseInner">
+              <!-- <scene-one-input :dataForm="dataForm" title="场景痛点" @update="updateDataForm" ref="scenePainDom"
+                :keyTextObj="painKeyTextObj"></scene-one-input> -->
                 <InfrastructureModal v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="基础设施"
                   :modalType="modalType" ref="jcssDom"></InfrastructureModal>
                   <el-form-item label="基础设施总数" >
@@ -69,59 +84,128 @@
               <el-input v-model="dataForm.componentCount"  placeholder="请输入组件服务总数"></el-input>
                   </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>
-        <el-button type="primary" @click="dataFormSubmitHandle()">{{
+
-            $t("confirm")
-        }}</el-button>
       </template>
     </el-dialog>
-
   </div>
 </template>
 
 <script>
-import debounce from "lodash/debounce";
+import debounce from 'lodash/debounce'
-import qs from "qs";
-import CommonQuestion from './components/common-question.vue';
-import IntegratedCombineAbility from './components/integrated-combine-ability.vue';
-import CombineAbility from './components/combine-ability.vue';
-import Cookies from 'js-cookie'
-import { tableColumns } from './IntegratedServices.vue';
-import { getFuseResourceList, getListParams, modalTypeText } from "./assignedScene/add-update-scene.vue";
 import InfrastructureModal from './assignedScene/components/infrastructure-modal.vue'
+import CombineAbility from './components/combine-ability.vue'
+import { getFuseResourceList, getListParams } from './assignedScene/add-update-scene.vue'
+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: {
-    CommonQuestion,
-    IntegratedCombineAbility,
     CombineAbility,
-    InfrastructureModal,
+    InfrastructureModal
+    // SceneUseStep,
+    // CombineAbility,
+    // SceneOneInput,
+    // upload,
+    // CommonQuestion,
+    // InfrastructureModal,
+    // AbilityAdd
   },
-  data() {
+  watch: {
-    return {
+
-      fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload',
     dataForm: {
-        "infrastructureCount":null,
+      handler (newVal) {
-        "dataSourceCount":null,
+        this.dataForm = newVal
-        "componentCount":null,
-        "name": "",
-        "applicationArea": "",
-        "description": "",
-        "fuseAttrList": [
-          {
-            "attrType": "服务图片",
-            "attrValue": "",
       },
+      deep: true,
+      immediate: true
+    },
+    cityVisible: {
+      handler (newVal) {
+        this.cityVisible = newVal
+        if (this.modalType == 'add' && newVal) {
+          this.getDetail(this.dataForm)
+        }
+      },
+      immediate: true
+    }
+  },
+  props: {
+    modalType: {
+      type: String,
+      default: 'add'
+    },
+    cityVisible: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  data () {
+    return {
+      domArr: [],
+      scrollTop: 0,
+      selectNow: '',
+      areaList: [],
+      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' }],
+      fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload',
+
+      painKeyTextObj: getDescJson('痛点'),
+      solutionKeyTextObj: getDescJson('方案'),
+      dataForm: {
+        infrastructureCount: null,
+        dataSourceCount: null,
+        componentCount: null,
+        name: '',
+        applicationArea: '',
+        description: '',
+        fuseAttrList: [
+          {
+            attrType: '服务图片',
+            attrValue: ''
+          }
         ],
         // 选择的能力
-        "fuseResourceList": [
+        fuseResourceList: [
           {
-            "resourceId": 0,
+            resourceId: 0,
-            "sequence": ""
+            sequence: ''
           }
         ],
         type: '打包模式'
@@ -130,225 +214,432 @@ export default {
         name: [
           {
             required: true,
-            message: "请输入融合服务名称",
+            message: '请输入名称',
-            trigger: "change",
+            trigger: 'change'
-          },
+          }
         ],
         description: [
           {
             required: true,
-            message: "请输入融合服务描述",
+            message: '请输入描述',
-            trigger: "change",
+            trigger: 'change'
+          }
+        ]
       },
-        ],
+      checkList: ['基本信息', '场景痛点', '解决方案', '使用能力', '构建步骤'],
-      },
+      cityVisibleCopy: this.cityVisible,
-      btnList: ['基本信息', '组合能力'],
+      displayInfo: {
-      checkList: ['基本信息', '组合能力'],
+        name: '名称',
-      areaList: [],
+        description: '描述'
-      addOrUpdateVisibleCopy: this.addOrUpdateVisible,
-      displayInfo: tableColumns,
-      getListParams: getListParams,
-      refsParseArray: {
-        'zjfwDom': '组件服务',
-        'sjzyDom': '数据资源',
-        'jcssDom': '基础设施',
       },
       modalTypeText: modalTypeText,
+      getListParams: getListParams,
+      refsParseArray: {
+        zjfwDom: '组件服务',
+        sjzyDom: '数据资源',
+        jcssDom: '基础设施'
+      },
+
       abilityListObj: {},
+      imgData: [],
       // 限定图片
-      handleExceed() {
+      handleExceed () {
         this.$message({ type: 'error', message: '最多支持一张图片上传' })
       },
       imageUrl: ''
-    };
-  },
-  props: {
-    modalType: {
-      type: String,
-      default: 'add'
-    },
-    addOrUpdateVisible: {
-      type: Boolean,
-      default: false
     }
   },
-  watch: {
+
-    dataForm: {
-      handler(newVal) {
-        this.dataForm = newVal
-      },
-      deep: true,
-      immediate: true,
-    },
-    addOrUpdateVisible: {
-      handler(newVal) {
-        this.addOrUpdateVisibleCopy = newVal;
-        if (this.modalType == 'add' && newVal) {
-          this.getDetail(this.dataForm)
-        }
-      },
-      immediate: true,
-    },
-  },
-  mounted() {
-    // 获取应用领域
-    this.getAreaInfo()
-  },
   methods: {
-    clearForm() {
+
-      this.$refs.dataForm && this.$refs.dataForm.resetFields();
+    handleStep (item, index) {
+      this.activeStepIndex = index
+      this.selectNow = item.id // 设置选中的锚点为当前点击的
+      const top = document.querySelector('#' + item.id).offsetTop - 100
+      document.querySelectorAll('.customClass .el-dialog__body')[0].scrollTop = top
     },
-    closeModal() {
+    // 获取赋能场景
-      this.$emit('closeModal')
+    getSceneArea () {
-    },
-    // 获取应用领域
-    getAreaInfo() {
       const params = {
-        page: 1,
+        topCategoryName: '应用资源'
-        limit: 99,
-        dictTypeId: "1513712507692818433",
-      };
-      this.$http
-        .get("/sys/dict/data/page" + "?" + qs.stringify(params))
-        .then(({ data: res }) => {
-          if (res.code !== 0) {
-            return this.$message.error(res.msg);
       }
-          res.data.list.map((item) => {
+      this.$http
-            this.areaList.push({
+        .get('/category/getAllFilterCriteriaByTopCategory/', {
-              label: item.dictLabel,
+          params
-              value: item.dictLabel
+        })
-            });
+        .then((res) => {
-          });
+          this.sceneAreas = res.data.data[0].typeList
-        }).catch(err => {
-          this.$message.error(err);
         })
     },
+
+    clearForm () {
+      this.$refs.dataForm && this.$refs.dataForm.resetFields()
+    },
+    closeModal () {
+      this.$emit('closeModal')
+    },
     // 更新表单
-    updateDataForm(data) {
+    updateDataForm (data) {
       if (Object.keys(this.getListParams).includes(data.title)) {
-        this.abilityListObj[data.title] = data.list;
+        this.abilityListObj[data.title] = data.list
       }
     },
-    getFuseResourceList() {
+    // 更新数量
-      return getFuseResourceList(this.abilityListObj)
+    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
+      }
     },
-    // 改变按钮状态
+    getFuseResourceList () {
-    changeBtn(data) {
+      return getFuseResourceList(this.abilityListObj)
-      this.checkList = data;
     },
     // 表单提交
     dataFormSubmitHandle: debounce(
       function () {
         this.$refs.dataForm.validate((valid) => {
           if (!valid) {
-            this.$message.error("请检查表单是否填写完整");
+            this.$message.error('请检查表单是否填写完整')
-            return false;
+            return false
           }
-          let methodsObj = {
+          const methodsObj = {
-            'add': 'post',
+            add: 'post',
-            'update': 'put'
+            update: 'put'
           }
           this.dataForm.fuseResourceList = this.getFuseResourceList()
           if (this.imageUrl == '') {
-            this.$message.error("请上传图片！");
+            this.$message.error('请上传图片！')
-            return;
+            return
           }
-          this.dataForm.fuseAttrList.find(v => v.attrType == '服务图片').attrValue = this.imageUrl || '';
+          this.dataForm.fuseAttrList.find(v => v.attrType == '服务图片').attrValue = this.imageUrl || ''
           this.$http
-          [methodsObj[this.modalType]]("/fuse", this.dataForm)
+            [methodsObj[this.modalType]]('/fuse', this.dataForm)
             .then(({ data: res }) => {
               if (res.code !== 0) {
-                return this.$message.error(res.msg);
+                return this.$message.error(res.msg)
               }
               this.$message({
-                message: this.$t("prompt.success"),
+                message: this.$t('prompt.success'),
-                type: "success",
+                type: 'success',
                 duration: 500,
                 onClose: () => {
-                  this.$refs.dataForm && this.$refs.dataForm.resetFields();
+                  this.$refs.dataForm && this.$refs.dataForm.resetFields()
-                  this.$emit("refreshDataList");
+                  this.$emit('refreshDataList')
-                  this.$emit("closeModal");
+                  this.$emit('closeModal')
-                },
+                }
-              });
+              })
             })
             .catch((err) => {
               this.$message.error(err)
-            });
+            })
-        });
+        })
       },
       1000,
       { leading: true, trailing: false }
     ),
     // 详情
-    getDetail(data) {
+    getDetail (data) {
-      this.dataForm = data;
+      this.dataForm = data
       this.$nextTick(() => {
         for (const key in this.refsParseArray) {
+          console.log('11111111111', data)
           this.$refs[key] && this.$refs[key].getDataInfo && this.$refs[key].getDataInfo(data)
         }
-        let _imgObj = data.fuseAttrList.find(v => v.attrType == '服务图片') || {};
+        const _imgObj = data.fuseAttrList.find(v => v.attrType == '服务图片') || {}
-        this.imageUrl = _imgObj.attrValue;
+        this.imageUrl = _imgObj.attrValue
 
         // 组合能力
         Object.keys(this.getListParams).map(k => {
-          let arr = data.fuseResourceList.filter(v => v.type == k);
+          const arr = data.fuseResourceList.filter(v => v.type == k)
-          let arr2 = [];
+          const arr2 = []
           arr.map(v => {
             arr2.push(v.resourceId)
           })
           this.abilityListObj[k] = arr2
         })
 
-        console.log('this.dataForm----详情-------->', this.dataForm);
+        console.log('this.dataForm----详情-------->', this.dataForm)
       })
     },
-    beforeAvatarUpload(file) {
+    // 获取应用领域
-      const isImage =
+    getAreaInfo () {
-        file.type === 'image/jpeg' ||
+      const params = {
-        file.type === 'image/jpg' ||
+        page: 1,
-        file.type === 'image/png'
+        limit: 99,
-
+        dictTypeId: '1513712507692818433'
-      if (!isImage) {
-        this.$message.error('上传头像图片只能是 jpg/png 格式!')
       }
-      return isImage
+      this.$http
-    },
+        .get('/sys/dict/data/page' + '?' + qs.stringify(params))
-    addUploadRemoveFile(file, fileList) {
+        .then(({ data: res }) => {
-      this.$refs.addUpload.clearFiles()
+          if (res.code !== 0) {
-      this.imageUrl = ''
+            return this.$message.error(res.msg)
-    },
-    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
+          res.data.list.map((item) => {
+            this.areaList.push({
+              label: item.dictLabel,
+              value: item.dictLabel
+            })
+          })
+        }).catch(err => {
+          this.$message.error(err)
+        })
     },
-    editUploadRemoveFile(file, fileList) {
+    handleAvatarSuccess (res, file) {
-      this.$refs.editUpload.clearFiles()
-      this.imageUrl = ''
-    },
-    eidtHandleAvatarSuccess(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
     },
-  beforeDestroy() {
+    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 () {
+    // 获取应用领域
+    this.getAreaInfo()
+    const that = this
+    this.$nextTick(() => {
+      document.querySelector('.el-dialog__body').onscroll = function () {
+        const 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 {
+          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 {
@@ -379,7 +670,7 @@ export default {
 }
 </style>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .mod-sys__menu {
 
   .menu-list,
@@ -448,19 +739,14 @@ export default {
   line-height: 32px;
 }
 
-.input-box {
+.title {
-  width: 90%;
-}
-
-
-.first-title {
   text-align: center;
   font-weight: 600;
   font-size: 18px;
   margin-bottom: 10px;
 }
 
-.title {
+.first-title {
   text-align: center;
   font-weight: 600;
   font-size: 18px;

back/src/views/modules/ability/IntegratedServices-add_back.vue

@@ -0,0 +1,474 @@
+<template>
+  <div>
+    <el-dialog :visible.sync="addOrUpdateVisibleCopy" :title="modalTypeText[modalType]" @close="closeModal"
+      :close-on-click-modal="false" :close-on-press-escape="false">
+      <div class="first-title">
+        填写字段
+      </div>
+      <el-checkbox-group v-model="checkList" @change="changeBtn" style="margin-bottom: 20px">
+        <el-checkbox-button v-for="(item) in btnList" :label="item" :key="item">{{ item }}
+        </el-checkbox-button>
+      </el-checkbox-group>
+
+      <!-- 挂载和修改-->
+      <div key="1">
+        <el-form :model="dataForm" :rules="rules" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
+          :label-width="$i18n.locale === 'en-US' ? '120px' : 'auto'">
+          <!-- 基本信息 -->
+          <div style="margin-bottom:20px" v-show="checkList.includes('基本信息')">
+            <div style="
+                text-align: center;
+                font-weight: 600;
+                font-size: 18px;
+                margin-bottom: 10px;
+              ">
+              基本信息
+            </div>
+            <el-form-item label="融合服务名称" prop="name">
+              <el-input class="input-box" v-model="dataForm.name" placeholder="请输入融合服务名称"></el-input>
+            </el-form-item>
+            <el-form-item label="融合服务描述" prop="description">
+              <el-input type="textarea" :rows="3" class="input-box" v-model="dataForm.description"
+                placeholder="请输入融合服务描述"></el-input>
+            </el-form-item>
+            <el-form-item label="应用领域" prop="applicationArea">
+              <el-select v-model="dataForm.applicationArea" placeholder="请选择应用领域" filterable>
+                <el-option v-for="item in areaList" :key="item.value" :label="item.label" :value="item.value">
+                </el-option>
+              </el-select>
+            </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">
+                <el-button size="small" type="primary" class="button-new">点击上传</el-button>
+                <div slot="tip" class="el-upload__tip">只能上传图片文件</div>
+                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+              </el-upload>
+            </el-form-item>
+          </div>
+
+          <!-- 组合能力 -->
+          <div class="" style="marigin-bottom:40px" v-show="checkList.includes('组合能力')">
+            <div class="title">
+              组合能力
+            </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"  placeholder="请输入组件服务总数"></el-input>
+              </el-form-item>
+          </div>
+        </el-form>
+      </div>
+
+      <template slot="footer">
+        <el-button @click="closeModal">{{ $t("cancel") }}</el-button>
+        <el-button type="primary" @click="dataFormSubmitHandle()">{{
+            $t("confirm")
+        }}</el-button>
+      </template>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import debounce from 'lodash/debounce'
+import qs from 'qs'
+import CommonQuestion from './components/common-question.vue'
+import IntegratedCombineAbility from './components/integrated-combine-ability.vue'
+import CombineAbility from './components/combine-ability.vue'
+import Cookies from 'js-cookie'
+import { tableColumns } from './IntegratedServices.vue'
+import { getFuseResourceList, getListParams, modalTypeText } from './assignedScene/add-update-scene.vue'
+import InfrastructureModal from './assignedScene/components/infrastructure-modal.vue'
+
+export default {
+  components: {
+    CommonQuestion,
+    IntegratedCombineAbility,
+    CombineAbility,
+    InfrastructureModal
+  },
+  data () {
+    return {
+      fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload',
+      dataForm: {
+        infrastructureCount: null,
+        dataSourceCount: null,
+        componentCount: null,
+        name: '',
+        applicationArea: '',
+        description: '',
+        fuseAttrList: [
+          {
+            attrType: '服务图片',
+            attrValue: ''
+          }
+        ],
+        // 选择的能力
+        fuseResourceList: [
+          {
+            resourceId: 0,
+            sequence: ''
+          }
+        ],
+        type: '打包模式'
+      },
+      rules: {
+        name: [
+          {
+            required: true,
+            message: '请输入融合服务名称',
+            trigger: 'change'
+          }
+        ],
+        description: [
+          {
+            required: true,
+            message: '请输入融合服务描述',
+            trigger: 'change'
+          }
+        ]
+      },
+      btnList: ['基本信息', '组合能力'],
+      checkList: ['基本信息', '组合能力'],
+      areaList: [],
+      addOrUpdateVisibleCopy: this.addOrUpdateVisible,
+      displayInfo: tableColumns,
+      getListParams: getListParams,
+      refsParseArray: {
+        zjfwDom: '组件服务',
+        sjzyDom: '数据资源',
+        jcssDom: '基础设施'
+      },
+      modalTypeText: modalTypeText,
+      abilityListObj: {},
+      // 限定图片
+      handleExceed () {
+        this.$message({ type: 'error', message: '最多支持一张图片上传' })
+      },
+      imageUrl: ''
+    }
+  },
+  props: {
+    modalType: {
+      type: String,
+      default: 'add'
+    },
+    addOrUpdateVisible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    dataForm: {
+      handler (newVal) {
+        this.dataForm = newVal
+      },
+      deep: true,
+      immediate: true
+    },
+    addOrUpdateVisible: {
+      handler (newVal) {
+        this.addOrUpdateVisibleCopy = newVal
+        if (this.modalType == 'add' && newVal) {
+          this.getDetail(this.dataForm)
+        }
+      },
+      immediate: true
+    }
+  },
+  mounted () {
+    // 获取应用领域
+    this.getAreaInfo()
+  },
+  methods: {
+    clearForm () {
+      this.$refs.dataForm && this.$refs.dataForm.resetFields()
+    },
+    closeModal () {
+      this.$emit('closeModal')
+    },
+    // 获取应用领域
+    getAreaInfo () {
+      const params = {
+        page: 1,
+        limit: 99,
+        dictTypeId: '1513712507692818433'
+      }
+      this.$http
+        .get('/sys/dict/data/page' + '?' + qs.stringify(params))
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          res.data.list.map((item) => {
+            this.areaList.push({
+              label: item.dictLabel,
+              value: item.dictLabel
+            })
+          })
+        }).catch(err => {
+          this.$message.error(err)
+        })
+    },
+    // 更新表单
+    updateDataForm (data) {
+      if (Object.keys(this.getListParams).includes(data.title)) {
+        this.abilityListObj[data.title] = data.list
+      }
+    },
+    getFuseResourceList () {
+      return getFuseResourceList(this.abilityListObj)
+    },
+    // 改变按钮状态
+    changeBtn (data) {
+      this.checkList = data
+    },
+    // 表单提交
+    dataFormSubmitHandle: debounce(
+      function () {
+        this.$refs.dataForm.validate((valid) => {
+          if (!valid) {
+            this.$message.error('请检查表单是否填写完整')
+            return false
+          }
+          const methodsObj = {
+            add: 'post',
+            update: 'put'
+          }
+          this.dataForm.fuseResourceList = this.getFuseResourceList()
+          if (this.imageUrl == '') {
+            this.$message.error('请上传图片！')
+            return
+          }
+          this.dataForm.fuseAttrList.find(v => v.attrType == '服务图片').attrValue = this.imageUrl || ''
+          this.$http
+            [methodsObj[this.modalType]]('/fuse', this.dataForm)
+            .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
+
+        // 组合能力
+        Object.keys(this.getListParams).map(k => {
+          const arr = data.fuseResourceList.filter(v => v.type == k)
+          const arr2 = []
+          arr.map(v => {
+            arr2.push(v.resourceId)
+          })
+          this.abilityListObj[k] = arr2
+        })
+
+        console.log('this.dataForm----详情-------->', this.dataForm)
+      })
+    },
+    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
+    }
+  },
+  beforeDestroy () {
+    this.clearForm()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog__body {
+  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">
+.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;
+}
+
+.input-box {
+  width: 90%;
+}
+
+.first-title {
+  text-align: center;
+  font-weight: 600;
+  font-size: 18px;
+  margin-bottom: 10px;
+}
+
+.title {
+  text-align: center;
+  font-weight: 600;
+  font-size: 18px;
+  margin-bottom: 10px;
+}
+
+.avatar {
+  height: 100px;
+  width: 100px;
+  display: block;
+}
+</style>

back/src/views/modules/ability/IntegratedServices.vue

@@ -38,10 +38,9 @@
         layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
         @current-change="pageCurrentChangeHandle">
       </el-pagination>
-
       <!-- 弹窗, 新增 / 修改 -->
       <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="query" @closeModal="closeModal"
-        :addOrUpdateVisible="addOrUpdateVisible" :modalType="modalType">
+        :cityVisible="addOrUpdateVisible" :addOrUpdateVisible="addOrUpdateVisible"  :modalType="modalType">
       </add-or-update>
 
     </div>
@@ -49,50 +48,51 @@
 </template>
 
 <script>
-import mixinViewModule from "@/mixins/view-module";
+import mixinViewModule from '@/mixins/view-module'
-import AddOrUpdate from "./IntegratedServices-add";
+import AddOrUpdate from './IntegratedServices-add'
-import qs from "qs";
+// import AddOrUpdate from './IntegratedServices-add_back'
-import { type } from "os";
+import qs from 'qs'
+import { type } from 'os'
 
 export const tableColumns = {
-  'name': '名称',
+  name: '名称',
-  'description': '描述',
+  description: '描述',
-  'applicationArea': '应用领域',
+  applicationArea: '应用领域'
 }
 
 export default {
   mixins: [mixinViewModule],
-  data() {
+  data () {
     return {
       // 表格--列
       tableColumns: tableColumns,
       tableData: [],
       mixinViewModuleOptions: {
-        getDataListURL: "/fuse/page",
+        getDataListURL: '/fuse/page',
-        exportURL: "/ability/bsabilityai/export",
+        exportURL: '/ability/bsabilityai/export',
-        deleteURL: "/fuse/delete",
+        deleteURL: '/fuse/delete',
         getDataListIsPage: true,
-        deleteIsBatch: false,
+        deleteIsBatch: false
       },
       dataForm: {
-        name: "",
+        name: '',
         order: 'desc',
         orderField: 'create_date',
         type: '打包模式'
       },
       qp: false,
-      modalType: 'add',
+      modalType: 'add'
-    };
+    }
   },
   components: {
-    AddOrUpdate,
+    AddOrUpdate
   },
-  mounted() {
+  mounted () {
-    window.addEventListener("resize", this.a);
+    window.addEventListener('resize', this.a)
-    this.fullScreen();
+    this.fullScreen()
   },
   methods: {
-    deleteRow(id) {
+    deleteRow (id) {
       this.$confirm('确认是否删除?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -103,50 +103,50 @@ export default {
         }).then(res => {
           console.log('删除成功', res)
           if (res.data.code !== 0) {
-            return this.$message.error(res.msg);
+            return this.$message.error(res.msg)
           }
           this.$message({
             message: '删除成功',
-            type: "success",
+            type: 'success',
             duration: 500,
             onClose: () => {
               this.query()
-            },
+            }
-          });
+          })
         }).catch(err => {
-          this.$message.error(err);
+          this.$message.error(err)
         })
       }).catch(() => {
-      });
+      })
     },
     // 查询
-    searchData() {
+    searchData () {
       this.query()
     },
     // 重置
-    reset() {
+    reset () {
-      this.dataForm.name = "";
+      this.dataForm.name = ''
       this.query()
     },
     // 修改
-    handleUpdate(val) {
+    handleUpdate (val) {
-      this.addOrUpdateVisible = true;
+      this.addOrUpdateVisible = true
-      this.modalType = 'update';
+      this.modalType = 'update'
       const cloneVal = JSON.parse(JSON.stringify(val))
       this.$nextTick(() => {
         this.$refs.addOrUpdate.getDetail(cloneVal)
       })
     },
     // 挂接
-    addServe() {
+    addServe () {
       this.addOrUpdateVisible = true
-      this.modalType = 'add';
+      this.modalType = 'add'
     },
-    closeModal() {
+    closeModal () {
-      this.addOrUpdateVisible = false;
+      this.addOrUpdateVisible = false
     },
     // 详情
-    showDetail(val) {
+    showDetail (val) {
       //    window.open(window.SITE_CONFIG.previewUrl + '#/packagingDetails?id=' + val.id)
       window.open(window.SITE_CONFIG.previewUrl + '#/integrationServicesDetails?id=' + val.id)
     },
@@ -157,28 +157,28 @@ export default {
     //     "_blank"
     //   );
     // },
-    fullScreen() {
+    fullScreen () {
       if (window.outerHeight === screen.availHeight) {
         if (window.outerWidth === screen.availWidth) {
           console.log(
-            "全屏1",
+            '全屏1'
-          );
+          )
-          this.qp = false;
+          this.qp = false
         } else {
           console.log(
-            "不是全屏2",
+            '不是全屏2'
-          );
+          )
-          this.qp = true;
+          this.qp = true
         }
       } else {
         console.log(
-          "不是全屏3",
+          '不是全屏3'
-        );
+        )
-        this.qp = true;
+        this.qp = true
       }
-    },
+    }
-  },
+  }
-};
+}
 </script>
 <style lang="scss" scoped>
 .el-tooltip__popper {

back/src/views/modules/ability/assignedScene/area-add.vue

@@ -21,7 +21,7 @@
               <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>
+                    :value="item.dict_label"></el-option>
                 </el-select>
               </el-form-item>
               <el-form-item label="场景名称:" prop="name">

back/src/views/modules/ability/assignedScene/city-add.vue

@@ -36,7 +36,7 @@
               <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>
+                    :value="item.dict_label"></el-option>
                 </el-select>
               </el-form-item>
               <el-form-item label="场景名称:" prop="name">

back/src/views/modules/ability/assignedScene/components/infrastructure-modal.vue

@@ -80,14 +80,13 @@
                 }}</el-button>
             </template>
         </el-dialog>
-
         <DisplayList :displayList="displayList" showKey="channelName"></DisplayList>
     </div>
 </template>
 
 <script>
 import InfrastructureTree from './infrastructure-tree.vue'
-import DisplayList from './display-list.vue';
+import DisplayList from './display-list.vue'
 
 export default {
   components: {
@@ -102,17 +101,17 @@ export default {
     },
     type: {
       type: String,
-            default: "基础设施"
+      default: '基础设施'
     },
     modalType: {
       type: String,
       default: 'add'
     }
   },
-    data() {
+  data () {
     const getYunList = () => {
-            let yunList = ['云主机', '算力主机', '对象存储', '堡垒机', '防火墙', '网闸', '负载均衡', '公网IP'];
+      const yunList = ['云主机', '算力主机', '对象存储', '堡垒机', '防火墙', '网闸', '负载均衡', '公网IP']
-            let arr = []
+      const arr = []
       yunList.map(v => arr.push({ labelCode: v, labelName: v }))
       return arr
     }
@@ -124,9 +123,9 @@ export default {
       displayList: [], // 用于展示的list
       btnList: ['视频资源', '云资源', '感知资源'],
       showText: {
-                '视频资源': '视频标签',
+        视频资源: '视频标签',
-                '云资源': '云资源分类',
+        云资源: '云资源分类',
-                '感知资源': '感知资源分类',
+        感知资源: '感知资源分类'
       },
       tabData: [
         {
@@ -140,13 +139,13 @@ export default {
         {
           tabName: '感知资源',
           list: []
-                },
+        }
       ],
       currentList: [],
       dataListLoading: false,
       dataList: [],
       pageData: {
-                total: 0,
+        total: 0
       },
       cameraName: '',
       postData: {},
@@ -162,7 +161,7 @@ export default {
     }
   },
   watch: {
-        async showModal(newVal) {
+    async showModal (newVal) {
       if (newVal) {
         // 默认选中复选框
         this.$nextTick(() => {
@@ -174,14 +173,14 @@ export default {
       }
     }
   },
-    mounted() {
+  mounted () {
     // 获取视频资源
     this.getVideoBtn()
   },
   methods: {
-        selectCheckbox() {
+    selectCheckbox () {
       if (this.selectedArray.length > 0) {
-                let list = []
+        const list = []
         this.dataList.forEach((item) => {
           this.selectedArray.forEach(val => {
             if (val === item.idtCameraChannel) {
@@ -196,85 +195,84 @@ export default {
         }
       }
     },
-        showAction() {
+    showAction () {
-            this.showModal = true;
+      this.showModal = true
     },
     // 详情
-        async getDataInfo(dataForm) {
+    async getDataInfo (dataForm) {
       this.modalType == 'edit'
-            this.dataFormCopy = dataForm;
+      this.dataFormCopy = dataForm
-            await this.getVideoBtn();
+      await this.getVideoBtn()
-            let arr = [];
+      const arr = []
-            let attrValue = dataForm.fuseResourceList.filter(v => v.type == this.type);
+      const attrValue = dataForm.fuseResourceList.filter(v => v.type == this.type)
       if (attrValue.length > 0) {
         attrValue.map(val => {
-                    let _obj = Object.assign({}, val, val.resource)
+          const _obj = Object.assign({}, val, val.resource)
-                    arr.push(_obj);
+          arr.push(_obj)
-                });
+        })
       }
       // 展示
-            this.displayList = JSON.parse(JSON.stringify(arr));
+      this.displayList = JSON.parse(JSON.stringify(arr))
       // 已选中
-            this.selectedArray = arr.map(v => v.idtCameraChannel);
+      this.selectedArray = arr.map(v => v.idtCameraChannel)
-            this.selectedArrayCopy = JSON.parse(JSON.stringify(arr));
+      this.selectedArrayCopy = JSON.parse(JSON.stringify(arr))
 
-            this.dataList = JSON.parse(JSON.stringify(arr));
+      this.dataList = JSON.parse(JSON.stringify(arr))
-            this.pageData.total = arr.length;
+      this.pageData.total = arr.length
       // 默认选中复选框
       this.$nextTick(() => {
         this.selectCheckbox()
       })
     },
     // 点击复选框
-        dataListSelectionChangeHandle(data) {
+    dataListSelectionChangeHandle (data) {
-            this.selectedArray = data;
+      this.selectedArray = data
     },
-        pageCurrentChangeHandle(pageNum) {
+    pageCurrentChangeHandle (pageNum) {
-            this.searchData.pageNum = pageNum;
+      this.searchData.pageNum = pageNum
       this.getData()
     },
-        pageSizeChangeHandle(pageSize) {
+    pageSizeChangeHandle (pageSize) {
-            this.searchData.pageSize = pageSize;
+      this.searchData.pageSize = pageSize
       this.getData()
     },
-        changeBtn(btn) {
+    changeBtn (btn) {
-            this.activeBtn = btn;
+      this.activeBtn = btn
-            this.currentList = this.tabData.find(v => v.tabName == btn).list || [];
+      this.currentList = this.tabData.find(v => v.tabName == btn).list || []
-            this.checkList = [];
+      this.checkList = []
-            this.searchData.cameraName = '';
+      this.searchData.cameraName = ''
       this.getData()
     },
     // 获取视频标签列表
-        getVideoBtn() {
+    getVideoBtn () {
       return new Promise((resolve, reject) => {
         this.$http.get('/api/project/selectAllLabel', {}).then(res => {
           resolve(res)
           if (res.data.code !== 1) {
-                        return this.$message.error(res.msg);
+            return this.$message.error(res.msg)
           }
-                    this.tabData[0].list = res.data.data || [];
+          this.tabData[0].list = res.data.data || []
 
           this.$nextTick(() => {
-                        this.currentList = this.tabData.find(v => v.tabName == this.activeBtn).list || [];
+            this.currentList = this.tabData.find(v => v.tabName == this.activeBtn).list || []
             if (this.modalType == 'add') {
               this.clear()
             }
           })
         }).catch(err => {
           reject(err)
-                    this.$message.error(err);
+          this.$message.error(err)
         })
       })
-
     },
     // 视频-清空标签
-        clearVideo() {
+    clearVideo () {
       this.checkList = []
       this.getData()
     },
     // 切换视频
-        changeVideoBtn(item) {
+    changeVideoBtn (item) {
-            let _index = this.checkList.findIndex(v => item.labelCode == v)
+      const _index = this.checkList.findIndex(v => item.labelCode == v)
       if (_index > -1) {
         this.checkList.splice(_index, 1)
       } else {
@@ -285,74 +283,73 @@ export default {
       })
     },
     // 获取列表
-        getData() {
+    getData () {
-            let postData = Object.assign({}, {
+      const postData = Object.assign({}, {
         checkStatus: 1,
         gpsX: '',
         gpsY: '',
         radius: '',
-                labelCodes: this.checkList.join(),
+        labelCodes: this.checkList.join()
-            }, this.searchData);
+      }, this.searchData)
       return new Promise((resolve, reject) => {
         this.$http.get('/api/project/selectByParentIdNew', { params: postData }).then(res => {
           resolve(res)
           if (res.data.code !== 1) {
-                        return this.$message.error(res.msg);
+            return this.$message.error(res.msg)
           }
           this.dataList = res.data.data || []
-                    this.pageData.total = res.data.count || 0;
+          this.pageData.total = res.data.count || 0
         }).catch(err => {
           reject(err)
-                    this.$message.error(err);
+          this.$message.error(err)
         })
       })
     },
-        changeParentId(parentId) {
+    changeParentId (parentId) {
-            this.searchData.parentId = parentId;
+      this.searchData.parentId = parentId
       this.getData(parentId)
     },
-        clearSelectArray() {
+    clearSelectArray () {
       this.selectedArrayCopy = []
       this.selectedArray = []
       this.getData()
     },
-        confirmSubmitHandle() {
+    confirmSubmitHandle () {
       // 新选择的
-            let idtCameraChannelArray = this.selectedArray.map(v => v.idtCameraChannel)
+      const idtCameraChannelArray = this.selectedArray.map(v => v.idtCameraChannel)
       // 选过的
-            let newIdArray = this.selectedArrayCopy.map(v => v.idtCameraChannel)
+      const newIdArray = this.selectedArrayCopy.map(v => v.idtCameraChannel)
-            let idArray = [...new Set(newIdArray.concat(idtCameraChannelArray))]
+      const idArray = [...new Set(newIdArray.concat(idtCameraChannelArray))]
       if (idArray.length > this.maxNum) {
-                return this.$message.error('最多选择十条数据！');
+        return this.$message.error('最多选择十条数据！')
       }
 
-            let listArray = [].concat(this.selectedArrayCopy, this.dataList);
+      const listArray = [].concat(this.selectedArrayCopy, this.dataList)
-            this.displayList = [];
+      this.displayList = []
       idArray.map(v => {
-                let obj = listArray.find(k => k.idtCameraChannel === v)
+        const obj = listArray.find(k => k.idtCameraChannel === v)
         if (obj) {
           this.displayList.push({
             channelName: obj.channelName
           })
         }
-
       })
 
       this.$emit('update', {
         title: this.type,
-                list: idArray,
+        list: idArray
       })
-            this.showModal = false;
+      this.showModal = false
     },
-        close() {
+    close () {
-            this.showModal = false;
+      this.showModal = false
       this.searchData.cameraName = ''
       // this.selectedArray = [];
-            this.$emit('closeModal');
+      this.$emit('closeModal')
     },
-        clear() {
+    clear () {
       this.changeBtn('视频资源')
-        },
+    }
   }
 
 }

front/src/api/home.js

@@ -588,3 +588,11 @@ export function sysnoticemanagement(params) {
     params,
   })
 }
+//获取所有区市
+export function getRegion(params) {
+  return request({
+    url: '/sys/region/list/',
+    method: 'get',
+     params,
+  })
+}

front/src/views/home/algorithmCompare.vue

@@ -667,12 +667,23 @@
 </script>
 
 <style>
+
   .ant-modal-footer {
     display: block;
   }
 </style>
 
 <style lang="less" scoped>
+
+  :deep(.ant-table-tbody > tr.ant-table-row-selected > td){
+    background: #e6eefb;
+ }
+ :deep(.ant-checkbox-checked .ant-checkbox-inner){
+  background-color: #0058e1;
+ }
+ :deep(.ant-checkbox-indeterminate .ant-checkbox-inner::after){
+  background-color: #0058e1;
+ }
   .bg {
     background: #fff;
     height: 100vh;
@@ -884,6 +895,7 @@
   .modal-box {
     height: 650px;
     width: 800px;
+
   }
 
   .add-img {

front/src/views/home/components/CanAssignCase.vue

@@ -84,9 +84,9 @@ watch(
     .caseBox {
         width: 3.5rem;
     height: 3rem;
-      box-shadow: 1px 1px 5px 5px rgba(222, 222, 222, 0.152);
+    border: 1px solid #ebecef;
+    box-shadow: 1px 1px 5px 5px rgb(222 222 222 / 15%);
     background: #ffffff;
-      border-radius: 0.05rem;
     padding: 0.2rem;
     margin-bottom: 0.2rem;
     cursor: pointer;

front/src/views/home/components/header.vue

@@ -189,6 +189,9 @@
   }else if(newValue=='/demandDetails'){
     select.value='demandCenter'
   }
+  else if(newValue=='/integrationServicesDetails'){
+    select.value='integrationServices'
+  }
   
     },
     { immediate: true }

front/src/views/home/components/searchResultList.vue

@@ -969,6 +969,7 @@
       // margin: 11px 0 20px;
       // background: #e5f2ff;
       // padding-left: 20px;
+      padding-top:10px;
       display: flex;
       align-items: center;
       position: relative;

front/src/views/home/infrastructurePage.vue

@@ -408,18 +408,23 @@
             :wrapper-col="{ span: 14, offset: 4 }"
             style="text-align: center; margin-top: 0.4rem"
           >
-            <a-button @click="appointmentRoom = false" type="primary" danger>
-              取消
-            </a-button>
           <a-button
-              style="margin-left: 10px"
+             class="tijiao"
-              type="primary"
+            
               @click="onSubmit"
             >
               提交
             </a-button>
+            <a-button class="quxiao" @click="appointmentRoom = false" >
+              取消
+            </a-button>
+   
           </a-form-item>
         </a-form>
+       
+          
+            
+   
       </a-modal>
     </div>
     <div v-if="room">
@@ -1210,7 +1215,7 @@
     if (item && item.status != 1) {
       return
       // return message.warning('当前设备离线, 不可预览！')
-    }
+    }handleChose
     console.log('打开视频', id)
     const param = {
       key: id,
@@ -2515,6 +2520,38 @@
   })
 </script>
 <style lang="less" scoped>
+ 
+.quxiao{
+      margin-right:12px;
+      cursor: pointer;
+      width: 90px;
+      height: 32px;
+      background: #ffffff;
+      color:#0058e1;
+      border-radius: 2px;
+      border: 1px #0058e1 solid;
+    }
+    .quxiao:hover{
+      background: #fff;
+  color: #0558e1;
+  opacity: 0.8;
+    }
+    .tijiao{
+      margin-right:12px;
+      cursor: pointer;
+      width: 90px;
+      height: 32px;
+      background: #0058e1;
+      color:#ffffff;
+      border-radius: 2px;
+      border: 1px #0058e1 solid;
+      margin-left:20px;
+    }
+    .tijiao:hover{
+      background: #0558e1;
+      color: #fff;
+      opacity: 0.8;
+    }
   .queding {
     margin-left: 16px;
     cursor: pointer;
@@ -2862,10 +2899,20 @@
     // }
   }
   :deep(.ant-table-thead > tr > th) {
-    color: #5580f7 !important;
+    color: #0058e1 !important;
     font-size: 16px !important;
     font-weight: 600 !important;
   }
+  :deep(.ant-table-tbody > tr.ant-table-row-selected > td){
+    background: #e6eefb;
+ }
+ :deep(.ant-checkbox-checked .ant-checkbox-inner){
+  background-color: #0058e1;
+ }
+ :deep(.ant-checkbox-indeterminate .ant-checkbox-inner::after){
+  background-color: #0058e1;
+ }
+
 </style>
 <style lang="less">
   .eia-dropdown-class {
@@ -2897,16 +2944,19 @@
 
   .appModal {
     .ant-modal-body {
-      height: 4.8rem !important;
+      height: 3.8rem !important;
       overflow-y: scroll !important;
     }
 
     .ant-modal-title {
       font-weight: 600;
+      color:#fff;
     }
     
     .ant-modal-content {
       .ant-modal-header {
+        background: #0058e1;
+      margin-bottom: 16px;
         border-bottom: 0 !important;
       }
     }

front/src/views/home/integrationServices.vue

@@ -1,90 +1,92 @@
 <template>
   <!-- 青岛 -->
-  <div class="details-pageconetent">
-    <home-header></home-header>
-    <div class="top">
   <div class="top-title">
-        全部：
+
-        <div
+    <div v-for="item in titleName" :key="item.index" class="tabAll" @click="changeCards(item.index)"
-          v-for="item in titleName"
+      :class="{ sel: item.index === number }">
-          :key="item.index"
-          class="tabAll"
-          @click="changeCards(item.index)"
-          :class="{ sel: item.index === number }"
-        >
       <span>
         {{ item.name === '赋能场景' ? '典型赋能场景' : '打包模式' }}
       </span>
     </div>
   </div>
-      <div class="resultListSearchInput-father" v-if="number === 0">
+  <div class="details-pageconetent">
-        <div class="resultListSearchInput-son">
+    <home-header></home-header>
-          模糊搜索
+    <div class="top">
-          <a-input-search
-            v-model:value="searchValue"
-            placeholder="请输入关键词"
-            enter-button="搜索"
-            size="large"
-            @search="getIntegrationList"
-            @change="onSearch"
-            class="resultListSearchInput"
-          />
-            <i  class="searchImg" aria-hidden="true"></i>
-          <button class="button-reset" @click="resetAction()">重置</button>
 
-          <div class="hengxian"></div>
+      <div class="resultListSearchInput-father" v-if="number === 0">
+        <div class="second-title">
+          <div :class="[cityOrArea === 0 ? 'departmentStyle' : 'departmentStyle1']" @click="handleChose(0)">
+            <img src="~@/assets/home/city.png" /> 市级领域场景
+            <div :class="cityOrArea === 0 ? 'sanjiao' : ''"></div>
+          </div>
+
+          <div :class="[cityOrArea === 1 ? 'departmentStyle' : 'departmentStyle1']" @click="handleChose(1)">
+            <img src="~@/assets/home/area.png" /> 基层场景
+            <div :class="cityOrArea === 1 ? 'sanjiao' : ''"></div>
+          </div>
+
+        </div>
+        <div class="resultListSearchInput-son">
+          <div class="son-input">
+            <a-input-search v-model:value="searchValue" placeholder="请输入关键字" enter-button="搜索" size="large"
+              @search="getIntegrationList" @change="onSearch" class="resultListSearchInput" />
+            <i class="searchImg" aria-hidden="true"></i>
+            <!-- <button class="button-reset" @click="resetAction()">重置</button> -->
+          </div>
+          <div>
+
+            <div class="all">全部</div>
+            <div class="choose-tab" v-if="cityOrArea === 0">
+              <span v-for="item in senses" :key="item.data" @click="tabSensesClick(item.dict_label)" :class="
+  clickSensesList.indexOf(item.dict_label) != -1
+    ? 'down'
+    : ''
+">
+                {{ item.dict_label }}
+              </span>
+            </div>
+            <div v-else class="choose-tab">
+              <span v-for="item in areas" :key="item.data" @click="tabAreasClick(item.name)" :class="
+  clickAreasList.indexOf(item.name) != -1
+    ? 'down'
+    : ''
+">
+                {{ item.name }}
+              </span>
             </div>
           </div>
-      <div v-if="number === 0" class="checkResult">检测结果: <span>{{resourceTotal}}</span>个</div>
+        </div>
+      </div>
+      <div style="background:#fff;margin-left:16px;margin-right:16px;">
+      <div v-if="number === 0" class="checkResult">检测结果: <span>{{ resourceTotal }}</span>个</div>
       <div v-loading="loadingData">
-        <searchResultList
+        <searchResultList v-if="number === 1" v-show="resourceList.data && resourceList.data.length > 0"
-          v-if="number === 1"
+          :resourceList="resourceList" :resourceTotal="resourceTotal" @saveSearchCodition="saveSearchCodition"
-          v-show="resourceList.data && resourceList.data.length > 0"
+          ref="searchResultListDom" :selectCardsname="number == 0 ? '融合服务' : '赋能场景'" />
-          :resourceList="resourceList"
+        <CanAssignCase v-else v-show="resourceList.data && resourceList.data.length > 0" :resourceList="resourceList"
-          :resourceTotal="resourceTotal"
+          @saveSearchCodition="saveSearchCodition" :resourceTotal="resourceTotal"
-          @saveSearchCodition="saveSearchCodition"
+          :selectCardsname="number == 0 ? '融合服务' : '赋能场景'" />
-          ref="searchResultListDom"
-          :selectCardsname="number == 0 ? '融合服务' : '赋能场景'"
-        />
-        <CanAssignCase
-          v-else
-          v-show="resourceList.data && resourceList.data.length > 0"
-          :resourceList="resourceList"
-          @saveSearchCodition="saveSearchCodition"
-          :resourceTotal="resourceTotal"
-          :selectCardsname="number == 0 ? '融合服务' : '赋能场景'"
-        />
 
         <div class="pagination">
 
-          <a-pagination
+          <a-pagination v-if="resourceList.data && resourceList.data.length > 0" v-model:current="currentPage"
-            v-if="resourceList.data && resourceList.data.length > 0"
+            v-model:pageSize="currentPageSize" show-size-changer show-less-items show-quick-jumper
-            v-model:current="currentPage"
+            :total="resourceTotal" :page-size-options="pageSizeOptions" @change="pageChange"
-            v-model:pageSize="currentPageSize"
+            @showSizeChange="onShowSizeChange" />
-            show-size-changer
-            show-less-items
-            show-quick-jumper
-        
-            :total="resourceTotal"
-            :page-size-options="pageSizeOptions"
-            @change="pageChange"
-            @showSizeChange="onShowSizeChange"
-          />
         </div>
-        <div
+        <div v-if="resourceList.data && resourceList.data.length <= 0" style="margin-top: 2rem">
-          v-if="resourceList.data && resourceList.data.length <= 0"
-          style="margin-top: 2rem"
-        >
           <a-empty />
         </div>
       </div>
     </div>
     </div>
+  </div>
   <home-footer></home-footer>
 </template>
 <script>
   import HomeFooter from '@/views/newHome/components/Footer'
   import mybus from '@/myplugins/mybus'
+  import qs from 'qs'
   import {
     defineComponent,
     reactive,
@@ -93,14 +95,14 @@
     onMounted,
     nextTick,
   } from 'vue'
-  import { getIntegrationServicesList } from '@/api/home.js'
+import { getIntegrationServicesList, getRegion, selectDicStoreAll } from '@/api/home.js'
-  import { useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
-  import HomeHeader from '@/views/home/components/header'
+import HomeHeader from '@/views/home/components/header'
-  import searchResultList from '@/views/home/components/searchResultList.vue'
+import searchResultList from '@/views/home/components/searchResultList.vue'
-  import CanAssignCase from '@/views/home/components/CanAssignCase.vue'
+import CanAssignCase from '@/views/home/components/CanAssignCase.vue'
-  import { message } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
 
-  export default defineComponent({
+export default defineComponent({
   beforeRouteLeave(to, from, next) {
     console.log('to---integrationServices--beforeRouteLeave------->', to)
     console.log('from---integrationServices--beforeRouteLeave------->', from)
@@ -147,7 +149,15 @@
       name: searchValue.value,
       orderField: 'create_date',
       orderType: 'DESC', // ASC 升序  DESC 降序
+      areas:[],
+      senses:[],
+      district: 1,//0市级，1基层
     }
+    let cityOrArea = ref(0)//0市级 1基层
+    let senses = ref([])//场景领域
+    let areas = ref([])//区市
+    let clickSensesList = ref([])//多选场景领域
+    let clickAreasList = ref([])//多选区域领域
     const searchResultListDom = ref(null)
     const storageSearchInfo = JSON.parse(
       localStorage.getItem('integrationServices')
@@ -180,12 +190,34 @@
     }
 
     const changeCards = (val) => {
-        // 打包模式
       number.value = val
       paramsGetResources.type = titleName.value[number.value].name
       resetAction()
     }
+    //市级或者基层
+    const handleChose = (index) => {
+      cityOrArea.value = index;
+      getIntegrationList()
+    }
+    //多选区域
+    const tabAreasClick = (name) => {
+      if (clickAreasList.value.indexOf(name) == -1) {
+        clickAreasList.value.push(name);
+      } else {
+        clickAreasList.value.splice(clickAreasList.value.indexOf(name), 1)
+      }
+      getIntegrationList()
+     }
+    //多选场景领域
+    const tabSensesClick = (name) => {
 
+      if (clickSensesList.value.indexOf(name) == -1) {
+        clickSensesList.value.push(name);
+      } else {
+        clickSensesList.value.splice(clickSensesList.value.indexOf(name), 1)
+      }
+      getIntegrationList()
+    }
     // 查询
     const onSearch = () => {
       currentPage.value = 1
@@ -203,21 +235,48 @@
       paramsGetResources.limit = 10
       paramsGetResources.orderField = 'create_date'
       paramsGetResources.orderType = 'DESC'
-
       mybus.emit('resetAction', {
         type: titleName.value[number.value].name,
       })
       getIntegrationList()
     }
+    //查询领域和地区
+    const searchAreas = () => {
+      const params = {
+        topCategoryName: '应用资源'
+      }
+      selectDicStoreAll(params).then(
+        (res) => {
+          senses.value = res.data.data[0].typeList
+          console.log("==================== senses.value", senses.value)
+        })
+      const params1 = {
+        pid: '250000'
+      }
+      getRegion(params1).then(
+        (res) => {
+
+          areas.value = res.data.data
+        })
+    }
 
     // 获取融合服务列表
     const getIntegrationList = () => {
       loadingData.value = true
       paramsGetResources.name = searchValue.value
-        console.log(
+      if(number.value==1){
-          'paramsGetResources------参数下发------>',
+        paramsGetResources.district=''
-          paramsGetResources
+      }else{
-        )
+      if(cityOrArea.value==0){//市级挂接
+        paramsGetResources.district=0
+        paramsGetResources.areas=[]
+        paramsGetResources.senses=JSON.stringify(clickSensesList.value)
+      }else{//基层挂接
+        paramsGetResources.district=1
+        paramsGetResources.senses=[]
+        paramsGetResources.areas=JSON.stringify(clickAreasList.value)
+      }
+    }
       getIntegrationServicesList(paramsGetResources).then(
         (res) => {
           loadingData.value = false
@@ -291,17 +350,20 @@
     }
 
     onMounted(() => {
-        if(returnType=='典型赋能场景'){
+     searchAreas()
+      if (returnType == '典型赋能场景') {
         changeCards(0)
-        }else if(returnType=='打包模式'){
+
+      } else if (returnType == '打包模式') {
         changeCards(1)
-        }else{
+      } else {
         if (storageSearchInfo) {
           handleSetSearchData()
         } else {
           getIntegrationList()
         }
       }
+
       // if (storageSearchInfo) {
       //   handleSetSearchData()
       // } else {
@@ -310,6 +372,9 @@
     })
 
     return {
+
+      tabSensesClick,
+      tabAreasClick,
       searchValue,
       currentPage,
       resourceList,
@@ -327,9 +392,16 @@
       returnType,
       number,
       loadingData,
+      cityOrArea,
       onShowSizeChange,
       saveSearchCodition,
+      handleChose,
+      searchAreas,
+      senses,
+      areas,
       searchResultListDom,
+      clickSensesList,
+      clickAreasList,
     }
   },
   components: {
@@ -344,29 +416,142 @@
     mybus.off('refresh')
     mybus.off('changePage')
   },
-  })
+})
 </script>
 <style lang="less" scoped>
-.checkResult{
+.top-title {
-  margin-left: 0.2rem;
+
-    font-size: 14px;
+  display: flex;
-    font-weight: 500;
+  font-size: 20px;
+  margin-top: 65px;
+  background: #e5eefc;
+  opacity: 0.8;
+  height: 72px;
+
+  .tabAll {
     color: #212121;
-    margin-top: 10px;
+    margin-right: 35px;
+    cursor: pointer;
+    margin-top: 24px;
+    text-align: center;
+    width: 240px;
+    padding-top: 8px;
+  }
+
+  .tabAll:nth-child(1) {
+    margin-left: 720px;
+  }
+
+  .sel {
+    border-top: 2px solid #0058e1;
+    height: 48px;
+    background: #fff;
+    width: 240px;
 
     span {
-          font-size: 18px;
+      font-weight: bold;
-          color: #0087ff;
+    }
   }
 
 }
-  .resultListSearchInput-father {
+
+.checkResult {
+  margin-left: 16px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #212121;
+    margin-top: 16px;
+    margin-bottom: 16px;
+
+  span {
+    font-size: 18px;
+    color: #0058e1;
+  }
+
+}
+
+.resultListSearchInput-father {
   background: #f3f5f9;
-    padding: 0rem 0.2rem;
+  margin-bottom:24px;
+  .sanjiao {
+    background: url('~@/assets/home/sanjiao.png');
+    background-repeat: no-repeat;
+    height: 10px;
+    width: 10px;
+    margin-left: 80px;
+    position: absolute;
+  }
+
+  .second-title {
+    padding-top: 16px;
+    margin-bottom: 16px;
+    font-size: 18px;
+    cursor: pointer;
+    text-align: center;
+    vertical-align: bottom;
+    background: #fff;
+    height: 53px;
+    border-bottom: 1px solid #d9d9d9;
+  }
+
+  .departmentStyle {
+    float: left;
+    width: 180px;
+    //  color: #0058e1;
+    background-color: #fff;
+
+    border-bottom: 3px solid #0058e1;
+  }
+
+  .departmentStyle1 {
+
+    float: left;
+    width: 180px;
+  }
 
   .resultListSearchInput-son {
-      background: #fff;
+    .son-input {
-      padding: 0.2rem 0.2rem 0rem 0.3rem;
+      margin: 24px 0px 12px 340px;
+    }
+
+    // background: #fff;
+    //padding: 0.2rem 0.2rem 0rem 0.3rem;
+    .all {
+      float: left;
+      display: inline;
+      width: 42px;
+      margin-top: 12px;
+      margin-left: 100px;
+      font-size: 14px;
+      font-weight: bold;
+    }
+
+    .choose-tab {
+      float: left;
+      display: inline;
+      width: 940px;
+
+      span {
+        display: inline-block;
+        height: 28px;
+        font-size: 14px;
+        width: 90px;
+        line-height: 28px;
+        border-radius: 1px;
+        margin-left: 14px;
+        text-align: center;
+        color: #212121;
+        background: #e8e9eb;
+        cursor: pointer;
+        margin-top: 12px;
+      }
+
+      .down {
+        background: #0058e1;
+        color: #ffffff;
+      }
+
+    }
 
     .hengxian {
       width: 100%;
@@ -374,29 +559,30 @@
       background: rgba(150, 144, 144, 0.3);
       margin-top: 0.2rem;
     }
-      .searchImg{
+
+    .searchImg {
       width: 17px;
       height: 17px;
       background: url('~@/assets/home/searchInner.png');
       position: absolute;
-      top: 119px;
+      top: 85px;
-    left: 500px;
+      left: 668px;
-      }
     }
   }
+}
 
-  .resultListSearchInput {
+.resultListSearchInput {
   margin-left: 0.1rem;
 
   :deep(.ant-input) {
-      width: 4rem;
+    width: 340px;
     height: 0.32rem;
     background: #fff;
     border-radius: 0.02rem;
   }
 
   :deep(.ant-input-search-button) {
-      width: 0.8rem;
+    // width: 56px;
     height: 0.32rem;
     background: #0558e1;
     border-radius: 0.02rem !important;
@@ -410,12 +596,12 @@
   :deep(.ant-input-group-addon) {
     left: 0 !important;
   }
-  }
+}
 
-  .button-reset {
+.button-reset {
   border: 0;
   outline: none;
-    width: 0.8rem;
+  width: 56px;
   height: 0.32rem;
   //background: #e1edfa;
   background: #0558e1;
@@ -427,15 +613,15 @@
   line-height: 0.32rem;
   margin-left: 2.5rem;
   cursor: pointer;
-  }
+}
 
-  .details-pageconetent {
+.details-pageconetent {
   height: 100%;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
-    margin-top: 0.67rem;
+  //margin-top: 0.67rem;
   position: relative;
   background: rgba(245, 243, 243, 0.3);
 
@@ -454,7 +640,7 @@
     position: relative;
     width: 11.5rem;
     display: flex;
-      padding-top: 0.2rem;
+    //  padding-top: 0.2rem;
     flex-direction: column;
     font-size: 0.16rem;
     justify-content: left;
@@ -462,39 +648,19 @@
 
     .pagination {
       background: #f3f5f9;
-        padding-bottom: 0.6rem;
+      padding-top: 10px;
+    padding-bottom: 23px;
     }
 
-      .top-title {
-        padding: 0.2rem;
-        display: flex;
-        font-size: 18px;
 
-        .tabAll {
-          font-size: 18px;
-          color: #000000;
-          margin-right: 35px;
-          cursor: pointer;
   }
+}
 
-        .tabAll:nth-child(1) {
+:deep(.ant-card-grid) {
-          margin-left: 20px;
-        }
-
-        .sel {
-          font-weight: 600;
-          color: #0087ff;
-          border-bottom: 0.02rem solid #0087ff;
-        }
-      }
-    }
-  }
-
-  :deep(.ant-card-grid) {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   -webkit-line-clamp: 1;
   word-break: break-all;
-  }
+}
 </style>

front/src/views/personalCenter/components/PurchaseVehicle.vue

@@ -118,7 +118,7 @@
                     </div>
                     <!-- // todo -->
                     <span class="time">
-                      <span v-if="!itShowXiHaiAn">
+                      <span class="time-line" v-if="!itShowXiHaiAn">
                         加购时间:{{ item.time }}
                       </span>
                       <a-popconfirm
@@ -128,7 +128,7 @@
                         @confirm="handleDelete(item, valIndex)"
                         @cancel="cancel"
                       >
-                        <a-button
+                        <!-- <a-button
                           type="primary"
                           style="
                             width: 0.7rem;
@@ -141,7 +141,8 @@
                           @click="del"
                         >
                           删除
-                        </a-button>
+                        </a-button> -->
+                        <span class="del-record" @click="del"></span>
                       </a-popconfirm>
                     </span>
                     <svg
@@ -852,13 +853,32 @@
           margin-left: 0.3rem;
           font-size: 0.12rem;
           color: #ccc;
+          display: flex;
+          align-content: center;
+          .time-line{
+            line-height: 32px;
+          }
+          .del-record {
+            width:32px;
+            height: 32px;
+            background: url('~@/assets/home/del.png') no-repeat;
+            cursor: pointer;
+            background-size: 100%;
+            margin-left: 0.12rem;
+            &:hover{
+              background: url('~@/assets/home/del-on.png') no-repeat;
+            }
+          }
         }
 
         .type {
           margin-left: 0.1rem;
           padding: 0.03rem 0.1rem;
           background: #00a7e3;
+          border-radius: 3px;
+          // background: linear-gradient(-80deg, transparent 10%, #00a7e3 10%, #00a7e3 90%, transparent 0);
           color: #fff;
+          transform: skewX(-10deg);
         }
         
         :deep(.ant-list-item-meta-description) {
@@ -929,7 +949,7 @@
       }
 
       .sousuokuang {
-        width: 3.25rem;
+        width: 3.13rem;
         margin: 0.1rem 0rem 0.21rem 0.2rem;
 
         .ant-input-search {
@@ -1104,6 +1124,7 @@
     width: 1rem;
     height: 0.36rem;
     border-radius: 2px;
+    margin-left: 0.12rem;
     background: #fff;
     color: #0558e1;
   }
@@ -1114,4 +1135,5 @@
     margin-left: 0.12rem;
     border-radius: 2px;
   }
+  
 </style>