海洋无痕 3 年前
父节点
当前提交
f73b0ca758
共有 1 个文件被更改,包括 130 次插入118 次删除
  1. 130
    118
      src/views/shengbo/trafficFlow/trafficFlow.vue

+ 130
- 118
src/views/shengbo/trafficFlow/trafficFlow.vue 查看文件

<div class="top"> <div class="top">
<!-- 输入框 --> <!-- 输入框 -->
<div class="topstyle"> <div class="topstyle">
<el-input v-model="formData.input1" placeholder="请输入ETC卡号" style="width: 220px"> </el-input>
<el-input v-model="formData.etcCardNumber" placeholder="请输入ETC卡号" style="width: 200px">
</el-input>
</div> </div>
<div class="topstyle"> <div class="topstyle">
<el-input v-model="formData.input2" placeholder="请输入车牌号" style="width: 220px"> </el-input>
<el-input
v-model="formData.licensePlateNumber"
placeholder="请输入车牌号"
style="width: 200px"
>
</el-input>
</div> </div>
<!-- 日期框 --> <!-- 日期框 -->
<div class="topstyle"> <div class="topstyle">
<el-date-picker <el-date-picker
v-model="formData.input3"
v-model="formData.startDate"
type="datetime" type="datetime"
placeholder="开始日期" placeholder="开始日期"
format="YYYY/MM/DD hh:mm:ss" format="YYYY/MM/DD hh:mm:ss"
<!-- <span>-</span> --> <!-- <span>-</span> -->
<!-- <el-button>至</el-button> --> <!-- <el-button>至</el-button> -->
<el-date-picker <el-date-picker
v-model="formData.input4"
v-model="formData.endDate"
type="datetime" type="datetime"
placeholder="结束日期" placeholder="结束日期"
format="YYYY/MM/DD hh:mm:ss" format="YYYY/MM/DD hh:mm:ss"
</div> </div>
</div> </div>
<div style="padding-top: 12px"> <div style="padding-top: 12px">
<el-table :data="tableData" border style="width: 100%">
<el-table-column property="date1" label="序号" width="60" />
<el-table-column property="date2" label="ETC卡号" width="190" />
<el-table-column property="date3" label="车牌号" width="100" />
<el-table-column property="date4" label="消费类型" width="90" />
<el-table-column property="date5" label="入口时间" width="110" />
<el-table-column property="date6" label="入口站名" width="110" />
<el-table-column property="date7" label="出口时间" width="110" />
<el-table-column property="date8" label="出口站名" width="110" />
<el-table-column property="date9" label="交易前余额(元)" width="140" />
<el-table-column property="date10" label="交易金额(元)" width="125" />
<el-table-column property="date11" label="交易后金额(元)" width="140" />
<el-table :data="tableData1" border style="width: 100%">
<el-table-column property="serialNumber" label="序号" width="60" />
<el-table-column property="etcCardNumber" label="ETC卡号" width="190" />
<el-table-column property="licensePlateNumber" label="车牌号" width="100" />
<el-table-column property="consumptionType" label="消费类型" width="90" />
<el-table-column property="entranceTime" label="入口时间" width="110" />
<el-table-column property="entryStationName" label="入口站名" width="110" />
<el-table-column property="exportTime" label="出口时间" width="110" />
<el-table-column property="exitStationName" label="出口站名" width="110" />
<el-table-column property="balanceBeforeTransaction" label="交易前余额(元)" width="140" />
<el-table-column property="transactionAmount" label="交易金额(元)" width="125" />
<el-table-column property="postransactionalance" label="交易后余额(元)" width="140" />
</el-table> </el-table>
</div> </div>
<div style="padding-top: 12px" class="as-gravity-center-end"> <div style="padding-top: 12px" class="as-gravity-center-end">
import { useRoute, useRouter } from 'vue-router' import { useRoute, useRouter } from 'vue-router'
import { Calendar, Search, Refresh } from '@element-plus/icons-vue' import { Calendar, Search, Refresh } from '@element-plus/icons-vue'
import type { ElTable } from 'element-plus' import type { ElTable } from 'element-plus'
// import { getCurrentInstance } from 'vue'
// const instance = getCurrentInstance()
// const _this= instance.appContext.config.globalProperties

import { getCurrentInstance, onMounted } from 'vue'
const { proxy } = getCurrentInstance()
onMounted(() => {
proxy.$request
.get('api/user', {})
.then((res) => {
console.log(res, '=====123')
})
.catch((err) => {
console.log(err, '=====456')
})
})


const formData = reactive({ const formData = reactive({
input1:'',
input2:'',
input3:'',
input4:'',
date1: '1',
date2: '52011328220200481698',
date3: '贵A710AE',
date4: '省内流水',
date5: '2019-12-27 20:14:02',
date6: '贵阳西主线站',
date7: '2019-12-27 20:18:20',
date8: '贵阳西主线站',
date9: '38.25',
date10: '0.00',
date11: '38.25',
etcCardNumber: '', //ETC卡号
licensePlateNumber: '', //车牌号
startDate: '', //开始日期
endDate: '', //结束日期
})
const tableData = reactive({
serialNumber: '', //序号
etcCardNumber: '', //ETC卡号
licensePlateNumber: '', //车牌号
consumptionType: '', //消费类型
entranceTime: '', //入口时间
entryStationName: '', //入口站名
exportTime: '', //出口时间
exitStationName: '', //出口站名
balanceBeforeTransaction: '', //交易前余额
transactionAmount: '', //交易金额
postransactionalance: '', //交易后余额
}) })
// 搜索 // 搜索
const submitForm = () => {
const { date1, date2, date3,date4,date5,date6,date7,date8,date9,date10,date11 } = formData
console.log(date1, date2, date3,date4,date5,date6,date7,date8,date9,date10,date11)
}
const submitForm = () => {}
// 重置 // 重置
const submitReset = () => { const submitReset = () => {
//myform.value?.resetFields() //myform.value?.resetFields()
} }



function exportAll() {} function exportAll() {}


interface User { interface User {
date1: string
date2: string
date3: string
date4: string
date5: string
date6: string
date7: string
date8: string
date9: string
date10: string
date11: string
serialNumber: string //序号
etcCardNumber: string //ETC卡号
licensePlateNumber: string //车牌号
consumptionType: string //消费类型
entranceTime: string //入口时间
entryStationName: string //入口站名
exportTime: string //出口时间
exitStationName: string //出口站名
balanceBeforeTransaction: string //交易前余额
transactionAmount: string //交易金额
postransactionalance: string //交易后余额
} }


const currentRow = ref() const currentRow = ref()
currentRow.value = val currentRow.value = val
} }


const tableData: User[] = [
const tableData1: User[] = [
{ {
date1: '1',
date2: '52011328220200481698',
date3: '贵A710AE',
date4: '省内流水',
date5: '2019-12-27 20:14:02',
date6: '贵阳西主线站',
date7: '2019-12-27 20:18:20',
date8: '贵阳西主线站',
date9: '38.25',
date10: '0.00',
date11: '38.25',
serialNumber: '1',
etcCardNumber: '52011328220200481698',
licensePlateNumber: '贵A710AE',
consumptionType: '省内流水',
entranceTime: '2019-12-27 20:14:02',
entryStationName: '贵阳西主线站',
exportTime: '2019-12-27 20:18:20',
exitStationName: '贵阳西主线站',
balanceBeforeTransaction: '38.25',
transactionAmount: '0.00',
postransactionalance: '38.25',
}, },
{ {
date1: '2',
date2: '52011328220200481698',
date3: '贵A710AE',
date4: '省内流水',
date5: '2019-12-27 20:14:02',
date6: '贵阳西主线站',
date7: '2019-12-27 20:18:20',
date8: '贵阳西主线站',
date9: '38.25',
date10: '0.00',
date11: '38.25',
serialNumber: '2',
etcCardNumber: '52011328220200481698',
licensePlateNumber: '贵A710AE',
consumptionType: '省内流水',
entranceTime: '2019-12-27 20:14:02',
entryStationName: '贵阳西主线站',
exportTime: '2019-12-27 20:18:20',
exitStationName: '贵阳西主线站',
balanceBeforeTransaction: '38.25',
transactionAmount: '0.00',
postransactionalance: '38.25',
}, },
{ {
date1: '3',
date2: '52011328220200481698',
date3: '贵A710AE',
date4: '省内流水',
date5: '2019-12-27 20:14:02',
date6: '贵阳西主线站',
date7: '2019-12-27 20:18:20',
date8: '贵阳西主线站',
date9: '38.25',
date10: '0.00',
date11: '38.25',
serialNumber: '3',
etcCardNumber: '52011328220200481698',
licensePlateNumber: '贵A710AE',
consumptionType: '省内流水',
entranceTime: '2019-12-27 20:14:02',
entryStationName: '贵阳西主线站',
exportTime: '2019-12-27 20:18:20',
exitStationName: '贵阳西主线站',
balanceBeforeTransaction: '38.25',
transactionAmount: '0.00',
postransactionalance: '38.25',
}, },
{ {
date1: '4',
date2: '52011328220200481698',
date3: '贵A710AE',
date4: '省内流水',
date5: '2019-12-27 20:14:02',
date6: '贵阳西主线站',
date7: '2019-12-27 20:18:20',
date8: '贵阳西主线站',
date9: '38.25',
date10: '0.00',
date11: '38.25',
serialNumber: '4',
etcCardNumber: '52011328220200481698',
licensePlateNumber: '贵A710AE',
consumptionType: '省内流水',
entranceTime: '2019-12-27 20:14:02',
entryStationName: '贵阳西主线站',
exportTime: '2019-12-27 20:18:20',
exitStationName: '贵阳西主线站',
balanceBeforeTransaction: '38.25',
transactionAmount: '0.00',
postransactionalance: '38.25',
}, },
{ {
date1: '5',
date2: '52011328220200481698',
date3: '贵A710AE',
date4: '省内流水',
date5: '2019-12-27 20:14:02',
date6: '贵阳西主线站',
date7: '2019-12-27 20:18:20',
date8: '贵阳西主线站',
date9: '38.25',
date10: '0.00',
date11: '38.25',
serialNumber: '5',
etcCardNumber: '52011328220200481698',
licensePlateNumber: '贵A710AE',
consumptionType: '省内流水',
entranceTime: '2019-12-27 20:14:02',
entryStationName: '贵阳西主线站',
exportTime: '2019-12-27 20:18:20',
exitStationName: '贵阳西主线站',
balanceBeforeTransaction: '38.25',
transactionAmount: '0.00',
postransactionalance: '38.25',
}, },
{ {
date1: '6',
date2: '52011328220200481698',
date3: '贵A710AE',
date4: '省内流水',
date5: '2019-12-27 20:14:02',
date6: '贵阳西主线站',
date7: '2019-12-27 20:18:20',
date8: '贵阳西主线站',
date9: '38.25',
date10: '0.00',
date11: '38.25',
serialNumber: '6',
etcCardNumber: '52011328220200481698',
licensePlateNumber: '贵A710AE',
consumptionType: '省内流水',
entranceTime: '2019-12-27 20:14:02',
entryStationName: '贵阳西主线站',
exportTime: '2019-12-27 20:18:20',
exitStationName: '贵阳西主线站',
balanceBeforeTransaction: '38.25',
transactionAmount: '0.00',
postransactionalance: '38.25',
}, },
] ]
</script> </script>

正在加载...
取消
保存