devProjectViewJt/src/views/dev/detail/nodivandnofee/provinceDetail.vue

<!-- 计费大于拆分的明细-->
<template>
  <div id="contain_nofee_province" style="width:100%;height: 100%;position: inherit">
      <div style="height:99%;width:100%;position:relative">
        <p style="color: darkgreen;font-size: large">不包含免费车-->总计费金额：{{gpaFee}}(万元)&nbsp;&nbsp;&nbsp; 总拆分金额：{{divFee}}(万元)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本省总拆分金额：{{bdivFee}}(万元)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;跨省总拆分金额：{{kdivFee}}(万元)</p>
        <div style="height: 90%;width: 100%">
          <el-table :data="tableData" width="100%"  id="table_el_province"  :header-cell-style="{background:'#e9ecee',align:'center'}"  border
                    v-loading="tableLoading"
                 >
            <el-table-column type="index" label="序号" width="100px" :index="indexProvincemethod" align="center"/>
            <el-table-column  prop="classdate" label="日期" :show-overflow-tooltip="true"  :formatter="dateFormatter" width="180px"  resizable align="center" />
            <el-table-column  prop="passid" label="PASSID" :show-overflow-tooltip="true"  width="320px"  resizable align="center" />
            <el-table-column  prop="gpaEntime" label="计费开始日期" width="200px" :formatter="dateFormatterSSS"  align="center" />
            <el-table-column  prop="gpaExtime" label="计费结束日期" width="200px" :formatter="dateFormatterSSS" align="center" />
            <el-table-column  prop="vehicleid" label="车牌号" :show-overflow-tooltip="true"  width="150px"  resizable align="center" />
            <el-table-column  prop="vehicleidColor" label="车牌颜色" :show-overflow-tooltip="true"  width="100px"  resizable align="center" />
            <el-table-column  prop="gpaFee" label="计费金额(元)"  width="250px"  resizable align="center" />
            <el-table-column  prop="divFee" label="拆分金额(元)"  width="250px"  resizable align="center" />
            <el-table-column  prop="vehicletypeName" label="车型" :show-overflow-tooltip="true"  width="100px"  resizable align="center" />
            <el-table-column  prop="vehicleclassName" label="车种"  :show-overflow-tooltip="true"  width="100px"  resizable align="center" />
            <el-table-column  prop="bak1" label="本省/跨省"  :show-overflow-tooltip="true"  width="100px"  resizable align="center" />
            <el-table-column  prop="vehicleclass" label="车种" v-if="tableDisable"  :show-overflow-tooltip="true"  width="100px"  resizable align="center" />
            <el-table-column  prop="status" label="拆分状态"    width="400px"  resizable align="center" />
            <el-table-column  prop="roadno" label="计费单元组id" v-if="tableDisable" align="center" />
          </el-table>
        </div>
        <div style="height: 5%;width: 100%;position:relative">
          <!-- 分页 -->
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[20, 30,50,100]"
              :page-size="pageSize"
              :total="totalCount"
              layout="total, sizes, prev, pager, next, jumper"
              style="width: 90%;height:100%;padding: 0;position:relative;margin-top:1%;bottom: 0;font-size: x-small">
          </el-pagination>
        </div>
      </div>
  </div>
</template>

<style >
#table_el_province{
  height: 100% ;
  width: 100%;
}
</style>
<script >

import { ref} from "vue";
import {Filter,Search} from '@element-plus/icons-vue'
import {exportEveryData, exportExcleProvinceData, getProvinceData, getProvinceListByPage} from "@/util/api/api";
import tool from "@/util/tool";
var _this;
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 15,
      totalCount: 0,
      tableData: ref([]),
      isShowMap: false,
      isShowFeeDetail: false,
      tableDisable:false,
      mapParams: {},
      Filter: Filter,
      tableLoading: false,
      searchButton: Search,
      doubleclikIndex: -1,//双击选中的行号
      params:{},
      gpaFee:0,
      divFee:0,
      bgpaFee:0,
      kgpaFee:0,
      bdivFee:0,
      kdivFee:0,

    }
  },
  //props: ['params'],
  methods: {
    refreshProvinceData(paramAll){
      this.tableLoading=true;
      this.params=paramAll;
      getTableDataLists();
      getSumDataLists();
    },exportExcleProvince(paramAll){
      exportProvinceData(paramAll);
    },closeDialogDivfee(){//当数据匹配成功之后，需要重新加载数据
      this.isShowFeeDetail=false;
      getTableDataLists();
    }, skipMapVue(row) {
      this.isShowMap = true;
      let _params={
        "GPA_TOLLINTERVALID": "",
        "GPA_FEEGROUP": "",
        "GPA_FEE": "",
        "DIV_TOLLINTERVALID": row.divTollintervalid,
        "DIV_FEEGROUP": row.divFeegroup,
        "DIV_FEE": row.divFee,
      }
      this.isShowMap = true;
      this.mapParams = _params;
    },indexProvincemethod(index){
    return index + this.pageSize * (this.currentPage -1)+1;
  },matchFeeData(row){
      this.isShowFeeDetail=true;
      let _params={
        "divTollintervalid": row.divTollintervalid,
        "classdate": this.dateFormatter(null,null,row.classdate),
        "divEntime": this.dateFormatterSSS(null,null,row.divEntime),
        "divExtime": this.dateFormatterSSS(null,null,row.divExtime),
        "passid": row.passid,
        "vehicleid": row.vehicleid,
        "divFeeGroup": row.divFeegroup,
        "vehicletypeName": row.vehicletypeName,
        "divFee": row.divFee,
        "feeStatus": 4,
        "vehicleclass": row.vehicleclass,
        "startTime": tool.DayDec(row.classdate,0),
        "endTime": tool.DayDec(row.classdate,-10)
      }
      this.$nextTick(() => {
        this.$refs["divMatchNoFee"].refreshData(_params);
      })
    },getmultitypeColor(status) { // 根据内容返回颜色值
      if (status !== undefined) {
        if (status ==="匹配一条") {
          return '#67C23A';  // 成功：绿色
        } else if (status ==="匹配多条") {
          return '#f3650d';  //
        }else {
          return '#f10505';  //
        }
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.isLoding = true;
      getTableDataLists();
    },handleCurrentChange(val) {
      this.currentPage = val;
      this.isLoding = true;
      getTableDataLists();
    }, dateFormatter(row, column, cellValue) {
      if (cellValue == null || cellValue == "" || cellValue == undefined) {
        return "";
      }
      const date = new Date(cellValue);
      // 格式化日期，并返回字符串
      //return `${date.toLocaleDateString()}`;
      return formatDate(cellValue, "YYYY-MM-DD");
    }, dateFormatterSSS(row, column, cellValue) {
      if (cellValue == null || cellValue == "" || cellValue == undefined) {
        return "";
      }
      const date = new Date(cellValue);
      // 格式化日期，并返回字符串
      //return `${date.toLocaleDateString()}`;
      return formatDate(cellValue, "YYYY-MM-DD HH:MM:SS");
    }
  }, components: {
    Search
  },
  mounted() {
    _this = this;
  }
}
function getTableDataLists(){
  _this.tableLoading=true;
  var paramsData=_this.params;
  paramsData.pageNum=_this.currentPage;
  paramsData.pageSize=_this.pageSize;
  getProvinceListByPage(paramsData).then(res=>{
    _this.tableLoading=false;
    if(res.code<=0){
      return false;
    }else{
      _this.totalCount=res.total;
      _this.tableData=res.records;
      _this.isLoding=false;
    }
  })
}
function getSumDataLists(){
  var paramsData=_this.params;
  getProvinceData(paramsData).then(res=>{
    if(res.count<=0){
      return false;
    }else{
      let obj=res.data[0];
      _this.gpaFee=obj.gpaFee;
      _this.divFee=obj.divFee;
      _this.bgpaFee=obj.bgpafee;
      _this.kgpaFee=obj.kgpafee;
      _this.bdivFee=obj.bdivfee;
      _this.kdivFee=obj.kdivfee;
    }
  })
}

//日期格式修改

function formatDate(dateString,format) {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');

  let hour=date.getHours();
  let minute=date.getMinutes();
  let second=date.getSeconds();
  if(hour<10){
    hour ="0"+hour;
  }
  if(minute<10){
    minute ="0"+minute;
  }
  if(second<10){
    second ="0"+second;
  }
  const milSecond=date.getMilliseconds();
  if(format=="YYYY-MM-DD"){
    return `${year}-${month}-${day}`;
  }else if(format=="YYYY-MM-DD HH:MM:SS"){
    return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
  }else if(format=="YYYY-MM-DD HH:MM:SS:SSS"){
    return `${year}-${month}-${day} ${hour}:${minute}:${second}:${milSecond}`;
  }else if(format=="HH:MM:SS"){
    return `${hour}:${minute}:${second}:${milSecond}`;
  }
  return "";
}

function getCurrentDate(){
  var myDate = new Date(); //获取今天日期
  myDate.setDate(myDate.getDate() - 1);
  // dateTemp = myDate.getFullYear()+"/"+(c)+"/"+myDate.getDate();
  return myDate.getFullYear()+"-"+((myDate.getMonth()+1) >9?(myDate.getMonth()+1):"0"+(myDate.getMonth()+1))+"-"+(myDate.getDate() >9?myDate.getDate():"0"+myDate.getDate());
}

function getCurrentDateHour(){
  var date = new Date(); //获取今天日期
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  let hour=date.getHours();
  let minute=date.getMinutes();
  let second=date.getSeconds();
  if(hour<10){
    hour ="0"+hour;
  }
  if(minute<10){
    minute ="0"+minute;
  }
  if(second<10){
    second ="0"+second;
  }
  // dateTemp = myDate.getFullYear()+"/"+(c)+"/"+myDate.getDate();
  return `${year}${month}${day}${hour}${minute}${second}`;
}


function exportProvinceData(paramsData) {
  paramsData.status=2;
  if(!paramsData.queryStartTime){
    alert("请选择日期");
    return ;
  }
  exportExcleProvinceData({paramsData: JSON.stringify(paramsData)}).then(res => {
    if (res.data != "") {
      //fileName:下载的文件名

      var fileName = '计费大于拆分_' + tool.getCurrentDateHour(); //decodeURIComponent(res.headers["Content-Disposition"].split("=")[1])
      let blob = new Blob([res.data], {type: 'application/vnd.ms-excel;charset=utf-8'});
      // 针对ie浏览器
      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(blob, fileName);
      } else {
        //非ie浏览器
        var downloadElement = document.createElement("a");
        var href = window.URL.createObjectURL(blob); //下载的url
        downloadElement.href = href;
        downloadElement.download = fileName; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放blob对象
      }
    }
    //设置加载状态为false
    _this.tableLoading = false;
  });
}
</script>