test-web/src/views/shengbo/trafficFlow/trafficFlow.vue

<template>
  <div class="top">
    <!-- 输入框 -->
    <div class="topstyle">
      <el-input v-model="input4" placeholder="请输入ETC卡号"> </el-input>
    </div>
    <div class="topstyle">
      <el-input v-model="input4" placeholder="请输入车牌号"> </el-input>
    </div>
    <!-- 日期框 -->
    <div class="topstyle" >
      <el-date-picker
        v-model="value1"
        type="datetime"
        placeholder="开始日志日期"
        format="YYYY/MM/DD hh:mm:ss"
       
      />
      <!-- <span>-</span> -->
       <!-- <el-button>至</el-button> -->
      <el-date-picker
        v-model="value1"
        type="datetime"
        
        placeholder="结束日志日期"
        format="YYYY/MM/DD hh:mm:ss"
         style="margin-left: 5px;"
      />
    </div>
    <!-- 按钮 -->
    <div class="topstyle">
      <el-button v-model="input4" 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>
      <el-button type="primary" plain  @click="exportAll">导出所有</el-button>
    </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="140" />
      <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>
  </div>
  <div style="padding-top: 12px" class="as-gravity-center-end">
    <el-pagination
      :page-sizes="[10, 20, 30, 40]"
      layout="sizes, prev, pager, next"
      :total="1000"
    />
  </div>
</template>

<script lang="ts" setup>
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'

const input3 = ref('')
const input4 = ref('')
const value1 = ref('')

function reset() {}
function search() {}
function exportCurrentPage() {}
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
}

const currentRow = ref()
const singleTableRef = ref<InstanceType<typeof ElTable>>()

const setCurrent = (row?: User) => {
  singleTableRef.value!.setCurrentRow(row)
}
const handleCurrentChange = (val: User | undefined) => {
  currentRow.value = val
}
// const objectService = {
//   url: 'http://localhost:8888/list2',
// }

// const { data } = useRequest(objectService)
// console.log(data.value);

// const tableData = data
const tableData: 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',
  },
  {
    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',
  },
  {
    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',
  },
  {
    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',
  },
  {
    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',
  },
  {
    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',
  },
]
</script>
<style lang="scss" scoped>
.top {
  display: flex;
  margin-left: 10px;
}
.topstyle {
  display: flex;
  height: 40px;

  margin-right: 10px;
  align-items: center;
  justify-content: flex-start;
}
</style>