From 244123dd744145aa3ddb16b58376608ad3f9a34f Mon Sep 17 00:00:00 2001
From: gaoyuanwei <2826352639@qq.com>
Date: Fri, 26 Aug 2022 18:55:19 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B5=8B=E8=83=BD=E6=A1=88=E4=BE=8B--=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E8=B5=84=E6=BA=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../assignedScene/add-update-scene.vue        | 242 ++++++++-------
 .../ability/components/combine-ability.vue    | 286 +++++++++++++-----
 2 files changed, 329 insertions(+), 199 deletions(-)

diff --git a/back/src/views/modules/ability/assignedScene/add-update-scene.vue b/back/src/views/modules/ability/assignedScene/add-update-scene.vue
index beb88688..3db71513 100644
--- a/back/src/views/modules/ability/assignedScene/add-update-scene.vue
+++ b/back/src/views/modules/ability/assignedScene/add-update-scene.vue
@@ -94,24 +94,38 @@
 </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 CombineAbility from '../components/combine-ability.vue';
-import CommonQuestion from '../components/common-question.vue';
+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 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'
 
-let btnArray = ['基本信息', '场景痛点', '解决方案', '组合能力', '更多能力', '使用步骤']
+const btnArray = ['基本信息', '场景痛点', '解决方案', '组合能力', '更多能力', '使用步骤']
 // 数据资源\组件服务
 export const getJson = (type) => {
-  return {
-    methods: 'get',
-    url: '/census/center/selectResourceListByType',
-    postData: {
-      type
+  if (type === '组件服务') {
+    return {
+      methods: 'get',
+      url: '/census/center/selectResourceListByType',
+      postData: {
+        type
+      }
+    }
+  } else {
+    return {
+      methods: 'post',
+      url: '/resource/getDataResource',
+      postData: {
+        serviceName: '', // 资源名称
+        orderField: 'fbrq', // 排序字段
+        orderType: 'desc',
+        pageNum: 1, // 页码
+        pageSize: 15 // 分页大小
+      }
     }
   }
 }
@@ -120,14 +134,14 @@ export const getDescJson = (text) => {
     descObj: {
       text: `${text}描述`,
       key: 'description'
-    },
+    }
   }
 }
 // 弹框的方法
 export const getListParams = {
-  '数据资源': getJson('数据资源'),
-  '组件服务': getJson('组件服务'),
-  '基础设施': ''
+  数据资源: getJson('数据资源'),
+  组件服务: getJson('组件服务'),
+  基础设施: ''
 }
 // 模态框标题
 export const modalTypeText = {
@@ -136,13 +150,13 @@ export const modalTypeText = {
 }
 
 export const getFuseResourceList = (abilityListObj) => {
-  let arr = []
+  const arr = []
   let length = 0
   for (const key in abilityListObj) {
     if (Object.hasOwnProperty.call(abilityListObj, key)) {
-      const itemArray = abilityListObj[key];
+      const itemArray = abilityListObj[key]
       itemArray.map((v, i) => {
-        let index = (i + 1) + length
+        const index = (i + 1) + length
         arr.push({
           resourceId: v,
           type: key,
@@ -162,9 +176,9 @@ export default {
     SceneOneInput,
     upload,
     CommonQuestion,
-    InfrastructureModal,
+    InfrastructureModal
   },
-  data() {
+  data () {
     return {
       fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload',
       moreKeyTextObj: {
@@ -172,80 +186,80 @@ export default {
           text: '能力名称',
           key: 'name'
         },
-        ...getDescJson('能力'),
+        ...getDescJson('能力')
       },
       painKeyTextObj: getDescJson('痛点'),
       solutionKeyTextObj: getDescJson('方案'),
       dataForm: {
-        "name": "",
-        "applicationArea": "",
-        "description": "",
-        "fuseAttrList": [
+        name: '',
+        applicationArea: '',
+        description: '',
+        fuseAttrList: [
           {
-            "attrType": "使用步骤",
-            "attrValue": [{ question: "", answer: "" }],
+            attrType: '使用步骤',
+            attrValue: [{ question: '', answer: '' }]
           },
           {
-            "attrType": "更多能力",
-            "attrValue": [{ name: "", description: "" }],
+            attrType: '更多能力',
+            attrValue: [{ name: '', description: '' }]
           },
           {
-            "attrType": "场景痛点",
-            "attrValue": [{ description: "" }],
+            attrType: '场景痛点',
+            attrValue: [{ description: '' }]
           },
           {
-            "attrType": "解决方案",
-            "attrValue": [{ description: "" }],
+            attrType: '解决方案',
+            attrValue: [{ description: '' }]
           },
           {
-            "attrType": "服务图片",
-            "attrValue": "",
-          },
+            attrType: '服务图片',
+            attrValue: ''
+          }
         ],
-        "fuseResourceList": [],
+        fuseResourceList: []
       },
       rules: {
         name: [
           {
             required: true,
-            message: "请输入名称",
-            trigger: "change",
-          },
+            message: '请输入名称',
+            trigger: 'change'
+          }
         ],
         description: [
           {
             required: true,
-            message: "请输入描述",
-            trigger: "change",
-          },
-        ],
+            message: '请输入描述',
+            trigger: 'change'
+          }
+        ]
       },
       checkList: JSON.parse(JSON.stringify(btnArray)),
       btnList: JSON.parse(JSON.stringify(btnArray)),
       addOrUpdateVisibleCopy: this.addOrUpdateVisible,
       displayInfo: {
-        'name': '名称',
-        'description': '描述',
+        name: '名称',
+        description: '描述'
       },
       modalTypeText: modalTypeText,
       refsParseArray: {
-        'sceneUseUpDom': '使用步骤',
-        'moreAbilityDom': '更多能力',
-        'scenePainDom': '场景痛点',
-        'solutionDom': '解决方案',
-        'zjfwDom': '组件服务',
-        'sjzyDom': '数据资源',
-        'jcssDom': '基础设施',
+        sceneUseUpDom: '使用步骤',
+        moreAbilityDom: '更多能力',
+        scenePainDom: '场景痛点',
+        solutionDom: '解决方案',
+        zjfwDom: '组件服务',
+        sjzyDom: '数据资源',
+        jcssDom: '基础设施'
       },
       getListParams: getListParams,
       abilityListObj: {},
       imgData: [],
       // 限定图片
-      handleExceed() {
+      handleExceed () {
         this.$message({ type: 'error', message: '最多支持一张图片上传' })
       },
-      imageUrl: '',
-    };
+      imageUrl: ''
+    }
   },
   props: {
     modalType: {
@@ -259,47 +273,47 @@ export default {
   },
   watch: {
     dataForm: {
-      handler(newVal) {
+      handler (newVal) {
         this.dataForm = newVal
       },
       deep: true,
-      immediate: true,
+      immediate: true
     },
     addOrUpdateVisible: {
-      handler(newVal) {
-        this.addOrUpdateVisibleCopy = newVal;
+      handler (newVal) {
+        this.addOrUpdateVisibleCopy = newVal
         if (this.modalType == 'add' && newVal) {
           localStorage.setItem('InfrastructureSearchData', JSON.stringify({}))
           this.getDetail(this.dataForm)
         }
       },
-      immediate: true,
+      immediate: true
     }
   },
   methods: {
-    clearForm() {
-      this.$refs.dataForm && this.$refs.dataForm.resetFields();
+    clearForm () {
+      this.$refs.dataForm && this.$refs.dataForm.resetFields()
     },
-    closeModal() {
+    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
       } else {
         // 更多能力、使用步骤
         this.operateFuseAttrList(data.title, data)
       }
     },
-    getFuseResourceList() {
+    getFuseResourceList () {
       return getFuseResourceList(this.abilityListObj)
     },
-    operateFuseAttrList(title, data) {
+    operateFuseAttrList (title, data) {
       if (this.dataForm.fuseAttrList.every(v => v.attrType !== title)) {
         this.dataForm.fuseAttrList.push({
-          'attrType': title,
-          'attrValue': JSON.stringify(data.list)
+          attrType: title,
+          attrValue: JSON.stringify(data.list)
         })
       } else {
         this.dataForm.fuseAttrList.map(v => {
@@ -310,71 +324,71 @@ export default {
       }
     },
     // 改变按钮状态
-    changeBtn(data) {
-      this.checkList = data;
+    changeBtn (data) {
+      this.checkList = data
     },
     // 表单提交
     dataFormSubmitHandle: debounce(
       function () {
         this.$refs.dataForm.validate((valid) => {
           if (!valid) {
-            this.$message.error("请检查表单是否填写完整");
-            return false;
+            this.$message.error('请检查表单是否填写完整')
+            return false
           }
-          let methodsObj = {
-            'add': 'post',
-            'update': 'put'
+          const methodsObj = {
+            add: 'post',
+            update: 'put'
           }
           this.dataForm.fuseResourceList = this.getFuseResourceList()
           if (this.imageUrl == '') {
-            this.$message.error("请上传图片！");
-            return;
+            this.$message.error('请上传图片！')
+            return
           }
-          this.dataForm.fuseAttrList.find(v => v.attrType == '服务图片').attrValue = this.imageUrl || '';
-          let _obj = Object.assign({}, this.dataForm, {
+          this.dataForm.fuseAttrList.find(v => v.attrType == '服务图片').attrValue = this.imageUrl || ''
+          const _obj = Object.assign({}, this.dataForm, {
             type: '赋能场景'
           })
-          console.log('this.dataForm------表单提交------>', this.dataForm);
+          console.log('this.dataForm------表单提交------>', this.dataForm)
           this.$http
-          [methodsObj[this.modalType]]("/fuse", _obj)
+            [methodsObj[this.modalType]]('/fuse', _obj)
             .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"),
-                type: "success",
+                message: this.$t('prompt.success'),
+                type: 'success',
                 duration: 500,
                 onClose: () => {
-                  this.$refs.dataForm && this.$refs.dataForm.resetFields();
-                  this.$emit("refreshDataList");
-                  this.$emit("closeModal");
-                },
-              });
+                  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) {
-      console.log('data---详情--------->', data);
-      this.dataForm = data;
+    getDetail (data) {
+      console.log('data---详情--------->', data)
+      this.dataForm = data
       this.$nextTick(() => {
         for (const key in this.refsParseArray) {
           this.$refs[key] && this.$refs[key].getDataInfo && this.$refs[key].getDataInfo(data)
         }
-        let _imgObj = data.fuseAttrList.find(v => v.attrType == '服务图片') || {};
-        this.imageUrl = _imgObj.attrValue;
+        const _imgObj = data.fuseAttrList.find(v => v.attrType == '服务图片') || {}
+        this.imageUrl = _imgObj.attrValue
 
         // 组合能力--特殊处理
         Object.keys(this.getListParams).map(k => {
-          let arr = data.fuseResourceList.filter(v => v.type == k);
-          let arr2 = [];
+          const arr = data.fuseResourceList.filter(v => v.type == k)
+          const arr2 = []
           arr.map(v => {
             arr2.push(v.resourceId)
           })
@@ -382,13 +396,13 @@ export default {
         })
       })
     },
-    handleAvatarSuccess(res, file) {
+    handleAvatarSuccess (res, file) {
       if (res.code !== 0) {
         return this.$message.error(res.msg)
       }
       this.imageUrl = res.data
     },
-    beforeAvatarUpload(file) {
+    beforeAvatarUpload (file) {
       const isImage =
         file.type === 'image/jpeg' ||
         file.type === 'image/jpg' ||
@@ -398,11 +412,11 @@ export default {
       }
       return isImage
     },
-    addUploadRemoveFile(file, fileList) {
+    addUploadRemoveFile (file, fileList) {
       this.$refs.addUpload.clearFiles()
       this.imageUrl = ''
     },
-    editBeforeAvatarUpload(file) {
+    editBeforeAvatarUpload (file) {
       const isImage =
         file.type === 'image/jpeg' ||
         file.type === 'image/jpg' ||
@@ -413,21 +427,21 @@ export default {
       }
       return isImage
     },
-    editUploadRemoveFile(file, fileList) {
+    editUploadRemoveFile (file, fileList) {
       this.$refs.editUpload.clearFiles()
       this.imageUrl = ''
     },
-    eidtHandleAvatarSuccess(res, file) {
+    eidtHandleAvatarSuccess (res, file) {
       if (res.code !== 0) {
         return this.$message.error(res.msg)
       }
       this.imageUrl = res.data
-    },
+    }
   },
-  beforeDestroy() {
+  beforeDestroy () {
     this.clearForm()
-  },
-};
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -466,10 +480,8 @@ export default {
 
 <style lang="scss" scoped>
 .mod-sys__menu {
-
   .menu-list,
   .icon-list {
-
     .el-input__inner,
     .el-input__suffix {
       cursor: pointer;
@@ -493,11 +505,11 @@ export default {
     padding: 0;
     margin: -8px 0 0 -8px;
 
-    >.el-button {
+    > .el-button {
       padding: 8px;
       margin: 8px 0 0 8px;
 
-      >span {
+      > span {
         display: inline-block;
         vertical-align: middle;
         width: 18px;
diff --git a/back/src/views/modules/ability/components/combine-ability.vue b/back/src/views/modules/ability/components/combine-ability.vue
index 81dffd6b..d11a659a 100644
--- a/back/src/views/modules/ability/components/combine-ability.vue
+++ b/back/src/views/modules/ability/components/combine-ability.vue
@@ -2,19 +2,41 @@
     <div class="ability-box">
         <div class="top">
             <div class="type">{{ type }}</div>
-            <el-button type="primary" size="small" @click="showModal = true">添加</el-button>
+            <el-button type="primary" size="small" @click="clickOpen">添加</el-button>
         </div>
 
         <el-dialog :visible.sync="showModal" title="请选择" @close="close" :close-on-click-modal="false"
             :close-on-press-escape="false" :key="showKey" append-to-body>
-            <div class="relate-application-content">
-                <el-transfer v-model="selectedArray" filterable :filter-method="filterMethod" filter-placeholder="请输入名称"
+            <div class="relate-application-content" v-if="type==='组件服务'">
+              <el-transfer v-model="selectedArray" filterable :filter-method="filterMethod" filter-placeholder="请输入名称"
+                  :titles="nameArray" :props="{
+                      key: 'id',
+                      label: 'name',
+                  }" :data="transferData">
+              </el-transfer>
+            </div>
+            <div v-else-if="type==='数据资源'"  class="dataTransfer">
+              <el-transfer v-model="selectedArray" filter-placeholder="请输入名称"
                     :titles="nameArray" :props="{
                         key: 'id',
                         label: 'name',
                     }" :data="transferData">
                 </el-transfer>
+                <el-input
+                  v-model="searchValue"
+                  placeholder="请输入名称"
+                ></el-input>
+                <el-button @click="rest" class="restClick">重置</el-button>
             </div>
+            <el-pagination
+              v-if="type==='数据资源'"
+              :current-page="currentPage"
+              :page-size="15"
+              layout="total, prev, pager, next"
+              :total="total"
+              @current-change="pageCurrentChangeHandle"
+            >
+            </el-pagination>
             <template slot="footer">
                 <el-button @click="showModal = false">{{ $t("cancel") }}</el-button>
                 <el-button type="primary" @click="confirmSubmitHandle()">{{
@@ -173,7 +195,11 @@ export default {
       transferData: [],
       selectedArray: [],
       allData: [],
-      displayList: [] // 用于展示的list
+      displayList: [], // 用于展示的list
+      total: 0,
+      currentPage: 1,
+      newNum: 1,
+      searchValue: ''
     }
   },
   watch: {
@@ -181,6 +207,18 @@ export default {
       if (newVal) {
         this.getData()
       }
+    },
+    newNum (newVal) {
+      if (newVal) {
+        this.getDataParams.postData.pageNum = newVal
+        this.getData()
+      }
+    },
+    searchValue (newVal) {
+      if (newVal) {
+        this.getDataParams.postData.serviceName = newVal
+        this.getData()
+      }
     }
   },
   methods: {
@@ -212,28 +250,55 @@ export default {
       if (this.getDataParams.url === '') {
         return
       }
-      this.$http[this.getDataParams.methods](this.getDataParams.url, {
-        params: this.getDataParams.postData
-      }).then(res => {
-        console.log('res.data----获取列表-------->', res.data)
-        if (res.data.code !== 0) {
-          return this.$message.error(res.msg)
-        }
-        this.transferData = []
-        this.allData = [];
-        (res.data.data || []).map(v => {
-          this.transferData.push({
-            type: this.type,
-            id: v[keyObj[this.type].idKey],
-            name: v[keyObj[this.type].nameKey] || '--'
+      if (this.type === '组件服务') {
+        this.$http[this.getDataParams.methods](this.getDataParams.url, {
+          params: this.getDataParams.postData
+        }).then(res => {
+          console.log('res.data----获取列表-------->', res.data)
+          if (res.data.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.transferData = []
+          this.allData = [];
+          (res.data.data || []).map(v => {
+            this.transferData.push({
+              type: this.type,
+              id: v[keyObj[this.type].idKey],
+              name: v[keyObj[this.type].nameKey] || '--'
+            })
           })
+          this.allData = JSON.parse(JSON.stringify(this.transferData))
+          console.log(this.allData, 'this.transferData')
+        }).catch(err => {
+          this.$message.error(err)
         })
-        this.allData = JSON.parse(JSON.stringify(this.transferData))
-      }).catch(err => {
-        this.$message.error(err)
-      })
+      } else if (this.type === '数据资源') {
+        this.getDataParams.postData.pageNum = this.newNum
+        this.$http[this.getDataParams.methods](this.getDataParams.url,
+          this.getDataParams.postData
+        ).then(res => {
+          console.log('res.data----获取列表-------->', res.data)
+          this.total = Number(res.data.data.rows)
+          if (res.data.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.transferData = []
+          this.allData = [];
+          (res.data.data.data || []).map(v => {
+            this.transferData.push({
+              type: this.type,
+              id: v.guid,
+              name: v.zyname || '--'
+            })
+          })
+          this.allData = JSON.parse(JSON.stringify(this.transferData))
+        }).catch(err => {
+          this.$message.error(err)
+        })
+      }
     },
     filterMethod (query, item) {
+      console.log('1111111111111111111111111')
       return item.name && item.name.indexOf(query) > -1
     },
     confirmSubmitHandle () {
@@ -261,97 +326,150 @@ export default {
       this.selectedArray = []
       this.allData = []
       this.transferData = []
+    },
+    pageCurrentChangeHandle (val) {
+      console.log(this.newNum, val, 'wowowo')
+      this.newNum = val
+    },
+    clickOpen () {
+      this.searchValue = ''
+      this.getDataParams.postData.serviceName = ''
+      this.currentPage = 1
+      this.showModal = true
+      this.getData()
+    },
+    rest () {
+      this.currentPage = 1
+      this.searchValue = ''
+      this.getDataParams.postData.serviceName = ''
+      this.getData()
     }
   },
-  components: { InfrastructureModal, DisplayList }
+  components: { InfrastructureModal, DisplayList },
+  mounted () {
+    console.log(this.type, 'this.type')
+  }
 }
 </script>
 <style lang="scss" scoped>
 .ability-box {
-    margin-bottom: 10px;
+  margin-bottom: 10px;
 
-    .show-box {
-        display: flex;
-        justify-content: flex-start;
-        align-items: flex-start;
-    }
+  .show-box {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
 
-    .top {
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-    }
+  .top {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+  }
 
-    .type {
-        padding-right: 12px;
-        font-size: 14px;
-        color: #606266;
-        width: 100px;
-        box-sizing: border-box;
-        text-align: right;
-        line-height: 40px;
-        height: 40px;
-    }
+  .type {
+    padding-right: 12px;
+    font-size: 14px;
+    color: #606266;
+    width: 100px;
+    box-sizing: border-box;
+    text-align: right;
+    line-height: 40px;
+    height: 40px;
+  }
 
-    .list-box {
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        flex-wrap: wrap;
-        margin-left: 100px;
-    }
+  .list-box {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    margin-left: 100px;
+  }
 
-    .list-item {
-        font-size: 14px;
-        color: #606266;
-        width: 380px;
-        text-align: left;
-        margin-right: 10px;
-        line-height: 40px;
-        height: 40px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
+  .list-item {
+    font-size: 14px;
+    color: #606266;
+    width: 380px;
+    text-align: left;
+    margin-right: 10px;
+    line-height: 40px;
+    height: 40px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }
 </style>
 
 <style lang="scss" scoped>
 .icon-input ::v-deep .el-input__inner {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 ::v-deep .el-dialog__body {
-    height: 580px;
-    overflow: auto;
+  height: 580px;
+  overflow: auto;
 }
 
 ::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;
+  width: 130px;
+  margin: 0 10px 5px;
+  border-left: unset !important;
+  border-radius: unset !important;
+  border: 1px solid #dcdfe6 !important;
 }
 
 .relate-application-content {
+  height: 100%;
+
+  ::v-deep .el-transfer {
     height: 100%;
+  }
 
-    ::v-deep .el-transfer {
-        height: 100%;
-    }
+  ::v-deep .el-transfer-panel {
+    width: 39.5%;
+    height: 100%;
+  }
 
-    ::v-deep .el-transfer-panel {
-        width: 39.5%;
-        height: 100%;
-    }
+  ::v-deep .el-transfer-panel__body {
+    height: 100%;
+  }
 
-    ::v-deep .el-transfer-panel__body {
-        height: 100%;
-    }
+  ::v-deep .el-transfer-panel__list.is-filterable {
+    height: calc(100% - 102px);
+  }
+}
+.dataTransfer {
+  position: relative;
+  height: 100%;
+  ::v-deep .el-transfer {
+    height: 100%;
+  }
 
-    ::v-deep .el-transfer-panel__list.is-filterable {
-        height: calc(100% - 102px);
-    }
+  ::v-deep .el-transfer-panel {
+    width: 39.5%;
+    height: 100%;
+  }
+
+  ::v-deep .el-transfer-panel__body {
+    height: 100%;
+  }
+  ::v-deep .el-transfer-panel__list {
+    height: calc(100% - 102px);
+    margin-top: 4rem;
+  }
+  ::v-deep .el-input {
+    position: absolute;
+    font-size: 14px;
+    display: inline-block;
+    width: 30%;
+    top: 52px;
+    left: 12px;
+  }
+  .restClick {
+    position: absolute;
+    top: 52px;
+    left: 284px;
+  }
 }
 </style>