gxjh-ywtb/src/views/evaluate/EvaluateRepeat.vue

<style>
  .active{
    color:#AEADAD;
  }
</style>
<template>
  <div id="evaluate-repeat" >

    <el-form size="small" :model="formData" inline>
      <el-row :gutter="20">
        <el-col :span="20">
          <el-form-item label="事项名称">
            <el-input

                v-model="formData.name"
                placeholder="事项名称">
            </el-input>
          </el-form-item>
          <el-form-item label="总体满意度">
            <el-select v-model="formData.myTotalEvaluate" placeholder="请选择">
              <el-option
                  v-for="item in totalEvaluate"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item  label="开始时间：">
            <el-date-picker    format="yyyy 年 MM 月 dd 日"    value-format="yyyy-MM-dd"  placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
          </el-form-item>
          <el-form-item  label="结束时间：">
            <el-date-picker    format="yyyy 年 MM 月 dd 日"   value-format="yyyy-MM-dd" placeholder="选择日期" v-model="form.date2" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item class="btn-i">

            <el-button class="role_button" role_button_code="a8f2fe9f-f63f-431e-83d9-cc014cc56737" @click="onCommit">查询</el-button>
            <el-button class="role_button" role_button_code="ec6284bf-4a37-40e1-b833-7d33195ca82d" @click="ShowDownloadDialog()">导出</el-button>
            <el-upload style="display: inline-block;margin-left:8px"
                       class="upload-demo role_button" role_button_code="5190f699-c2d9-4d14-ae11-39d6b06c0d28"
                       action="http://10.81.66.9:9250/ywtb/ywtbHcp_upload"
                       :show-file-list="showList"
                       :onError="uploadError"
                       :onSuccess="uploadSuccess"
                       :beforeUpload="beforeAvatarUpload"
                       :file-list="fileList">
              <el-button class="role_button" role_button_code="5190f699-c2d9-4d14-ae11-39d6b06c0d28"   type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="tab-number">
      <div class="tab-area">
        <tab-control :tab-id.sync="currentRepeatId" style-type="colorful" :data-arr="isRepeatTabArr" />
      </div>
      <div class="search_right">
        <span>共有</span>
        <span>{{totalCount}}</span>
        <span>条记录</span>
      </div>
    </div>

    <div  v-loading="loading"  class="table_wide" element-loading-text="数据加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(3, 30, 57, 0.8)">
    <div class="table-area">
      <my-table  :headers="evaluateRepeatTableHeader" :table-data="tableData"  :has-operation="true">
       <template #selectionBefore>
         <el-table-column
           type="selection"
           width="55"
         >
         </el-table-column>

       </template>
        <template #operation="{data}">
           <el-link class="mr-link"  type="primary" @click="openModel('find',data)">查看 </el-link>
           <el-link  class="mr-link diff_color" v-if="huifuState  =='173'&&(data.EXAMINE_STATE==undefined || data.EXAMINE_STATE=='2')&&(data.TYPE =='0'||data.TYPE =='2'||data.TYPE =='3'||data.TYPE =='5')"
                     type="primary" @click="openModel('repeat',data)">回复 </el-link>
          <el-link  class="mr-link diff_color" v-if="huifuState  =='174'&&data.EXAMINE_STATE=='0'&&(data.TYPE =='0'||data.TYPE =='2'||data.TYPE =='3'||data.TYPE =='5')" type="primary" @click="openModel('exam',data)">审批 </el-link>
<!--          <el-link  class="mr-link diff_color" v-if="data.EXAMINE_STATE=='1'&&(data.TYPE =='1'||data.TYPE =='4'||data.TYPE =='6'||data.TYPE =='7')" type="primary" @click="openModel('find',data)">已审批 </el-link>-->
          <el-link class="mr-link"  type="primary" @click="showDialog('situation',data)"><span v-bind:class="{active: data.HANDING_NUMBER==null}">办件情况 </span></el-link>
        </template>
      </my-table>
    </div>
    </div>
    <div class="page">
      <ele-pagination @sizeOrPageChange="sizeOrPageChange"  :total-count="totalCount" :current-page="currentPage" :page-size="pageSize"/>
    </div>
    <evaluate-repeat-model :operation-type="operationType" :title="dialogRepeatTitle" :currentData="currentData" :dialog-visible.sync="isModelShow"/>
    <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_bg" :class="[stepList[0].chosen?'single_bg_active':'']">
                <div class="single_button" :class="[stepList[0].selectable?'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>
            <div class="line">
              <el-divider></el-divider>
            </div>
            <div class="single_step">
              <div  class="single_bg" :class="[stepList[1].chosen?'single_bg_active':'']">
                <div class="single_button" :class="[stepList[1].selectable?'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>
            <div class="line">
              <el-divider></el-divider>
            </div>
            <div class="single_step">
              <div  class="single_bg" :class="[stepList[2].chosen?'single_bg_active':'']">
                <div class="single_button" :class="[stepList[2].selectable?'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>
          <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>
    <el-dialog title="选择导出数量" :visible.sync="dialogNumberVisible" width="45%"  :top="dialogFormTop">
      <div class="number_body">
        <div class="search_left">
          <span>共有</span>
          <span>{{totalCountAll}}</span>
          <span>条记录</span>
        </div>
        <div class="button_list">
          <span v-for="(item,index) in numberList" :key="index" class="single_number" @click="downloadFile(item.start,item.end)">
            {{item.start}}----{{item.end}}
          </span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {MessageBox} from "element-ui";
import {mapEvaluateState,mapEvaluateMutations} from "@/units/map-units";
import MyTable from "@/components/my-table/MyTable";
import {evaluateRepeatTableHeader, isRepeatTabArr, totalEvaluate} from "@/views/units/local-data";
import ElePagination from "@/components/ele-paga/ElePagination";
import TabControl from "@/components/common-panel/c-cpns/TabControl";
import EvaluateRepeatModel from "@/views/evaluate/c-cpns/EvaluateRepeatModel";
import selectConfigModuleByRole from "@/role_button";
export default {
  name: "EvaluateRepeat",
  components: {EvaluateRepeatModel, TabControl, ElePagination, MyTable},
  filters:{
    stateType(state){
      let obj = {
        '0,1,2,3,4':'差评回复',
        '2':'网上预审',
        '3':'收件',
        '4':'补正',
        '5':'受理',
        '6':'特别程序',
        '7':'决定',
        '8':'制发证',
        '9':'审查',
      }
      return obj[state]
    }
  },
  data() {
    return {
      showList:false,
      fileList:[],
      huifuState:'',
      loading: true,
      dialogRepeatTitle:'',
      totalCount:0,
      tableData:[],
      numberList:[],
      currentRepeatId:'',
      currentData:{},
      totalCountAll:'',
      formData:{
         name:'',
         myTotalEvaluate:''
      },
      form: {
        //operationUnit: '',
        date1: '',
        date2: '',
      },
      currentPage:1,
      pageSize:10,
      isModelShow:false,
      operationType:'',
      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:'12vh',
      dialogFormVisible: false,
      dialogNumberVisible: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:''
        },
      ],
    }
  },
  mounted(){
    this.currentRepeatId = this.evaRepeatId;
    selectConfigModuleByRole(this);
  },
  computed:{
    ...mapEvaluateState({
      evaCurrentId:'evaluateCurrentId',
      evaFirstLevel:'evaluateFirstLevel',
      evaRepeatId:'evaluateRepeatId'
    }),
    evaluateRepeatTableHeader(){
      return evaluateRepeatTableHeader
    },
    totalEvaluate() {
      return totalEvaluate
    },
    isRepeatTabArr() {
      return isRepeatTabArr
    }
  },
  methods:{
    uploadError (response, file, fileList) {
      this.loading=false;
      console.log('上传失败，请重试！',response, file, fileList)
    },
    uploadSuccess (response, file, fileList) {
      console.log('上传文件', response,file, fileList)
      if(response.msg[0].success =='true'){
        this.loading=false;
        this.onCommit();
        MessageBox.alert('文件上传成功', '提示', {
          confirmButtonText: '确定'
        });
      }else{
        this.loading=false;
        this.onCommit();
        MessageBox.alert('文件上传失败', '提示', {
          confirmButtonText: '确定'
        });
      }
    },
    // 上传前对文件的大小的判断
    beforeAvatarUpload (file) {
      this.loading=true;
      const extension = file.name.split('.')[1] === 'xls'
      const extension2 = file.name.split('.')[1] === 'xlsx'
      const isLt2M = file.size / 1024 / 1024 < 100
      if (!extension && !extension2) {
        this.loading=false;
        MessageBox.alert('上传模板只能是 xls、xlsx 格式!', '提示', {
          confirmButtonText: '确定'
        });
      }
      if (!isLt2M) {
        this.loading=false;
        MessageBox.alert('上传模板大小不能超过 100MB!', '提示', {
          confirmButtonText: '确定'
        });
      }
      return extension || extension2  && isLt2M
    },
    ShowDownloadDialog(){
      this.numberList = [];
      this.$request({
        url:'/ywtb/selectYwtbEvaluatePageList',
        method:'post',
        data:{
          'MATTER_NAME':this.formData.name,
          'OVERALL_SATISFACTION':'',
          'TYPE':'0,1,2,3,4,5,6,7',
          "START_TIME":this.form.date1,
          "END_TIME":this.form.date2,
          'pageSize':this.pageSize,
          'pageIndex':this.currentPage,
          "appkey":localStorage.getItem("ywtb_userkeycode")
        }
      }).then(response => {
        this.totalCountAll =response.data.msg[0].TotalRowCount;
        let length =  Math.trunc(this.totalCountAll/50000) +1 ;
        for(let i=0;i<length;i++){
          if(i<length -1){
            this.numberList.push({
              start: i*50000 + 1,
              end: (i+1)*50000
            })
          }else{
            this.numberList.push({
              start: i*50000 + 1,
              end: this.totalCountAll
            })
          }
        }
        this.dialogNumberVisible = true;
      })


    },
    downloadFile(start,end){
      let  MATTER_NAME = this.formData.name;
      let PAGE_START = start;
      let PAGE_END = end;
      let url='http://10.81.66.9:9250/ywtb/export_selectYwtbEvaluatePageList?PAGE_START='+PAGE_START +'&PAGE_END='+PAGE_END+'&APPKEY='+localStorage.getItem("ywtb_userkeycode");
      if(MATTER_NAME!=''){
        url +='&MATTER_NAME='+MATTER_NAME
      }
      const a = document.createElement('a')
      a.href = url;
      a.style.display="none";
      //测试链接
      console.log(a.href)
      a.download = '差评回复--'+MATTER_NAME +  PAGE_START +'至' + PAGE_END;// 下载文件的名字
      document.body.appendChild(a)
      a.click();
      document.body.removeChild(a);
      this.dialogNumberVisible = false;
    },
    onCommit(){
      this.currentPage = 1;
      this.commit();
    },
   commit(){
     if(this.currentRepeatId == ''){
       return
     }
     this.huifuState = localStorage.getItem('ywtb_role')
     this.getCurrentRepeatIdTitle();
     this.loading=true;
     this.$request({
       url:'/ywtb/selectYwtbEvaluatePageList',
       method:'post',
       data:{
         'MATTER_NAME':this.formData.name,
         'OVERALL_SATISFACTION':this.formData.myTotalEvaluate,
         'TYPE':this.currentRepeatId,
         "START_TIME":this.form.date1,
         "END_TIME":this.form.date2,
         'pageSize':this.pageSize,
         'pageIndex':this.currentPage,
         "appkey":localStorage.getItem("ywtb_userkeycode")
       }
     }).then(response => {
       this.loading=false;
       let dataArr = response.data.msg[0].Rows
       this.totalCount =response.data.msg[0].TotalRowCount;
       if(dataArr.length > 0){
         this.tableData = [];
         for(let i=0;i<dataArr.length;i++){
           for(let i=0;i<dataArr.length;i++){
             if(dataArr[i].COMMENT_TIME != null){
               dataArr[i].COMMENT_TIME =dataArr[i].COMMENT_TIME.length > 16 ?dataArr[i].COMMENT_TIME =dataArr[i].COMMENT_TIME.substring(0,16):dataArr[i].COMMENT_TIME;
             }
             if(dataArr[i].REPLY_TIME != null){
               dataArr[i].REPLY_TIME =dataArr[i].REPLY_TIME.length > 16 ?dataArr[i].REPLY_TIME =dataArr[i].REPLY_TIME.substring(0,16):dataArr[i].REPLY_TIME;
             }

           }
             this.tableData.push(dataArr[i]);
         }
       }else{
         this.loading=false;
         this.tableData = [];
       }
     })
   },
    showDialog(type,data){
      if(data.HANDING_NUMBER == null){
        return;
      }
      this.$request({
        url:'/ywtb/selectYwtbBanJianFullByAumber',
        method:'post',
        data:{
          "HANDING_NUMBER":data.HANDING_NUMBER,
          "appkey":localStorage.getItem("ywtb_userkeycode")
        }
      }).then(response => {
        this.detailAllList = response.data.msg[0].Rows;
        if(this.detailAllList.length >0){
          this.fillDialogDetail(data.MATTER_NAME);
          this.dialogFormVisible = true;
        }else{
          MessageBox.alert('暂无数据', '提示', {
            confirmButtonText: '确定'
          });
        }

      })

      //this.chooseStep('1');
    },
    fillDialogDetail(title){
      this.selectableStep();
      this.dialogTitle = title + '-详情';
      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.stepList.length; i++){
        this.stepList[i].chosen = false
        this.stepList[i].selectable = false
      }

      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);
          }
        }
      }

    },
    getCurrentRepeatIdTitle(){
      this.dialogRepeatTitle = ''
      switch (this.currentRepeatId){
        case "0,1,2,3,4":
          this.dialogRepeatTitle  = '差评回复';
          break;
        case "0":
          this.dialogRepeatTitle  = '差评回复';
          break;
        case "1":
          this.dialogRepeatTitle  = '差评回复';
          break;
        case "2":
          this.dialogRepeatTitle  = '差评回复';
          break;
        case "3":
          this.dialogRepeatTitle  = '差评回复';
          break;
        case "4":
          this.dialogRepeatTitle  = '差评回复';
          break;
        case "5":
          this.dialogRepeatTitle  = '非差评回复';
          break;
        case "6":
          this.dialogRepeatTitle  = '非差评回复';
          break;
        case "5,6":
          this.dialogRepeatTitle  = '非差评回复';
          break;
      }
    },
    singleDetail(rn){
      for(let i =0;i< this.detailList.length;i++){
        this.detailList[i].content = ''
      }

      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];
          }
        }
      }

      if(rn =='1'){
        for(let i =0;i< this.detailList.length;i++){
          if(this.detailList[i].id =='23'){
            this.detailList[i].content = this.detailAllList[rn].OPERATION_TIME1;
          }
        }
      }

    },
   sizeOrPageChange(page,size){
     this.currentPage = page;
     this.pageSize = size;
     this.commit();
   },
   openModel(type,data) {
     this.operationType = type || ''
     this.currentData = data;
     this.isModelShow = true
     console.log(type,data)
   },
    ...mapEvaluateMutations(['evaluateCurrentId','evaluateFirstLevel','evaluateSecondLevel','evaluateThirdLevel','evaluateTimer','evaluateRepeatId'])
 },
  watch:{
    isModelShow:{
      handler(val){
        if(!val){
          this.onCommit();
        }
      },
      deep:true
    },
    currentRepeatId:{
      handler(){
        this.onCommit();
      },
      deep:true
    }
  }
}
</script>

<style scoped lang="scss">
#evaluate-repeat{
  width:100%;
  height:100%;
  .tab-number{
    width: 100%;
    display: flex;

    .tab-area{
      margin-bottom: 1px;
      width:70%;
      ::v-deep{
        .tab-item{

          //padding: 2px 4px;
          margin-right: 10px;

          &.class1{
            &.active{
              color: #40a0ff;
            }
            background: rgba(0, 128, 255, 0.3);
            border: 1px solid #0080ff;
          }
          &.class2{
            &.active{
              color: #e6ac00;
            }
            background: rgba(255, 191, 0, 0.3);
            border: 1px solid #ffbf00;
          }
          &.class3{
            &.active{
              color: #ff5c25;
            }
            background: rgba(255, 64, 0, 0.3) ;
            border: 1px solid #ff4000;
          }
          &.class4{
            &.active{
              color: #39e545;
            }
            background: rgba(34, 172, 56, 0.3);
            border: 1px solid #22ac38;
          }
        }
      }
    }
    .search_right{
      width: 30%;
      height: 100%;
      color: #fff;
      font-size: 17px;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
    }
  }
  .table_wide{
    width: 100%;
    height: 80%;
  }
  .table-area{
    width: 100%;
    height:100%;
  }
 .page{
   margin-top: 30px;
   text-align: right;
 }
  .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_bg{
            width: 50px;
            height: 50px;
            border-radius: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .single_bg_active, single_bg_active:hover{
            background: rgb(0,128,255,0.2);
            .single_num{
              font-weight: bold;
              color: #fdbf00 !important;
            }
          }
          .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_active:focus,.single_button_active:hover{
            background:#2c91cc;
          }
        }
        .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%;
      height: 500px;
      padding-left: 20px;
      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;
        }
      }
    }
  }
  .number_body{
    color: #FFF;
    height: 500px;
    .search_left{
      width: 100%;
      padding-bottom: 20px;
      >span{
        font-size: 18px;
      }
    }
    .button_list{
      display: flex;
      flex-wrap:wrap;
      justify-content: flex-start;
      align-items: center;
      >span{
        cursor: pointer;
        font-size: 20px;
        font-weight: bold;
        width: 30%;
        margin-left: 1.5%;
        margin-left: 1.5%;
        margin-bottom: 20px;
        height: 40px;
        border:1px solid #2c91cc;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .diff_color{
    color: #01d6ff;
  }
}
</style>