|
|
@@ -0,0 +1,207 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <div class="filter-container">
|
|
|
+ <el-select v-model="getdataListParm.parammaps.pastureid" placeholder="牧场" class="filter-item" style="width: 110px">
|
|
|
+ <el-option v-for="item in findAllPasture" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+ <el-date-picker v-model="getdataListParm.parammaps.inputDatetime" class="inputDatetime filter-item" clearable type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 250px;margin-right: 10px;" />
|
|
|
+ <el-button class="filter-item" type="primary" icon="el-icon-search" @click="form_search">搜索</el-button>
|
|
|
+ <el-button class="filter-item" type="success" icon="el-icon-download" @click="handleDownload">导出</el-button>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :key="tableKey"
|
|
|
+ v-loading="listLoading"
|
|
|
+ element-loading-text="给我一点时间"
|
|
|
+ :data="list"
|
|
|
+ border
|
|
|
+ fit
|
|
|
+ highlight-current-row
|
|
|
+ style="width: 100%;"
|
|
|
+ :row-style="rowStyle"
|
|
|
+ :cell-style="cellStyle"
|
|
|
+ class="elTable"
|
|
|
+ :max-height="myHeight"
|
|
|
+ >
|
|
|
+ <el-table-column label="序号" align="center" type="index" width="50px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.$index + (pageNum-1) * pageSize + 1 }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="牧场" min-width="90px" align="center" prop="pastureName" />
|
|
|
+ <el-table-column label="日期" min-width="90px" align="center" prop="dataTime" />
|
|
|
+ <el-table-column label="设备编码" min-width="90px" align="center" prop="eqCode" />
|
|
|
+ <el-table-column label="柳工机号" min-width="90px" align="center" prop="license" />
|
|
|
+ <el-table-column label="开机小时(H)" min-width="90px" align="center" prop="workHour" />
|
|
|
+ <el-table-column label="怠速小时(H)" min-width="90px" align="center" prop="idleHour" />
|
|
|
+ <el-table-column label="油耗(L)" min-width="90px" align="center" prop="fuelConsumption" />
|
|
|
+ <el-table-column label="怠速油耗(H)" min-width="90px" align="center" prop="idleFuel" />
|
|
|
+ <el-table-column label="平均油耗(L/H)" min-width="90px" align="center" prop="hoursConsumption" />
|
|
|
+ <el-table-column label="经度" min-width="90px" align="center" prop="longitude" />
|
|
|
+ <el-table-column label="维度" prop="latitude" min-width="120px" align="center" />
|
|
|
+ <el-table-column label="油位(%)" prop="fuelLevel" min-width="120px" align="center" />
|
|
|
+ <el-table-column label="耗电量" prop="powerConsumption" min-width="120px" align="center" />
|
|
|
+ <el-table-column label="平价耗电量" prop="hoursPowerConsumption" min-width="120px" align="center" />
|
|
|
+ <el-table-column label="充电量" prop="chargeCapacity" min-width="120px" align="center" />
|
|
|
+ <el-table-column label="充电时长" prop="chargeHour" min-width="120px" align="center" />
|
|
|
+ <el-table-column label="电动设备状态" prop="chargeStatus" min-width="120px" align="center" />
|
|
|
+ <el-table-column label="电池包 SOC(%)" prop="batteryPackSoc" min-width="120px" align="center" />
|
|
|
+ </el-table>
|
|
|
+ <pagination v-show="total>0" :total="total" :page.sync="getdataListParm.offset" :limit.sync="getdataListParm.pagecount" @pagination="get_table_data" />
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { GetDataByName,GetDataByNames,getJson, checkButtons } from '@/api/common'
|
|
|
+ import { parseTime } from '@/utils/index.js'
|
|
|
+ import Pagination from '@/components/Pagination' // secondary package based on el-pagination
|
|
|
+ import Cookies from 'js-cookie'
|
|
|
+ export default{
|
|
|
+ name:'VehicleRecords',
|
|
|
+ components: { Pagination },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ myHeight:document.documentElement.clientHeight - 85- 200,
|
|
|
+ buttons:[],
|
|
|
+ listLoading:false,pageNum:0,pageSize:0,total:0,tableKey: 0,
|
|
|
+ list:[],
|
|
|
+ getdataListParm: {
|
|
|
+ page: 1, offset: 1, pagecount: 10, returntype: 'Map',
|
|
|
+ parammaps: {
|
|
|
+ pastureid: parseInt(Cookies.get('pastureid')),
|
|
|
+ inputDatetime:[],
|
|
|
+ startTime:'',
|
|
|
+ stopTime:''
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ findAllPasture: [],
|
|
|
+ requestParams: [
|
|
|
+ { name: 'findAllPasture', offset: 0, pagecount: 0, returntype: 'Map', parammaps: { 'id': Cookies.get('pastureid') }},
|
|
|
+ ],
|
|
|
+ rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
|
|
|
+ cellStyle: { padding: 0 + 'px' },
|
|
|
+ isPercentage: false,
|
|
|
+ percentage: 1,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ const that = this
|
|
|
+ GetDataByName({ 'name': 'getUserPCButtons', 'parammaps': { 'jwt_username': Cookies.get('name') }}).then(response => {
|
|
|
+ that.buttons = response.data.list
|
|
|
+ that.get_auto_buttons()
|
|
|
+ })
|
|
|
+ this.get_select_list()
|
|
|
+
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ get_auto_buttons() {
|
|
|
+ // const shengweiwaidan = 'shengweiwaidan'
|
|
|
+ // const isshengweiwaidan = checkButtons(this.buttons, shengweiwaidan)
|
|
|
+ // this.isshengweiwaidan = isshengweiwaidan
|
|
|
+ },
|
|
|
+ get_select_list() {
|
|
|
+ GetDataByNames(this.requestParams).then(response => {
|
|
|
+ this.findAllPasture = response.data.findAllPasture.list
|
|
|
+ this.get_table_data()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ get_table_data(){
|
|
|
+ this.listLoading = true
|
|
|
+ var startTime = ''
|
|
|
+ var stopTime = ''
|
|
|
+ if(this.getdataListParm.parammaps.inputDatetime !== null && this.getdataListParm.parammaps.inputDatetime.length > 0){
|
|
|
+ startTime = parseTime(this.getdataListParm.parammaps.inputDatetime[0], '{y}-{m}-{d}')
|
|
|
+ stopTime = parseTime(this.getdataListParm.parammaps.inputDatetime[1], '{y}-{m}-{d}')
|
|
|
+ }else{
|
|
|
+ this.getdataListParm.parammaps.inputDatetime = []
|
|
|
+ startTime = ''
|
|
|
+ stopTime = ''
|
|
|
+ }
|
|
|
+ let url = 'authdata/vehicleL/list'
|
|
|
+ let data = "?pastureId=" + this.getdataListParm.parammaps.pastureid
|
|
|
+ + '&startTime='+ startTime
|
|
|
+ + '&endTime='+ stopTime
|
|
|
+ + '&offset='+ this.getdataListParm.offset
|
|
|
+ + '&pageCount='+ this.getdataListParm.pagecount
|
|
|
+ getJson(url,data).then(response => {
|
|
|
+ this.list = response.data
|
|
|
+ this.pageNum = response.data.pageNum
|
|
|
+ this.pageSize = response.data.pageSize
|
|
|
+ if (response.data.total) {
|
|
|
+ this.total = response.data.total
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ this.listLoading = false
|
|
|
+ }, 100)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ form_search(){
|
|
|
+ this.get_table_data()
|
|
|
+ },
|
|
|
+ handleDownload() {
|
|
|
+ this.$alert('车辆记录正在导出中，请勿刷新或离开本页面，若导出时间过长，建议缩小导出数据范围重新导出', {})
|
|
|
+ this.isPercentage = true
|
|
|
+ this.percentage = 1
|
|
|
+ var timer = setInterval(() => {
|
|
|
+ this.percentage += 5
|
|
|
+ if (this.percentage > 95) {
|
|
|
+ this.percentage = 99
|
|
|
+ clearInterval(timer)
|
|
|
+ }
|
|
|
+ this.percentage = this.percentage
|
|
|
+ }, 1000)
|
|
|
+
|
|
|
+ let url = 'authdata/vehicleL/list'
|
|
|
+ var startTime = ''
|
|
|
+ var stopTime = ''
|
|
|
+ if(this.getdataListParm.parammaps.inputDatetime !== null && this.getdataListParm.parammaps.inputDatetime.length > 0){
|
|
|
+ startTime = parseTime(this.getdataListParm.parammaps.inputDatetime[0], '{y}-{m}-{d}')
|
|
|
+ stopTime = parseTime(this.getdataListParm.parammaps.inputDatetime[1], '{y}-{m}-{d}')
|
|
|
+ }else{
|
|
|
+ this.getdataListParm.parammaps.inputDatetime = []
|
|
|
+ startTime = ''
|
|
|
+ stopTime = ''
|
|
|
+ }
|
|
|
+ let data = "?pastureId=" + this.getdataListParm.parammaps.pastureid
|
|
|
+ + '&startTime='+ startTime
|
|
|
+ + '&endTime='+ stopTime
|
|
|
+ + '&offset='+ this.getdataListParm.offset
|
|
|
+ + '&pageCount='+ 0
|
|
|
+ getJson(url,data).then(response => {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ import('@/vendor/Export2Excel').then(excel => {
|
|
|
+ const list1 = response.data
|
|
|
+ if (response.data !== '') {
|
|
|
+ this.percentage = 99
|
|
|
+ setTimeout(() => {
|
|
|
+ this.isPercentage = false
|
|
|
+ }, 2000)
|
|
|
+ }
|
|
|
+
|
|
|
+ const tHeader = [
|
|
|
+ '牧场','日期','设备编码','柳工机号','开机小时(H)','怠速小时(H)','油耗(L)','怠速油耗(H)','平均油耗(L/H)','经度','维度','油位(%)','耗电量','平价耗电量','充电量','充电时长','电动设备状态','电池包 SOC(%)'
|
|
|
+ ]
|
|
|
+ const filterVal = [
|
|
|
+ 'pastureName','dataTime','eqCode','license','workHour','idleHour','fuelConsumption','idleFuel','hoursConsumption','longitude','latitude',
|
|
|
+ 'fuelLevel','powerConsumption','hoursPowerConsumption','chargeCapacity','chargeHour','chargeStatus','batteryPackSoc'
|
|
|
+ ]
|
|
|
+ const data1 = this.formatJson(filterVal, list1)
|
|
|
+ excel.export_json_to_excel({ header: tHeader, data: data1, filename: '车辆记录', autoWidth: true, bookType: 'xlsx' })
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ formatJson(filterVal, jsonData) {
|
|
|
+ return jsonData.map(v =>
|
|
|
+ filterVal.map(j => {
|
|
|
+ if (j === 'timestamp') { return parseTime(v[j]) } else { return v[j] }
|
|
|
+ })
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+</style>
|
