devProjectViewJt/src/views/dev/rankAndtollintervalid.vue

<!--排名数据与计费列表 -->
<template>
  <div class="top_div_rank">
    <el-form :inline="true"  label-position="right"  class="demo-form-inline" style="width:100%;height: 100%">
      <el-form-item><span style="color: #67c23a;font-size: large">通用条件</span></el-form-item>
      <el-form-item label="日期："   class="s_el_row">
        <el-date-picker
            v-model="rpTime"
            type="datetimerange"
            range-separator="To"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD HH:mm:ss"
            format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item label="分公司名称："  class="s_el_row" style="width:13%">
        <el-select v-model="subcomno"  @change="changesubcomnoValue" filterable="true" placeholder="请选择..." clearable="true" style="width:100%;height:100%;border-color: gainsboro">
          <el-option
              v-for="item in subcomDatas"
              :key="item.VALUE"
              :label="item.LABEL"
              :value="item.VALUE">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" style="width:8%;margin-right:5px" class="s_el_row">
        <div  style="display:flex;text-align: left; height:100%; position: relative;margin:0;padding:0">
          <el-button type="primary" style="margin-top: 0px;" @click="search" class="query_button" size="default" :icon="searchButton">查询</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
  <el-divider id="divider_00"></el-divider>
<div class="contain-div_rank">
    <div class="middle-div_rank">
        <div class="middle-div-left_rank">
           <el-row style="padding-bottom: 2%;" type="flex" justify="center" align="middle">
             <el-col :span="12">
                 <el-select v-model="divStatus"
                            placeholder="请选择拆分状态"
                            size="large"
                            clearable="true"
                            filterable="true"
                            @change="changeRank"
                            style="width:100%">
                   <el-option
                       v-for="item in divStatusList"
                       :key="item.VALUE"
                       :label="item.LABEL"
                       :value="item.VALUE"
                   />
                 </el-select>
             </el-col>
             <el-col :span="3" style="text-align: center;justify-content: center;align-items: center">排名数：</el-col>
              <el-col :span="9">
                <el-input-number v-model="rankNum" @change="changeRankData" :min="1"  label=""></el-input-number>
              </el-col>
          </el-row>
              <el-table :data="rankdata" :header-cell-style="{background:'rgb(201,198,198)',align:'center'}" height="97%" border v-loading="tableloading"
              @row-dblclick="showDivDetial">
                <el-table-column  type="index" label="排名" align="center" width="60px"/>
                <el-table-column  prop="tollintervalidname" label="计费单元" :show-overflow-tooltip="true"  width="220px"  resizable align="center" />
                <el-table-column  prop="tollintervalid" label="计费单元id"  v-if="false" />
                <el-table-column  prop="fee" label="计费金额(万元)" :show-overflow-tooltip="true" width="100px"   resizable align="center" />
                <el-table-column  prop="divfee" label="拆分金额(万元)" :show-overflow-tooltip="true" width="100px"   resizable align="center" />
              </el-table>
        </div>
      <el-divider direction="vertical" id="divider_01"></el-divider>
      <div class="middle-div-right_rank">
            <div class="hz-div_rank">
                <el-row style="padding-bottom: 20px;position: relative;border-bottom: 0.5px #c9c6c6 solid">
                  <el-col :span="6">
                     <i style="font-size: 15px">总车流量：{{carCount}} 万辆</i>
                  </el-col>
                  <el-col :span="6">
                    <i style="font-size: 15px">总计费金额：{{feeTotal}} 万元</i>
                  </el-col>
                  <el-col :span="6" v-if="false">
                    <i style="font-size: 15px">总应收金额：{{payfeeTotal}} 万元</i>
                  </el-col>
                  <el-col :span="6">
                    <i style="font-size: 15px">总拆分金额：{{divfeeTotal}} 万元</i>
                  </el-col>
                </el-row>
              <el-row style="padding-bottom:10px;position: relative;">
                <el-col :span="24">
                  <el-radio-group v-model="vehicleclassText" @change="changeData">
                    <el-radio label="KC">客车</el-radio>
                    <el-radio label="HC">货车</el-radio>
                    <el-radio label="JM">减免车</el-radio>
                  </el-radio-group>
                </el-col>
              </el-row >
                <el-row style="padding-bottom:15px;position: relative;border-bottom: #c9c6c6 solid">
                  <el-col :span="6" >
                    <i style="font-size: 15px">车流量：{{typecarCount}} 万辆</i>
                  </el-col>
                  <el-col :span="6" >
                    <i style="font-size: 15px">计费金额：{{typefeeTotal}} 万元</i>
                  </el-col>
                  <el-col :span="6" v-if="false">
                    <i style="font-size: 15px">应收金额：{{typepayfeeTotal}} 万元</i>
                  </el-col>
                  <el-col :span="6">
                    <i style="font-size: 15px">拆分金额：{{typedivfeeTotal}} 万元</i>
                  </el-col>
                </el-row>
            </div>
            <div class="dt-div_rank">
                 <div style="height: 8%;width: 100%;position:relative">
                   <el-form :inline="true" :label-position="right"  style="width:100%;height: 100%;margin-top: 20px">
                     <el-form-item label="路线名称：">
                       <el-select v-model="roadLineNo"  @change="changeRoadLine" filterable="true" placeholder="请选择..." clearable="true" style="width:100%;height:100%;border-color: gainsboro">
                         <el-option
                             v-for="item in roadLineList"
                             :key="item.VALUE"
                             :label="item.LABEL"
                             :value="item.VALUE">
                         </el-option>
                       </el-select>
                     </el-form-item>
                     <el-form-item label="方向：">
                       <el-switch
                           v-model="directRoad"
                           @change="changeDirect"
                           active-text="上行"
                           active-value="1"
                           inactive-text="下行"
                           inactive-value="2">
                       </el-switch>
                     </el-form-item>
                     <el-form-item label="" style="width:8%;margin-right:5px" class="s_el_row">
                       <div  style="display:flex;text-align: left; height:100%; position: relative;margin:0;padding:0">
<!--                         <el-button type="primary" style="margin-top: 0px;" @click="searchRoad" class="query_button" size="default" :icon="searchButton">查询</el-button>-->
                         <el-button type="primary" style="margin-top: 0px;" @click="showRoadEchart" class="query_button" size="default" :icon="searchButton">走势图</el-button>
                       </div>
                     </el-form-item>
                   </el-form>
                 </div>
                 <div style="height: 90%;width: 100%;position:relative">
                     <el-table :data="roadLineTableData" height="100%" :header-cell-style="{background:'rgb(213,216,217)',align:'center'}"
                               border v-loading="roadLineloading" show-summary>
                       <el-table-column  type="index" label="序号" align="center" width="100px"/>
                       <el-table-column  prop="tollintervalidname" label="门架名称" width="300px" align="center" />
                       <el-table-column  prop="fee" label="计费总金额(万元)" align="center" width="260px"/>
                       <el-table-column  prop="divfee" label="拆分总金额(万元)" align="center" width="220px"/>
                       <el-table-column  prop="carcount" label="计费总车流量(万辆)" align="center" width="200px"/>
                     </el-table>
                 </div>
            </div>
      </div>
    </div>
</div>
 <el-dialog :title="feeunitTitleMain"
            v-model="feeDetailShow"
            width="80%"
            top="0.5%"
            style="height: 50%"
            :close-on-click-modal="clickDialog">
   <feeStatDetail :key="new Date().getTime()" :begindate="begindate" :enddate="enddate" :divStatus="divStatus" :tollvalid="tollvalid"></feeStatDetail>
 </el-dialog>

  <el-dialog title="走势图"
             v-model="showRoadLine"
             width="80%"
             top="0.5%"
             style="height: 50%"
             :close-on-click-modal="clickDialog">
    <roadLineEcharts ref="roadLineEcharts" ></roadLineEcharts>
  </el-dialog>
</template>
<style >
html{
  height: 98% !important;
  width: 100% !important;
}
body{
  height: 100% !important;
  width: 99% !important;
}
#app{
  height: 100% !important;
  width: 100% !important;
}
.contain-div_rank{
  height: 91%;
  width: 100%;
}
.top_div_rank{
  height: 5%;
  width: 100%;
  /*border-bottom: 0.1px #c9c6c6 ;*/
  top: 0;
  /*z-index: 1000; /* 确保它在其他内容之上 */
}
#divider_00{
  margin: 0px !important;
  margin-top: 2px !important;
  margin-bottom: 15px !important;
}
#divider_01{
  height: 100%;
  margin: 0px !important;
  margin-left: 1% !important;
  margin-right: 1% !important;
}
.middle-div_rank{
  height: 100%;
  width: 100%;
  display: flex;
  /*border-top: #c9c6c6 solid;*/
}
.middle-div-left_rank{
  height: 100%;
  width: 30%;
 /* border-right: #c9c6c6 solid;*/
}
.middle-div-right_rank{
  height: 100%;
  width: 70%;
}
.hz-div_rank{
  height: 15%;
  width: 100%;
}
.dt-div_rank{
  height: 85%;
  width: 100%;
}

</style>
<script >
import {
Search
} from '@element-plus/icons-vue'
import {getSelectList, getRankList, getHzData, getFeeunitListByPage,getGantryListByLineNo} from "@/util/api/api";
import feeStatDetail from '@/views/dev/detail/feeStatDetail.vue'
import roadLineEcharts from '@/views/dev/echarts/roadLineEcharts.vue'
var _this;
export default {
name: "checkEcharts",
data() {
  return {
    pageSize: 20,
    pageNum:1,
    totalCount:0,
    tableDataDetail: [],
    tableDisable:false,
    tableloading:false,
    feeloading:false,
    rpTime:"",
    searchButton:Search,
    clickDialog:false,
    divStatus:"",
    selectedText:"拆分准确",
    divStatusList:[],
    rankList:[{"VALUE":1,"LABEL":"10"},{"VALUE":2,"LABEL":"20"},{"VALUE":3,"LABEL":"30"}],
    carCount:"0",
    feeTotal:"0",
    payfeeTotal:"0",
    divfeeTotal:"0",
    typecarCount:"0",
    typefeeTotal:"0",
    typepayfeeTotal:"0",
    typedivfeeTotal:"0",
    begindate:"",
    enddate:"",
    rankdata:[],
    rankNum:10,
    vehicleclassText:"KC",
    feeunitTitleMain:"",
    feeDetailShow:false,
    tollvalid:"",
    subcomDatas: [],
    roadDatas: [],
    staDatas: [],
    roadLineList: [],
    subcomno: "",
    roadno: "",
    stano: "",
    queryfeename:"",
    roadLineNo:"",  //路线编码
    directRoad:"1",
    roadLineloading:false,
    roadLineTableData:[],
    showRoadLine:false
  }
},
methods: {
  handleSizeChange(val) {
    this.pageSize = val;
    this.feeloading=true;
    getFeeunitlist();
  },handleCurrentChange(val) {
    this.pageNum = val;
    this.feeloading=true;
    getFeeunitlist();
  },search() {//查询
      if(this.rpTime){
        this.begindate=this.rpTime[0];
        this.enddate=this.rpTime[1];
        this.tableloading=true;
        this.feeloading=true;
      }else{
        alert("请选择日期");
        return ;
      }
      var params={
        "pageNum":1,
        "pageSize":10,
        "queryStartTime":this.begindate,
        "queryEndTime":this.enddate,
        "status":this.divStatus,
        "subcomno":this.subcomno,
        "roadno":this.roadno,
        "stano":this.stano
      }
    getRankList(params).then(res=>{
      this.rankdata=res.records
      this.tableloading=false;
    })

    this.getAllFeeData();
      getFeeunitlist();
    getGantryList();
  },changeRank(vale){
    if(!this.rpTime){
      alert("请选择日期");
      return ;
    }
    this.tableloading=true;
    this.divStatus=vale;
     const selectedItem = this.divStatusList.find(item => item.VALUE === vale);
     this.selectedText = selectedItem ? selectedItem.LABEL : '';
    var params={
      "pageNum":1,
      "pageSize":(this.rankNum===null||this.rankNum==='')?10:this.rankNum,
      "queryStartTime":this.begindate,
      "queryEndTime":this.enddate,
      "status":this.divStatus,
      "subcomno":this.subcomno,
      "roadno":this.roadno,
      "stano":this.stano
    }
    getRankList(params).then(res=>{
      this.rankdata=res.records
      this.tableloading=false;
    })
  },changeRankData(vale){
    this.tableloading=true;
    var params={
      "pageNum":1,
      "pageSize":vale,
      "queryStartTime":this.begindate,
      "queryEndTime":this.enddate,
      "status":this.divStatus,
      "subcomno":this.subcomno,
      "roadno":this.roadno,
      "stano":this.stano
    }
    getRankList(params).then(res=>{
      this.rankdata=res.records
      this.tableloading=false;
    })
  },changeData(lablev){
    this.vehicleclassText=lablev;
    var params={
      "queryStartTime":this.begindate,
      "queryEndTime":this.enddate,
      "subcomno":this.subcomno,
      "roadno":this.roadno,
      "stano":this.stano
    }
    params.vehicleclassText=lablev;
    getHzData(params).then(res=>{
      this.typecarCount=res.carcount;
      this.typefeeTotal=res.feeTotal;
      this.typepayfeeTotal=res.payfeeTotal;
      this.typedivfeeTotal=res.divfeeTotal;
    });
  },searchFee(){
    getFeeunitlist();
  },showDivDetial(row,column,e){
    if(row.length){
      this.selectedText="";
    }
    this.feeunitTitleMain=row.tollintervalidname +  (this.selectedText===""?"":"("+this.selectedText+")");
    this.feeDetailShow=true;
    this.tollvalid=row.tollintervalid;
  },getAllFeeData(){
    var params={
      "queryStartTime":this.begindate,
      "queryEndTime":this.enddate,
      "subcomno":this.subcomno,
      "roadno":this.roadno,
      "stano":this.stano
    }
    getHzData(params).then(res=>{
            this.carCount=res.carcount;
            this.feeTotal=res.feeTotal;
            this.payfeeTotal=res.payfeeTotal;
            this.divfeeTotal=res.divfeeTotal;
    });
    params.vehicleclassText=this.vehicleclassText;
    getHzData(params).then(res=>{
        this.typecarCount=res.carcount;
        this.typefeeTotal=res.feeTotal;
        this.typepayfeeTotal=res.payfeeTotal;
        this.typedivfeeTotal=res.divfeeTotal;
    });
  }, changesubcomnoValue() {
    this.stano="";
    this.roadno="";
    getRoadlist();
    getStalist();
  }, changeroadValue() {
    this.stano="";
    getStalist();
  },changeRoadLine(){//修改路线下拉值
    if(this.rpTime){
      this.begindate=this.rpTime[0];
      this.enddate=this.rpTime[1];
      getGantryList();
    }else{
      alert("请选择日期");
      return ;
    }
  },changeDirect(){//切换上下行
    if(this.rpTime){
      this.begindate=this.rpTime[0];
      this.enddate=this.rpTime[1];
      getGantryList();
    }else{
      alert("请选择日期");
      return ;
    }
  },showRoadEchart(){//显示走势图
    if(this.roadLineTableData.length <1){
      alert("无数据");
      return false;
    }else{
      this.showRoadLine=true;
      this.$nextTick(() => {
        this.$refs["roadLineEcharts"].refreshData(this.roadLineTableData);
      })
    }

  }
},
components: {
  roadLineEcharts,
  feeStatDetail
},
mounted() {
  _this=this;

  getsubcomlist();
  getRoadlist();
  getStalist();
  let selectType={
    "selectType":"DIVSTATUS"
  }
  getSelectList(selectType).then(res=>{
    this.divStatus=1;
    if(res.code>0){
      this.divStatusList=res.data;
    }
  })
   selectType={
    "selectType":"ROADLINE"
  }
  getSelectList(selectType).then(res=>{
    if(res.code>0){
      this.roadLineList=res.data;
      if(this.roadLineList.length>0){
        this.roadLineNo=this.roadLineList[0].VALUE;

      }
    }
  })
}
}

function getsubcomlist() {
  let staParams = {
    "subcomno": _this.subcomno,
    "roadno": _this.roadno,
    "selectType": "SUBCOM"
  }
  getSelectList(staParams).then(
      res => {
        if (res.data) {
          _this.subcomDatas = res.data
        } else {
          _this.subcomDatas = [{}];
        }
      }
  )
}

function getRoadlist() {
  let staParams = {
    "subcomno": _this.subcomno,
    "roadno": _this.roadno,
    "selectType": "ROAD"
  }
  getSelectList(staParams).then(
      res => {
        if (res.data) {
          _this.roadDatas = res.data
        } else {
          _this.roadDatas = [{}];
        }
      }
  );
}

function getStalist() {
  let staParams = {
    "subcomno": _this.subcomno,
    "roadno": _this.roadno,
    "selectType": "STANO"
  }
  getSelectList(staParams).then(
      res => {
        if (res.data) {
          _this.staDatas = res.data
        } else {
          _this.staDatas = [{}];
        }
      }
  )
}
function getFeeunitlist() {
  _this.feeloading=true;
  let staParams = {
    "subcomno": _this.subcomno,
    "roadno": _this.roadno,
    "stano": _this.stano,
    "tollintervalidname":_this.queryfeename,
    "pageNum":_this.pageNum,
    "pageSize":_this.pageSize
  }
  getFeeunitListByPage(staParams).then(
      res => {
        _this.feeloading=false;
          _this.tableDataDetail=res.records;
          _this.totalCount=res.total;
      }
  )
}

//获取路线门架
function getGantryList() {
  _this.roadLineloading=true;
  let staParams = {
    "roadLineNo":_this.roadLineNo,
    "subcomno":_this.subcomno,
    "queryStartTime":_this.begindate,
    "queryEndTime":_this.enddate,
    "directRoad":_this.directRoad
  }
  getGantryListByLineNo(staParams).then(
      res => {
        _this.roadLineloading=false;
        _this.roadLineTableData=res.data;
      }
  )
}
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());
}
</script>