|
|
@@ -1,76 +1,63 @@ |
|
|
|
<template> |
|
|
|
<div class="top"> |
|
|
|
<!-- 输入框 --> |
|
|
|
<div class="topstyle"> |
|
|
|
<el-input v-model="formData.etcCardNumber" placeholder="请输入ETC卡号" style="width: 200px"> |
|
|
|
</el-input> |
|
|
|
</div> |
|
|
|
<div class="topstyle"> |
|
|
|
<el-input |
|
|
|
v-model="formData.licensePlateNumber" |
|
|
|
placeholder="请输入车牌号" |
|
|
|
style="width: 200px" |
|
|
|
> |
|
|
|
</el-input> |
|
|
|
</div> |
|
|
|
<!-- 日期框 --> |
|
|
|
<div class="topstyle"> |
|
|
|
<el-date-picker |
|
|
|
v-model="formData.startDate" |
|
|
|
type="datetime" |
|
|
|
placeholder="开始日期" |
|
|
|
value-format="YYYY-MM-DD hh:mm:ss" |
|
|
|
/> |
|
|
|
<!-- <span>-</span> --> |
|
|
|
<!-- <el-button>至</el-button> --> |
|
|
|
<el-date-picker |
|
|
|
v-model="formData.endDate" |
|
|
|
type="datetime" |
|
|
|
placeholder="结束日期" |
|
|
|
value-format="YYYY-MM-DD hh:mm:ss" |
|
|
|
style="margin-left: 5px" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<!-- 按钮 --> |
|
|
|
<div class="topstyle"> |
|
|
|
<el-button type="success" :icon="Search" @click="search">搜索</el-button> |
|
|
|
<el-button type="warning" :icon="Refresh" @click="reset">重置</el-button> |
|
|
|
|
|
|
|
<el-button type="primary" plain @click="exportCurrentPage">导出当前页</el-button> |
|
|
|
<div class="OBU-query content-warpper"> |
|
|
|
<div class="top"> |
|
|
|
<!-- 输入框 --> |
|
|
|
<div class="topstyle"> |
|
|
|
<el-input v-model="formData.etcCardNumber" placeholder="请输入ETC卡号" style="width: 200px"> |
|
|
|
</el-input> |
|
|
|
</div> |
|
|
|
<div class="topstyle"> |
|
|
|
<el-input |
|
|
|
v-model="formData.licensePlateNumber" |
|
|
|
placeholder="请输入车牌号" |
|
|
|
style="width: 200px" |
|
|
|
> |
|
|
|
</el-input> |
|
|
|
</div> |
|
|
|
<!-- 日期框 --> |
|
|
|
<div class="topstyle" style="width: 410px"> |
|
|
|
<el-date-picker |
|
|
|
v-model="formData.startDate" |
|
|
|
type="datetime" |
|
|
|
placeholder="开始日期" |
|
|
|
value-format="YYYY-MM-DD hh:mm:ss" |
|
|
|
/> |
|
|
|
<!-- <span>-</span> --> |
|
|
|
<!-- <el-button>至</el-button> --> |
|
|
|
<el-date-picker |
|
|
|
v-model="formData.endDate" |
|
|
|
type="datetime" |
|
|
|
placeholder="结束日期" |
|
|
|
value-format="YYYY-MM-DD hh:mm:ss" |
|
|
|
style="margin-left: 5px" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<!-- 按钮 --> |
|
|
|
<div class="topstyle"> |
|
|
|
<el-button type="success" :icon="Search" @click="search">搜索</el-button> |
|
|
|
<el-button type="warning" :icon="Refresh" @click="reset">重置</el-button> |
|
|
|
|
|
|
|
<el-button type="primary" plain @click="exportAll">导出所有</el-button> |
|
|
|
<el-button type="primary" plain @click="exportCurrentPage">导出当前页</el-button> |
|
|
|
|
|
|
|
<el-button type="primary" plain @click="exportAll">导出所有</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div style="padding-top: 12px"> |
|
|
|
<exportTable ref="exportTS"></exportTable> |
|
|
|
<!-- <el-table :data="tableData1" style="width: 100%" border> |
|
|
|
<el-table-column type="index" label="序号" width="60" /> |
|
|
|
<el-table-column prop="etcCardNumber" label="ETC卡号" width="190" /> |
|
|
|
<el-table-column prop="licensePlateNumber" label="车牌号" width="100" /> |
|
|
|
<el-table-column prop="consumptionType" label="消费类型" width="90" /> |
|
|
|
<el-table-column prop="entranceTime" label="入口时间" width="110" /> |
|
|
|
<el-table-column prop="entryStationName" label="入口站名" width="110" /> |
|
|
|
<el-table-column prop="exportTime" label="出口时间" width="110" /> |
|
|
|
<el-table-column prop="exitStationName" label="出口站名" width="110" /> |
|
|
|
<el-table-column prop="balanceBeforeTransaction" label="交易前余额(元)" width="140" /> |
|
|
|
<el-table-column prop="transactionAmount" label="交易金额(元)" width="125" /> |
|
|
|
<el-table-column prop="postransactionalance" label="交易后余额(元)" width="140" /> |
|
|
|
</el-table> --> |
|
|
|
</div> |
|
|
|
<div style="padding-top: 12px" class="as-gravity-center-end"> |
|
|
|
<el-pagination :page-sizes="[10, 20, 30, 40]" :total="1000" /> |
|
|
|
<div style="padding-top: 12px"> |
|
|
|
<exportTable ref="exportTS"></exportTable> |
|
|
|
</div> |
|
|
|
<div style="padding-top: 12px" class="as-gravity-center-end"> |
|
|
|
<el-pagination :page-sizes="[10, 20, 30, 40]" :total="1000" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script lang="ts" setup> |
|
|
|
import { reactive, ref, toRaw,getCurrentInstance, onMounted } from 'vue' |
|
|
|
import { reactive, ref, toRaw, getCurrentInstance, onMounted } from 'vue' |
|
|
|
import { useRoute, useRouter } from 'vue-router' |
|
|
|
import { Calendar, Search, Refresh } from '@element-plus/icons-vue' |
|
|
|
import type { ElTable } from 'element-plus' |
|
|
|
import exportTable from'../../../components/exportTable/exportTable.vue' |
|
|
|
|
|
|
|
|
|
|
|
import exportTable from '../../../components/exportTable/exportTable.vue' |
|
|
|
|
|
|
|
const { proxy }: any = getCurrentInstance() |
|
|
|
const formData = reactive({ |
|
|
@@ -81,7 +68,7 @@ const formData = reactive({ |
|
|
|
}) |
|
|
|
const exportTS = ref() |
|
|
|
const tableData = reactive({ |
|
|
|
title: "xx公司表格", |
|
|
|
title: 'xx公司表格', |
|
|
|
serialNumber: '', //序号 |
|
|
|
etcCardNumber: '', //ETC卡号 |
|
|
|
licensePlateNumber: '', //车牌号 |
|
|
@@ -110,23 +97,22 @@ const tableData = reactive({ |
|
|
|
|
|
|
|
//搜索 |
|
|
|
function search() { |
|
|
|
if(formData.etcCardNumber !=''){ |
|
|
|
if (formData.etcCardNumber != '') { |
|
|
|
proxy.$request |
|
|
|
.post('/uc/trafficrecord/query',{}, |
|
|
|
{ |
|
|
|
baseURL: 'http://localhost:8080', |
|
|
|
} |
|
|
|
) |
|
|
|
.then((res: {}) => { |
|
|
|
console.log(res) |
|
|
|
}) |
|
|
|
.catch((err: {}) => { |
|
|
|
console.log(err) |
|
|
|
}) |
|
|
|
}else{ |
|
|
|
|
|
|
|
.post('/uc/trafficrecord/query',{}, |
|
|
|
{ |
|
|
|
baseURL: 'http://10.52.0.172:10389', |
|
|
|
} |
|
|
|
) |
|
|
|
.then((res: {}) => { |
|
|
|
console.log(res) |
|
|
|
}) |
|
|
|
.catch((err: {}) => { |
|
|
|
console.log(err) |
|
|
|
}) |
|
|
|
} else { |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
console.log(toRaw(formData)) |
|
|
|
console.log('发送搜索请求') |
|
|
|
} |
|
|
@@ -138,14 +124,14 @@ function reset() { |
|
|
|
formData.endDate = '' |
|
|
|
} |
|
|
|
//导出当前页 |
|
|
|
const exportCurrentPage=()=>{ |
|
|
|
const exportCurrentPage = () => { |
|
|
|
exportTS.value.exportExcel() |
|
|
|
// childRef.value.exportExcel() |
|
|
|
console.log('导出当前页的表格数据') |
|
|
|
console.log('导出当前页的表格数据') |
|
|
|
} |
|
|
|
//导出所有 |
|
|
|
function exportAll() { |
|
|
|
proxy.$refs.exportTable.exportExcel(); |
|
|
|
proxy.$refs.exportTable.exportExcel() |
|
|
|
console.log('导出所有数据') |
|
|
|
} |
|
|
|
|