内容提交

longyvfengyun

2023-11-20 a3b4356b688544bf578ae4754bd66f58ffaec764

内容提交

 src/views/moudle/driveInf/apis.js

@@ -22,3 +22,14 @@
    url: "/monitor/boxCameraAlarm/statisticDriveAlarmRegularLimitsToday",
  });
}

export const searchDriveList = (page, pageSize)=>{
  return axios({
    method: "GET",
    url: "/monitor/box/select",
    params: {
      page,
      pageSize
    },
  });
}

 src/views/moudle/driveInf/driveInf.js

@@ -1,6 +1,8 @@
import {
  searchDriveList,
  searchRecentDaysDriveAlarm, searchTodayDriveAlarm
} from "./apis"
import {ref} from "vue";
export const recentDaysDriveAlarmModule = ()=>{
  const getRecentDaysDriveAlarm = async ()=>{
    try {
@@ -49,3 +51,49 @@
    getTodayDriveAlarm
  }
}

/**
 * 车辆信息
 */
export const driveInfModule = ()=>{
  const page = ref(1);
  const pageSize = ref(10);
  const total = ref(0);
  const driveList = ref([]);

  /**
   * 获取汽车列表
   * @return {Promise<{result: [], total: number, pages: number, pageSize: number, page: number}>}
   */
  const getDriveList = async ()=>{
    let result = {
      page: 1,
      pageSize: 10,
      pages: 0,
      total: 0,
      result: []
    };
    try {
      const res = await searchDriveList(page.value, pageSize.value);
      const rs = res.data;
      if(rs.code === 1) {
        result = rs.data;
      }
      page.value = result.page;
      pageSize.value = result.pageSize;
      total.value = result.total;
      return result;
    }catch (e) {
      console.log(e);
      return result;
    }
  }

  return {
    page,
    pageSize,
    total,
    driveList,
    getDriveList
  };
}

 src/views/user/boxList.vue

@@ -1,9 +1,31 @@
<script setup>
import {ref} from "vue";
import {ref, onMounted} from "vue";

const tableData = ref([]);

const carName = ref(null);

import {
    driveInfModule
} from "@/views/moudle/driveInf/driveInf";

const {
    page,
    pageSize,
    total,
    driveList,
    getDriveList
} = driveInfModule();

const searchDriveList = async ()=>{
    let res = await getDriveList();
    console.log(res);
    driveList.value = res.result;
}

onMounted(()=>{
    searchDriveList();
});
</script>

<template>
@@ -12,53 +34,26 @@
            <div class="page-header">
                <div class="input-list">
                    <div class="input-item">
                        <div class="input-wrapper">
                            <div class="input-label">车辆名称</div>
                            <div class="input-content">
                                <el-input
                                    v-model="carName"
                                    size="large"
                                    placeholder="Please Input"/>
                            </div>
                        </div>
                    </div>
                    <div class="input-item">
                        <div class="input-wrapper">
                            <div class="input-label">在线状态</div>
                            <div class="input-content">
                                <el-input
                                    v-model="carName"
                                    size="large"
                                    placeholder="Please Input"/>
                            </div>
                        </div>
                    </div>
                    <div class="input-item">
                        <div class="input-wrapper">
                            <div class="input-label">国标设备编码</div>
                            <div class="input-content">
                                <el-input
                                    v-model="carName"
                                    size="large"
                                    placeholder="Please Input"/>
                            </div>
                        </div>
                    </div>
                    <div class="input-item">
                        <el-button type="primary" plain>查询</el-button>
                        <el-button type="success" icon="Plus">添加</el-button>
                        <el-button type="primary" icon="Search">查询</el-button>
                    </div>
                </div>
            </div>
            <div class="page-content">
                <el-table :data="tableData" height="100%">
                    <el-table-column prop="date" label="Date" />
                    <el-table-column prop="name" label="Name" />
                    <el-table-column prop="address" label="Address" />
                <el-table :data="driveList" height="100%">
                    <el-table-column prop="name" label="车辆名称" />
                    <el-table-column prop="boxSn" label="车辆编码"></el-table-column>
                    <el-table-column prop="online" label="车辆编码">
                        <template #default="{row}">
                            <el-tag v-if="row.online">在线</el-tag>
                            <el-tag v-else type="danger">离线</el-tag>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page-footer">
                <div class="el-pagination-container">
                    <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="1000"></el-pagination>
                    <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
                </div>
            </div>
        </div>

 src/views/user/videoList.vue

@@ -1,5 +1,5 @@
<script setup>
import {ref} from "vue";
import {onMounted, ref} from "vue";

const tableData = ref([
    {
@@ -40,6 +40,26 @@
]);

const carName = ref(null);

import {
    driveInfModule
} from "@/views/moudle/driveInf/driveInf";

const {
    page,
    pageSize,
    driveList,
    getDriveList
} = driveInfModule();

const searchDriveList = async ()=>{
    let rs = await getDriveList();
    console.log(rs);
}

onMounted(()=>{
    searchDriveList();
});
</script>

<template>