|
@@ -0,0 +1,408 @@
|
|
|
+<template>
|
|
|
+ <div class="charge-box">
|
|
|
+ <div class="charge-tools">
|
|
|
+ <el-form :inline="true" :model="queryParams">
|
|
|
+ <el-form-item label="日志范围:" style="margin-left: 35px">
|
|
|
+ <el-select
|
|
|
+ multiple
|
|
|
+ v-model="robotValue"
|
|
|
+ clearable
|
|
|
+ placeholder="请选择"
|
|
|
+ @change="changeSelect"
|
|
|
+ collapse-tags
|
|
|
+ @remove-tag="removeTag"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ label="全选"
|
|
|
+ value="全选"
|
|
|
+ @click.native="selectAll"
|
|
|
+ ></el-option>
|
|
|
+ <el-option
|
|
|
+ v-for="item in logOptions"
|
|
|
+ :key="item.field"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.field"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="充电机ID:" style="margin-left: 35px">
|
|
|
+ <el-select
|
|
|
+ v-model="queryParams.deviceNo"
|
|
|
+ clearable
|
|
|
+ placeholder="请选择"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in chargerArr"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item + '号充电机'"
|
|
|
+ :value="item"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="时间范围:" style="margin-left: 50px">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="dateTime"
|
|
|
+ class="times"
|
|
|
+ type="datetimerange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始时间"
|
|
|
+ end-placeholder="结束时间"
|
|
|
+ format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" class="serch actve" @click="handleQuery"
|
|
|
+ >查询</el-button
|
|
|
+ >
|
|
|
+ <el-button type="primary" class="serch" @click="resetForm"
|
|
|
+ >重置</el-button
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="charge-table">
|
|
|
+ <div class="charge-table-top">
|
|
|
+ <el-button type="primary" class="daochu" @click="chargeExport"
|
|
|
+ >导出结果</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="charge-table-bottom">
|
|
|
+ <el-table
|
|
|
+ :data="datalist"
|
|
|
+ :header-cell-style="{
|
|
|
+ background: '#1d283e',
|
|
|
+ borderColor: '#2f3c86',
|
|
|
+ height: '36px',
|
|
|
+ lineHeight: '36px',
|
|
|
+ color: 'white',
|
|
|
+ fontSize: '15px',
|
|
|
+ }"
|
|
|
+ stripe
|
|
|
+ fit
|
|
|
+ :height="tableheight"
|
|
|
+ style="width: 100%"
|
|
|
+ ref="tblist"
|
|
|
+ v-loading="loading"
|
|
|
+ v-tableFit
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ v-if="logOptions.length > 0"
|
|
|
+ prop="time"
|
|
|
+ label="发生时间"
|
|
|
+ fixed
|
|
|
+ width="198"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ v-if="logOptions.length > 0"
|
|
|
+ prop="deviceNo"
|
|
|
+ label="充电机ID"
|
|
|
+ fixed
|
|
|
+ width="150"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ v-for="log in logheader"
|
|
|
+ :key="log.field"
|
|
|
+ :label="log.name"
|
|
|
+ :render-header="labelHead"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row[log.field] }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div class="pageblock">
|
|
|
+ <el-pagination
|
|
|
+ :current-page="queryParams.page"
|
|
|
+ :page-sizes="[10, 20, 30, 40]"
|
|
|
+ :page-size="queryParams.pageSize"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="total"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--导出弹窗-->
|
|
|
+ <div class="rolemanage chargeshow">
|
|
|
+ <el-dialog
|
|
|
+ title="生成导出任务"
|
|
|
+ :visible.sync="dialogExportVisible"
|
|
|
+ :destroy-on-close="true"
|
|
|
+ >
|
|
|
+ <div class="setExport">
|
|
|
+ <el-form :model="ruleForm" :rules="rules" ref="ExportForm">
|
|
|
+ <el-form-item label="任务名称" prop="exportName">
|
|
|
+ <el-input
|
|
|
+ v-model="ruleForm.exportName"
|
|
|
+ placeholder="请输入任务名称"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="AddExport">生成</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div class="descript">
|
|
|
+ 说明:导出任务生成后,你可以在数据导出列表中进行查询和下载
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+ <!--导出弹窗结束-->
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import "./log.scss";
|
|
|
+import { getChargeCode } from "@/api/records";
|
|
|
+import { orderModel, orderChargerList, exportFile } from "@/api/log";
|
|
|
+export default {
|
|
|
+ name: "OrderCharger",
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 查询时间数组
|
|
|
+ dateTime: "",
|
|
|
+ // 充电机ID下拉列表
|
|
|
+ chargerArr: null,
|
|
|
+ // 数据列表
|
|
|
+ datalist: [],
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {
|
|
|
+ page: 1, // 当前页
|
|
|
+ pageSize: 10, // 每页条数
|
|
|
+ deviceNo: undefined, // 充电机ID
|
|
|
+ endTime: undefined, // 电池编号
|
|
|
+ signals: undefined, // 排序字段
|
|
|
+ startTime: undefined, // 排序方式
|
|
|
+ sort: 1,
|
|
|
+ },
|
|
|
+ total: 0, // 总条数,
|
|
|
+ tableheight: 0, // 表格高度设置
|
|
|
+ dialogExportVisible: false, // 弹窗显示
|
|
|
+ checked: false,
|
|
|
+ indeterminate: false,
|
|
|
+ robotValue: "",
|
|
|
+ logOptions: [],
|
|
|
+ logheader: [],
|
|
|
+ heightTimer: false,
|
|
|
+ loading: false,
|
|
|
+ ruleForm: {
|
|
|
+ exportName: undefined,
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ exportName: [
|
|
|
+ { required: true, message: "请输入任务名称", trigger: "blur" },
|
|
|
+ {
|
|
|
+ min: 2,
|
|
|
+ max: 20,
|
|
|
+ message: "长度在 2 到 20 个字符",
|
|
|
+ trigger: "blur",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getChargeCode();
|
|
|
+ this.onLoadHeight();
|
|
|
+ this.changeWindow();
|
|
|
+ this.getLogModel();
|
|
|
+ this.getchargerList();
|
|
|
+ console.log(this,'this')
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ labelHead(h, { column, index }) {
|
|
|
+ let l = column.label.length;
|
|
|
+ let f = 30;
|
|
|
+ if (l <= 1) {
|
|
|
+ f = 30;
|
|
|
+ }
|
|
|
+ if ( column.label == "订单号" || column.label=='车辆识别码') {
|
|
|
+ column.minWidth = f * l + 100;
|
|
|
+ } else {
|
|
|
+ column.minWidth = f * l;
|
|
|
+ }
|
|
|
+ return h("div", { class: "table-head", style: { minWidth: "100%" } }, [
|
|
|
+ column.label,
|
|
|
+ ]);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取充电机ID
|
|
|
+ getChargeCode() {
|
|
|
+ getChargeCode().then((res) => {
|
|
|
+ this.chargerArr = res.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ selectAll() {
|
|
|
+ if (this.robotValue.length < this.logOptions.length) {
|
|
|
+ this.robotValue = [];
|
|
|
+ this.logOptions.map((item) => {
|
|
|
+ this.robotValue.push(item.field);
|
|
|
+ });
|
|
|
+ this.robotValue.unshift("全选");
|
|
|
+ } else {
|
|
|
+ this.robotValue = [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changeSelect(val) {
|
|
|
+ if (!val.includes("全选") && val.length === this.logOptions.length) {
|
|
|
+ this.robotValue.unshift("全选");
|
|
|
+ } else if (
|
|
|
+ val.includes("全选") &&
|
|
|
+ val.length - 1 < this.logOptions.length
|
|
|
+ ) {
|
|
|
+ this.robotValue = this.robotValue.filter((item) => {
|
|
|
+ return item !== "全选";
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ removeTag(val) {
|
|
|
+ if (val === "全选") {
|
|
|
+ this.robotValue = [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //获取充电机日志列表
|
|
|
+ getchargerList() {
|
|
|
+ this.loading = true;
|
|
|
+ orderChargerList(this.queryParams).then((res) => {
|
|
|
+ this.datalist = res.data.list;
|
|
|
+ this.total = res.data.total;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.tblist.doLayout();
|
|
|
+ });
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //获取日志数据字典
|
|
|
+ getLogModel() {
|
|
|
+ orderModel().then((res) => {
|
|
|
+ this.logOptions = res.data;
|
|
|
+ this.logheader = res.data;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.tblist.doLayout();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 分页下一页 */
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.queryParams.pageSize = val;
|
|
|
+ this.getchargerList();
|
|
|
+ },
|
|
|
+ /** 分页选择页数 */
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.queryParams.page = val;
|
|
|
+ this.getchargerList();
|
|
|
+ },
|
|
|
+ // 搜索
|
|
|
+ handleQuery() {
|
|
|
+ if (
|
|
|
+ this.dateTime ||
|
|
|
+ this.robotValue.length > 0 ||
|
|
|
+ this.queryParams.deviceNo != undefined
|
|
|
+ ) {
|
|
|
+ if (this.dateTime) {
|
|
|
+ this.queryParams.startTime = this.$moment(this.dateTime[0]).format(
|
|
|
+ "YYYY-MM-DD HH:mm:ss"
|
|
|
+ );
|
|
|
+ this.queryParams.endTime = this.$moment(this.dateTime[1]).format(
|
|
|
+ "YYYY-MM-DD HH:mm:ss"
|
|
|
+ );
|
|
|
+ }
|
|
|
+ if (this.robotValue.length > 0) {
|
|
|
+ this.queryParams.signals = this.robotValue;
|
|
|
+ let differenceABSet = Array.from(
|
|
|
+ new Set(
|
|
|
+ [...this.logOptions].filter((x) =>
|
|
|
+ this.robotValue.includes(x.field)
|
|
|
+ )
|
|
|
+ )
|
|
|
+ );
|
|
|
+ this.logheader = differenceABSet;
|
|
|
+ }
|
|
|
+ this.getchargerList();
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: "请选择查询条件!",
|
|
|
+ type: "warning",
|
|
|
+ duration: 1000,
|
|
|
+ offset: 20,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 搜索重置
|
|
|
+ resetForm() {
|
|
|
+ this.queryParams.startTime = undefined;
|
|
|
+ this.queryParams.endTime = undefined;
|
|
|
+ this.queryParams.signals = undefined;
|
|
|
+ this.queryParams.deviceNo = undefined;
|
|
|
+ this.dateTime = "";
|
|
|
+ this.robotValue = "";
|
|
|
+ this.queryParams.page = 1;
|
|
|
+ this.queryParams.pageSize = 10;
|
|
|
+ this.getchargerList();
|
|
|
+ this.getLogModel();
|
|
|
+ },
|
|
|
+ // 导出结果
|
|
|
+ chargeExport() {
|
|
|
+ this.dialogExportVisible = true;
|
|
|
+ },
|
|
|
+ //生成报表
|
|
|
+ AddExport() {
|
|
|
+ this.$refs.ExportForm.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ let addParams = {
|
|
|
+ exportName: this.ruleForm.exportName,
|
|
|
+ signals: this.robotValue,
|
|
|
+ deviceNo: this.queryParams.deviceNo,
|
|
|
+ startTime: this.queryParams.startTime,
|
|
|
+ endTime: this.queryParams.endTime,
|
|
|
+ exportLogType: 4,
|
|
|
+ };
|
|
|
+ exportFile(addParams).then((res) => {
|
|
|
+ console.log(res);
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.dialogExportVisible = false;
|
|
|
+ this.$router.push({ path: "/manage-log/data-export" });
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: res.msg,
|
|
|
+ type: "warning",
|
|
|
+ duration: 1000,
|
|
|
+ offset: 20,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped lang="scss">
|
|
|
+::v-deep .el-table th.is-leaf {
|
|
|
+ font-size: 15px !important;
|
|
|
+}
|
|
|
+::v-deep .el-table {
|
|
|
+ th.gutter, colgroup.gutter {
|
|
|
+ width: 5px !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+::v-deep .el-table__header colgroup col[name="gutter"] {
|
|
|
+ display: table-cell !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-table__body{
|
|
|
+ width: 100% !important;
|
|
|
+}
|
|
|
+</style>
|