第一日开发 3个页面

第一日开发 3个页面

package.json

@@ -13,18 +13,20 @@
   "dependencies": {
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^1.0.2",
-    "axios": "^1.2.0",
-    "element-ui": "^2.15.12",
+    "apexcharts": "^3.45.2",
+    "axios": "1.4.0",
     "babel-runtime": "^6.26.0",
+    "echarts": "^4.9.0",
+    "echarts-gl": "^1.1.1",
+    "echarts-liquidfill": "^2.0.5",
+    "element-ui": "^2.15.12",
     "js-cookie": "^3.0.1",
     "vue": "^2.5.2",
+    "vue-apexcharts": "^1.6.2",
     "vue-router": "^3.0.1",
-    "vue-tree-color": "^2.3.2",
-    "vuex": "^3.6.2",
-    "echarts": "^4.9.0",
     "vue-seamless-scroll": "^1.1.23",
-    "echarts-gl": "^1.1.1",
-    "echarts-liquidfill": "^2.0.5"
+    "vue-tree-color": "^2.3.2",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

src/assets/css/element_ui.css

@@ -309,8 +309,8 @@
 }
 
 .el-input__inner {
-  background-color: #060042;
-  border: 1px solid #09f;
+  /*background-color: #060042;*/
+  /*border: 1px solid #09f;*/
   color: #fff;
 }
 

src/pages/index/components/berths_information.vue

@@ -0,0 +1,260 @@
+<template>
+  <div class="body-wrapper">
+    <div class="search-card">
+      <h5>泊位基础情况分析</h5>
+    </div>
+    <br>
+    <form id="form1" size="medium">
+      <el-select v-model="value" placeholder="行政区" class="sel">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+
+      <el-select v-model="value" placeholder="重点区域" class="sel">
+        <el-option
+          v-for="item in options2"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+
+      <el-select v-model="value" placeholder="道路" class="sel">
+        <el-option
+          v-for="item in options3"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+      <el-button class="btn_save" type="primary" @click="submitIntegrationConfig">查询</el-button>
+    </form>
+    <br>
+    <div class="charts_all">
+      <div class="charts">
+        <piechart
+          class="model-pie-body"
+          :roseType="false"
+          id="chart1"
+          :radiusArr="['30%', '70%']"
+          :colorArr="modelPieColor"
+          :labelFormat="['{name|{b}}', '{sub|{@value}万元 {d}%}', '{hr|}']"
+          :dataset="modelData.list"
+          :encode="{ itemName: 'name', value: 'value' }"
+        />
+      </div>
+      <div class="charts">
+        <piechart
+          class="model-pie-body"
+          :roseType="false"
+          id="chart2"
+          :radiusArr="['30%', '70%']"
+          :colorArr="modelPieColor"
+          :labelFormat="['{name|{b}}', '{sub|{@value}万元 {d}%}', '{hr|}']"
+          :dataset="modelData2.list"
+          :encode="{ itemName: 'name', value: 'value' }"
+        />
+      </div>
+      <div class="charts">
+        <piechart
+          class="model-pie-body"
+          :roseType="false"
+          id="chart3"
+          :radiusArr="['30%', '70%']"
+          :colorArr="modelPieColor"
+          :labelFormat="['{name|{b}}', '{sub|{@value}万元 {d}%}', '{hr|}']"
+          :dataset="modelData3.list"
+          :encode="{ itemName: 'name', value: 'value' }"
+        />
+      </div>
+    </div>
+
+  </div>
+</template>
+<script>
+import api from "@/api/audit.js";
+import piechart from "@/components/pieChart";
+
+export default {
+  components: {
+    piechart
+  },
+  data() {
+    return {
+      options: [{
+        value: '源汇区',
+        label: '源汇区'
+      }, {
+        value: '召陵区',
+        label: '召陵区'
+      }],
+      options2: [{
+        value: '违规停车高发区',
+        label: '违规停车高发区'
+      }, {
+        value: '事故高发区',
+        label: '事故高发区'
+      }],
+      options3: [{
+        value: '团结路',
+        label: '团结路'
+      }, {
+        value: '人民东路',
+        label: '人民东路'
+      }],
+      modelPieColor: ["#4382f6","#9078f8"],
+      modelData: {
+        list: [{name: '占用位', value: 100}, {name: '空闲位', value: 100}]
+      },
+      modelData2: {
+        list: [{name: '占用位', value: 200}, {name: '空闲位', value: 800}]
+      },
+      modelData3: {
+        list: [{name: '占用位', value: 100}, {name: '空闲位', value: 900}]
+      },
+      linedata: [{month: '11', lastYearAmount: 20, thisYearAmount: 30}, {month: '12', lastYearAmount: 40, thisYearAmount: 50}],
+      bardata: [{month: '01', hs: 100, cs: 200},{month: '02', hs: 300, cs: 200},{month: '03', hs: 400, cs: 200},],
+      tableData: [],
+      total: 0,
+      pageSize: 10,
+      pageNum: 1,
+      radio: '2',
+      dialogVisible: false,
+      selRow: {},
+      searchWords: undefined,
+      searchWords2: undefined,
+      searchWords3: undefined
+    }
+  },
+  mounted() {
+    this.getTableData()
+  },
+  watch: {
+  },
+  methods: {
+    handlePageChange() {
+      this.getTableData()
+    },
+    handleAudit(row) {
+      this.selRow = row
+      this.dialogVisible = true
+    },
+    handleCancelApply(row) {
+      console.log('enter handle cancel apply')
+    },
+    handleConfirm() {
+      const {id} = this.selRow
+      console.log('radio', this.radio)
+      api.applyResource({id, applyType: this.radio}).then(res => {
+        if(res.success) {
+          this.dialogVisible = false
+          this.$message({
+            message: '审核成功!',
+            type: 'success'
+          })
+          this.getTableData()
+        }
+      })
+    },
+    getTableData() {
+      const {pageNum, pageSize, searchWords} = this
+      api.applyList({pageNum, pageSize, resourceName: searchWords}).then(res => {
+        this.tableData = []
+        res.data.records.map((item, index) => {
+          const newItem = {...item}
+          newItem.applyTypeText = this.getApplyTypeText(item.applyType)
+          this.tableData.push(newItem)
+        })
+        this.total = res.data.total
+      })
+    },
+    getApplyTypeText(val) {
+      if (!val){
+        return '未申请'
+      }
+      const textMap = {
+        1: '待审批',
+        2: '审批通过',
+        3: '审批驳回'
+      }
+      return textMap[val]
+    },
+    handleSearch() {
+      this.pageNum = 1
+      this.getTableData()
+    }
+  }
+}
+</script>
+<style  lang="scss" scoped>
+.body-wrapper {
+  padding: 20px;
+  background: #0c0c0c;
+  width: 80%;
+  .button-block{
+    text-align: right;
+    margin-bottom: 20px;
+  }
+  .table-pagination{
+    text-align: right;
+  }
+  .search-card{
+    font-size: 24px;
+    font-weight: bold;
+    color: #3498db;
+    margin-bottom: 20px;
+    .input-wrapper{
+      width: 36%;
+    }
+  }
+}
+
+.charts_all{
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+  height: 320px;
+}
+
+.charts{
+  width: 30%;
+  height: 300px;
+}
+.btn_save{
+  background-color: #3498db;
+  color: #ffffff;
+  padding: 10px 20px;
+  cursor: pointer;
+  border: none;
+  border-radius: 4px;
+  font-size: 16px;
+  height: 40px;
+}
+
+.sel{
+  height: 200px;
+  margin-right: 10px;
+}
+
+.input-search{
+  width: 100%;
+  padding: 10px;
+  margin-bottom: 20px;
+  box-sizing: border-box;
+  background-color: #2a2a2a;
+  border: 1px solid #333;
+  color: #ffffff;
+}
+.audit-dialog{
+  .mg-bt{
+    margin-bottom: 24px;
+  }
+  .label{
+    text-align: right;
+  }
+}
+</style>

src/pages/index/components/data_docking.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="body-wrapper">
+    <div class="search-card">
+    <h5>数据对接配置</h5>
+  </div>
+    <div>
+      <form>
+        <h4 style="color: #FFFFFF">模块名称</h4>
+        <br>
+        <el-input class="input-search" v-model="searchWords" placeholder="模块名称"></el-input>
+        <br>
+        <h4 style="color: #FFFFFF">接口地址</h4>
+        <br>
+        <el-input class="input-search" v-model="searchWords2" placeholder="接口地址"></el-input>
+        <br>
+        <h4 style="color: #FFFFFF">api秘钥</h4>
+        <br>
+        <el-input class="input-search" v-model="searchWords3" placeholder="api秘钥"></el-input>
+        <br>
+          <el-button class="btn_save" type="primary" @click="submitIntegrationConfig">保存配置</el-button>
+      </form>
+      <br>
+    </div>
+  <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="pageNum2" :page-size.sync="pageSize2">
+    </el-pagination>
+  </div>
+  </div>
+</template>
+<script>
+import api from "@/api/audit.js";
+
+export default {
+  components: {},
+  data() {
+    return {
+      columns: [
+        {
+          label: '模块名称',
+          key: 'resourceName'
+        },
+        {
+          label: '接口地址',
+          key: 'resourceType'
+        },
+        {
+          label: 'api秘钥',
+          key: 'userName'
+        },
+        {
+          label: '操作',
+          key: 'applyTypeText'
+        }
+      ],
+      tableData: [],
+      total: 0,
+      pageSize: 10,
+      pageNum: 1,
+      radio: '2',
+      dialogVisible: false,
+      selRow: {},
+      searchWords: undefined,
+      searchWords2: undefined,
+      searchWords3: undefined
+    }
+  },
+  mounted() {
+    this.getTableData()
+  },
+  watch: {
+  },
+  methods: {
+    handlePageChange() {
+      this.getTableData()
+    },
+    handleAudit(row) {
+      this.selRow = row
+      this.dialogVisible = true
+    },
+    handleCancelApply(row) {
+      console.log('enter handle cancel apply')
+    },
+    handleConfirm() {
+      const {id} = this.selRow
+      console.log('radio', this.radio)
+      api.applyResource({id, applyType: this.radio}).then(res => {
+        if(res.success) {
+          this.dialogVisible = false
+          this.$message({
+            message: '审核成功!',
+            type: 'success'
+          })
+          this.getTableData()
+        }
+      })
+    },
+    getTableData() {
+      const {pageNum, pageSize, searchWords} = this
+      api.applyList({pageNum, pageSize, resourceName: searchWords}).then(res => {
+        this.tableData = []
+        res.data.records.map((item, index) => {
+          const newItem = {...item}
+          newItem.applyTypeText = this.getApplyTypeText(item.applyType)
+          this.tableData.push(newItem)
+        })
+        this.total = res.data.total
+      })
+    },
+    getApplyTypeText(val) {
+      if (!val){
+        return '未申请'
+      }
+      const textMap = {
+        1: '待审批',
+        2: '审批通过',
+        3: '审批驳回'
+      }
+      return textMap[val]
+    },
+    handleSearch() {
+      this.pageNum = 1
+      this.getTableData()
+    }
+  }
+}
+</script>
+<style  lang="scss" scoped>
+.body-wrapper {
+  padding: 20px;
+  background: #0c0c0c;
+  width: 80%;
+  .button-block{
+    text-align: right;
+    margin-bottom: 20px;
+  }
+  .table-pagination{
+    text-align: right;
+  }
+  .search-card{
+    font-size: 24px;
+    font-weight: bold;
+    color: #3498db;
+    margin-bottom: 20px;
+    .input-wrapper{
+      width: 36%;
+    }
+  }
+}
+
+.btn_save{
+  background-color: #3498db;
+  color: #ffffff;
+  padding: 10px 20px;
+  cursor: pointer;
+  border: none;
+  border-radius: 4px;
+  font-size: 16px;
+  height: 40px;
+}
+
+.input-search{
+  width: 100%;
+  padding: 10px;
+  margin-bottom: 20px;
+  box-sizing: border-box;
+  background-color: #2a2a2a;
+  border: 1px solid #333;
+  color: #ffffff;
+}
+.audit-dialog{
+  .mg-bt{
+    margin-bottom: 24px;
+  }
+  .label{
+    text-align: right;
+  }
+}
+</style>

src/pages/index/components/static_resource.vue

@@ -1,139 +1,375 @@
 <template>
   <div class="body-wrapper">
     <div class="search-card">
-        <el-input class="input-wrapper" v-model="searchWords" placeholder="请输入关键字">
-            <el-button slot="append" class="searchbtn" @click="handleSearch">
-            </el-button>
-        </el-input>
+      <h5>车场查询</h5>
+      <el-input class="input-wrapper" v-model="searchWords" placeholder="请输入车场名称">
+        <el-button slot="append" class="searchbtn" @click="handleSearch">
+        </el-button>
+      </el-input>
     </div>
     <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-column
-        label="操作"
-        width="100">
-        <template slot-scope="scope">
-            <el-button v-if="scope.row && scope.row.applyType === '1'" @click="handleAudit(scope.row)" type="text" size="small">审核</el-button>
-        </template>
+    </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 class="search-card">
+      <h5>泊位查询</h5>
+      <el-input class="input-wrapper" v-model="searchWords2" placeholder="请输入泊位编号">
+        <el-button slot="append" class="searchbtn" @click="handleSearch">
+        </el-button>
+      </el-input>
+    </div>
+    <el-table :data="tableData2" style="background: #2a2a2a;border-color: #333;">
+      <el-table-column v-for="(item, index) in columns2" :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="pageNum2" :page-size.sync="pageSize2">
+      </el-pagination>
+    </div>
+
+    <div class="search-card">
+      <h5>监控查询</h5>
+      <el-input class="input-wrapper" v-model="searchWords3" placeholder="请输入监控编号">
+        <el-button slot="append" class="searchbtn" @click="handleSearch">
+        </el-button>
+      </el-input>
+    </div>
+    <el-table :data="tableData" style="background: #2a2a2a;border-color: #333;">
+      <el-table-column v-for="(item, index) in columns3" :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="pageNum3" :page-size.sync="pageSize3">
+      </el-pagination>
+    </div>
+
+    <div class="search-card">
+      <h5>设备查询</h5>
+      <el-input class="input-wrapper" v-model="searchWords4" placeholder="请输入设备编号">
+        <el-button slot="append" class="searchbtn" @click="handleSearch">
+        </el-button>
+      </el-input>
+    </div>
+    <el-table :data="tableData" style="background: #2a2a2a;border-color: #333;">
+      <el-table-column v-for="(item, index) in columns4" :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="pageNum4" :page-size.sync="pageSize4">
+      </el-pagination>
+    </div>
+
+    <div class="search-card">
+      <h5>单位查询</h5>
+      <el-input class="input-wrapper" v-model="searchWords5" placeholder="请输入单位名称">
+        <el-button slot="append" class="searchbtn" @click="handleSearch">
+        </el-button>
+      </el-input>
+    </div>
+    <el-table :data="tableData" style="background: #2a2a2a;border-color: #333;">
+      <el-table-column v-for="(item, index) in columns5" :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="pageNum5" :page-size.sync="pageSize5">
+      </el-pagination>
+    </div>
+
+    <div class="search-card">
+      <h5>备案资源查询</h5>
+      <el-input class="input-wrapper" v-model="searchWords6" placeholder="请输入备案单位名称">
+        <el-button slot="append" class="searchbtn" @click="handleSearch">
+        </el-button>
+      </el-input>
+    </div>
+    <el-table :data="tableData" style="background: #2a2a2a;border-color: #333;">
+      <el-table-column v-for="(item, index) in columns6" :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="pageNum6" :page-size.sync="pageSize6">
+      </el-pagination>
+    </div>
+
+    <div class="search-card">
+      <h5>普查资源查询</h5>
+      <el-input class="input-wrapper" v-model="searchWords7" placeholder="请输车场名称">
+        <el-button slot="append" class="searchbtn" @click="handleSearch">
+        </el-button>
+      </el-input>
+    </div>
+    <el-table :data="tableData" style="background: #2a2a2a;border-color: #333;">
+      <el-table-column v-for="(item, index) in columns7" :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">
+                     :current-page.sync="pageNum7" :page-size.sync="pageSize7">
       </el-pagination>
     </div>
-    <el-dialog
-        title="审核"
-        :visible.sync="dialogVisible"
-        width="60%"
-        custom-class="audit-dialog">
-        <el-row class="mg-bt">
-            <el-col class="label" :span="4">审核：</el-col>
-            <el-col :span="18">
-                <el-radio v-model="radio" label="2">通过</el-radio>
-                <el-radio v-model="radio" label="3">驳回</el-radio>
-            </el-col>
-        </el-row>
-        <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>
 </template>
 <script>
 import api from "@/api/audit.js";
 
 export default {
-    components: {},
-    data() {
-      return {
-        columns: [
-          {
-            label: '资源名称',
-            key: 'resourceName'
-          },
-          {
-            label: '资源类型',
-            key: 'resourceType'
-          },
-          {
-            label: '申请人',
-            key: 'userName'
-          },
-          {
-            label: '状态',
-            key: 'applyTypeText'
-          }
-        ],
-        tableData: [],
-        total: 0,
-        pageSize: 10,
-        pageNum: 1,
-        radio: '2',
-        dialogVisible: false,
-        selRow: {},
-        searchWords: undefined
-      }
-    },
-    mounted() {
+  components: {},
+  data() {
+    return {
+      columns: [
+        {
+          label: '车场名称',
+          key: 'resourceName'
+        },
+        {
+          label: '位置',
+          key: 'resourceType'
+        },
+        {
+          label: '泊位数',
+          key: 'userName'
+        }
+      ],
+      columns2: [
+        {
+          label: '泊位编号',
+          key: 'resourceName'
+        },
+        {
+          label: '所属停车场',
+          key: 'resourceType'
+        },
+        {
+          label: '是否共享泊位',
+          key: 'userName'
+        },
+        {
+          label: '是否充电泊位',
+          key: 'userName'
+        }
+      ],
+      columns3: [
+        {
+          label: '监控编号',
+          key: 'resourceName'
+        },
+        {
+          label: '位置',
+          key: 'resourceType'
+        },
+        {
+          label: '状态',
+          key: 'userName'
+        }
+      ],
+      columns4: [
+        {
+          label: '设备编号',
+          key: 'resourceName'
+        },
+        {
+          label: '设备类型',
+          key: 'resourceType'
+        },
+        {
+          label: '工作区域',
+          key: 'userName'
+        }
+      ],
+      columns5: [
+        {
+          label: '车位数量',
+          key: 'resourceName'
+        },
+        {
+          label: '专属泊位数量',
+          key: 'resourceType'
+        },
+        {
+          label: '合作起止日期',
+          key: 'userName'
+        }
+      ],
+      columns6: [
+        {
+          label: '单位名称',
+          key: 'resourceName'
+        },
+        {
+          label: '负责人',
+          key: 'resourceType'
+        },
+        {
+          label: '提交日期',
+          key: 'userName'
+        }
+      ],
+      columns7: [
+        {
+          label: '车场名称',
+          key: 'resourceName'
+        },
+        {
+          label: '设备数量',
+          key: 'resourceType'
+        },
+        {
+          label: '异常数量',
+          key: 'userName'
+        }
+      ],
+      tableData: [],
+      tableData2: [],
+      tableData3: [],
+      tableData4: [],
+      tableData5: [],
+      tableData6: [],
+      tableData7: [],
+      total: 0,
+      pageSize: 10,
+      pageNum: 1,
+      pageSize2: 10,
+      pageNum2: 1,
+      pageSize3: 10,
+      pageNum3: 1,
+      pageSize4: 10,
+      pageNum4: 1,
+      pageSize5: 10,
+      pageNum5: 1,
+      pageSize6: 10,
+      pageNum6: 1,
+      pageSize7: 10,
+      pageNum7: 1,
+      radio: '2',
+      dialogVisible: false,
+      selRow: {},
+      searchWords: undefined,
+      searchWords2: undefined,
+      searchWords3: undefined,
+      searchWords4: undefined,
+      searchWords5: undefined,
+      searchWords6: undefined,
+      searchWords7: undefined
+    }
+  },
+  mounted() {
+    this.getTableData()
+    this.getTableData2()
+    this.getTableData3()
+    this.getTableData4()
+    this.getTableData5()
+    this.getTableData6()
+    this.getTableData7()
+  },
+  watch: {
+  },
+  methods: {
+    handlePageChange() {
       this.getTableData()
     },
-    watch: {
+    handleAudit(row) {
+      this.selRow = row
+      this.dialogVisible = true
     },
-    methods: {
-      handlePageChange() {
-        this.getTableData()
-      },
-      handleAudit(row) {
-        this.selRow = row
-        this.dialogVisible = true
-      },
-      handleCancelApply(row) {
-        console.log('enter handle cancel apply')
-      },
-      handleConfirm() {
-        const {id} = this.selRow
-        console.log('radio', this.radio)
-        api.applyResource({id, applyType: this.radio}).then(res => {
-          if(res.success) {
-            this.dialogVisible = false
-            this.$message({
-              message: '审核成功!',
-              type: 'success'
-            })
-            this.getTableData()
-          }
-        })
-      },
-      getTableData() {
-        const {pageNum, pageSize, searchWords} = this
-        api.applyList({pageNum, pageSize, resourceName: searchWords}).then(res => {
-          this.tableData = []
-          res.data.records.map((item, index) => {
-            const newItem = {...item}
-            newItem.applyTypeText = this.getApplyTypeText(item.applyType)
-            this.tableData.push(newItem)
+    handleCancelApply(row) {
+      console.log('enter handle cancel apply')
+    },
+    handleConfirm() {
+      const {id} = this.selRow
+      api.applyResource({id, applyType: this.radio}).then(res => {
+        if(res.success) {
+          this.dialogVisible = false
+          this.$message({
+            message: '审核成功!',
+            type: 'success'
           })
-          this.total = res.data.total
-        })
-      },
-      getApplyTypeText(val) {
-        if (!val){
-          return '未申请'
-        }
-        const textMap = {
-          1: '待审批',
-          2: '审批通过',
-          3: '审批驳回'
+          this.getTableData()
         }
-        return textMap[val]
-      },
-      handleSearch() {
-        this.pageNum = 1
-        this.getTableData()
+      })
+    },
+    getTableData() {
+      const {pageNum, pageSize, searchWords} = this
+      api.applyList({pageNum, pageSize, resourceName: searchWords}).then(res => {
+        this.tableData = []
+        res.data.records.map((item, index) => {
+          const newItem = {...item}
+          newItem.applyTypeText = this.getApplyTypeText(item.applyType)
+          this.tableData.push(newItem)
+        })
+        this.total = res.data.total
+      })
+    },
+    getTableData2() {
+      api.applyList({pageNum: this.pageNum2, pageSize:this.pageSize2, resourceName: this.searchWords2}).then(res => {
+        this.tableData2 =  res.data.data
+        this.total2 = res.data.total
+      })
+    },
+
+    getTableData3() {
+      api.applyList({pageNum: this.pageNum3, pageSize:this.pageSize3, resourceName: this.searchWords3}).then(res => {
+        this.tableData3 =  res.data.data
+        this.total3 = res.data.total
+      })
+    },
+
+    getTableData4() {
+      api.applyList({pageNum: this.pageNum4, pageSize:this.pageSize4, resourceName: this.searchWords4}).then(res => {
+        this.tableData4 =  res.data.data
+        this.total4 = res.data.total
+      })
+    },
+
+    getTableData5() {
+      api.applyList({pageNum: this.pageNum5, pageSize:this.pageSize5, resourceName: this.searchWords5}).then(res => {
+        this.tableData5 =  res.data.data
+        this.total5 = res.data.total
+      })
+    },
+
+    getTableData6() {
+      api.applyList({pageNum: this.pageNum6, pageSize:this.pageSize6, resourceName: this.searchWords6}).then(res => {
+        this.tableData6 =  res.data.data
+        this.total6 = res.data.total
+      })
+    },
+
+    getTableData7() {
+      api.applyList({pageNum: this.pageNum7, pageSize:this.pageSize7, resourceName: this.searchWords7}).then(res => {
+        this.tableData7 =  res.data.data
+        this.total7 = res.data.total
+      })
+    },
+
+    getApplyTypeText(val) {
+      if (!val){
+        return '未申请'
       }
+      const textMap = {
+        1: '待审批',
+        2: '审批通过',
+        3: '审批驳回'
+      }
+      return textMap[val]
+    },
+    handleSearch() {
+      this.pageNum = 1
+      this.getTableData()
     }
+  }
 }
 </script>
 <style  lang="scss" scoped>
@@ -148,19 +384,21 @@ export default {
     text-align: right;
   }
   .search-card{
+    font-size: 24px;
+    font-weight: bold;
+    color: #3498db;
     margin-bottom: 20px;
-    text-align: center;
     .input-wrapper{
-        width: 36%;
+      width: 36%;
     }
   }
 }
 .audit-dialog{
-    .mg-bt{
-        margin-bottom: 24px;
-    }
-    .label{
-        text-align: right;
-    }
+  .mg-bt{
+    margin-bottom: 24px;
+  }
+  .label{
+    text-align: right;
+  }
 }
 </style>

src/pages/index/layouts/indexLayout.vue

@@ -48,6 +48,8 @@ export default {
         {name: '收费价格监管', url: '/charge_price'},
         {name: '车主信用监管', url: '/car_owner_credit'},
         {name: '企业服务监管', url: '/enterprise_service'},
+        {name: '数据对接', url: '/data_docking'},
+        {name: '泊位基础情况', url: '/berths_information'},
       ]
     }
   },

src/router/index.js

@@ -75,6 +75,16 @@ export default new Router({
           path: "/enterprise_service",
           component: () => import("../pages/index/components/enterprise_service.vue")
         },
+        {
+          name: "data_docking",
+          path: "/data_docking",
+          component: () => import("../pages/index/components/data_docking.vue")
+        },
+        {
+          name: "berths_information",
+          path: "/berths_information",
+          component: () => import("../pages/index/components/berths_information.vue")
+        },
       ]
     }
   ]