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

back/src/views/modules/abilityStatistics/index.vue

@@ -22,91 +22,177 @@
            </span>
         </el-tree>
          </div> -->
+           <el-form :inline="true">
+           <!--起始日期 @keyup.enter.native="getDataList()"-->
+         <el-form-item>
+         <el-date-picker
+            v-model="value1"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            format='yyyy-MM-dd HH:mm:ss'
+            value-format='yyyy-MM-dd HH:mm:ss'
+          >
+          </el-date-picker>
+         </el-form-item>
+          <!--审核状态-->
+        <el-form-item>
+          <el-select
+            v-model="examineStatus"
+            placeholder="请选审核状态"
+            clearable
+          >
+            <el-option
+              label="审核完成"
+              value="1"
+            ></el-option>
+            <el-option
+              label="审核中"
+              value="0"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+      
+          <!--部门-->
+         <el-form-item>
+          <el-select
+            v-model="abilityDepartment"
+            placeholder="请选择部门"
+            clearable
+          >
+             <el-option label="全部" value=""></el-option>
+            <el-option v-for="item in departmentSelects" :key="item.label" v-bind="item"></el-option>
+          </el-select>
+        </el-form-item>
+
+         <!--类型-->
+         <el-form-item>
+          <el-select
+            v-model="abilityType"
+            placeholder="请选择类型"
+            clearable
+          >
+             <el-option label="全部" value=""></el-option>
+            <el-option v-for="item in typeOptions" :key="item.name" :label="item.name" :value="item.name" v-bind="item"></el-option>
+          </el-select>
+        </el-form-item>
+       
+        <!--操作按钮查询-->
+        <el-form-item>
+          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+        </el-form-item>
+        <!--操作按钮重置-->
+        <el-form-item>
+          <el-button type="primary" @click="resetDataList()">{{ $t('reset') }}</el-button>
+        </el-form-item>
+        </el-form>
      <el-card shadow="never" class="aui-card--fill"  v-if='homeIsShow'>
     <div class="mod-demand__bsdemand">
-        <div class='top-box'>
+       <!--  <div class='top-box'>
             <span class='title'>能力统计</span>
             <div class='title-list-style'>
             <div v-for="(item,index) in titleList" :key='index' class='title-single' :class="{'choseStyle':choseId=== index}" @click="choseBtn(index)">
              <span class='box-style'>{{item.name}}</span>
             </div>
-    </div>
+           </div>
-        </div>
+        </div> -->
+
          <div class='second-title'>
-            <span style='margin-right:30px' :class="[departmentId===1?'departmentStyle':'']" @click="handleChose(1)">
+            <span style='margin-right:30px' :class="[(departmentId===1 || departmentId===3)?'departmentStyle':'']" @click="handleChose(1)">
-                部门发布情况
+                能力上架统计
             </span>
-            <span v-if='this.choseId===0' :class="[departmentId===2?'departmentStyle':'']"  @click="handleChose(2)">
+            <span  :class="[(departmentId===2 || departmentId===4)?'departmentStyle':'']"  @click="handleChose(2)">
-                部门使用情况
+               能力使用统计
+            </span>
+         <!--   <span v-if='this.choseId===0' :class="[departmentId===3?'departmentStyle':'']"  @click="handleChose(3)">
+                能力上架明细
+            </span>
+           <span v-if='this.choseId===0' :class="[departmentId===4?'departmentStyle':'']"  @click="handleChose(4)">
+                能力使用明细
+            </span> -->
+            <span  v-if="detailFlag" class="detail-button" @click="goToDetail()">
+               明细
+            </span>
+            <span  v-else class="detail-button" @click="goToBack()">
+               返回
             </span>
          </div>
          <div class='line-style'></div>
+         <!--统计表-->
           <el-table
             :data="tableData"
+            :header-cell-style="{textAlign:'center'}"
+            :cell-style="{textAlign:'center'}"
             border
-            style="width: 100%">
+            style="width: 100%" v-show='this.departmentId===1 ||this.departmentId===2'>
         <el-table-column
-            prop="deptName"
+            prop="name"
             label="部门名称"
             min-width="100%">
         </el-table-column>
-        <el-table-column v-if='this.departmentId===1'
+            <el-table-column label="组件">
-            prop="resourceNum"
+              <el-table-column
-            label="发布总数"
+                  prop="znsf"
-            min-width="100%">
+                  label="智能算法"
-        </el-table-column>
+                  min-width="100%">
-        <el-table-column v-if="this.choseId===0 && this.departmentId===1 "
+              </el-table-column>
-            prop="resourceCarNum"
+              <el-table-column
-            label="被申请总数"
+                  prop="tcfw"
-            min-width="100%">
+                  label="图层服务"
-        </el-table-column>
+                  min-width="100%">
-        <el-table-column v-if="this.departmentId===1"
+              </el-table-column>
-            prop="resourceBrowseNum"
+              <el-table-column
-            label="浏览总量"
+                    prop="kfzj"
-            min-width="100%">
+                    label="通用开发组件"
-        </el-table-column>
+                    min-width="100%">
-        <el-table-column v-if="this.departmentId===1"
+                </el-table-column>
-            prop="resourceCollectionNum"
+              <el-table-column
-            label="收藏量"
+                      prop="ywzj"
-            min-width="100%">
+                      label="业务能力组件"
-        </el-table-column>
+                      min-width="100%">
-        <el-table-column v-if="this.choseId===0 && this.departmentId===1 "
+            </el-table-column>
-            prop="resourceVisits"
+            </el-table-column>
-            label="被调用总数"
+            <el-table-column
-            min-width="100%">
+                prop="yyzy"
-        </el-table-column>
+                label="应用资源"
-        <el-table-column v-if="this.choseId===0 && this.departmentId===1 "
+                min-width="100%">
-            prop="resourceRelNum"
+            </el-table-column>
-            label="被应用总数"
+            <el-table-column
-            min-width="100%">
+                prop="zj"
-        </el-table-column>
+                label="总计"
-        <el-table-column v-if="this.choseId===0 && this.departmentId===1 "
+                min-width="100%">
-            prop="resourceShareNum"
+            </el-table-column>
-            label="需申请数量"
+         </el-table>
-            min-width="100%">
+        <!--明细表-->
-        </el-table-column>
+        
-        <el-table-column v-if="this.choseId===0 && this.departmentId===1 "
+    <el-table
-            prop="resourceShareNonNum"
+      :data="tableData"
-            label="免批数量"
+      style="width: 100%"
-            min-width="100%">
+      v-show='this.departmentId===3 ||this.departmentId===4'
-        </el-table-column>
+      >
-        <el-table-column v-if="this.departmentId===2"
+      <el-table-column
-            prop="resourceUseNum"
+        prop="deptName"
-            label="使用总数"
+        label="部门"
-            min-width="100%">
+        width="180">
-        </el-table-column>
+      </el-table-column>
-        <el-table-column v-if="this.departmentId===2"
+      <el-table-column
-            prop="resourceCallNum"
+        prop="resourceName"
-            label="申请总数"
+        label="资源名称"
-            min-width="100%">
+        width="180">
-        </el-table-column>
+      </el-table-column>
-        <el-table-column
+      <el-table-column
-            label="操作"
+        prop="type"
-            min-width="92%">
+        label="类型">
-        <template slot-scope="scope">
+      </el-table-column>
-            <el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button>
+      <el-table-column
-        </template>
+        prop="createDate"
-        </el-table-column>
+        label="日期">
+      </el-table-column>
+      <el-table-column
+        prop="approveStatus"
+        label="状态">
+      </el-table-column>
     </el-table>
     <div class="block">
     <el-pagination
@@ -130,6 +216,7 @@
 import componentServices from './componentServices.vue'
 import applicationResources from './applicationResources.vue'
 import ComponentUsed from './componentUsed.vue'
+import { mapState } from 'vuex'
 export default {
   components: { componentServices, applicationResources, ComponentUsed },
   data () {
@@ -187,14 +274,44 @@ export default {
       titleList: [
         { name: '组件服务', key: 1 }, { name: '应用资源', key: 2 }, { name: '基础设施', key: 3 }, { name: '数据资源', key: 3 }, { name: '知识库', key: 3 }
       ],
-      tableData: [{ deptName: '部门', resourceNum: 222 }]
+      tableData: [{ deptName: '部门', resourceNum: 222 }],
+      tableData2: [{ approveStatus: '', createDate: '' ,deptName:'',resourceName:'',type:''}],
+        examineStatus: '0',//审核状态
+       value1:[],//起始时间
+       abilityDepartment:"",//部门
+       abilityType:"",//能力
+       beginTime: '',//开始时间
+       endTime: '',//结束时间
+       typeOptions:[
+        { name: '智能算法', value: 1 },
+        { name: '图层服务', value: 2 }, 
+        { name: '通用开发组件', value: 3 }, 
+        { name: '页面开发组件', value: 4 }, 
+        { name: '应用资源', value: 5 }],//类型备选列表
+        detailFlag:true,//明细返回按钮显示标志位
+        startDate:"",//开始时间
+        endDate:"" // 结束时间
     }
   },
   created () {
-
+ //当前设定的日期时间
+      let d = new Date
+      let year1,month1,day1;
+      [year1,month1,day1] = [d.getFullYear(),d.getMonth(),d.getDate()]
+      let date1 = new Date(year1, month1, day1,7)
+      this.value1.push(date1)
+      //前一天设定的日期时间
+      let year2,month2,day2
+      d.setTime(d.getTime()-24*60*60*1000);
+      [year2,month2,day2] = [d.getFullYear(),d.getMonth(),d.getDate()]
+      let date2 = new Date(year2,month2,day2,7)
+      this.value1.unshift(date2)
   },
   mounted () {
     this.getFirstTree()
+  },
+     computed: {
+    ...mapState(['departmentSelects'])
   },
   methods: {
     // 搜索框
@@ -241,44 +358,144 @@ export default {
     //     })
     //     },
 
-    // 组件服务部门发布情况
+    // 组件服务部门发布情况--改为能力上架统计
     getFirstTree (page) {
-      this.$http.get('/census/center/v3/resourceReleaseDetails/', {
+      this.$http.get('/census/center/selectDeptDetailTypeCountList/', {
         params: {
           page: page || 1,
           limit: 5,
-          // id:'1067246875800000066',
+          approveStatus: this.examineStatus,
-          resourceType: '组件服务'
+          deptId: this.abilityDepartment,
+          params: '',
+          startDate:this.startDate,
+          endDate:this.endDate
         }
       }).then(res => {
-        this.tableData = res.data.data.list
+        let result= res.data.data
+        for(let i=0;i<result.length;i++){
+               if(!result[i].hasOwnProperty('yyzy') ){
+                 result[i].yyzy= 0
+               }
+          if(!result[i].hasOwnProperty('kfzj') ){
+            result[i].kfzj= 0
+          }
+          if(!result[i].hasOwnProperty('znsf') ){
+            result[i].znsf= 0
+          }
+          if(!result[i].hasOwnProperty('tcfw') ){
+            result[i].tcfw= 0
+          }
+          if(!result[i].hasOwnProperty('ywzj') ){
+            result[i].ywzj= 0
+          }
+          result[i].zj=parseInt(result[i].yyzy)+ parseInt(result[i].kfzj)+parseInt(result[i].znsf)+parseInt(result[i].ywzj)+parseInt(result[i].tcfw)
+        }
+        this.tableData = res.data.data
         this.total = res.data.data.total
       })
     },
-    // 组件服务部门使用情况列表
+    // 组件服务部门使用情况列表-改为能力使用统计
     getSecondTree () {
-      this.$http.get('/census/center/v3/resourceUsedDetails/', {
+      this.$http.get('/census/center/selectApplyDeptDetailTypeCountList/', {
         params: {
+         // page: page || 1,
           limit: 5,
-          page: 1,
+          approveStatus:this.examineStatus,
-          // id:'1067246875800000064',
+          deptId: this.abilityDepartment,
-          resourceType: '组件服务'
+          params: '',
+          startDate:this.startDate,
+          endDate:this.endDate
         }
       }).then(res => {
-        this.tableData = res.data.data.list
+        let result= res.data.data
+        for(let i=0;i<result.length;i++){
+          if(!result[i].hasOwnProperty('yyzy') ){
+            result[i].yyzy= 0
+          }
+          if(!result[i].hasOwnProperty('kfzj') ){
+            result[i].kfzj= 0
+          }
+          if(!result[i].hasOwnProperty('znsf') ){
+            result[i].znsf= 0
+          }
+          if(!result[i].hasOwnProperty('tcfw') ){
+            result[i].tcfw= 0
+          }
+          if(!result[i].hasOwnProperty('ywzj') ){
+            result[i].ywzj= 0
+          }
+          result[i].zj=parseInt(result[i].yyzy)+ parseInt(result[i].kfzj)+parseInt(result[i].znsf)+parseInt(result[i].ywzj)+parseInt(result[i].tcfw)
+        }
+        this.tableData = res.data.data
+        this.total = res.data.data.total
       })
     },
-    // 应用资源部门发布情况列表
+    // 能力上架明细
-    getReleaseTree (page) {
+    getOneDetail (page) {
-      this.$http.get('/census/center/v3/resourceReleaseDetails/', {
+      this.$http.get('/census/center/selectCensusResourceTable/', {
         params: {
           limit: 5,
-          page: page || 1,
+         // page: page || 1,
-          // id:'1067246875800000066',
+          approveStatus: this.examineStatus,
-          resourceType: '应用资源'
+          deptId: this.abilityDepartment,
+          params: '',
+          startDate:this.startDate,
+          endDate:this.endDate
         }
       }).then(res => {
-        this.tableData = res.data.data.list
+        console.log('111111',this.tableData,res.data.data)
+        this.tableData = res.data.data
+        this.total = res.data.data.total
+      })
+    },
+    // 能力使用明细
+    getTwoDetail (page) {
+      this.$http.get('/census/center/selectCensusApplyTable/', {
+        params: {
+          limit: 5,
+          // page: page || 1,
+          approveStatus: this.examineStatus,
+          deptId: this.abilityDepartment,
+          params: '',
+          startDate:this.startDate,
+          endDate:this.endDate
+        }
+      }).then(res => {
+        this.tableData = res.data.data
+        this.total = res.data.data.total
+      })
+    },
+    getReleaseTree (page) {
+      this.$http.get('/census/center/selectApplyDeptDetailTypeCountList/', {
+        params: {
+          limit: 5,
+          // page: page || 1,
+          approveStatus: '',
+          deptId: '',
+          params: '',
+          startDate: ''
+        }
+      }).then(res => {
+        let result= res.data.data
+        for(let i=0;i<result.length;i++){
+          if(!result[i].hasOwnProperty('yyzy') ){
+            result[i].yyzy= 0
+          }
+          if(!result[i].hasOwnProperty('kfzj') ){
+            result[i].kfzj= 0
+          }
+          if(!result[i].hasOwnProperty('znsf') ){
+            result[i].znsf= 0
+          }
+          if(!result[i].hasOwnProperty('tcfw') ){
+            result[i].tcfw= 0
+          }
+          if(!result[i].hasOwnProperty('ywzj') ){
+            result[i].ywzj= 0
+          }
+          result[i].zj=parseInt(result[i].yyzy)+ parseInt(result[i].kfzj)+parseInt(result[i].znsf)+parseInt(result[i].ywzj)+parseInt(result[i].tcfw)
+        }
+        this.tableData = res.data.data
         this.total = res.data.data.total
       })
     },
@@ -336,15 +553,34 @@ export default {
       this.departmentId = index
       if (index === 1) {
         if (this.choseId === 0) {
+          if(!this.detailFlag){
+            this.detailFlag = !this.detailFlag;
+          }
           this.getFirstTree()
         } else if (this.choseId === 1) {
-          this.getReleaseTree()
+          //this.getReleaseTree()
         }
       } else if (index === 2) {
         if (this.choseId === 0) {
+          if(!this.detailFlag){
+            this.detailFlag = !this.detailFlag;
+          }
           this.getSecondTree()
         } else {
-          this.getUsedTree()
+          //this.getUsedTree()
+        }
+      }
+      else if (index === 3) {
+        if (this.choseId === 0) {
+          this.getOneDetail()
+        } else {
+          //this.getUsedTree()
+        }
+      }  else if (index === 4) {
+        if (this.choseId === 0) {
+          this.getTwoDetail()
+        } else {
+         // this.getUsedTree()
         }
       }
     },
@@ -366,6 +602,148 @@ export default {
       this.homeIsShow = true
       this.resourcesIsShow = false
       this.handleCurrentChange(1)
+    },
+    //明细按钮函数//明细按钮函数//明细按钮函数//明细按钮函数//明细按钮函数//明细按钮函数
+    goToDetail(){
+      this.detailFlag = !this.detailFlag;
+      if(this.departmentId===1){
+       this.handleChose(3);
+       //this.departmentId = 1;
+      }else if(this.departmentId===2){
+       this.handleChose(4);
+       //this.departmentId = 2;
+      }else{
+
+      }
+    },
+    //返回按钮
+    goToBack(){
+      //departmentId 1，3  2，4 两个值共同判断
+      this.detailFlag = !this.detailFlag;
+      if(this.departmentId===3){
+       this.handleChose(1);
+       //this.departmentId = 1;
+      }else if(this.departmentId===4){
+       this.handleChose(2);
+       //this.departmentId = 2;
+      }else{
+
+      }
+    },
+    //点击查询按钮查询数据
+    getDataList(){
+      if(this.value1.length >0){
+        this.startDate = this.handleTime(this.value1[0], 'yyyy-MM-dd HH:mm:ss');
+        this.endDate = this.handleTime(this.value1[1], 'yyyy-MM-dd HH:mm:ss');
+      }
+      if(this.examineStatus == 0){
+        this.examineStatus = "审核中";
+      }else{
+          this.examineStatus = "审核完成";
+      }
+
+      if( this.abilityDepartment){
+        this.abilityDepartment = this.abilityDepartment
+      } else {
+        this.abilityDepartment = "全部";
+      }
+
+      if(this.abilityType){
+       this.abilityType = this.abilityType;
+      } else {
+        this.abilityType = "全部";
+      }
+      console.log('查询参数开始时间1',this.startDate);
+      console.log('查询参数结束时间2',this.endDate);
+      console.log('查询参数审核状态',this.examineStatus);
+      console.log('查询参数部门',this.abilityDepartment);
+      console.log('查询参数类型',this.abilityType);
+      if(this.departmentId===1){
+        if(this.detailFlag){
+          this.handleChose(3);
+          this.detailFlag = !this.detailFlag;
+        }else {
+          this.handleChose(1);
+          this.detailFlag = !this.detailFlag;
+        }
+       //this.departmentId = 1;
+      }else if(this.departmentId===2){
+        if(this.detailFlag){
+           this.handleChose(4);
+           this.detailFlag = !this.detailFlag;
+        }else {
+           this.handleChose(2);
+           this.detailFlag = !this.detailFlag;
+        }
+      } else if(this.departmentId===3){
+           this.handleChose(3);
+       } else {
+           this.handleChose(4);
+       }
+    
+    },
+    //重置按钮查询数据
+    resetDataList(){
+      this.startDate = "";
+      this.endDate="";
+      this.examineStatus = "审核中";
+      this.abilityDepartment = "全部";
+      this.abilityType ="全部";
+       if(this.departmentId===1){
+        if(this.detailFlag){
+          this.handleChose(3);
+          this.detailFlag = !this.detailFlag;
+        }else {
+          this.handleChose(1);
+          this.detailFlag = !this.detailFlag;
+        }
+       //this.departmentId = 1;
+      }else if(this.departmentId===2){
+        if(this.detailFlag){
+           this.handleChose(4);
+           this.detailFlag = !this.detailFlag;
+        }else {
+           this.handleChose(2);
+           this.detailFlag = !this.detailFlag;
+        }
+      }else if(this.departmentId===3){
+           this.handleChose(3);
+       } else {
+           this.handleChose(4);
+       }
+     
+    },
+     // 定义格式化函数：
+    handleTime (time, format) {
+      if (time == null || time == undefined || time == '') {
+        return ''
+      }
+      var t = new Date(time)
+      var tf = function (i) {
+        return (i < 10 ? '0' : '') + i
+      }
+      return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
+        switch (a) {
+          case 'yyyy':
+            return tf(t.getFullYear())
+            break
+          case 'MM':
+            return tf(t.getMonth() + 1)
+            break
+          case 'mm':
+            return tf(t.getMinutes())
+            break
+          case 'dd':
+            return tf(t.getDate())
+            break
+          case 'HH':
+            return tf(t.getHours())
+            break
+          case 'ss':
+            return tf(t.getSeconds())
+            break
+        }
+      })
     }
   }
 
@@ -374,6 +752,7 @@ export default {
 <style lang="scss" scoped>
 .container {
   display: flex;
+  flex-direction: column;
 }
 .container-left {
   width: 250px;
@@ -464,6 +843,18 @@ input::placeholder {
   font-size: 14px;
   color: #979eb9;
   cursor: pointer;
+  .detail-button{
+   width: 60px;
+    height: 30px;
+    right: 60px;
+    background-color: #0058e1;
+    position: absolute;
+    text-align: center;
+    line-height: 30px;
+    margin-top: -20px;
+    border-radius: 2px;
+    color: #fff;
+  }
 }
 .line-style {
   width: 100%;

front/src/views/newHome/components/WorkDynamics.vue

@@ -55,11 +55,11 @@
     <div class="fixedmount">
       <div @click="applyResource()">
         <p></p>
-        <p>资源申请</p>
+        <p>能力申请</p>
       </div>
       <div @click="toView()">
         <p></p>
-        <p>需求申请</p>
+        <p>新需求</p>
       </div>
       <div @click="showModal">
         <p></p>
@@ -320,7 +320,7 @@
     router.push({
       path: '/DetailsPageconetent',
       query: {
-        select: "基础设施",
+        select: '基础设施',
       },
     })
   }
@@ -592,11 +592,11 @@
   }
 
   .fixedmount {
-    height: 2.4rem;
+    height: 3rem;
     display: flex;
     position: fixed;
     bottom: 1.56rem;
-    right: 1.9rem;
+    right: 0rem;
     z-index: 10;
     flex-direction: column;
     justify-content: space-between;
@@ -604,50 +604,52 @@
   }
 
   .fixedmount div {
-    width: 0.7rem;
+    width: 0.96rem;
-    height: 0.7rem;
+    height: 0.96rem;
-    border-radius: 0.04rem;
+    // border-radius: 0.04rem;
-    border: 0.01rem #94aac9 solid;
+    // border: 0.01rem #94aac9 solid;
     display: flex;
     flex-direction: column;
     // justify-content: center;
     align-items: center;
-    padding-top: 0.13rem;
+    padding-top: 0.16rem;
+    margin-bottom: 2px;
     position: relative;
     cursor: pointer;
-    background: #e3edfc;
+    // background: #e3edfc;
+    background: url('~@/assets/home/bg-right.png');
   }
 
   .fixedmount div p:nth-child(2) {
     position: absolute;
     bottom: 0rem;
-    height: 0.14rem;
+    height: 0.2rem;
-    font-size: 0.14rem;
+    font-size: 0.2rem;
-    line-height: 0.14rem;
+    line-height: 0.2rem;
-    color: #000000;
+    color: #fff;
     // margin-top: .08rem;
   }
 
   .fixedmount div:nth-child(1) p:nth-child(1) {
-    height: 0.24rem;
+    height: 0.32rem;
-    width: 0.24rem;
+    width: 0.32rem;
     //background: url('~@/assets/home/shenqing.png') no-repeat;
-    background: url('~@/assets/newHome/banner-yy.png') no-repeat;
+    background: url('~@/assets/home/sq.png') no-repeat;
     background-size: contain;
     background-position: center;
   }
 
   .fixedmount div:nth-child(2) p:nth-child(1) {
-    height: 0.24rem;
+    height: 0.32rem;
-    width: 0.24rem;
+    width: 0.32rem;
-    background: url('~@/assets/home/shangjia.png') no-repeat;
+    background: url('~@/assets/home/xq.png') no-repeat;
     background-size: contain;
     background-position: center;
   }
   .fixedmount div:nth-child(3) p:nth-child(1) {
-    height: 0.24rem;
+    height: 0.32rem;
-    width: 0.24rem;
+    width: 0.32rem;
-    background: url('~@/assets/home/abilitysquare.png') no-repeat;
+    background: url('~@/assets/home/sj.png') no-repeat;
     background-size: 140% 126%;
     background-position: center;
   }