更新

更新

src/pages/index/components/berth_list.vue

@@ -0,0 +1,237 @@
+<template>
+  <div class="body-wrapper">
+    <div style="display: flex; justify-content: space-between;">
+      <div style="width: 100%">
+        <h4>泊位列表</h4>
+        <br>
+        <el-form class="form-wrapper" :inline="true" :model="formInline">
+        <el-form-item>
+          <el-button type="success" @click="handleAdd">添加白名单</el-button>
+        </el-form-item>
+        </el-form>
+        <br>
+        <el-table :data="tableData" style="background: #F0FFFF;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>
+        <el-dialog
+          :title="title"
+          :visible.sync="dialogVisible"
+          width="60%"
+          custom-class="audit-dialog">
+          <el-form label-position="left" label-width="80px" :model="formLabelAlign">
+            <el-form-item label="泊位号">
+              <el-input v-model="tableData.ipAddr"></el-input>
+            </el-form-item>
+            <el-form-item label="泊车状态">
+              <el-input v-model="tableData.ipAddr"></el-input>
+            </el-form-item>
+          </el-form>
+          <span slot="footer" class="dialog-footer">
+            <el-button @click="dialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="handleConfirm">确 定</el-button>
+        </span>
+        </el-dialog>
+    </div>
+  </div>
+  </div>
+</template>
+<script>
+
+
+export default {
+  components: {
+
+  },
+  data() {
+    return {
+      columns: [
+        {
+          label: '停车场',
+          key: 'deviceName'
+        },
+        {
+          label: '泊位号',
+          key: 'deviceName'
+        },
+        {
+          label: '泊车状态',
+          key: 'deviceName'
+        },
+        {
+          label: '是否潮汐车位',
+          key: 'deviceName'
+        },
+        {
+          label: '是否充电泊位',
+          key: 'deviceName'
+        },
+        {
+          label: '是否共享泊位',
+          key: 'deviceName'
+        },
+        {
+          label: '是否异常',
+          key: 'deviceName'
+        },
+      ],
+      handlePageChange() {
+        this.getTableData()
+      },
+      formInline: {
+        interfaceName: '',
+        region: ''
+      },
+      tableData:[],
+      value: '',
+      modelPieColor: ["#4382f6", "#9078f8", "#79a7db", "#FF9800", "#9C27B0"],
+      modelPieColor1: ["#4382f6", "#9078f8", "#6aa1e1", "#FF9800", "#9C27B0"],
+      modelData: {
+        list: []
+      },
+      dialogVisible: false,
+      title: '',
+      total: 0,
+      pageSize: 5,
+      pageNum: 1,
+      bardata: [],
+    }
+  },
+  mounted() {
+    this.dashAccessDataAnalysisStat1()
+    this.dashAccessDataAnalysisStat2()
+  },
+  watch: {},
+  methods: {
+    tooltipFormat(params) {
+      const type = params[0].seriesType;
+      const data = params[0].data;
+      // ${params[0].name || "--"}月：
+      return `<div class="line-tooltip">
+<div>${params[0].seriesName}: ${
+        params[0].data.hs || "--"}个</div>
+<div>${params[1].seriesName}: ${
+        params[0].data.cs || "--"}个</div>
+</div>`;
+    },
+    xLabelFormat(name) {
+      const nameArr = []
+      for (let i = 0; i < name.length; i += 7) {
+        nameArr.push(name.substring(i, i + 7))
+      }
+      return nameArr.join('\n');
+    },
+    handleAdd () {
+      this.title = '添加泊位列表'
+      this.tableData.ipAddr = ''
+      this.dialogVisible = true
+    },
+    dashAccessDataAnalysisStat1(){
+      api.dashAccessDataAnalysisStat1().then(res =>{
+        this.bardata = res.data
+      })
+    },
+    dashAccessDataAnalysisStat2(){
+      api.dashAccessDataAnalysisStat2().then(res =>{
+        this.modelData.list = res.data
+      })
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+.form-wrapper {
+  margin-bottom: 20px;
+}
+/deep/ .el-input__inner {
+  background: #2d3744;
+  border: none;
+  border-radius: 0;
+}
+/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 {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+
+}
+
+.model-pie-body {
+  width: 100%;
+  height: 99%;
+}
+
+.form-wrapper {
+  margin-bottom: 20px;
+}
+/deep/ .el-input__inner {
+  background: #2d3744;
+  border: none;
+  border-radius: 0;
+}
+/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;
+}
+
+
+</style>

src/router/index.js

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