周五

src/pages/index/components/parking_analysis_report.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="body-wrapper">
+    <el-form class="form-wrapper" :inline="true" :model="formInline">
+      <el-row>
+        <el-col :span="5">
+          <el-form-item label="停车场名称:">
+            <el-input v-model="formInline.parkingName" placeholder="请输入"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="5">
+          <el-form-item label="停车状态:">
+            <el-select clearable v-model="formInline.parkingType" placeholder="停车状态" popper-class="cur-select">
+              <el-option label="全部" value=""></el-option>
+              <el-option label="空闲" value="空闲"></el-option>
+              <el-option label="占用" value="占用"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="5">
+          <el-form-item label="车牌号:">
+            <el-input v-model="formInline.plateNo" placeholder="请输入"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="5">
+          <el-form-item label="入场时间:">
+            <el-date-picker
+              v-model="formInline.inTime"
+              type="date"
+              placeholder="选择日期">
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item>
+            <el-button type="primary" class="query-btn" @click="onSubmit">查询</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <el-table :data="tableData" style="background: #2a2a2a;border-color: #333;">
+      <el-table-column v-for="(item, index) in columns" :key="index" :label="item.label" :prop="item.key">
+      </el-table-column>
+    </el-table>
+    <div class="table-pagination">
+      <el-pagination :background="false" layout="total, prev, pager, next" :total="total" @current-change="handlePageChange"
+                     :current-page.sync="pageNum" :page-size.sync="pageSize">
+      </el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+import api from "@/api/audit.js";
+
+export default {
+  components: {},
+  data() {
+    return {
+      columns: [
+        {
+          label: '会员姓名',
+          key: ''
+        },
+        {
+          label: '车牌号',
+          key: ''
+        },
+        {
+          label: '停车场',
+          key: ''
+        },
+        {
+          label: '入场日期',
+          key: ''
+        },
+        {
+          label: '状态',
+          key: ''
+        },
+      ],
+      tableData: [],
+      total: 0,
+      pageSize: 10,
+      pageNum: 1,
+      dialogVisible: false,
+      formInline: {
+        parkingName: '',
+        parkingType: '',
+        plateNo: '',
+        inTime: '',
+      },
+    }
+  },
+  mounted() {
+    // this.getTableData()
+  },
+  watch: {
+  },
+  methods: {
+    getTableData() {
+      const {pageNum, pageSize} = this
+      api.ipListByPage({current: pageNum, size: pageSize, ipAddr: this.formInline.ipAddr}).then(res => {
+        this.tableData = res.data.records || []
+        this.total = res.data.total
+      })
+    },
+    onSubmit () {
+      this.getTableData()
+    },
+    handlePageChange() {
+      this.getTableData()
+    },
+  }
+}
+</script>
+<style  lang="scss" scoped>
+
+.form-wrapper {
+  margin-bottom: 20px;
+}
+/deep/ .el-input__inner {
+  background: #2d3744;
+  border: none;
+  border-radius: 0;
+}
+/deep/ .el-input__prefix{
+  top: 8px;
+}
+/deep/ .el-select {
+  height: 40px;
+  .el-input__inner {
+    height: 40px;
+  }
+  .el-input__prefix, .el-input__suffix {
+    height: 40px;
+  }
+
+  /* 下面设置右侧按钮居中 */
+  .el-input__suffix {
+    top: 0px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    align-content: flex-start;
+  }
+  /* 输入框加上上下边是 32px + 2px =34px */
+  .el-input__icon {
+    line-height: 0px;
+  }
+}
+/deep/ .form-wrapper .el-button {
+  background: linear-gradient(90deg,#0158d9,#3c97e4);
+  width: 100px;
+  height: 40px;
+}
+.body-wrapper {
+  padding: 20px;
+  background: #0c0c0c;
+  .button-block{
+    text-align: right;
+    margin-bottom: 20px;
+  }
+  .table-pagination{
+    text-align: right;
+  }
+}
+</style>

src/pages/index/layouts/indexLayout.vue

@@ -90,6 +90,7 @@ export default {
         {name: '资源接入', url: '/resource_access'},
         // 以下为运营管理平台
         {name: '停车场热力图', url: '/parking_heatmap'},
+        {name: '停车场分析报表', url: '/parking_analysis_report'},
       ]
     }
   },

src/router/index.js

@@ -288,6 +288,11 @@ export default new Router({
           path: "/parking_heatmap",
           component: () => import("../pages/index/components/parking_heatmap.vue")
         },
+        {
+          name: "parking_analysis_report",
+          path: "/parking_analysis_report",
+          component: () => import("../pages/index/components/parking_analysis_report.vue")
+        },
       ]
     }
   ]