application-credit/src/views/main/c-views/credit-data/data-imputation-push/MatterImputationStaticsSituation.vue

<template>
  <div class="statics-situation">
    <diy-el-form ref="formRef"  v-bind="{'span-attrs':{span:4}}"   v-model:model-form="forms" :forms="formConfig">
      <template #searchBtn>
        <el-button  type="primary" :icon="Search" @click="getTableData()">查询</el-button>
      </template>
      <template #plusBtn>
        <el-button  type="primary" :icon="Document" @click="showDialog('detail','report')">总计</el-button>
      </template>
    </diy-el-form>
    <div class="tables-part">
      <div class="table-single-part">
        <div class="single-header">
          <span>监管类事项</span>
        </div>
        <div class="single-content">
          <my-table border
                    :has-operation="false"
                    :table-data="tableData.JG"
                    :headers="matterImputationStaticsSituationHeaderJG">
            <template #ACCOUNTTYPE="{data}">
              <span class="show-part" @click="getWatchDetail(data.ACCOUNTTYPE,data.XDR)">{{data.ACCOUNTTYPE}}</span>
            </template>
          </my-table>
        </div>
      </div>
      <div class="table-single-part">
        <div class="single-header">
          <span>许可类事项</span>
        </div>
        <div class="single-content">
          <my-table border
                    :has-operation="false"
                    :table-data="tableData.XK"
                    :headers="matterImputationStaticsSituationHeaderJG">
          </my-table>
        </div>
      </div>
      <div class="table-single-part">
        <div class="single-header">
          <span>明细事项</span>
        </div>
        <div class="single-content">
          <my-table border
                    :has-operation="false"
                    :table-data="tableData.MX"
                    :headers="matterImputationStaticsSituationHeaderJG">
            <template #ACCOUNTTYPE="{data}">
              <span class="show-part" @click="showDialog('detail','matter',data)">{{data.ACCOUNTTYPE}}</span>
            </template>
          </my-table>
        </div>
      </div>
      <div class="table-single-part">
        <div class="single-header">
          <span>履约类事项</span>
        </div>
        <div class="single-content">
          <my-table border
                    :has-operation="false"
                    :table-data="tableData.LY"
                    :headers="matterImputationStaticsSituationHeaderJG">
          </my-table>
        </div>
      </div>
    </div>
    <template v-if="isEditDialogShow && currentDialogType == 'matter'">
      <matter-detail-setting-dialog  @getTableData="getTableData" :dialog-operation-type="dialogOperationType" :current-dialog-obj="currentDialogOpObj" v-model:dialog-visible="isEditDialogShow" />
    </template>
    <template v-if="isEditDialogShow && currentDialogType == 'report'">
      <matter-imputation-statics-situation-report-setting-dialog  @getTableData="getTableData" :dialog-operation-type="dialogOperationType" :current-dialog-obj="currentDialogOpObj" v-model:dialog-visible="isEditDialogShow" />
    </template>
  </div>
</template>

<script>
import DiyElForm from "@/components/common/DiyElForm.vue";
import MyTable from "@/components/common/MyTable.vue";
import {onBeforeMount, ref} from "vue";
import {Close, Delete, Document, Search, Plus, SuccessFilled} from "@element-plus/icons-vue";
import {matterImputationStaticsSituation} from "@/data/all-form";
import {matterImputationStaticsSituationHeaderJG} from "@/data/all-table-header";
import {
  proSelectXyxxSjtjopone,
  proSelectXyxxSjtjopthree, proSelectXyxxSjtjoptwo
} from "@/service/credit-data/data-imputation-push/data-imputation-push";
import {getFullYear} from "@/units/use-method/veritification-tools";
import MatterDetailSettingDialog
  from "@/views/main/c-views/credit-data/data-imputation-push/MatterDetailSettingDialog.vue";
import MatterImputationStaticsSituationReportSettingDialog
  from "@/views/main/c-views/credit-data/data-imputation-push/MatterImputationStaticsSituationReportSettingDialog.vue";
import {useDetailOrEdit} from "@/units/use-method/usePagination";
import {InsertSyslog} from "@/units/use-method/user-log";
export default {
  name: "MatterImputationStaticsSituation",
  components: {MatterImputationStaticsSituationReportSettingDialog, MatterDetailSettingDialog, MyTable, DiyElForm},
  computed: {
    Delete() {
      return Delete
    },
    Search() {
      return Search
    },
    Document() {
      return Document
    },
    SuccessFilled() {
      return SuccessFilled
    },
    Close() {
      return Close
    }
  },
  setup(){
    const forms = ref({});
    const formRef = ref(null);
    const isEditDialogShow = ref(false);
    const currentDialogType = ref('')
    const formConfig = ref({...matterImputationStaticsSituation});
    const {changeOperation,currentOpObj:currentDialogOpObj,operationType:dialogOperationType} = useDetailOrEdit();
    const tableData = ref({
      JG:[],
      XK:[],
      MX:[],
      LY:[],
    })
    function getTableData(){
      getWatch();
      getPermission();
      getWatchDetail("市城管执法局","法人");
    }
    function getWatch(){ //获取监管类内容
      tableData.value.JG =[];
      proSelectXyxxSjtjopthree({
        startC:forms.value.START_DATE,
        //startC:"2019-01-01",
        endC:forms.value.END_DATE,
        pageSize:10000,
        pageIndex:1
      }).then(res =>{
        InsertSyslog(localStorage.getItem("xyxx_usercode"),localStorage.getItem("xyxx_unitcode"), "信息查询", "数据归集推送查询成功", "数据归集推送", "")
        tableData.value.JG = res.msg[0].Rows
      })
    }
    function getPermission(){ //获取许可类、履约类内容
      tableData.value.XK = []
      tableData.value.LY = []
      proSelectXyxxSjtjopone({
        startC:forms.value.START_DATE,
        //startC:"2019-01-01",
        endC:forms.value.END_DATE,
        pageSize:10000,
        pageIndex:1
      }).then(res =>{

        let date = res.msg[0];
        if (date.Rows != null && date.Rows != "null") {
          let Frarr = [];
          let Frarr1 = [];
          let Zrrarr = [];
          let Zrrarr1 = [];
          let secondFa = [];
          let secondZrr = [];
          let thirdFa = [];
          let forthFa = [];
          let thirdZrr = [];
          let forthZrr = [];
          for (let i = 0; i < date.Rows.length; i++) {

            var secondData = { 单位: "", 类别: "", XDR: "", 总数: "0" }
            var secondData1 = { 类别: "", XDR: "", 总数: "0" }
            if (date.Rows[i].类别 != "公积金缴存信息" && date.Rows[i].类别 != "公积金贷款逾期信息") {
              if (date.Rows[i].XDR == "法人") {
                secondData.类别 = date.Rows[i].类别;
                secondData.XDR = date.Rows[i].XDR;
                secondData.单位 = date.Rows[i].UNIT;
                secondData.总数 = date.Rows[i].总数 * 1;
                secondFa += secondData.总数 *1;
                Frarr.push(secondData);

              } else if (date.Rows[i].XDR == "自然人") {
                secondData.类别 = date.Rows[i].类别;
                secondData.XDR = date.Rows[i].XDR;
                secondData.单位 = date.Rows[i].UNIT;
                secondData.总数 = date.Rows[i].总数 * 1;
                secondZrr += secondData.总数 *1;
                Zrrarr.push(secondData);
              }

            } else {
              if (date.Rows[i].XDR == "法人") {
                secondData1.类别 = date.Rows[i].类别;
                secondData1.XDR = date.Rows[i].XDR;
                secondData1.总数 = date.Rows[i].总数 * 1;
                if (date.Rows[i].类别 != "公积金缴存信息") {
                  thirdFa += secondData1.总数* 1;
                } else {
                  forthFa += secondData1.总数* 1;
                }
                Frarr1.push(secondData1);

              } else if (date.Rows[i].XDR == "自然人") {
                secondData1.类别 = date.Rows[i].类别;
                secondData1.XDR = date.Rows[i].XDR;
                secondData1.总数 = date.Rows[i].总数 * 1;
                if (date.Rows[i].类别 != "公积金缴存信息") {
                  thirdZrr += secondData1.总数* 1;
                } else {
                  forthZrr += secondData1.总数 * 1;
                }
                Zrrarr1.push(secondData1);
              }
            }


          }
          let sortTwoCate = function (a, b) {
            var srcDataNew = ["xx", "rx","zx","fx"];
            if (srcDataNew.indexOf(a.单位) === srcDataNew.indexOf(b.单位)) {
              return 0;
            } else {
              if (srcDataNew.indexOf(a.单位) > srcDataNew.indexOf(b.单位)) {
                return 1;
              } else {
                return -1;
              }
            }

          }
          Frarr.sort(sortTwoCate);
          for (let i = 0 ; i < Frarr.length ; i++) {
            let obj = {
              ACCOUNTTYPE:Frarr[i].类别,
              XDR:Frarr[i].XDR,
              ACCOUNTNUMBER:Frarr[i].总数.toLocaleString()
            }
            tableData.value.XK.push(obj)
          }
          for (var i = 0 ; i < Zrrarr.length ; i++) {
            let obj = {
              ACCOUNTTYPE:Zrrarr[i].类别,
              XDR:Zrrarr[i].XDR,
              ACCOUNTNUMBER:Zrrarr[i].总数.toLocaleString()
            }
            tableData.value.XK.push(obj)
          }
          for (let i = 0 ; i < Frarr1.length ; i++) {
            let obj = {
              ACCOUNTTYPE:Frarr1[i].类别,
              XDR:Frarr1[i].XDR,
              ACCOUNTNUMBER:Frarr1[i].总数.toLocaleString()
            }
            tableData.value.LY.push(obj)
          }
          for (var i = 0 ; i < Zrrarr1.length ; i++) {
            let obj = {
              ACCOUNTTYPE:Zrrarr1[i].类别,
              XDR:Zrrarr1[i].XDR,
              ACCOUNTNUMBER:Zrrarr1[i].总数.toLocaleString()
            }
            tableData.value.LY.push(obj)
          }

        }else{
          tableData.value.XK = []
          tableData.value.LY = []
        }
      })
    }
    function getWatchDetail(xxsx,xdr){ //获取监管类下明细事项类查询
      tableData.value.MX = []
      proSelectXyxxSjtjoptwo({
        startC:forms.value.START_DATE,
        //startC:"2019-01-01",
        endC:forms.value.END_DATE,
        UNIT: xxsx,
        XDR_TYPE: xdr
      }).then(res =>{
        let date = res.msg[0];
        if (date.Rows != null && date.Rows != "null"){
          for(let i=0;i<date.Rows.length;i++){
            let obj = {
              ACCOUNTTYPE:date.Rows[i].XXSX,
              XDR:date.Rows[i].XDR,
              ACCOUNTNUMBER:date.Rows[i].ACCOUNTNUMBER.toLocaleString()
            }
            tableData.value.MX.push(obj);
          }
        }else{
          tableData.value.MX = []
        }
      })
    }
    function showDialog(type,dialogType,data){
      isEditDialogShow.value = true;
      currentDialogType.value = dialogType;
      if(dialogType == "matter"){
        let obj = {
          START_DATE:forms.value.START_DATE,
          //START_DATE:"2019-01-01",
          END_DATE:forms.value.END_DATE,
          XXSX:data.ACCOUNTTYPE,
        }
        changeOperation(type,obj)
      }else{
        changeOperation(type,data)
      }
    }
    onBeforeMount(() =>{
      forms.value.START_DATE = getFullYear("year") + "-01-01";
      forms.value.END_DATE = getFullYear("day");
      debugger
      getTableData()
    })
    return {
      forms,
      formRef,
      formConfig,
      getTableData,
      matterImputationStaticsSituationHeaderJG,
      tableData,
      getWatchDetail,
      showDialog,
      isEditDialogShow,
      currentDialogType,
      dialogOperationType,
      currentDialogOpObj
    }
  }
}
</script>

<style scoped lang="scss">
.statics-situation{
  padding: 20px;
}
.tables-part{
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: space-evenly;
}
.table-single-part{
  width: 48%;
  height: 48%;
}
.single-header{
  span{
    font-size: 16px;
    font-weight:bold;
  }
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px #e7eaec solid;
}
.single-content{
  padding-top: 10px;
  height: 250px;
  overflow: auto;
}
.show-part{
  color: #23527c;
}
</style>