|
@@ -0,0 +1,291 @@
|
|
|
+<template>
|
|
|
+ <div class="record-container">
|
|
|
+ <el-form size="small" :inline="true">
|
|
|
+ <el-form-item label="车牌号" prop="vehicleNo">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.vehicleNo"
|
|
|
+ placeholder="车牌号"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="日期" prop="drivingDate">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="queryParams.drivingDate"
|
|
|
+ style="width: 240px; margin-right: 8px"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ :clearable="false"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="行驶里程不为0" prop="vehicleNo">
|
|
|
+ <el-checkbox v-model="queryParams.greaterThanZero"></el-checkbox>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-search"
|
|
|
+ size="mini"
|
|
|
+ @click="handleQuery"
|
|
|
+ >搜索</el-button
|
|
|
+ >
|
|
|
+ <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
|
|
+ >重置</el-button
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-row :gutter="10" class="mb8">
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-upload
|
|
|
+ :action="uploadUrl"
|
|
|
+ :headers="headers"
|
|
|
+ :data="uploadData"
|
|
|
+ name="file"
|
|
|
+ :show-file-list="false"
|
|
|
+ :before-upload="beforeUpload"
|
|
|
+ :on-success="handleSuccess"
|
|
|
+ :on-error="handleError"
|
|
|
+ >
|
|
|
+ <el-button type="primary" icon="el-icon-upload" size="mini"
|
|
|
+ >导入行驶记录</el-button
|
|
|
+ >
|
|
|
+ </el-upload>
|
|
|
+ </el-col>
|
|
|
+ <right-toolbar
|
|
|
+ :showSearch.sync="showSearch"
|
|
|
+ @queryTable="getList"
|
|
|
+ ></right-toolbar>
|
|
|
+ </el-row>
|
|
|
+ <el-table :data="driveRecords" border style="width: 100%" v-loading="loading">
|
|
|
+ <el-table-column prop="" label="序号" width="80" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{
|
|
|
+ scope.$index +
|
|
|
+ (queryParams.pageNum - 1) * queryParams.pageSize +
|
|
|
+ 1
|
|
|
+ }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="vehicleNo"
|
|
|
+ label="车牌号"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="vehicleGroup"
|
|
|
+ label="所属车组"
|
|
|
+ align="center"
|
|
|
+
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="equipNo"
|
|
|
+ label="设备号"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="equipNm"
|
|
|
+ label="设备名称"
|
|
|
+ align="center"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="startTm"
|
|
|
+ label="开始时间"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="endTm"
|
|
|
+ label="结束时间"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="mileage"
|
|
|
+ label="行驶里程(km)"
|
|
|
+ align="center"
|
|
|
+ width="100"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.mileage || 0 }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="createTime"
|
|
|
+ label="导入时间"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <pagination
|
|
|
+ v-show="recordTotal > 0"
|
|
|
+ :total="recordTotal"
|
|
|
+ :page.sync="queryParams.pageNum"
|
|
|
+ :limit.sync="queryParams.pageSize"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { vehicleDrivingRecordList } from "@/api/powerdistribution/vehicle-monitoring";
|
|
|
+import moment from "moment";
|
|
|
+import { getToken } from "@/utils/auth";
|
|
|
+export default {
|
|
|
+ name: "DrivingRecord",
|
|
|
+ props: {
|
|
|
+ visible: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ // 文件类型, 例如['png', 'jpg', 'jpeg']
|
|
|
+ fileType: {
|
|
|
+ type: Array,
|
|
|
+ default: () => ["csv"],
|
|
|
+ },
|
|
|
+ vehicleInfo: {
|
|
|
+ type: Object,
|
|
|
+ default: () => ({}),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: true,
|
|
|
+ driveRecords: [],
|
|
|
+ recordTotal: 0,
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ vehicleNo: "",
|
|
|
+ vehicleGroup: "",
|
|
|
+ greaterThanZero:false,
|
|
|
+ drivingDate: [
|
|
|
+
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ // 上传相关配置
|
|
|
+ uploadUrl:
|
|
|
+ process.env.VUE_APP_BASE_API +"/powerdistribution/vehicleDrivingRecord/import",
|
|
|
+ headers: {
|
|
|
+ Authorization: "Bearer " + getToken(),
|
|
|
+ },
|
|
|
+ uploadData: {
|
|
|
+ // 如果需要额外的参数可以在这里添加
|
|
|
+ },
|
|
|
+
|
|
|
+ };
|
|
|
+ },
|
|
|
+ // watch: {
|
|
|
+ // visible(val) {
|
|
|
+ // if (val) {
|
|
|
+ // this.queryParams = {
|
|
|
+ // pageNum: 1,
|
|
|
+ // pageSize: 10,
|
|
|
+ // vehicleNo: this.vehicleInfo.vehicleNo,
|
|
|
+ // drivingDate: [
|
|
|
+
|
|
|
+ // ],
|
|
|
+ // // vehicleGroup: this.vehicleInfo.vehicleGroup,
|
|
|
+ // };
|
|
|
+ // this.getList();
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ created() {
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getList() {
|
|
|
+ this.loading = true;
|
|
|
+ vehicleDrivingRecordList({
|
|
|
+ ...this.queryParams,
|
|
|
+ startTm: this.queryParams.drivingDate[0],
|
|
|
+ endTm: this.queryParams.drivingDate[1],
|
|
|
+ }).then((response) => {
|
|
|
+ this.driveRecords = response.rows || [];
|
|
|
+ this.recordTotal = response.total;
|
|
|
+ this.loading=false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 文件上传前的处理 */
|
|
|
+ beforeUpload(file) {
|
|
|
+ // const isCsv =
|
|
|
+ // file.type ===
|
|
|
+ // "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
|
|
|
+ // file.type === "application/vnd.ms-excel" ||
|
|
|
+ // file.type === "text/csv";
|
|
|
+ // if (!isCsv) {
|
|
|
+ // this.$message.error("只能上传CSV文件!");
|
|
|
+ // return false;
|
|
|
+ // }
|
|
|
+ if (this.fileType) {
|
|
|
+ const fileName = file.name.split('.');
|
|
|
+ const fileExt = fileName[fileName.length - 1];
|
|
|
+ const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
|
|
|
+ if (!isTypeOk) {
|
|
|
+ this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const isLt5M = file.size / 1024 / 1024 < 5;
|
|
|
+ if (!isLt5M) {
|
|
|
+ this.$message.error("文件大小不能超过 5MB!");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ },
|
|
|
+ /** 文件上传成功的处理 */
|
|
|
+ handleSuccess(response, file) {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.$modal.msgSuccess("导入成功");
|
|
|
+ this.getList();
|
|
|
+ } else {
|
|
|
+ this.$modal.msgError(response.msg || "导入失败");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 文件上传失败的处理 */
|
|
|
+ handleError(error) {
|
|
|
+ alert(error)
|
|
|
+ this.$modal.msgError("导入失败,请重试");
|
|
|
+ console.error("上传失败:", error);
|
|
|
+ },
|
|
|
+ /** 搜索按钮操作 */
|
|
|
+ handleQuery() {
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ resetQuery() {
|
|
|
+ this.queryParams = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ vehicleNo: "",
|
|
|
+ vehicleGroup: "",
|
|
|
+ greaterThanZero:false,
|
|
|
+ drivingDate: [
|
|
|
+
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ this.resetForm("queryForm");
|
|
|
+ this.handleQuery();
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.record-container {
|
|
|
+ min-height: 400px;
|
|
|
+ padding: 10px;
|
|
|
+
|
|
|
+ .mb20 {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep {
|
|
|
+ .el-table {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|