测试

src/views/ebiz/institutionalPerform/InstitutionalManpower/index1.vue

@@ -0,0 +1,363 @@
+<template>
+  <div v-cloak class="container">
+    <!-- <van-nav-bar left-text="机构业绩" left-arrow @click-left="onBack">
+      <template #right>
+        <img @click="getlComPremDetil" :src="refreshLogo" />
+      </template> -->
+    </van-nav-bar>
+    <!-- 业绩和人力 -->
+    <van-tabs @click="onClickMain" v-model="active" type="card" class="p0 title">
+      <van-tab title="机构业绩排名"></van-tab>
+      <van-tab title="机构人力排名"></van-tab>
+    </van-tabs>
+    <Selectors @getDateVal="getDateVal" @getSortType="getSortType" :queryColumns="queryColumns"></Selectors>
+    <div class="layer-box">
+      <div class="layer">
+        <table class="fs14" style="table-layout:fixed;padding-left: 4.1em;">
+          <tr class="title">
+            <th class="td-1" style="height: 1.3em;">排名</th>
+            <th class="td-2">机构</th>
+            <th>{{ queryColumns[0] }}</th>
+            <th>{{ queryColumns[1] }}</th>
+            <th>{{ queryColumns[2] }}</th>
+            <!-- <th>{{ queryColumns[3] }}</th> -->
+            <th>{{ queryColumns[3] }}</th>
+            <th>{{ queryColumns[4] }}</th>
+            <th v-if="manageLv != '07'">操作</th>
+          </tr>
+          <tr >
+            <td class="td-1 white" style="width:3.2em;height: 1.3em;">1</td>
+            <td class="td-2">合计</td>
+            <td>{{ items[0] }}</td>
+            <td>{{ items[1] }}</td>
+            <td>{{ items[2] }}</td>
+            <td>{{ items[3] }}</td>
+            <td>{{ items[4] }}</td>
+          </tr>
+          <tr v-for="(item, index) in tableData" :key="index">
+            <td class="td-1"><div>{{ index + 1 }}</div></td>
+            <td >
+              <div style="width:10em">{{ item.name }}</div>
+            </td>
+            <td>{{ item.hdrl }}</td>
+            <td>{{ item.hgrl }}</td>
+            <td>{{ item.ggrl }}</td>
+            <td>{{ item.xzrl }}</td>
+            <td>{{ item.zcrl }}</td>
+            <td v-if="manageLv != '07'">
+              <span  @click="toDetail(item.code)" class="red1">查看</span>
+            </td>
+          </tr>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import { XTable } from 'vux'
+import Selectors from '@/views/ebiz/institutionalPerform/InstitutionalManpower/components/Selectors'
+import util from '@/views/ebiz/institutionalPerform/InstitutionalManpower/components/js/util'
+import { branchOfficeApi } from '@/api/ebiz/branchOffice/branchOffice'
+
+import MinXin from '@/views/ebiz/institutionalPerform/InstitutionalManpower/components/js/mixins';
+import { Tabs, Tab } from 'vant'
+export default {
+  name: 'InstitutionalManpower',
+  components: {
+    Selectors,
+    [Tabs.name]: Tabs,
+    [Tab.name]: Tab
+  },
+   mixins: [MinXin],
+  data() {
+    return {
+      sortType: '1',
+      manageCode: '8645',
+      manageLv: '02',
+      tableData: [],
+      items: [],
+      bzbfTotol: 0,
+      queryColumns: ['活动人力', '合格人力', '桂冠人力', '新增人力','在册人力'],
+      active: 1,
+      // 当前的机构编码
+      curCode: '',
+      dateType: 'm',
+      dateVal: '',
+      curTab: '',
+      shitimeVal: '',
+      curMainType: '02'
+    }
+  },
+  watch: {
+     '$route' (to, from) {
+    this.reload()
+    },
+    tableData(value) {
+      if (value.length == 0) {
+     this.items=[]
+        this.queryColumns.forEach(() => {
+         
+          this.items.push('0')
+        })
+      } else {
+        let sum1 = 0
+        let sum2 = 0
+        let sum3 = 0
+        let sum4 = 0
+        let sum5 = 0
+        this.tableData.forEach(item => {
+          sum1 = Number(sum1) + Number(item.hdrl)
+          sum2 = Number(sum2) + Number(item.hgrl)
+          sum3 = Number(sum3) + Number(item.ggrl)
+          sum4 = Number(sum4) + Number(item.xzrl)
+          sum5 = Number(sum5) + Number(item.zcrl)
+          this.items = [sum1, sum2, sum3, sum4,sum5]
+        })
+        this.items = this.items.map(item => {
+          return item
+        })
+      }
+    }
+  },
+  methods: {
+    reload () {
+      this.manageLv=this.$route.params.manageLv;
+    this.manageCode=this.$route.params.manageCode
+  
+    this.getlComPremDetil()
+    },
+    formatterYear(type, val) {
+      if (type === 'year') {
+        return val + '年'
+      }
+      return val
+    },
+
+    onClickMain(name) {
+      if (name == 0) {
+        //this.curMainType = '02'
+        this.$router.push({
+          path: '/institutionalPerform/UnderOffice'
+        })
+      } 
+     
+    },
+
+    toDetail(manageCode) {
+     
+    
+      let manageLv = '0' + (Number(this.manageLv) + 1)
+      // this.manageCode = manageCode
+       console.log(`/institutionalPerform/institutionalManpower/${manageLv}/${manageCode}`)
+      
+       this.$router.push(`/institutionalPerform/institutionalManpower/${manageLv}/${manageCode}`) ;
+         this.manageLv=this.$route.params.manageLv;
+    this.manageCode=this.$route.params.manageCode
+    console.log('this.manageLv',this.manageLv)
+    this.getlComPremDetil()
+       
+    },
+
+    getCurrentDate() {
+      var timeStr = ''
+      var curDate = new Date()
+      var curMonth = curDate.getMonth() + 1 //获取当前月份(0-11,0代表1月)
+      var curDay = curDate.getDate() //获取当前日(1-31)
+
+      var curHour = curDate.getHours() //获取当前小时数(0-23)
+      var curMinute = curDate.getMinutes() // 获取当前分钟数(0-59)
+      var curSec = curDate.getSeconds() //获取当前秒数(0-59)
+      if (curHour < 10) {
+        if (curMinute < 10) {
+          timeStr += ' 0' + curHour + ':0' + curMinute
+        } else {
+          timeStr += ' 0' + curHour + ':' + curMinute
+        }
+      } else {
+        if (curMinute < 10) {
+          timeStr += ' ' + curHour + ':0' + curMinute
+        } else {
+          timeStr += ' ' + curHour + ':' + curMinute
+        }
+      }
+      // 一直在获取时间
+      this.shitimeVal = this.add0(curMonth) + '-' + this.add0(curDay) + timeStr
+      // 存页面上值得一个变量
+      this.timeVal = this.shitimeVal
+    },
+
+    onBack() {
+      this.$router.go(-1)
+    },
+    getSortType(value) {
+      console.log(value, 'value')
+      this.sortType = value.toString()
+     
+      this.getlComPremDetil()
+    },
+    getDateVal(value) {
+      this.dateVal = value
+     
+      this.getlComPremDetil()
+    },
+    //获取列表
+    getlComPremDetil() {
+      let $this = this
+      let data = {
+        manageLv: this.manageLv,
+        manageCode: this.manageCode,
+        sortType: this.sortType,
+        queryType: 'm',
+        date: this.dateVal, // 2020-07-31
+        type: '02'
+      }
+      // 去除对象里面是空的属性
+      for (var key in data) {
+        if (data[key] === '') {
+          delete data[key]
+        }
+      }
+      branchOfficeApi(data)
+        .then(res => {
+          if (res.result == 0) {
+            //console.log(res.content.list)
+            $this.tableData = res.content.listRL
+          }
+        })
+        .catch(err => {})
+    },
+       
+  },
+
+  mounted() {
+    //  this.timeVal=this.$route.query.timeVal||""
+    //  this.showText=this.$route.query.showText
+
+    // this.getCurrentDate()
+    // setInterval(this.getCurrentDate, 1000 * 60)
+
+    this.dateVal = util.getMonthLastDay()
+     this.reload()
+  }
+}
+</script>
+<style lang="scss">
+@import '@/assets/sass/variables.scss';
+.container {
+  .van-row{
+    line-height: 25px;
+  }
+   .van-tabs__nav--card .van-tab {
+    background-color: #fff;
+    border-right: 1px solid #fff;
+  }
+  .van-tabs__nav--card .van-tab.van-tab--active {
+    color: $red1;
+    background-color: #fff;
+  }
+  .van-tabs__nav--card .van-tab {
+    color: #232020;
+    background-color: #e6e6e6;
+    border-right: 1px solid #8e8d8d;
+      &:last-child {
+      border-right: none !important;
+    }
+
+  }
+  .van-nav-bar .van-icon,
+  .van-nav-bar__text {
+    color: #232020;
+  }
+  .slide-box {
+    display: -webkit-box;
+    overflow-x: scroll;
+    -webkit-overflow-scrolling: touch;
+  }
+  table.gridtable {
+    font-family: verdana, arial, sans-serif;
+    font-size: 11px;
+    color: #333333;
+    border-width: 1px;
+    border-color: #666666;
+    border-collapse: collapse;
+  }
+     table .title th {
+   
+    padding: 5px 10px;
+
+   
+  }
+    table td {
+     text-align: right;
+    padding:8px;
+   &:nth-child(2){
+     text-align: center;
+   }
+   
+  }
+  table .title th {
+    color: #fff;
+    padding: 5px 10px;
+
+    white-space: nowrap;
+    border-width: 1px;
+    border-color: #666666;
+    background-color: $red1;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+  }
+ 
+ 
+  table {
+    border: 0;
+  }
+  .title .van-tabs__nav--card {
+    margin: 0;
+    border: 1px solid #bdbdbd;
+    border-left: none;
+    border-right: none;
+  }
+  .title .van-tabs__nav--card .van-tab {
+    background-color: transparent;
+  }
+  // 固定表头
+  td,
+  th {
+    /* color: #333;
+            font-size: 14px;
+            border-right: 1px solid #333;
+            line-height: 30px; */
+    /* box-sizing: border-box; */
+    background: #fff;
+  }
+  .layer-box {
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+  }
+  .layer {
+    width: 100%;
+    overflow: hidden;
+    overflow-x: scroll;
+  }
+  .td-1 {
+    position: absolute;
+    padding: 2.13333vw;
+    left: 0;
+    z-index: 2;
+    width: 3em;
+    height: 2.57em;
+    div{
+      position: absolute;
+      transform: translate(-50%, -50%);
+    left: 50%;
+    top: 50%;
+    }
+  }
+    .td-2 {
+  
+  }
+}
+</style>