gxjh-ywtb/src/views/handle_situation/HandleSituation.vue

<template>
<div id="handleSituation">
  <div class="left">
        <span class="singleButton top_button">
          <span class="little_span" :class="[unitList[0].chosen?'little_active':'']" @click="unitChange(unitList[0].code)">{{unitList[0].name}}</span>
        </span>
    <span class="singleButton middle_button">
          <span class="little_span" :class="[unitList[1].chosen?'little_active':'']" @click="unitChange(unitList[1].code)">{{unitList[1].name}}</span>
        </span>
  </div>

  <div class="right">
    <div class="right_header">
      <div :class="[item.chosen?'botton_top_chosen':'botton_top']" v-for="(item,index) in typeList" :key="index" @click="typeChange(item.code)">{{item.name}}</div>
    </div>
    <div class="right_content">
      <div class="second_title">
        <div class="title_left">
          <span @click="goLevel" class="title_line" v-for="(item,index) in titleList.slice(0,titleList.length-1)" :key="index">{{item.name}}
          <span>/</span>
          </span>
          <span>{{titleList[titleList.length-1].name}}
          </span>
        </div>
      </div>
      <el-form size="small" v-if="firstTable=='first'" :model="form" inline>
        <!--        <el-form-item label="时间">-->
        <!--          <el-date-picker-->
        <!--              size="small"-->
        <!--              v-model="formData.value1"-->
        <!--              type="date"-->
        <!--              placeholder="选择日期">-->
        <!--          </el-date-picker>-->
        <!--        </el-form-item>-->
        <el-form-item label="责任单位">
          <el-select v-model="form.responsibleUnit"  placeholder="请选择">
            <el-option
                v-for="item in responsibleUnitList"
                :key="item.value"
                :label="item.lable"
                :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="筛选条件">
          <el-select v-model="form.category"  placeholder="请选择">
            <el-option
                v-for="item in categoryList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="btn-i">
          <el-button @click="onSubmitSearch">查询</el-button>
          <el-button>导出</el-button>
        </el-form-item>
      </el-form>
      <el-form size="small" v-if="firstTable=='second'" :model="detailForm" inline>
        <el-form-item  label="对象名称">
          <el-input v-model="detailForm.TARGET_NAME" placeholder="" clearable></el-input>
        </el-form-item>
        <el-form-item label="对象类型">
          <el-select v-model="detailForm.TARGET_TYPE"  placeholder="请选择">
            <el-option
                v-for="item in objectTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item  label="证件编号">
          <el-input v-model="detailForm.TARGET_LICENSE_NUMBER" placeholder="" clearable></el-input>
        </el-form-item>
        <el-form-item label="办件状态">
          <el-select v-model="detailForm.NODE_STATE"  placeholder="请选择">
            <el-option
                v-for="item in handleStatusList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="办件类型">
          <el-select v-model="detailForm.BANJIAN_STATE"  placeholder="请选择">
            <el-option
                v-for="item in handleTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="btn-i">
          <el-button @click="onSubmitDetailSearch">查询</el-button>
          <el-button>导出</el-button>
        </el-form-item>
      </el-form>
      <div class="content_search">
        <div class="search_left">
          <el-input
              v-model="searchContent"
              @focus="checkStart"
              @blur="checkEnd"
              placeholder="请输入搜索内容"
              size="medium"
          ></el-input>
        </div>
        <div class="search_right">
          <span>共有</span>
          <span>{{totalCount}}</span>
          <span>条记录</span>
        </div>
      </div>

      <div  v-loading="loading"  element-loading-text="数据加载中" class="table_info"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(3, 30, 57, 0.8)">
      <div class="content_table">
<!--        @cell-mouse-enter="mouseEnter"-->
<!--        @cell-mouse-leave="mouseLeave"-->
        <el-table v-if="firstTable=='first'" ref="Table"  :fit='true' :empty-text="loadInfo"
                  @selection-change="change"
                  :data="filterData(DataMain)"
                  :height="tableHeight"     row-key="RN"
                  lazy
                  :key="Math.random()"
                  :load="load"
                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column prop="ITEMNAME" label="事项名称">
            <template slot-scope="scope">
              <span v-if="scope.row.hasChildren" @click="findDetailM(scope.row.MATTERCODE)">{{scope.row.ITEMNAME}}</span>
              <span v-if="!scope.row.hasChildren" class="show_second" @click="findDetailS(scope.row.MATTERCODE,scope.row.SITUATIONCODE)">{{scope.row.ITEMNAME}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="UNIT" label="责任单位" width="220">
          </el-table-column>
          <el-table-column prop="APPLIED" label="已申请" width="130">
            <template slot-scope="scope">
              <span v-if="scope.row.hasChildren" class="show_second" @click="findDetailMatter(scope.row.MATTERCODE,'1')">{{scope.row.APPLIED}}</span>
              <span v-if="!scope.row.hasChildren" class="show_second" @click="findDetailSituation(scope.row.MATTERCODE,scope.row.SITUATIONCODE,'1')">{{scope.row.APPLIED}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="PENDING" label="待受理" width="130">
            <template slot-scope="scope">
              <span v-if="scope.row.hasChildren" class="show_second" @click="findDetailMatter(scope.row.MATTERCODE,'2')">{{scope.row.PENDING}}</span>
              <span v-if="!scope.row.hasChildren" class="show_second" @click="findDetailSituation(scope.row.MATTERCODE,scope.row.SITUATIONCODE,'2')">{{scope.row.PENDING}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="ACCEPTED" label="已受理" width="130">
            <template slot-scope="scope">
              <span v-if="scope.row.hasChildren" class="show_second" @click="findDetailMatter(scope.row.MATTERCODE,'3')">{{scope.row.ACCEPTED}}</span>
              <span v-if="!scope.row.hasChildren" class="show_second" @click="findDetailSituation(scope.row.MATTERCODE,scope.row.SITUATIONCODE,'3')">{{scope.row.ACCEPTED}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="TOBEDECIDED" label="待决定"  width="130">
            <template slot-scope="scope">
              <span v-if="scope.row.hasChildren" class="show_second" @click="findDetailMatter(scope.row.MATTERCODE,'4')">{{scope.row.TOBEDECIDED}}</span>
              <span v-if="!scope.row.hasChildren" class="show_second" @click="findDetailSituation(scope.row.MATTERCODE,scope.row.SITUATIONCODE,'4')">{{scope.row.TOBEDECIDED}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="COMPLETED" label="已办结"  width="130">
            <template slot-scope="scope">
              <span v-if="scope.row.hasChildren" class="show_second" @click="findDetailMatter(scope.row.MATTERCODE,'5')">{{scope.row.COMPLETED}}</span>
              <span v-if="!scope.row.hasChildren" class="show_second" @click="findDetailSituation(scope.row.MATTERCODE,scope.row.SITUATIONCODE,'5')">{{scope.row.COMPLETED}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="REMIND" label="提醒"  width="130">
            <template slot-scope="scope">
              <span v-if="scope.row.hasChildren" class="show_second" @click="findDetailMatter(scope.row.MATTERCODE,'6')">{{scope.row.REMIND}}</span>
              <span v-if="!scope.row.hasChildren" class="show_second" @click="findDetailSituation(scope.row.MATTERCODE,scope.row.SITUATIONCODE,'6')">{{scope.row.REMIND}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="SUPERVISE" label="督办"  width="130">
            <template slot-scope="scope">
              <span v-if="scope.row.hasChildren" class="show_second" @click="findDetailMatter(scope.row.MATTERCODE,'7')">{{scope.row.SUPERVISE}}</span>
              <span v-if="!scope.row.hasChildren" class="show_second" @click="findDetailSituation(scope.row.MATTERCODE,scope.row.SITUATIONCODE,'7')">{{scope.row.SUPERVISE}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="GOOD" label="好评"  width="130">
            <template slot-scope="scope">
              <span v-if="scope.row.hasChildren" class="show_second" @click="findDetailMatter(scope.row.MATTERCODE,'8')">{{scope.row.GOOD}}</span>
              <span v-if="!scope.row.hasChildren" class="show_second" @click="findDetailSituation(scope.row.MATTERCODE,scope.row.SITUATIONCODE,'8')">{{scope.row.GOOD}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="BAD" label="差评"  width="130">
            <template slot-scope="scope">
              <span v-if="scope.row.hasChildren" class="show_second" @click="findDetailMatter(scope.row.MATTERCODE,'9')">{{scope.row.BAD}}</span>
              <span v-if="!scope.row.hasChildren" class="show_second" @click="findDetailSituation(scope.row.MATTERCODE,scope.row.SITUATIONCODE,'9')">{{scope.row.BAD}}</span>
            </template>
          </el-table-column>
        </el-table>

        <el-table v-if="firstTable=='second'" ref="Table"  :fit='true'  :empty-text="loadInfo"
                  :data="filterData(DataDetail)"
                  :height="tableHeight"     row-key="RN">
          <el-table-column prop="TARGET_NAME" label="办件对象名称"  :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span class="show_second" @click="showDialog(scope.row.APPLY_NUMBER)">{{scope.row.TARGET_NAME}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="TARGET_TYPE" label="办理对象类型" width="100">
          </el-table-column>
          <el-table-column prop="TARGET_LICENSE_NUMBER" label="办理对象证件编号"  width="150">
          </el-table-column>
          <el-table-column prop="NODE_STATE" label="办件状态"  width="100">
          </el-table-column>
          <el-table-column prop="BANJIAN_STATE" label="提醒/督办"  width="100">
          </el-table-column>
          <el-table-column prop="STARLEVEL" label="星级"  width="80">
          </el-table-column>
          <el-table-column prop="OPERATION_TIME1" label="提交时间"  width="90">
          </el-table-column>
          <el-table-column prop="OPERATION_TIME2" label="受理时间"  width="90">
          </el-table-column>
          <el-table-column prop="OPERATION_TIME3" label="办结时间"  width="90">
          </el-table-column>
          <el-table-column prop="TERM_SL" label="承诺受理" width="150" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="TERM_BJ" label="承诺办结" width="150" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="COMMENT" label="评价内容"  width="350" :show-overflow-tooltip="true">
          </el-table-column>
        </el-table>

        <el-table v-if="firstTable=='third'" ref="Table"  :fit='true'  :empty-text="loadInfo"
                  :data="filterData(DataSort)"
                  :height="tableHeight"     row-key="RN">
          <el-table-column prop="NAME" label="事项名称" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span class="show_second" @click="showDialog(scope.row.APPLY_NUMBER)">{{scope.row.NAME}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="APPLY_NUMBER" label="办件编号" width="150">
          </el-table-column>
          <el-table-column prop="UNIT_NAME" label="单位名称"  width="200">
          </el-table-column>
          <el-table-column prop="OPERATION_TIME1" label="提交时间"  width="120">
          </el-table-column>
          <el-table-column prop="OPERATION_TIME2" label="受理时间"  width="120">
          </el-table-column>
          <el-table-column prop="OPERATION_TIME3" label="办结时间"  width="120">
          </el-table-column>
          <el-table-column prop="BJ_TIME" label="办件时间（H）"  width="120">
          </el-table-column>
          <el-table-column prop="TERM_SL" label="承诺受理" width="150" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="TERM_BJ" label="承诺办结" width="150" :show-overflow-tooltip="true">
          </el-table-column>
        </el-table>
      </div>
      </div>
      <div class="page">
        <ele-pagination v-if="tempSearch!=''" @sizeOrPageChange="sizeOrPageChange"  :total-count="totalCount" :current-page="currentPage" :page-size="pageSize"/>
      </div>
    </div>
  </div>
  <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" :width="dialogFormWidth"  :top="dialogFormTop">
    <div class="guide_body">
      <div class="step_menu">
        <div class="step_top">
          <div class="single_step">
            <div class="single_button" :class="[stepList[0].chosen?'single_button_active':'']" @click="chooseStep(stepList[0].id)">
              <span class="single_num" :class="[stepList[0].selectable?'single_num_active':'']">{{stepList[0].id}}</span>
            </div>
          </div>
          <div class="line">
            <el-divider></el-divider>
          </div>
          <div class="single_step">
            <div class="single_button" :class="[stepList[1].chosen?'single_button_active':'']" @click="chooseStep(stepList[1].id)">
              <span class="single_num" :class="[stepList[1].selectable?'single_num_active':'']">{{stepList[1].id}}</span>
            </div>
          </div>
          <div class="line">
            <el-divider></el-divider>
          </div>
          <div class="single_step">
            <div class="single_button" :class="[stepList[2].chosen?'single_button_active':'']" @click="chooseStep(stepList[2].id)">
              <span class="single_num" :class="[stepList[2].selectable?'single_num_active':'']">{{stepList[2].id}}</span>
            </div>
          </div>
        </div>
        <div class="step_bottom">
          <div class="single_title">
            <span class="single_remarks">{{stepList[0].name}}</span>
          </div>
          <div class="single_title">
            <span class="single_remarks">{{stepList[1].name}}</span>
          </div>
          <div class="single_title">
            <span class="single_remarks">{{stepList[2].name}}</span>
          </div>
        </div>
      </div>

      <div class="basic_info">
        <div v-for="(item,index) in detailList" :key="index" class="single_item">
          <span class="basic_single_title">{{item.title}}:</span>
          <span class="basic_single_content">{{item.content}}</span>
        </div>



      </div>


    </div>
  </el-dialog>
</div>
</template>

<script>
//import {autoChange, autoRoll} from "@/scroll";
import {mapMutations, mapState} from "vuex";
import ElePagination from "@/components/ele-paga/ElePagination";
let Situationrolltimer = ""; // 自动滚动的定时任务
let Situationchangetimer = ""; // 自动切换的定时任务
export default {
  name: "HandleSituation",
  components:{ElePagination},
  data(){
    return{
      loading: false,
      currentPage:1,
      pageSize:10,
      DataSort:[],
      responsibleUnitList:[],
      multipleSelection:[],
      objectTypeList:[
        {
          label:'全部',
          value:'',
        },
        {
          label:'企业',
          value:'企业',
        },
        {
          label:'个人',
          value:'个人',
        },
      ],
      handleTypeList:[
        {
          label:'全部',
          value:'',
        },
        {
          label:'提醒',
          value:'1',
        },
        {
          label:'督办',
          value:'2',
        },
      ],
      handleStatusList:[
        {
          label:'全部',
          value:'',
        },
        {
          label:'待受理',
          value:'1',
        },
        {
          label:'待办结',
          value:'2',
        },
        {
          label:'已办结',
          value:'3',
        },
      ],
      categoryList:[
        {
          label:'已申请',
          value:'1',
        },
        {
          label:'待受理',
          value:'2',
        },
        {
          label:'已受理',
          value:'3',
        },
        {
          label:'待决定',
          value:'4',
        },
        {
          label:'已办结',
          value:'5',
        },
        {
          label:'待提醒',
          value:'6',
        },
        {
          label:'待督办',
          value:'7',
        },

    ],
      form: {
        category: '1',
        responsibleUnit:''
      },
      detailForm:{
        TARGET_NAME:'',
        TARGET_TYPE:'',
        TARGET_LICENSE_NUMBER:'',
        NODE_STATE:'',
        BANJIAN_STATE:'',
    },
      typeList:[
        {
          id:'1',
          code:'01',
          name:'行政许可',
          chosen:false
        },
        {
          id:'2',
          code:'07',
          name:'行政确认',
          chosen:false
        },
        {
          id:'3',
          code:'06',
          name:'行政奖励',
          chosen:false
        },
        {
          id:'4',
          code:'08',
          name:'行政征收',
          chosen:false
        },
        {
          id:'5',
          code:'49',
          name:'其他权利',
          chosen:false
        },
        {
          id:'6',
          code:'58',
          name:'公共服务',
          chosen:false
        },
      ],
      unitList:[
        {
          id:'1',
          code:'1',
          name:'住建委',
          chosen:false
        },
        {
          id:'2',
          code:'2',
          name:'房管局',
          chosen:false
        },
      ],
      unit_name_type:'1',
      type:'',
      titleList: [
        {
          level:'1',
          name:'办件情况'
        },
      ],
      second_title:'',
      second_code:'',
      third_title:'',
      firstTable:'first',
      DataMain:[],
      DataDetail:[],
      tableHeight: 0,
      totalCount:0,
      stepList:[
        {
          id:'1',
          name:'申请',
          chosen:true,
          selectable:false,
        },
        {
          id:'2',
          name:'受理',
          chosen:false,
          selectable:false,
        },
        {
          id:'3',
          name:'办结',
          chosen:false,
          selectable:false,
        },
      ],
      //模态框参数
      dialogTitle:'',
      dialogFormWidth:'60%',
      dialogFormTop:'10vh',
      dialogFormVisible: false,
      chosenStep:'1',
      detailAllList:[],
      detailList:[
        {
          id:'1',
          code:'item_type',
          title:'事项类型',
          content:''
        },
        {
          id:'2',
          code:'item_code',
          title:'实施编码',
          content:''
        },
        {
          id:'3',
          code:'situation_code',
          title:'业务办理项编码',
          content:''
        },
        {
          id:'4',
          code:'Apply_number',
          title:'统一审批编码',
          content:''
        },
        {
          id:'5',
          code:'item_name',
          title:'事项名称',
          content:''
        },
        {
          id:'6',
          code:'target_type',
          title:'办理对象类型',
          content:''
        },
        {
          id:'7',
          code:'target_name',
          title:'办理对象名称',
          content:''
        },
        {
          id:'8',
          code:'target_license_type',
          title:'办理对象证件类型',
          content:''
        },
        {
          id:'9',
          code:'target_license_number',
          title:'办理对象证件编号',
          content:''
        },
        {
          id:'10',
          code:'user_id',
          title:'申请经办人用户ID',
          content:''
        },
        {
          id:'11',
          code:'user_name',
          title:'申请经办人姓名',
          content:''
        },
        {
          id:'12',
          code:'license_type',
          title:'申请经办人证件类型',
          content:''
        },
        {
          id:'13',
          code:'license_number',
          title:'申请经办人证件编号',
          content:''
        },
        {
          id:'14',
          code:'mobile_number',
          title:'申请经办人手机号',
          content:''
        },
        {
          id:'15',
          code:'node_name',
          title:'环节名称',
          content:''
        },

        {
          id:'16',
          code:'suggestion',
          title:'处理意见',
          content:''
        },
        {
          id:'17',
          code:'operation_department_code',
          title:'操作部门编号',
          content:''
        },
        {
          id:'18',
          code:'operation_department_name',
          title:'操作部门名称',
          content:''
        },
        {
          id:'19',
          code:'operation_user_name',
          title:'经办人用户姓名',
          content:''
        },
        {
          id:'20',
          code:'operation_user_id',
          title:'经办人用户编号',
          content:''
        },
        {
          id:'22',
          code:'Data_source',
          title:'数据来源单位',
          content:''
        },
        {
          id:'23',
          code:'operation_time2',
          title:'处理时间',
          content:''
        },
        {
          id:'24',
          code:'operation_department_name',
          title:'操作部门名称',
          content:''
        },
        {
          id:'25',
          code:'SpecialType',
          title:'特别程序种类',
          content:''
        },
        {
          id:'26',
          code:'SpecialReason',
          title:'特别程序启动理由或依据',
          content:''
        },
        {
          id:'27',
          code:'SpecialName',
          title:'特别程序种类名称',
          content:''
        },
        {
          id:'28',
          code:'source',
          title:'办件来源',
          content:''
        },
        {
          id:'29',
          code:'sdfs',
          title:'送达方式',
          content:''
        },
        {
          id:'30',
          code:'SendMethod',
          title:'结果证照类型',
          content:''
        },
        {
          id:'31',
          code:'result',
          title:'处理结果',
          content:''
        },
        {
          id:'32',
          code:'ProjectType',
          title:'办件类型',
          content:''
        },
        {
          id:'33',
          code:'matter_code',
          title:'事项编码',
          content:''
        },
        {
          id:'34',
          code:'method',
          title:'处理类型',
          content:''
        },
        {
          id:'35',
          code:'IsDeliveryResults',
          title:'是否快递递送纸质结果',
          content:''
        },

      ],
      currentItem :'',
      currentIndex : '',
      tempSearch:'',
      rollPx:1,
      refreshTime:5,
      rollTime:5,
      autoPlay:true,
      searchContent:'',
      loadInfo:'',
      detail_matter_code:'',
      detail_situation_code:'',
      detail_category:''
    }
  },
  computed:{
    ...mapState({
      handleRefresh:'handleSituationRefresh',
      handleSituationObject:'handleSituation',
    })
  },
  // filters:{
  //   stateType(state){
  //     let obj = {
  //       '1':'已申请',
  //       '2':'待受理',
  //       '3':'已受理',
  //       '4':'待决定',
  //       '5':'已办结',
  //       '6':'提醒',
  //       '7':'督办',
  //       '8':'好评',
  //       '9':'差评',
  //     }
  //     return obj[state]
  //   }
  // },
  mounted() {
    if(this.handleRefresh){
      // this.handleSituationFirstLevel("1");
      // this.handleSituationSecondLevel("");
      // this.handleSituationThirdLevel("1");
      // this.onSubmitSearch()
      this.handleSituationSingleChange([
        {
          name:'handleSituationFirstLevel',
          value:'1'
        },
        {
          name:'handleSituationSecondLevel',
          value:''
        },
        {
          name:'handleSituationThirdLevel',
          value:'1'
        },
        {
          name:'handleSituationForthLevel',
          value:''
        },
        {
          name:'handleSituationFifthLevel',
          value:''
        },
        {
          name:'handleSituationSixthLevel',
          value:''
        },
        {
          name:'handleSituationSeventhLevel',
          value:''
        },
        {
          name:'handleSituationEighthLevel',
          value:''
        },
      ])
    }
    this.getResponsibleUnit();
    //this.onSubmitSearch()
    this.$nextTick(function () {
      this.tableHeight = window.innerHeight - this.$refs.Table.$el.offsetTop - 100;
      // 监听窗口大小变化
      let ZJWself = this;
      window.onresize = function() {
        ZJWself.tableHeight = window.innerHeight - self.$refs.Table.$el.offsetTop - 100;
      }
    });
    // this.autoRoll();
    // this.autoChange();
  },
  methods:{
    refreshKey(){
      return this.handleSituationObject['handleSituationFirstLevel'] + this.handleSituationObject['handleSituationSecondLevel'] + this.handleSituationObject['handleSituationThirdLevel']
    },
    getResponsibleUnit(){
      this.$request({
        url:'/YWTBApi/queryResponsibleDepartment',
        method:'post',
        data:{
        }
      }).then(response => {
        this.loadInfo ='';
        let useData= []
        let dataArr = response.data.msg[0].Rows;
        useData.push(
            {
              lable:'全部',
              value: '',
            }
        )
        for(let i=0;i<dataArr.length;i++){
          let tempdata = {
            lable:dataArr[i].RESPONSIBLE_DEPARTMENT,
            value: dataArr[i].RESPONSIBLE_DEPARTMENT,
          }
          useData.push(tempdata);
        }
        this.responsibleUnitList = useData;
      })
    },
    stateType(state){
      let obj = {
        '1':'已申请',
        '2':'待受理',
        '3':'已受理',
        '4':'待决定',
        '5':'已办结',
        '6':'提醒',
        '7':'督办',
        '8':'好评-已关联',
        '9':'差评-已关联',
      }
      return obj[state]
    },
    checkChinese(){
      this.searchContent = this.searchContent.replace(/[^\u4E00-\u9FA5]/g,'')
    },
    checkStart(){
      this.checkInterval = setInterval(this.checkChinese,100)
    },
    checkEnd(){
      clearInterval(this.checkInterval)
    },


    unitChange:function(code){
      this.goLevel();
      for(let i=0;i<this.unitList.length;i++){
        if(code==this.unitList[i].code){
          this.unitList[i].chosen=true;
          this.handleSituationSingleChange([
            {
              name:'handleSituationFirstLevel',
              value:this.unitList[i].code
            },
            {
              name:'handleSituationSecondLevel',
              value:''
            },
            {
              name:'handleSituationThirdLevel',
              value:'1'
            },
          ])
        }else{
          this.unitList[i].chosen=false;
        }
      }

    },
    unitChangeOrigion:function(code){
      for(let i=0;i<this.unitList.length;i++){
        if(code==this.unitList[i].code){
          this.unitList[i].chosen=true;
        }else{
          this.unitList[i].chosen=false;
        }
      }

    },

    typeChange:function(code){
      this.goLevel();
      for(let i=0;i<this.typeList.length;i++){
        if(code==this.typeList[i].code){
          this.typeList[i].chosen=true;
          // this.handleSituationSecondLevel(this.typeList[i].code);
          // this.handleSituationThirdLevel("1");
          this.handleSituationSingleChange([
            {
              name:'handleSituationSecondLevel',
              value:this.typeList[i].name
            },
            {
              name:'handleSituationThirdLevel',
              value:'1'
            },
          ])
          this.type=this.typeList[i].name;
        }else{
          this.typeList[i].chosen=false;
        }
      }
    },
    typeChangeOrigion:function(code){
      this.goLevelOrigion();
      for(let i=0;i<this.typeList.length;i++){
        if(code==this.typeList[i].name){
          this.typeList[i].chosen=true;
          this.type=this.typeList[i].name;
        }else{
          this.typeList[i].chosen=false;
        }
      }
    },
    selectChange:function (){
      this.form.category = this.handleSituationObject['handleSituationThirdLevel'];
    },
    change(val) {
      this.multipleSelection = val;
    },
    goLevel:function(){

      this.handleSituationSingleChange([
        {
          name:'handleSituationForthLevel',
          value:''
        },
        {
          name:'handleSituationFifthLevel',
          value:''
        },
        {
          name:'handleSituationSixthLevel',
          value:''
        },
        {
          name:'handleSituationSeventhLevel',
          value:''
        },
        {
          name:'handleSituationEighthLevel',
          value:''
        },
        {
          name:'handleSituationSortTime',
          value:''
        },
      ])
      this.totalCount =this.firstCount;
      this.titleList = [{
        level:'1',
        name:'办件情况'
      }]
    },
    goLevelOrigion:function(){
      this.totalCount =this.firstCount;
      this.titleList = [{
        level:'1',
        name:'办件情况'
      }]
    },
    onSubmitSearch(){
      this.onSubmit();
    },
    onSubmit(){
      this.toClose()
      this.DataMain = []; //清空数据
      this.loadInfo ='数据加载中';
      console.log(this.form.category);
      this.$request({
        url:'/YWTBApi/queryItemList',
        method:'post',
        data:{
          "RESPONSIBLE_DEPARTMENT":this.form.responsibleUnit,
          "CATEGORY":this.form.category,
          "DATA_TYPE":this.handleSituationObject['handleSituationSecondLevel'],
          "ORGANIZATION":this.handleSituationObject['handleSituationFirstLevel'],
        }
      }).then(response => {
        this.loadInfo ='';
        let useData= []
        let dataArr = response.data.msg[0].Rows;
        console.log(dataArr)
        for(let i=0;i<dataArr.length;i++){
          let tempdata = {
            UNIT:dataArr[i].RESPONSIBLE_DEPARTMENT,
            ITEMNAME: dataArr[i].itemName,
            TOBEDECIDED: dataArr[i].toBeDecided,
            COMPLETED: dataArr[i].Completed,
            REMIND: dataArr[i].Remind,
            SUPERVISE: dataArr[i].Supervise,
            APPLIED: dataArr[i].Applied,
            PENDING: dataArr[i].Pending,
            ACCEPTED: dataArr[i].Accepted,
            MATTERCODE: dataArr[i].matterCode,
            GOOD:dataArr[i].goodComment,
            BAD:dataArr[i].badComment,
            RN: dataArr[i].itemName + dataArr[i].toBeDecided + dataArr[i].Completed + '-1',
            hasChildren: true
          }
          useData.push(tempdata);
        }
        this.DataMain = useData;
        this.firstCount = response.data.msg[0].TotalRowCount;
        this.totalCount =response.data.msg[0].TotalRowCount;
      })
    },
    // 全部收起
    toClose() {
      if(this.DataMain.length !=0){
        this.open = true
        this.close = false
        const elsopen = this.$el.getElementsByClassName('el-table__expand-icon--expanded')
        if(this.$el.getElementsByClassName('el-table__expand-icon--expanded')){
          for(let i=0;i<elsopen.length;i++){
            elsopen[i].click()
          }
        }
      }
    },
    load(tree, treeNode, resolve) {
      this.toClose();
      this.second_title=tree.ITEMNAME;
      this.second_code = tree.MATTERCODE;
      this.$request({
        url:'/YWTBApi/queryItemList',
        method:'post',
        data:{
          "CATEGORY":this.form.category,
          "MATTER_CODE":tree.MATTERCODE,
          "RESPONSIBLE_DEPARTMENT":this.form.responsibleUnit,
          "DATA_TYPE":this.type,
          "ORGANIZATION":this.unit_name_type,
        }
      }).then(response => {
        if(response == undefined){
          resolve([]);
          return
        }else{
          let useData= []
          let dataArr = response.data.msg[0].Rows;
          for(let i=0;i<dataArr.length;i++){
            let tempdata = {
              UNIT:dataArr[i].unitName,
              ITEMNAME: dataArr[i].situationName,
              TOBEDECIDED: dataArr[i].toBeDecided,
              COMPLETED: dataArr[i].Completed,
              REMIND: dataArr[i].Remind,
              SUPERVISE: dataArr[i].Supervise,
              APPLIED: dataArr[i].Applied,
              PENDING: dataArr[i].Pending,
              ACCEPTED: dataArr[i].Accepted,
              MATTERCODE: tree.MATTERCODE,
              SITUATIONCODE: dataArr[i].situationCode,
              GOOD:dataArr[i].goodComment,
              BAD:dataArr[i].badComment,
              RN: dataArr[i].itemName + dataArr[i].toBeDecided + dataArr[i].Completed + i,
            }
            useData.push(tempdata);
          }
          resolve(useData);
        }
      })

    },
    // 鼠标进入
    mouseEnter() {
      if(this.dialogFormVisible){
        return
      }else{
        // 鼠标进入停止滚动和切换的定时任务
        // console.log("jinlailai");
        this.autoRoll(true);
        this.autoChange(true);
      }
    },
    // 鼠标离开
    mouseLeave() {
      if(this.dialogFormVisible){
        return
      }else {
        // 开启
        this.autoRoll();
        this.autoChange();
      }
    },
    compare(property) {
      return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
      }
    },

    getMatterNameDetail(matter_code){
      this.$request({
        url:'/YWTBApi/queryItemList',
        method:'post',
        data:{
          "RESPONSIBLE_DEPARTMENT":'',
          "CATEGORY":'1',
          "DATA_TYPE":'',
          "ORGANIZATION":''
        }
      }).then(response => {
        let dataArr = response.data.msg[0].Rows;
        console.log(dataArr)
        for(let i=0;i<dataArr.length;i++){
          if(matter_code ==dataArr[i].matterCode){
            this.titleList.push(
                {
                  level:'2',
                  name:dataArr[i].itemName
                }
            )
            this.titleList.sort(this.compare('level'))
            return;
          }
        }
      })
    },
    getSituationNameDetail(matter_code,situation_code){
      this.$request({
        url:'/YWTBApi/queryItemList',
        method:'post',
        data:{
          "MATTER_CODE":matter_code,
          "RESPONSIBLE_DEPARTMENT":'',
          "CATEGORY":'1',
          "DATA_TYPE":'',
          "ORGANIZATION":''
        }
      }).then(response => {
        let dataArr = response.data.msg[0].Rows;
        console.log(dataArr)
        for(let i=0;i<dataArr.length;i++){
          if(situation_code ==dataArr[i].situationCode){
            this.titleList.push(
                {
                  level:'3',
                  name:dataArr[i].situationName
                }
            )
            this.titleList.sort(this.compare('level'))
            break;
          }
        }
      })
    },

    findDetailSituation(mattercode,situationcode,index){
      this.handleSituationSingleChange([
        {
          name:'handleSituationForthLevel',
          value:mattercode
        },
        {
          name:'handleSituationFifthLevel',
          value:situationcode
        },
        {
          name:'handleSituationSixthLevel',
          value:''
        },
        {
          name:'handleSituationSeventhLevel',
          value:''
        },
        {
          name:'handleSituationEighthLevel',
          value:index
        },
      ])
    },
    findDetailMatter(code,index){
      this.handleSituationSingleChange([
        {
          name:'handleSituationForthLevel',
          value:code
        },
        {
          name:'handleSituationFifthLevel',
          value:''
        },
        {
          name:'handleSituationSixthLevel',
          value:''
        },
        {
          name:'handleSituationSeventhLevel',
          value:''
        },
        {
          name:'handleSituationEighthLevel',
          value:index
        },
      ])
    },
    findDetailS(mattercode,situationcode){
      this.handleSituationSingleChange([
        {
          name:'handleSituationForthLevel',
          value:mattercode
        },
        {
          name:'handleSituationFifthLevel',
          value:situationcode
        },
        {
          name:'handleSituationSixthLevel',
          value:''
        },
        {
          name:'handleSituationSeventhLevel',
          value:''
        },
        {
          name:'handleSituationEighthLevel',
          value:''
        },
      ])
    },
    findDetailM(code){
      //this.getMatterNameDetail(code)
      this.handleSituationSingleChange([
        {
          name:'handleSituationForthLevel',
          value:code
        },
        {
          name:'handleSituationFifthLevel',
          value:''
        },
        {
          name:'handleSituationSixthLevel',
          value:''
        },
        {
          name:'handleSituationSeventhLevel',
          value:''
        },
        {
          name:'handleSituationEighthLevel',
          value:''
        },
      ])
    },

    findDetailMOrigion(code){   //查询事项名称
      this.titleList = [{
        level:'1',
        name:'办件情况'
      }]
      this.getMatterNameDetail(code)
    },
    findDetailSOrigion(code){
      // if(this.second_title !=''){
      //   this.titleList.push(
      //       {
      //         level:'3',
      //         name:this.second_title
      //       }
      //   )
      //   this.getSituationNameDetail(this.second_code,code)
      // }else{
      //   this.getMatterNameDetail(this.handleSituationObject['handleSituationForthLevel'])
      //   this.getSituationNameDetail(this.handleSituationObject['handleSituationForthLevel'],code)
      // }
      this.getSituationNameDetail(this.handleSituationObject['handleSituationForthLevel'],code)
    }, //查询情形名称

    findSXDetailOrgion(index){
      this.titleList.push(
          {
            level:'4',
            name:this.stateType(index)
          }
      )
    },






    onSubmitDetailSearch(){
      this.tempSearch ='onSubmitDetailSearch';
      this.DataDetail = [];
      this.loadInfo ='数据加载中';
      this.loading=true;
      this.$request({
        url:'/YWTBApi/queryBanjianListBySituationCode',
        method:'post',
        data:{
          "SITUATION_CODE":this.handleSituationObject['handleSituationFifthLevel'],
          "MATTER_CODE":this.handleSituationObject['handleSituationForthLevel'],
          "CATEGORY":this.handleSituationObject['handleSituationEighthLevel'],
          "TARGET_NAME":this.detailForm.TARGET_NAME,
          "TARGET_TYPE":this.detailForm.TARGET_TYPE,
          "TARGET_LICENSE_NUMBER":this.detailForm.TARGET_LICENSE_NUMBER,
          "NODE_STATE":this.detailForm.NODE_STATE,
          "BANJIAN_STATE":this.detailForm.BANJIAN_STATE,
          'pageSize':this.pageSize,
          'pageIndex':this.currentPage
        }
      }).then(response => {
        this.loading=false;
        this.loadInfo ='';
        let useData= []
        let dataArr = response.data.msg[0].Rows;
        for(let i=0;i<dataArr.length;i++){
          let tempdata = {
            TARGET_NAME: dataArr[i].TARGET_NAME,
            TARGET_TYPE: dataArr[i].TARGET_TYPE,
            TARGET_LICENSE_NUMBER: dataArr[i].TARGET_LICENSE_NUMBER,
            NODE_STATE: dataArr[i].NODE_STATE,
            BANJIAN_STATE: dataArr[i].BANJIAN_STATE,
            COMMENT: dataArr[i].EVALUATION_CONTENT,
            STARLEVEL: dataArr[i].OVERALL_SATISFACTION,
            OPERATION_TIME1: dataArr[i].OPERATION_TIME1,
            OPERATION_TIME2: dataArr[i].OPERATION_TIME2,
            OPERATION_TIME3: dataArr[i].OPERATION_TIME3,
            APPLY_NUMBER: dataArr[i].APPLY_NUMBER,
            CNBJSXSM: dataArr[i].CNBJSXSM,
            RN: dataArr[i].RN,
          }
          useData.push(tempdata);
        }
        this.DataDetail = useData;
        this.totalCount =response.data.msg[0].TotalRowCount;
      })
    },
    showDialog(MATTERCODE){
      this.$request({
        url:'/YWTBApi/getBanjianInfoByApplyNumber',
        method:'post',
        data:{
          "APPLY_NUMBER":MATTERCODE,
        }
      }).then(response => {
        this.detailAllList = response.data.msg[0].Rows;
        this.fillDialogDetail();
      })
      this.dialogFormVisible = true;
      //this.chooseStep('1');
    },
    fillDialogDetail(){
      this.selectableStep();
      this.dialogTitle = this.detailAllList[0]["TARGET_NAME"] + '-详情';
      this.chooseStep('1');

    },
    chooseStep(id){
      for(let i=0;i<this.stepList.length;i++){
        if(id ==this.stepList[i].id&&!this.stepList[i].selectable){
          return
        }
      }
      for(let i=0;i<this.stepList.length;i++){
        this.chosenStep= id;
        if(id==this.stepList[i].id){
            this.stepList[i].chosen = true;
            this.showChosenData(this.stepList[i].id);

        }else{
          if(this.stepList[i].selectable){
            this.stepList[i].chosen = false;
          }
        }
      }
    },
    selectableStep(){
      for(let i=0;i<this.detailAllList.length;i++){
        let node = this.detailAllList[i].NODE_NAME;
        if(node=="1"){
          this.stepList[0].selectable = true;
        }else if(node=="5"){
          this.stepList[1].selectable = true;
        }else if(node=="6"||node=="7"||node=="8"){
          this.stepList[2].selectable = true;
        }
      }
    },
    showChosenData(index){
      if(index == '1'){
        for(let i=0;i<this.detailAllList.length;i++){
          let node = this.detailAllList[i].NODE_NAME;
          if(node=="1"){
            this.singleDetail(i);
          }
        }
      }else if(index == '2'){
        for(let i=0;i<this.detailAllList.length;i++){
          let node = this.detailAllList[i].NODE_NAME;
          if(node=="5"){
            this.singleDetail(i);
          }
        }
      }else if(index == '3'){
        for(let i=0;i<this.detailAllList.length;i++){
          let node = this.detailAllList[i].NODE_NAME;
          if(node=="6"||node=="7"||node=="8"){
            this.singleDetail(i);
          }
        }
      }

    },
    singleDetail(rn){
      for(let index in this.detailAllList[rn]){
        for(let j =0;j<this.detailList.length;j++){
          if(index==this.detailList[j].code.toUpperCase()){
            this.detailList[j].content = this.detailAllList[rn][index];
          }
        }
      }
    },
    sortSearch(){
      this.$nextTick(function () {
        this.tableHeight = window.innerHeight - this.$refs.Table.$el.offsetTop - 100;
        // 监听窗口大小变化
        let ZJWself = this;
        window.onresize = function() {
          ZJWself.tableHeight = window.innerHeight - self.$refs.Table.$el.offsetTop - 100;
        }
      });
      this.tempSearch ='sortSearch';
      this.DataSort = [];
      this.$request({
        url:'/YWTBApi/queryBanjianTimeList',
        method:'post',
        data:{
          "TYPE":this.handleSituationObject['handleSituationSortTime'],
          'pageSize':this.pageSize,
          'pageIndex':this.currentPage
        }
      }).then(response => {
        this.loadInfo ='';
        let dataArr = response.data.msg[0].Rows;
        console.log(dataArr)
        if(dataArr.length >0){
          this.DataSort = dataArr;
        }else{
          this.DataSort = [];
        }
        this.totalCount =response.data.msg[0].TotalRowCount;
      })
    },
    // 设置自动滚动
    autoRoll(stop) {
      if (stop) {
        clearInterval(Situationrolltimer);
        return;
      }
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.Table;
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper;
      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果
      Situationrolltimer = setInterval(() => {
        // 元素自增距离顶部像素
        divData.scrollTop += this.rollPx;
        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
        if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
          // 重置table距离顶部距离
          divData.scrollTop = 0;
        }
      }, this.rollTime * 10);
    },
// 设置自动切换
    autoChange(stop) {
      if (stop) {
        clearInterval(Situationchangetimer);
        return;
      }
      Situationchangetimer = setInterval(() => {
        this.autoPlay = !this.autoPlay;
        this.autoRoll(true); // 先清除定时器
        this.autoRoll(); // 再开启定时器
      }, this.refreshTime * 1000);
    },
    filterData(data) {
      var input = this.searchContent && this.searchContent.toLowerCase();
      //var input = searchContent.toLowerCase()
      var items = data;
      var items1;
      if (input) {
        items1 = items.filter(function(item) {
          return Object.keys(item).some(function(key1) {
            return String(item[key1])
                .toLowerCase()
                .match(input);
          });
        });
      } else {
        items1 = items;
      }
      return items1;
    },

    sizeOrPageChange(page,size){
      this.currentPage = page;
      this.pageSize = size;
      if(this.tempSearch =='onSubmitDetailSearch'){
        this.onSubmitDetailSearch()
      }else if(this.tempSearch =='sortSearch'){
        this.sortSearch()
      }

    },
    ...mapMutations(['handleSituationRefresh','handleSituation','handleSituationSingleChange'])
  },
  beforeDestroy(){  // 组件销毁前调用
    clearInterval(Situationrolltimer);
    clearInterval(Situationchangetimer);
  },
  watch: {
    firstTable(val){
      if(val){
        this.detailForm =this.$options.data().detailForm;
      }
    },
    dialogFormVisible: function (val) {
      console.log(val)
      // if(!val){
      //   this.mouseLeave();//继续滚动
      // }
    },
    handleSituationObject(val){
      if(val['handleSituationSortTime']==''){
        if(val['handleSituationForthLevel']!==''||val['handleSituationFifthLevel']!==''){
          this.firstTable='second';
          this.detailForm.NODE_STATE = val['handleSituationSixthLevel'] ;
          this.detailForm.BANJIAN_STATE = val['handleSituationSeventhLevel'] ;
          if(val['handleSituationForthLevel']!==''){
            this.findDetailMOrigion(val['handleSituationForthLevel']);
          }
          if(val['handleSituationFifthLevel']!==''){
            this.findDetailSOrigion(val['handleSituationFifthLevel']);
          }
          if(val['handleSituationEighthLevel']!==''){
            this.findSXDetailOrgion(val['handleSituationEighthLevel']);
          }
          this.onSubmitDetailSearch();
        }else{
          this.firstTable = 'first';
          this.unitChangeOrigion(val['handleSituationFirstLevel']);
          this.typeChangeOrigion(val['handleSituationSecondLevel'])
          this.selectChange();
          this.onSubmitSearch();
        }
      }else{
        this.firstTable = 'third';
        this.sortSearch(val['handleSituationSortTime']);
      }
    },
  }
}
</script>

<style scoped lang="scss">
#handleSituation{
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  justify-content: flex-start;
  @media screen and (max-height: 980px) {
    background: url("../../assets/imgs/带手指低.png") no-repeat;
  }

  @media screen and (min-height: 980px) {
    background: url("../../assets/imgs/带手指高.png") no-repeat;
  }
  background-size: 100% !important;
  width:99%;
  margin-left: 0.5%;
  .left{
    width:2%;
    padding-left: 0.55%;
    padding-top: 70px;
    height:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .singleButton{
      cursor: pointer;
      width:34px;
      height:144px;
      border-radius: 4px;
      border: none;
      padding-top: 10px;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      color: #25a9ee;
      .little_span{
        width:18px;
      }
      .little_active{
        color: #fff;
      }
    }
    .top_button{
      background:url("../../assets/imgs/住建委.png") no-repeat;
      background-size: 100%;
    }
    .middle_button{
      background:url("../../assets/imgs/房管局.png") no-repeat;
      background-size: 100%;
    }
    .singleButton:focus,
    .singleButton:hover {
      color: #fff;
    }
  }
  .right{
    width:95%;
    height:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    .right_header{
      width: 97%;
      height: 12%;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      .botton_top_chosen{
        width: 177px;
        height: 44px;
        color: #fdbf00;
        font-size: 24px;
        font-weight: bold;
        font-family: 微软雅黑;
        background:url("../../assets/imgs/下载1.png") no-repeat;
        background-size: 100%;
        border-color: transparent;
        text-align: center;
        line-height: 44px;
        cursor: pointer;
      }
      .botton_top:focus,
      .botton_top:hover {
        background:url("../../assets/imgs/下载1.png") no-repeat;
        background-size: 100%;
      }

      .botton_top {
        width: 177px;
        height: 44px;
        color: #FFF;
        font-size: 24px;
        font-weight: bold;
        font-family: 微软雅黑;
        background:url("../../assets/imgs/下载2.png") no-repeat;
        background-size: 100%;
        border-color: transparent;
        text-align: center;
        line-height: 44px;
        cursor: pointer;
      }
    }
    .right_content{

      padding-left: 2%;
      width:100%;

      .second_title{
        color: #FFF;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        height: 40px;
        .title_left{
          width: 80%;
          height: 25px;
          font-size: 18px;
          display: flex;
          flex-direction: row;
          .single_title{
            cursor: pointer;

          }
          .title_line{
            border-bottom: 1px solid #71D7FF;
            cursor: pointer;
            color: #71D7FF;
          }
        }

      }
      .content_search{
        color: #FFF;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        height: 50px;
        .search_left{
          width: 50%;
          height: 100%;
          font-size: 18px;
          display: flex;
          flex-direction: row;
          .single_title{
            cursor: pointer;

          }
        }
        .search_right{
          width: 50%;
          height: 100%;
          font-size: 17px;
          display: flex;
          flex-direction: row;
          justify-content: flex-end;
        }
      }
      .table_info{
        width: 100%;
      }
      .content_table{
        .show_second{
          cursor: pointer;
          text-decoration: underline
        }
      }
    }
  }
  .guide_body{
    color: #FFF;
    .step_menu{
      width: 100%;
      height: 80px;
      display: flex;
      flex-direction: column;
      .step_top{
        width: 100%;
        height:40px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        .single_step{
          width: 4.15%;
          height:100%;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          .single_button{
            border:1px solid #2c91cc;
            width: 32px;
            height: 32px;
            border-radius: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            .single_num{
              color: #8c8c8c;
            }
            .single_num_active{
              color: #fff;
            }
          }
          .single_button_active,.single_button:focus,.single_button:hover{
            background-color: #02ade4;
          }
        }
        .line{
          width: 19%;
          height:100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
      .step_bottom{
        width: 100%;
        height:40px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        .single_title{
          width: 23%;
          display: flex;
          justify-content: center;
          align-items: center;
          .single_remarks{
            font-size: 18px;
          }
        }
      }
    }
    .basic_info{
      width: 100%;
      padding-left: 20px;
      height: 500px;
      overflow-y:auto;
      font-size: 14px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-content: space-around;
      justify-content: flex-start;
      .single_item{
        width: 32%;
        height:40px;
        display: flex;
        align-items: center;
        .basic_single_title{
          color: #71d7ff;
        }
        .basic_single_content{
          padding-left: 20px;
        }
      }
    }
  }
  .page{
    margin-top: 20px;
    text-align: right;
  }
}
</style>