meidu2021/daju/WebRoot/webpage/cn/com/lzt/sign/tbCarGasConsumption/tBCarGasConsumption.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/context/mytags.jsp" %>
<t:base type="jquery,easyui,tools,DatePicker"></t:base>
<div class="easyui-layout" fit="true">
    <div region="center" style="padding:0px;border:0px">
        <t:datagrid name="tBCarGasRefuelList" checkbox="false" fitColumns="true" title="车辆油耗统计"
                    actionUrl="TBCarGasConsumptionController.do?newDatagrid" onLoadSuccess="onLoadSuccess2"
                    idField="carId" fit="true" queryMode="group">
            <t:dgCol align="center" title="统计类型（默认按车辆统计）" field="queryType" dictionary="oilQueryType" hidden="true"
                     query="true" width="120"></t:dgCol>
            <t:dgCol align="center" title="车辆id" showLen="10" field="carId" hidden="true" queryMode="single"
                     width="120"></t:dgCol>
            <t:dgCol align="center" title="车牌号" showLen="10" field="plate" query="true" queryMode="single"
                     ></t:dgCol>
            <t:dgCol align="center" title="车辆类型" field="carType" dictionary="carType" queryMode="single" query="true"
                     ></t:dgCol>
            <t:dgCol align="center" title="加油点" showLen="10" field="gasStation" query="true" queryMode="single"
                     ></t:dgCol>
            <t:dgCol align="center" title="统计日期" field="queryDate" formatter="yyyy-MM-dd" hidden="true" query="true"
                     queryMode="group" width="120"></t:dgCol>
            <t:dgCol align="center" title="加油统计日期起" field="refuelStartTime" formatter="yyyy-MM-dd" queryMode="group"
                     width="120"></t:dgCol>
            <t:dgCol align="center" title="加油统计日期止" field="refuelEndTime" formatter="yyyy-MM-dd" width="120"></t:dgCol>
            <t:dgCol align="center" title="里程统计日期起" field="startTime" formatter="yyyy-MM-dd" queryMode="group"
                     width="120"></t:dgCol>
            <t:dgCol align="center" title="里程统计日期止" field="endTime" formatter="yyyy-MM-dd" width="120"></t:dgCol>
            <t:dgCol align="center" title="总油耗(L)" field="quantity" width="120"></t:dgCol>
            <t:dgCol align="center" title="行驶里程(Km)" field="totalMileage" width="120"></t:dgCol>
            <t:dgCol align="center" title="百公里油耗(L/100*Km)" field="baseQuantity" width="120"></t:dgCol>
            <t:dgCol align="center" title="总油费(￥)" field="refuelMoney" width="120"></t:dgCol>
            <t:dgCol align="center" title="油耗状态" field="errStatus" width="120"></t:dgCol>
            <t:dgToolBar title="导出" icon="icon-put" operationCode="put"  url="TBCarGasConsumptionController.do?ExportXls" funname="ExportXls"></t:dgToolBar>
        </t:datagrid>
    </div>
</div>
<script type="text/javascript">
    $(() => {
        $('.datagrid-header-rownumber').append(`<span>序号</span>`);
    })

    function onLoadSuccess2(obj) {
        var totalOil = obj.obj['totalOil'];
        var totalMileage = obj.obj['totalMileage'];
        var totalMoney = obj.obj['totalMoney'];
        var queryType = obj.obj['queryType'];
        var totalHtml = `<div id="totalHtml">
      <div>统计油耗:<span>` + totalOil.toFixed(2) + `</span>L</div>
      <div>统计里程:<span>` + totalMileage.toFixed(2) + `</span>Km</div>
      <div>统计油费:<span>` + totalMoney.toFixed(2) + `</span>元</div>
  </div>`;
        if(queryType === 1){
            $('tr > td:nth-child(4)').hide();
            $('tr > td:nth-child(5)').hide();
        }else if(queryType === 2){
            $('tr > td:nth-child(3)').hide();
            $('tr > td:nth-child(5)').hide();
        }else if(queryType === 3){
            $('tr > td:nth-child(3)').hide();
            $('tr > td:nth-child(4)').hide();
        }

        $('#totalHtml').remove();
        $('#tBCarGasRefuelListtb').find('.datagrid-toolbar > span:nth-child(1)').append(totalHtml)
        $('.datagrid-header-rownumber').append(`<span>序号</span>`);
    }
    function ExportXls() {
        JeecgExcelExport("TBCarGasConsumptionController.do?exportXls","tBCarGasRefuelList");
    }
</script>
<style>
    /*上传时间范围查询~样式*/
    .datagrid-toolbar form > span > span:nth-child(1) {
        width: auto !important;
        min-width: 90px !important;
    }

    .datagrid-toolbar form > span > input, .datagrid-toolbar form > * > select {
        width: auto !important;
    }

    .datagrid-toolbar form > span:nth-last-child(1) > span:nth-last-child(2) {
        width: 8px !important;
    }

    #totalHtml {
        display: flex;
        align-items: center;
        align-self: center;
        margin: 5px;
        padding: 5px 10px;
        border-left: 3px solid #C0C4CC;
        border-radius: 5px;
        background: -webkit-linear-gradient(left, #F3F3F4, #00000000, #00000000);
        background: -moz-linear-gradient(left, #F3F3F4, #00000000, #00000000);
    }

    #totalHtml > div {
        font-size: 14px;
        font-weight: bold;
        color: #606266;
    }

    #totalHtml > div:nth-child(1) {
        padding-right: 20px;
    }

    #totalHtml > div:not(:nth-child(1)) {
        padding: 0 20px;
        border-left: 2px solid #FFFFFF;
    }

    #totalHtml > div > span {
        margin: 0 5px;
        font-size: 16px;
        font-weight: 900;
        color: #67C23A;
    }
</style>