Merge branch 'master' of https://gitee.com/dmc_qq/etc-project

src/views/shengbo/trafficFlow/trafficFlow.vue

@@ -2,15 +2,21 @@
   <div class="top">
     <!-- 输入框 -->
     <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 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 class="topstyle">
       <el-date-picker
-        v-model="formData.input3"
+        v-model="formData.startDate"
         type="datetime"
         placeholder="开始日期"
         format="YYYY/MM/DD hh:mm:ss"
@@ -18,7 +24,7 @@
       <!-- <span>-</span> -->
       <!-- <el-button>至</el-button> -->
       <el-date-picker
-        v-model="formData.input4"
+        v-model="formData.endDate"
         type="datetime"
         placeholder="结束日期"
         format="YYYY/MM/DD hh:mm:ss"
@@ -34,18 +40,18 @@
     </div>
   </div>
   <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>
   </div>
   <div style="padding-top: 12px" class="as-gravity-center-end">
@@ -58,53 +64,59 @@ import { reactive, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { Calendar, Search, Refresh } from '@element-plus/icons-vue'
 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({
-    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 = () => {
   //myform.value?.resetFields()
 }
 
-
 function exportAll() {}
 
 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()
@@ -117,84 +129,84 @@ const handleCurrentChange = (val: User | undefined) => {
   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>