gxjh-ywtb/src/components/analysis-handle-situation/AnalysisHandleSituation.vue

<template>

  <div id="analysis-handle-situation"  class="block h100">
    <div class="black-title">
      <span class="header_info">提醒及督办情况</span>
      <span class="table_info">共有{{totalCount}}条记录</span>
    </div>
    <div  v-loading="loading"  element-loading-text="数据加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(3, 30, 57, 0.8)">
      <div class="time_content">
        <div class="time_content_title">
          <div class="single_content_title" v-for="(item,index) in timeList" :key="index" >
            <div class="single_content">
              <div :class="item.color"></div>
              <span class="circle_name">{{item.name}}</span>
            </div>
          </div>
        </div>
        <div v-if="analysisObject['analysisForthLevel']!=''"  class="first_list" :key="1">
<!--          <div v-if="analysisObject['analysisForthLevel']!=''"  @mouseenter="pauseTimer" @mouseleave="continueTimer" class="first_list" :key="1">-->
          <div v-if="situationList.length >0" ref="situation_list" class="list flex4">
            <ul ref="scroll-list">
              <li v-for="(item,index) in situationList" :key="index" class="item" :class="[item.chosen?'item_choose':'']">
                <span class="nameStatus"  @click="chooseStep(item.SITUATION_CODE)">{{item.NAME.slice(0,20)}}</span>
                <span class="circle_4 circle_width"></span>
                <span class="fr-countStatus" @click="chooseSingleSituation(item.SITUATION_CODE,'1','1')">{{ item.acceptRemind}}</span>
                <span class="circle_3 circle_width"></span>
                <span class="fr-countStatus" @click="chooseSingleSituation(item.SITUATION_CODE,'1','2')">{{ item.acceptUrge}}</span>
                <span class="circle_2 circle_width"></span>
                <span class="fr-countStatus" @click="chooseSingleSituation(item.SITUATION_CODE,'2','1')">{{ item.handleRemind}}</span>
                <span class="circle_1 circle_width"></span>
                <span class="fr-countStatus" @click="chooseSingleSituation(item.SITUATION_CODE,'2','2')">{{ item.handleUrge}}</span>
              </li>
            </ul>
          </div>
          <div v-else class="else_div">
            <span>暂无数据</span>
          </div>
        </div>

        <div v-if="analysisObject['analysisForthLevel']==''" class="first_list" :key="2">
          <div v-if="basicList.length >0" class="list flex4">
            <ul ref="scroll-list">
              <li v-for="item in basicList" :key="item.RN" class="item"   :class="[item.chosen?'item_choose':'']">
                <span class="nameStatus" @click="chooseBasicStep(item.MATTER_CODE)">{{item.NAME.slice(0,20)}}</span>

                <span class="circle_4 circle_width"></span>
                <span class="fr-countStatus" @click="chooseSingleMatter(item.MATTER_CODE,'1','1')">{{ item.acceptRemind}}</span>
                <span class="circle_3 circle_width"></span>
                <span class="fr-countStatus"  @click="chooseSingleMatter(item.MATTER_CODE,'1','2')">{{ item.acceptUrge}}</span>
                <span class="circle_2 circle_width"></span>
                <span class="fr-countStatus"  @click="chooseSingleMatter(item.MATTER_CODE,'2','1')">{{ item.handleRemind}}</span>
                <span class="circle_1 circle_width"></span>
                <span class="fr-countStatus"  @click="chooseSingleMatter(item.MATTER_CODE,'2','2')">{{ item.handleUrge}}</span>
              </li>
            </ul>
          </div>
          <div v-else class="else_div">
            <span>暂无数据</span>
          </div>
        </div>

      </div>

    </div>

  </div>
</template>

<script>
import {continueScroll, rescrollFun, scrollFun, stopScroll} from "@/scroll";
import{mapState,mapMutations} from 'vuex';
export default {
  name: "AnalysisHandleSituation",
  data(){
    return{
      loading: true,
      totalCount:0,
      timeList:[
        {
          id:'4',
          code:'sltx',
          color:'circle_4',
          name:'受理提醒',
        },
        {
          id:'3',
          code:'sldb',
          color:'circle_3',
          name:'受理督办',
        },
        {
          id:'2',
          code:'bjtx',
          color:'circle_2',
          name:'办结提醒',
        },
        {
          id:'1',
          code:'bjdb',
          color:'circle_1',
          name:'办结督办',
        },
      ],
      itemList:[],
      situationList:[],
      basicList:[],
    }
  },
  computed:{
    ...mapState({
      analysisObject:'analysis',
      reFresh:'analysisRefresh',
    })
  },
  mounted() {
    this.typeShow()
  },
  filters:{
    stateType(state){
      let obj = {
        '1':'网上申报',
        '2':'网上预审',
        '3':'收件',
        '4':'补正',
        '5':'受理',
        '6':'特别程序',
        '7':'决定',
        '8':'制发证',
        '9':'审查',
      }
      return obj[state]
    }
  },
  methods:{
    chooseSingleSituation(code,status,type){
      this.$router.push('/origion/handleSituation');
      this.handleSituationRefresh(false);
      this.$nextTick(() => {
        this.handleSituationSingleChange([
          {
            name:'handleSituationForthLevel',
            value:this.analysisObject['analysisForthLevel']
          },
          {
            name:'handleSituationFifthLevel',
            value:code
          },
          {
            name:'handleSituationSixthLevel',
            value:status
          },
          {
            name:'handleSituationSeventhLevel',
            value:type
          },
          {
            name:'handleSituationEighthLevel',
            value:''
          },
        ])
      })
    },
    chooseSingleMatter(code,status,type){
      this.$router.push('/origion/handleSituation');
      this.handleSituationRefresh(false);
      this.$nextTick(() => {
        this.handleSituationSingleChange([
          {
            name:'handleSituationForthLevel',
            value:code
          },
          {
            name:'handleSituationFifthLevel',
            value:''
          },
          {
            name:'handleSituationSixthLevel',
            value:status
          },
          {
            name:'handleSituationSeventhLevel',
            value:type
          },
          {
            name:'handleSituationEighthLevel',
            value:''
          },
        ])
      })
    },
    chooseBasicStep(index){
      for(let i=0;i<this.basicList.length;i++){
        if(index  == this.basicList[i].MATTER_CODE){
          this.basicList[i].chosen = true;
        }else{
          this.basicList[i].chosen = false;
        }
      }
      this.analysisSingleChange([
        {
          name:'analysisForthLevel',
          value:index
        },
        {
          name:'analysisFifthLevel',
          value:''
        },
      ])
    },
    chooseStep(index){
      for(let i=0;i<this.situationList.length;i++){
        if(index  == this.situationList[i].SITUATION_CODE){
          this.situationList[i].chosen = true;
        }else{
          this.situationList[i].chosen = false;
        }
      }
      this.analysisSingleChange([
        {
          name:'analysisFifthLevel',
          value:index
        },
      ])
     // this.analysisFifthLevel(index);
    },
    chooseStepOrigion(index){
      for(let i=0;i<this.situationList.length;i++){
        if(index  == this.situationList[i].SITUATION_CODE){
          this.stopHight(i);
          this.situationList[i].chosen = true;
        }else{
          this.situationList[i].chosen = false;
        }
      }
      // this.analysisFifthLevel(index);
    },
    typeShow(){
      if(this.analysisObject['analysisForthLevel']==''){
        this.basicShow();
      }else if(this.analysisObject['analysisForthLevel']!=''){
        this.situationShow();
      }
    },
    basicShow(){
      this.loading=true;
      this.$request({
        url:'/YWTBApi/queryRemindInfoListOneLevel',
        method:'post',
        data:{
          "DATA_TYPE":this.analysisObject['analysisFirstLevel'],
          "ORGANIZATION":this.analysisObject['analysisSecondLevel'],
          'TYPE':this.analysisObject['analysisThirdLevel'],
          "UNIT_NAME":this.analysisObject['analysisUnit'],
          "SORT_FIELD":this.analysisObject['analysisUrgeType'],
          //'DAY_COUNT':this.dayCount
        }
      }).then(response => {
        let dataArr = response.data.msg[0].Rows
        if(dataArr.length > 0){
          this.basicList = [];
          for(let i=0;i<dataArr.length;i++){
            let tempdata = {
              NAME: dataArr[i].NAME,  //事项名称
              handleUrge: dataArr[i].BJ_DB!=undefined?dataArr[i].BJ_DB.toString():'0', //办结督办
              handleRemind: dataArr[i].BJ_TX!=undefined?dataArr[i].BJ_TX.toString():'0', //办结提醒
              acceptUrge: dataArr[i].SL_DB!=undefined?dataArr[i].SL_DB.toString():'0', //受理督办
              acceptRemind: dataArr[i].SL_TX!=undefined?dataArr[i].SL_TX.toString():'0',  //受理提醒
              MATTER_CODE: dataArr[i].MATTER_CODE,
              chosen:false,
            }
            this.basicList.push(tempdata);
          }
          this.totalCount = response.data.msg[0].TotalRowCount;
        }else{
          this.basicList = [];
          this.totalCount =0;
        }
        this.$nextTick(() => {
          this.loading=false;
          // this.stopTimer();
          // if(this.basicList.length > 0){
          //   this.startTimer()
          // }
        })
      })
    },
    itemShow(){
      this.loading=true;
      this.$request({
        url:'/YWTBApi/queryBanjianListGroupMatterCode',
        //url:'/YWTBApi/queryBanjianListGroupMatterCode',
        method:'post',
        data:{
          "ORGANIZATION":this.analysisObject['analysisSecondLevel'],
          'TYPE':this.analysisObject['analysisThirdLevel'],
          'MATTER_CODE':this.analysisObject['analysisForthLevel'],
          'DAY_COUNT':this.analysisObject['analysisTimer'],
        }
      }).then(response => {
        let dataArr = response.data.msg[0].Rows
        if(dataArr.length > 0){
          this.itemList = [];
          for(let i=0;i<dataArr.length;i++){
            if(dataArr[i].NAME!=undefined){
              this.itemList.push(dataArr[i]);
            }
          }
          this.totalCount = response.data.msg[0].TotalRowCount;
        }else{
          this.itemList = [];
          this.totalCount = 0;
        }
        this.$nextTick(() => {
          this.loading=false;
          // this.stopTimer();
          // if(this.itemList.length > 0){
          //   this.startTimer()
          // }
        })
      })
    },
    situationShow(){
      this.loading=true;
      this.$request({
        url:'/YWTBApi/queryRemindInfoListTwoLevel',
        method:'post',
        data:{
          // 'ORGANIZATION':this.secondLevel,
          // 'TYPE':this.thirdLevel,
          'MATTER_CODE':this.analysisObject['analysisForthLevel'],
          // 'DAY_COUNT':this.dayCount
        }
      }).then(response => {
        let dataArr = response.data.msg[0].Rows
        if(dataArr.length > 0){
          this.situationList = [];
          for(let i=0;i<dataArr.length;i++){
            let tempdata = {
              NAME: dataArr[i].SITUATION,  //事项名称
              handleUrge: dataArr[i].BD!=undefined?dataArr[i].BD.toString():'0', //办结督办
              handleRemind: dataArr[i].BT!=undefined?dataArr[i].BT.toString():'0', //办结提醒
              acceptUrge: dataArr[i].SD!=undefined?dataArr[i].SD.toString():'0', //受理督办
              acceptRemind: dataArr[i].ST!=undefined?dataArr[i].ST.toString():'0',  //受理提醒
              SITUATION_CODE: dataArr[i].SITUATION_CODE,
              chosen:false,
            }
            this.situationList.push(tempdata);
          }
          this.totalCount = response.data.msg[0].TotalRowCount;
        }else{
          this.situationList = [];
          this.totalCount = 0;
        }
        this.$nextTick(() => {
          if(this.analysisObject['analysisFifthLevel']!=''){
            this.chooseStepOrigion(this.analysisObject['analysisFifthLevel']);
          }
          this.loading=false;
          // this.stopTimer();
          // if(this.situationList.length > 0){
          //   this.startTimer()
          // }
        })
      })
    },
    stopHight(index) {
      // 拿到表格挂载后的真实DOM
      const table = this.$refs['situation_list'];
      // 拿到表格中承载数据的div元素
      //const divData = table.clientHeight;
      // 拿到元素后，对元素进行增加距离顶部距离，实现滚动效果
      // 元素自增距离顶部像素
      // divData.scrollTop += this.rollPx;
      // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
      this.$nextTick(() => {
        table.scrollTop = (index) * 36;
      })
    },
    startTimer(){
      if(this.$refs['scroll-list'].clientHeight * 1 > this.$refs['scroll-list'].parentElement.clientHeight * 1) {
        scrollFun(this.$refs['scroll-list'], 'top', -this.$refs['scroll-list'].clientHeight + this.$refs['scroll-list'].parentElement.clientHeight)
      }
    },
    stopTimer(){
      if(this.$refs['scroll-list']!=undefined)
        rescrollFun(this.$refs['scroll-list'],'top')
    },
    pauseTimer(){
      if(this.$refs['scroll-list']!=undefined)
        stopScroll(this.$refs['scroll-list'].timer)
    },
    continueTimer(){
      if(this.$refs['scroll-list'].clientHeight * 1 > this.$refs['scroll-list'].parentElement.clientHeight * 1) {
        continueScroll(this.$refs['scroll-list'], 'top', -this.$refs['scroll-list'].clientHeight + this.$refs['scroll-list'].parentElement.clientHeight)
      }
    },
    ...mapMutations(['analysis','analysisRefresh','analysisSingleChange','handleSituation','handleSituationRefresh','handleSituationSingleChange'])
  },
  watch: {
    analysisObject(){
      this.typeShow()
     // this.chooseStepOrigion(val['analysisFifthLevel']);
    },
  }
}
</script>

<style scoped lang="scss">
#analysis-handle-situation{
  .black-title{
    height: 32px;
    display: flex;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    justify-content: flex-end;
    align-items: center;
    .header_info{

      width: 40%;
      display: flex;
      align-items: center;
      justify-content:center;
    }
    .table_info{
      width:30%;
      font-size: 12px;
      font-weight: normal;
      display: flex;
      align-items:flex-end;
      justify-content:flex-end;
    }
  }
  .time_content{
    padding-top: 5px;
    width: 100%;
    height:100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .time_content_title{
      width: 100%;
      height: 15%;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
      .table_info{
        padding: 8px 10px 4px;
        color: #fff;
      }
      .single_content_title{
        width: 13%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .single_content{
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;

          .circle_name{
            color: #FFF;
            font-size: 12px;
          }
        }
      }
    }
    .first_list{
      width: 100%;
      height: 100%;
    }

  }
  ul{
    width: 100%;
    position: absolute;
    cursor: pointer;
    .item_choose{
      color: #fdbf00;
    }
    li{

      padding-left: 10px;
      padding-right: 10px;
      color: #fff;
      height: 40px;
      line-height: 40px;
      .nameStatus{
        width: 56%;
        float: left;
        margin-right: 15px;
      }
      .fr-typeStatus{
        width: 7%;
        float: right;
        margin-right: 20px;
      }
      .fr-countStatus{
        width: 6%;
        float: left;
        margin-right: 10px;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
      }
      .name{
        margin-right: 6px;
      }
      &:nth-child(2n+1){
        background:linear-gradient(to right,#093972, #093972);
      }
    }
    li:hover{
      color: #fdbf00;
    }
  }
  .else_div{
    padding-top: 50px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    span{
      color: #00d8ff;
    }
  }
  .circle_1{
    background-color: #eca378;
    width: 5px;
    height: 5px;
    border-radius: 2.5px;
    margin-right: 5px;
  }
  .circle_2{
    background-color: #b5d571;
    width: 5px;
    height: 5px;
    border-radius: 2.5px;
    margin-right: 5px;
  }
  .circle_3{
    background-color: #7ec6f6;
    width: 5px;
    height: 5px;
    border-radius: 2.5px;
    margin-right: 5px;
  }
  .circle_4{
    background-color: #e60114;
    width: 5px;
    height: 5px;
    border-radius: 2.5px;
    margin-right: 5px;
  }
  .circle_5{
    background-color: #e3620a;
    width: 5px;
    height: 5px;
    border-radius: 2.5px;
    margin-right: 5px;
  }
  .circle_6{
    background-color: #f9fc01;
    width: 5px;
    height: 5px;
    border-radius: 2.5px;
    margin-right: 5px;
  }
  .circle_7{
    background-color: #63c2a2;
    width: 5px;
    height: 5px;
    border-radius: 2.5px;
    margin-right: 5px;
  }
  .circle_width{
    float:left;
    margin-top: 18px;
  }
}

</style>