页面基本完成 无修改

车主信用监管、企业服务监管、泊位基础情况、泊位使用情况、泊位营收情况、停车场情况、其他分析

src/components/lineChart.vue

@@ -4,7 +4,7 @@ smooth:encode.bool,<template>
 
 <script>
 import * as echarts from 'echarts'
-const colors = ["#00F5FC", "#D5920F", "#FA6894"];
+const colors = ["#00F5FC", "#D5920F", "#FA6894","#4cff37"];
 export default {
   props: {
     id: { type: String, required: true },

src/pages/index/components/berths_information.vue

@@ -1,76 +1,75 @@
 <template>
   <div class="body-wrapper">
-    <div class="search-card">
-      <h5>泊位基础情况分析</h5>
-    </div>
+    <el-form class="form-wrapper" :inline="true" :model="formInline">
+      <el-form-item label="行政区">
+        <el-select v-model="formInline.region" placeholder="行政区" 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-form-item label="重点区域">
+        <el-select v-model="formInline.region2" placeholder="重点区域" class="cur-select">
+          <el-option label="违规停车高发区" value="违规停车高发区"></el-option>
+          <el-option label="事故高发区" value="事故高发区"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="道路">
+        <el-select v-model="formInline.region3" placeholder="道路" 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-form-item>
+        <el-button type="primary" @click="onSubmit">查询</el-button>
+      </el-form-item>
+    </el-form>
     <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">
+    <br>
+    <div style="width: 100%;display: flex;justify-content: space-between;">
+      <div style="width: 33%;height: 400px;">
+        <h4 style="color: white">泊位数量</h4>
         <piechart
           class="model-pie-body"
-          :roseType="false"
           id="chart1"
           :radiusArr="['30%', '70%']"
+          :roseType = "false"
           :colorArr="modelPieColor"
-          :labelFormat="['{name|{b}}', '{sub|{@value}万元 {d}%}', '{hr|}']"
+          :labelFormat="['{name|{b}}', '{sub|{@value} {d}%}', '{hr|}']"
           :dataset="modelData.list"
           :encode="{ itemName: 'name', value: 'value' }"
         />
       </div>
-      <div class="charts">
+      <div style="width: 33%;height: 400px;">
+        <h4 style="color: white">充电桩</h4>
         <piechart
           class="model-pie-body"
-          :roseType="false"
           id="chart2"
           :radiusArr="['30%', '70%']"
-          :colorArr="modelPieColor"
-          :labelFormat="['{name|{b}}', '{sub|{@value}万元 {d}%}', '{hr|}']"
+          :roseType = "false"
+          :colorArr="modelPieColor2"
+          :labelFormat="['{name|{b}}', '{sub|{@value} {d}%}', '{hr|}']"
           :dataset="modelData2.list"
           :encode="{ itemName: 'name', value: 'value' }"
         />
       </div>
-      <div class="charts">
+
+      <div style="width: 33%;height: 400px;">
+        <h4 style="color: white">残疾车位</h4>
         <piechart
           class="model-pie-body"
-          :roseType="false"
           id="chart3"
           :radiusArr="['30%', '70%']"
-          :colorArr="modelPieColor"
-          :labelFormat="['{name|{b}}', '{sub|{@value}万元 {d}%}', '{hr|}']"
+          :roseType = "false"
+          :colorArr="modelPieColor3"
+          :labelFormat="['{name|{b}}', '{sub|{@value} {d}%}', '{hr|}']"
           :dataset="modelData3.list"
           :encode="{ itemName: 'name', value: 'value' }"
         />
       </div>
+      <br>
     </div>
 
   </div>
@@ -85,6 +84,7 @@ export default {
   },
   data() {
     return {
+<<<<<<< Updated upstream
       options: [{
         value: '源汇区',
         label: '源汇区'
@@ -108,17 +108,42 @@ export default {
       }],
       value: '',
       modelPieColor: ["#4382f6","#9078f8"],
+=======
+      columns: [
+        {
+          label: '日期',
+          key: 'resourceName'
+        },
+        {
+          label: '操作',
+          key: 'resourceType'
+        },
+        {
+          label: '用户',
+          key: 'userName'
+        },
+        {
+          label: '详情',
+          key: 'applyTypeText'
+        },
+        {
+          label: 'IP地址',
+          key: 'applyTypeText'
+        }
+      ],
+      modelPieColor: ["#2E8B57","#9078f8"],
+>>>>>>> Stashed changes
       modelData: {
-        list: [{name: '占用位', value: 100}, {name: '空闲位', value: 100}]
+        list: [{name: '空闲中', value: 600}, {name: '占用中', value: 800}]
       },
+      modelPieColor2: ["#2E8B57","#9078f8"],
       modelData2: {
-        list: [{name: '占用位', value: 200}, {name: '空闲位', value: 800}]
+        list: [{name: '空闲中', value: 600}, {name: '占用中', value: 800}]
       },
+      modelPieColor3: ["#2E8B57","#9078f8"],
       modelData3: {
-        list: [{name: '占用位', value: 100}, {name: '空闲位', value: 900}]
+        list: [{name: '空闲中', value: 600}, {name: '占用中', value: 800}]
       },
-      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,
@@ -126,9 +151,12 @@ export default {
       radio: '2',
       dialogVisible: false,
       selRow: {},
-      searchWords: undefined,
-      searchWords2: undefined,
-      searchWords3: undefined
+      formInline: {
+        interfaceName: '',
+        region: '',
+        region2: '',
+        region3: ''
+      }
     }
   },
   mounted() {
@@ -140,62 +168,64 @@ export default {
     handlePageChange() {
       this.getTableData()
     },
-    handleAudit(row) {
+    handleDetail(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)
-        })
+      api.applyList({pageNum, pageSize, interfaceName: this.formInline.interfaceName}).then(res => {
+        this.tableData = res.data.records
         this.total = res.data.total
       })
     },
-    getApplyTypeText(val) {
-      if (!val){
-        return '未申请'
-      }
-      const textMap = {
-        1: '待审批',
-        2: '审批通过',
-        3: '审批驳回'
-      }
-      return textMap[val]
-    },
-    handleSearch() {
-      this.pageNum = 1
-      this.getTableData()
+    onSubmit() {
+      console.log('submit!');
     }
   }
 }
 </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 {
   padding: 20px;
   background: #0c0c0c;
-  width: 80%;
   .button-block{
     text-align: right;
     margin-bottom: 20px;
@@ -203,52 +233,6 @@ export default {
   .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{
@@ -258,4 +242,8 @@ export default {
     text-align: right;
   }
 }
+/deep/ .el-textarea.is-disabled .el-textarea__inner {
+  background: #2a2a2a;
+  color: #fff;
+}
 </style>

src/pages/index/components/car_owner_credit.vue

@@ -1 +1,157 @@
+<template xmlns:piechart="http://www.w3.org/1999/html">
+  <div class="body-wrapper">
+    <div class="search-card">
+      <h5>车主停车欠费情况</h5>
+    </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="pageNum5" :page-size.sync="pageSize5">
+      </el-pagination>
+    </div>
+    <br>
 
+
+  </div>
+</template>
+<script>
+import api from "@/api/audit.js";
+import piechart from "@/components/pieChart";
+
+export default {
+  components: {
+    piechart
+  },
+  data() {
+    return {
+      columns: [
+        {
+          label: '姓名',
+          key: 'resourceName'
+        },
+        {
+          label: '欠费金额',
+          key: 'resourceType'
+        } ,{
+          label: '信用分',
+          key: 'resourceName'
+        }
+      ],
+      tableData: [],
+      total: 0,
+      pageSize: 10,
+      pageNum: 1,
+      radio: '2',
+      dialogVisible: false,
+      selRow: {},
+      searchWords: undefined,
+      searchWords2: 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
+      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
+      })
+    },
+    getTableData2() {
+      api.applyList({}).then(res => {
+        this.tableData2 =  res.data.data
+        this.total2 = res.data.total
+      })
+    },
+
+    getTableData3() {
+      api.applyList({pageNum: this.pageNum2, pageSize:this.pageSize2, resourceName: this.searchWords2}).then(res => {
+        this.tableData3 =  res.data.data
+        this.total3 = 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;
+  .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%;
+    }
+  }
+}
+.audit-dialog{
+  .mg-bt{
+    margin-bottom: 24px;
+  }
+  .label{
+    text-align: right;
+  }
+}
+</style>

src/pages/index/components/charge_price.vue

@@ -37,7 +37,7 @@
         </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">
+                         :current-page.sync="pageNum" :page-size.sync="pageSize">
           </el-pagination>
         </div>
       </div>
@@ -100,8 +100,6 @@ export default {
       total: 0,
       pageSize: 10,
       pageNum: 1,
-      pageSize2: 10,
-      pageNum2: 1,
       radio: '2',
       dialogVisible: false,
       selRow: {},

src/pages/index/components/enterprise_service.vue

@@ -0,0 +1,212 @@
+<template xmlns:piechart="http://www.w3.org/1999/html">
+  <div class="body-wrapper">
+    <div class="search-card">
+      <h5>车场综合服务评价</h5>
+    </div>
+    <br>
+    <div style="display: flex;justify-content: space-around;">
+      <div style="width: 33%;display: flex;">
+      <h4 class="h4font" data="tableData">贵弘停车场：</h4><h3 class="h4font" data="tableData2">5</h3><h4 class="h4font">个</h4>
+      </div>
+      <div style="width: 33%;display: flex;">
+        <h4 class="h4font" data="tableData3">裕泰停车场：</h4><h3 class="h4font" data="tableData4">5</h3><h4 class="h4font">个</h4>
+      </div>
+      <div style="width: 33%;display: flex;">
+        <h4 class="h4font" data="tableData5">强利停车场：</h4><h3 class="h4font" data="tableData6">5</h3><h4 class="h4font">个</h4>
+      </div>
+    </div>
+    <br>
+    <br>
+    <el-table :data="tableData7" 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>
+    <br>
+
+
+  </div>
+</template>
+<script>
+import api from "@/api/audit.js";
+import piechart from "@/components/pieChart";
+
+export default {
+  components: {
+    piechart
+  },
+  data() {
+    return {
+      columns: [
+        {
+          label: '姓名',
+          key: 'resourceName'
+        },
+        {
+          label: '综合评分',
+          key: 'resourceType'
+        }
+      ],
+      tableData: [],
+      tableData2: [],
+      tableData3: [],
+      tableData4: [],
+      tableData5: [],
+      tableData6: [],
+      tableData7: [],
+      total: 0,
+      total2: 0,
+      total3: 0,
+      total4: 0,
+      total5: 0,
+      total6: 0,
+      total7: 0,
+      pageSize: 10,
+      pageNum: 1,
+      radio: '2',
+      dialogVisible: false,
+      selRow: {},
+      searchWords: undefined,
+      searchWords2: undefined,
+    }
+  },
+  mounted() {
+    this.getTableData()
+    this.getTableData2()
+    this.getTableData3()
+    this.getTableData4()
+    this.getTableData5()
+    this.getTableData6()
+    this.getTableData7()
+  },
+  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
+      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
+      })
+    },
+    getTableData2() {
+      api.applyList({}).then(res => {
+        this.tableData2 =  res.data.data
+        this.total2 = res.data.total
+      })
+    },
+    getTableData3() {
+      api.applyList({}).then(res => {
+        this.tableData3 =  res.data.data
+        this.total3 = res.data.total
+      })
+    },
+    getTableData4() {
+      api.applyList({}).then(res => {
+        this.tableData4 =  res.data.data
+        this.total4 = res.data.total
+      })
+    },
+    getTableData5() {
+      api.applyList({}).then(res => {
+        this.tableData5 =  res.data.data
+        this.total5 = res.data.total
+      })
+    },
+    getTableData6() {
+      api.applyList({}).then(res => {
+        this.tableData6 =  res.data.data
+        this.total6 = res.data.total
+      })
+    },
+    getTableData7() {
+      api.applyList({}).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>
+.body-wrapper {
+  padding: 20px;
+  background: #0c0c0c;
+  .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%;
+    }
+  }
+}
+.h4font{
+  color: #FFFFFF;
+}
+.audit-dialog{
+  .mg-bt{
+    margin-bottom: 24px;
+  }
+  .label{
+    text-align: right;
+  }
+}
+</style>

src/pages/index/components/equipment_running.vue

@@ -30,9 +30,9 @@
           id="chart2"
           :radiusArr="['30%', '70%']"
           :roseType = "false"
-          :colorArr="modelPieColor"
+          :colorArr="modelPieColor2"
           :labelFormat="['{name|{b}}', '{sub|{@value}辆 {d}%}', '{hr|}']"
-          :dataset="modelData.list"
+          :dataset="modelData2.list"
           :encode="{ itemName: 'name', value: 'value' }"
         />
       </div>
@@ -44,9 +44,9 @@
           id="chart3"
           :radiusArr="['30%', '70%']"
           :roseType = "false"
-          :colorArr="modelPieColor"
+          :colorArr="modelPieColor3"
           :labelFormat="['{name|{b}}', '{sub|{@value}辆 {d}%}', '{hr|}']"
-          :dataset="modelData.list"
+          :dataset="modelData3.list"
           :encode="{ itemName: 'name', value: 'value' }"
         />
       </div>
@@ -80,6 +80,14 @@ export default {
       modelData: {
         list: [{name: '在线', value: 600}, {name: '离线', value: 800}]
       },
+      modelPieColor2: ["#2E8B57","#9078f8"],
+      modelData2: {
+        list: [{name: '在线', value: 600}, {name: '离线', value: 800}]
+      },
+      modelPieColor3: ["#2E8B57","#9078f8"],
+      modelData3: {
+        list: [{name: '在线', value: 600}, {name: '离线', value: 800}]
+      },
 
       tableData: [],
       tableData2: [],
@@ -104,6 +112,9 @@ export default {
   methods: {
     handlePageChange() {
       this.getTableData()
+      this.getTableData2()
+      this.getTableData3()
+      this.getTableDat4()
     },
     handleAudit(row) {
       this.selRow = row

src/pages/index/components/other_analyse.vue

@@ -0,0 +1,729 @@
+<template>
+  <div class="body-wrapper">
+    <div class="search-card">
+      <h5>其他分析</h5>
+    </div>
+    <br>
+    <div class="charts">
+      <div style="width: 50%;height: 500px;">
+        <h4 style="color: white">区域分析</h4>
+        <br>
+        <barchart
+          class="side-chart"
+          :autoStop="false"
+          :colorArr="[ '#5d78ff']"
+          legendIcon="react"
+          :bottom="30"
+          :xlabelFormat="xLabelFormat"
+          :top="60"
+          yAxisName="(停车次数)"
+          :tooltip="tooltipFormat"
+          :dataset="bardata"
+          :encode="[
+            {x: 'month', y: 'dq'},
+            ]"
+          :labelSize="20"
+          id="qyfx"
+        />
+      </div>
+
+      <div style="width: 50%;height: 500px;">
+        <h4 style="color: white">车场数量</h4>
+        <br>
+        <piechart
+          class="model-pie-body"
+          id="ccsl"
+          :radiusArr="['30%', '70%']"
+          :roseType = "false"
+          :colorArr="ccsl"
+          :labelFormat="['{name|{b}}', '{sub|{@value} {d}%}', '{hr|}']"
+          :dataset="ccslvalue.list"
+          :encode="{ itemName: 'name', value: 'value' }"
+        />
+      </div>
+      <br>
+    </div>
+    <br>
+    <br>
+    <br>
+    <div class="charts">
+      <div style="width: 50%;height: 500px;">
+        <h4 style="color: white">停车分布分析</h4>
+        <br>
+        <barchart
+          class="side-chart"
+          :autoStop="false"
+          :colorArr="[ '#5d78ff','#00ff83']"
+          legendIcon="react"
+          :bottom="30"
+          :xlabelFormat="xLabelFormat"
+          :top="60"
+          yAxisName="(辆)"
+          :tooltip="tooltipFormat"
+          :dataset="tcfbfx"
+          :encode="[
+            {x: 'month', y: 'lwtc', seriesName: '路外停车'},
+            {x: 'month', y: 'lntc', seriesName: '路内停车'},
+            ]"
+          :labelSize="20"
+          id="tcfbfx"
+        />
+      </div>
+
+      <div style="width: 50%;height: 500px;">
+        <h4 style="color: white">余位分析</h4>
+        <br>
+        <barchart
+          class="side-chart"
+          :autoStop="false"
+          :colorArr="[ '#5d78ff','#00ff83']"
+          legendIcon="react"
+          :bottom="30"
+          :xlabelFormat="xLabelFormat"
+          :top="60"
+          yAxisName="(泊位)"
+          :tooltip="tooltipFormat"
+          :dataset="ywfx"
+          :encode="[
+            {x: 'month', y: 'lwtc', seriesName: '路外余位'},
+            {x: 'month', y: 'lntc', seriesName: '路内余位'},
+            ]"
+          :labelSize="20"
+          id="ywfx"
+        />
+      </div>
+
+      <br>
+    </div>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <div class="charts">
+      <div style="width: 50%;height: 500px;">
+        <h4 style="color: white">停车热点分析</h4>
+        <br>
+        <div class="bottom" id="map"></div>
+      </div>
+
+      <div style="width: 50%;height: 500px;">
+        <h4 style="color: white">车流量分析</h4>
+        <br>
+        <linechart
+          :autoStop="false"
+          :top="30"
+          :bottom="30"
+          :left="40"
+          :legendTop="0"
+          yAxisName=""
+          :dataset="cllfx"
+          :tooltipFormat="lineTooltipFormat"
+          :encode="[
+              { x: 'month', y: 'cll', seriesName: '车流量' },
+            ]"
+          id="cllfx"
+        />
+      </div>
+
+      <br>
+    </div>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <div class="charts">
+      <div style="width: 50%;height: 500px;">
+        <h4 style="color: white">低利用率停车场分析</h4>
+        <br>
+        <barchart
+          class="side-chart"
+          :autoStop="false"
+          :colorArr="[ '#5d78ff']"
+          legendIcon="react"
+          :bottom="30"
+          :xlabelFormat="xLabelFormat"
+          :top="60"
+          yAxisName=""
+          :tooltip="tooltipFormat"
+          :dataset="dlyltcc"
+          :encode="[
+            {x: 'month', y: 'dq'},
+            ]"
+          :labelSize="20"
+          id="dlyltcc"
+        />
+      </div>
+
+      <div style="width: 50%;height: 500px;">
+        <h4 style="color: white">高峰路线分析</h4>
+        <br>
+        <div id="ChinaLineMap"></div>
+      </div>
+      <br>
+    </div>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <div class="charts">
+      <div style="width: 50%;height: 500px;">
+        <h4 style="color: white">重点车辆进场占比</h4>
+        <br>
+      <piechart
+          class="model-pie-body"
+          id="chart1"
+          :roseType="false"
+          :radiusArr="['30%', '70%']"
+          :colorArr="modelPieColor"
+          :labelFormat="['{name|{b}}', '{sub|{d}%}', '{hr|}']"
+          :dataset="modelData.list"
+          :encode="{ itemName: 'name', value: 'value' }"
+        />
+    </div>
+
+      <div style="width: 50%;height: 500px;">
+        <h4 style="color: white">重点车辆进场占比</h4>
+        <br>
+        <div id="ChinaLineMap2"></div>
+      </div>
+    </div>
+
+  </div>
+</template>
+<script>
+import api from "@/api/audit.js";
+import piechart from "@/components/pieChart";
+import linechart from "@/components/lineChart";
+import barchart from "@/components/barChart";
+import * as echarts from 'echarts'
+import * as geoJson from '../../../util/411100.json'
+export default {
+  name: "chinaLineMap",
+  components: {
+    piechart,
+    linechart,
+    barchart
+  },
+  data() {
+    return {
+      options: [{
+        value: '源汇区',
+        label: '源汇区'
+      }, {
+        value: '召陵区',
+        label: '召陵区'
+      }],
+      options2: [{
+        value: '违规停车高发区',
+        label: '违规停车高发区'
+      }, {
+        value: '事故高发区',
+        label: '事故高发区'
+      }],
+      options3: [{
+        value: '团结路',
+        label: '团结路'
+      }, {
+        value: '人民东路',
+        label: '人民东路'
+      }],
+      ccsl: ["#ff8700","#9078f8","#ff0000","#4cff37","#4382f6"],
+      ccslvalue: {
+        list: [{name: '郾城区', value: 600}, {name: '临颍县', value: 800},{name: '舞阳县', value: 720}, {name: '源汇区', value: 840}, {name: '召陵区', value: 960}]
+      },
+      bardata: [{month: '郾城区', dq: 100},{month: '临颍县', dq: 120},{month: '舞阳县', dq: 115},{month: '源汇区', dq: 135},{month: '召陵区', dq: 150}],
+      tcfbfx: [{month: '郾城区', lwtc: 100,lntc:92},{month: '临颍县', lwtc: 120,lntc:80},{month: '舞阳县', lwtc: 110,lntc:65},{month: '源汇区', lwtc: 65,lntc:120},{month: '召陵区', lwtc: 70,lntc:95}],
+      ywfx: [{month: '郾城区', lwtc: 100,lntc:92},{month: '临颍县', lwtc: 120,lntc:80},{month: '舞阳县', lwtc: 110,lntc:65},{month: '源汇区', lwtc: 65,lntc:120},{month: '召陵区', lwtc: 70,lntc:95}],
+      cllfx: [{month: '郾城区', cll: 20}, {month: '临颍县', cll: 35},{month: '舞阳县', cll: 42},{month: '源汇区', cll: 31},{month: '召陵区', cll: 74},],
+      dlyltcc: [{month: '郾城区', dq: 100},{month: '临颍县', dq: 120},{month: '舞阳县', dq: 115},{month: '源汇区', dq: 135},{month: '召陵区', dq: 150}],
+      tableData: [],
+      tableData2: [],
+      tableData3: [],
+      tableData4: [],
+      dqIndex: -1,
+      timer: null,
+      option: {
+        visualMap: {
+          show: true,
+          type: "continuous",
+          left: "0%",
+          bottom: "0%",
+          calculable: true,
+          textStyle: {
+            color: "white",
+          },
+          text: ["(%)"],
+          min: 0,
+          max: 100,
+          inRange: {
+            color: ["#4FC9FB","#36ADFC","#1788D1","#0E6BAE","#1871A2","#0D4D7D"],
+          },
+        },
+        geo: {
+          map: "luohe",
+          // aspectScale: 1,
+          roam: false,
+          itemStyle: {
+            normal: {
+              borderColor: "#2ab8ff",
+              borderWidth: 2.5,
+              areaColor: "#12235c",
+            },
+            emphasis: {
+              areaColor: "#2AB8FF",
+              shadowColor: "rgba(42,184,255, 0.7)",
+              shadowOffsetY: 5,
+              shadowOffsetX: 5,
+              shadowBlur: 5,
+            },
+          },
+        },
+        tooltip: {
+          confine: true,
+          formatter: this.mapTooltip,
+          position: "inside",
+          backgroundColor: "transparent",
+        },
+        series: [
+          {
+            type: "map",
+            // roam: true,
+            label: {
+              normal: {
+                textStyle: {
+                  color: "#fff",
+                },
+              },
+              emphasis: {
+                show: false,
+                textStyle: {
+                  color: "#fff",
+                },
+              },
+            },
+            itemStyle: {
+              normal: {
+                borderColor: "#76bef5",
+                borderWidth: 1.5,
+                areaColor: "#4282de",
+              },
+              emphasis: {
+                areaColor: "#002aff",
+                borderWidth: 0,
+                color: "green",
+              },
+            },
+            roam: false,
+            map: "luohe", //使用
+            data: [],
+          },
+        ],
+      },
+      total: 0,
+      pageSize: 10,
+      pageNum: 1,
+      radio: '2',
+      dialogVisible: false,
+      selRow: {},
+      searchWords: undefined,
+      searchWords2: undefined,
+      searchWords3: undefined,
+      modelPieColor: ["#4382f6", "#9078f8", "#79a7db", "#FF9800"],
+      modelData: {
+        list: [{name: '建筑车', value: 23}, {name: '危险品车', value:5}, {name: '特种车', value:27}, {name: '残疾人车', value:45}]
+      },
+    }
+  },
+  mounted() {
+    this.loadChinaLineMap()
+    let arr = []
+    let dataSoure = {
+      '411102': {quyuName: '源汇区', zb: 40},
+      '411103': {quyuName: '郾城区', zb: 60},
+      '411104': {quyuName: '召陵区', zb: 40},
+      '411121': {quyuName: '舞阳县', zb: 50},
+      '411122': {quyuName: '临颍县', zb: 30}}
+    for (const key in dataSoure) {
+      if (key !== '411100') {
+        arr.push({
+          name: dataSoure[key].quyuName,
+          value: Number(dataSoure[key].zb),
+        });
+      }
+    }
+    let mapMax = Math.max(...arr.map(item => item.value))
+    let mapMin = Math.min(...arr.map(item => item.value))
+    console.log(mapMin, '111')
+    console.log(mapMax, '222')
+    let chart = echarts.init(document.getElementById("map"));
+    echarts.registerMap("luohe", geoJson);
+    this.option.series[0].data = arr;
+    this.option.visualMap.min = mapMin;
+    this.option.visualMap.max = mapMax;
+    chart.setOption(this.option);
+    this.dqIndex = -1;
+    this.setIntervalMap(chart);
+    //鼠标移入静止播放
+    chart.on("mouseover", (e) => {
+      clearInterval(this.timer);
+      chart.dispatchAction({
+        type: "showTip",
+        seriesIndex: 0,
+        dataIndex: e.dataIndex,
+      });
+    });
+    chart.on("mouseout", (e) => {
+      clearInterval(this.timer);
+      //鼠标移出后先把上次的高亮取消
+      chart.dispatchAction({
+        type: "downplay",
+        seriesIndex: 0,
+        dataIndex: e.dataIndex,
+      });
+      this.setIntervalMap(chart);
+    });
+  },
+  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()
+        }
+      })
+    },
+
+    mapTooltip(data) {
+      return `<div class="map-tooltip">
+        <div class="map-tooltip-name">${data.name}:<span class="map-tooltip-value">${data.value}%</span></div>
+      </div>`;
+    },
+    getTableData() {
+      const {pageNum, pageSize, searchWords} = this
+      api.applyList({}).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({}).then(res => {
+        this.tableData2 =  res.data.data
+        this.total2 = res.data.total
+      })
+    },
+
+    getTableData3() {
+      api.applyList({}).then(res => {
+        this.tableData3 =  res.data.data
+        this.total3 = res.data.total
+      })
+    },
+
+    getTableData4() {
+      api.applyList({}).then(res => {
+        this.tableData4 =  res.data.data
+        this.total4 = res.data.total
+      })
+    },
+
+    getApplyTypeText(val) {
+      if (!val){
+        return '未申请'
+      }
+      const textMap = {
+        1: '待审批',
+        2: '审批通过',
+        3: '审批驳回'
+      }
+      return textMap[val]
+    },
+    handleSearch() {
+      this.pageNum = 1
+      this.getTableData()
+    },
+    zeroPadding(num, digit) {
+      var zero = '';
+      for(var i = 0; i < digit; i++) {
+        zero += '0';
+      }
+      return (zero + num).slice(-digit);
+    },
+    //加载中国飞线地图
+    loadChinaLineMap() {
+      echarts.registerMap('河南', geoJson);
+      var myCharts = echarts.init(document.getElementById('ChinaLineMap'));
+      var myCharts2 = echarts.init(document.getElementById('ChinaLineMap2'));
+      var geoCoordMap = {
+        '源汇区': [114.00647,33.55627],
+        '郾城区': [114.00694,33.58723],
+        '召陵区': [114.09399,33.58601],
+        '舞阳县': [113.59848,33.43243],
+        '临颍县': [113.93661,33.81123]
+      };
+      var chinaDatas = [
+        [{
+          name: '源汇区',
+          value: 0
+        }, {
+          name: '郾城区',
+          value: 20
+        }], [{
+          name: '郾城区',
+          value: 0
+        }, {
+          name: '召陵区',
+          value: 20
+        }], [{
+          name: '召陵区',
+          value: 0
+        }, {
+          name: '郾城区',
+          value: 20
+        }], [{
+          name: '舞阳县',
+          value: 1
+        }, {
+          name: '郾城区',
+          value: 20
+        }], [{
+          name: '临颍县',
+          value: 2
+        }, {
+          name: '郾城区',
+          value: 20
+        }]
+      ];
+      var convertData = function (data) {
+        var res = [];
+        for (var i = 0; i < data.length; i++) {
+          var dataItem = data[i];
+          var fromCoord = geoCoordMap[dataItem[0].name];
+          // var toCoord = [114.026405, 33.575855];
+          var toCoord = geoCoordMap[dataItem[1].name];
+          if (fromCoord && toCoord) {
+            res.push([{
+              coord: fromCoord,
+              value: dataItem[0].value
+            }, {
+              coord: toCoord,
+            }]);
+          }
+        }
+        return res;
+      };
+      //飞线数据
+      var series = [];
+      [['漯河市', chinaDatas]].forEach(function (item, i) {
+        console.log(item)
+        series.push({
+            type: 'lines',
+            zlevel: 2,
+            effect: {
+              show: true,
+              period: 4, //箭头指向速度，值越小速度越快
+              trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
+              symbol: 'arrow', //箭头图标
+              symbolSize: 5, //图标大小
+            },
+            lineStyle: {
+              normal: {
+                color:'#EE5652',
+                width: 1, //尾迹线条宽度
+                opacity: 1, //尾迹线条透明度
+                curveness: .3 //尾迹线条曲直度
+              }
+            },
+            data: convertData(item[1])
+          }, {
+            type: 'effectScatter',
+            coordinateSystem: 'geo',
+            zlevel: 2,
+            rippleEffect: { //涟漪特效
+              period: 4, //动画时间，值越小速度越快
+              brushType: 'stroke', //波纹绘制方式 stroke, fill
+              scale: 4 //波纹圆环最大限制，值越大波纹越大
+            },
+            label: {
+              normal: {
+                show: true,
+                position: 'right', //显示位置
+                offset: [5, 0], //偏移设置
+                formatter: function (params) {//圆环显示文字
+                  return params.data.name;
+                },
+                color:'#FFD200',
+                fontSize: 16
+              },
+              emphasis: {
+                show: true
+              }
+            },
+            symbol: 'circle',
+            // symbolSize: function (val) {
+            // 	return 5 + val[2] * 5; //圆环大小
+            // },
+            itemStyle: {
+              normal: {
+                show: true,
+                color: '#ffffff'
+              }
+            },
+            data: item[1].map(function (dataItem) {
+              return {
+                name: dataItem[0].name,
+                value: geoCoordMap[dataItem[0].name].concat([dataItem[0].value])
+              };
+            }),
+          },
+        );
+      });
+      let option = {
+        backgroundColor: "#0c0c0c",
+        geo: [
+          {
+            map: '河南',
+            aspectScale: 1,
+            roam: false, // 是否允许缩放
+            zoom: 1.2, // 默认显示级别
+            layoutSize: '95%',
+            layoutCenter: ['55%', '51.5%'],
+            itemStyle: {
+              areaColor: 'rgba(0,27,95,0.4)',
+              borderColor: '#004db5',
+              borderWidth: 1
+            },
+            zlevel: 1,
+            silent: true
+          }
+        ],
+        series: series
+      };
+      //var max = Math.max.apply(Math, newarray);
+      //option.visualMap.max = max;
+      myCharts.clear();
+      myCharts.setOption(option);
+      myCharts2.clear();
+      myCharts2.setOption(option);
+      // myChart.setOption(option);
+
+    }
+  }
+}
+</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%;
+    }
+  }
+}
+#ChinaLineMap{
+  width: 100%;
+  height:calc(100% - 7vh);
+}
+#ChinaLineMap2{
+  width: 100%;
+  height:calc(100% - 7vh);
+}
+.charts{
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+.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;
+}
+.bottom {
+  height: 90%;
+  width: 100%;
+}
+.audit-dialog{
+  .mg-bt{
+    margin-bottom: 24px;
+  }
+  .label{
+    text-align: right;
+  }
+}
+/deep/.map-tooltip {
+  font-size: 18px;
+  padding: 10px 20px;
+  background: url("../../../../static/img/u231.png");
+  background-size: 100% 100%;
+  .map-tooltip-name {
+    color: #00e4ff;
+  }
+  .map-tooltip-value {
+    color: white;
+    margin-left: 20px;
+  }
+}
+
+.model-pie-body {
+  width: 100%;
+  height: 99%;
+}
+</style>

src/pages/index/components/parking_lot_situation.vue

@@ -0,0 +1,223 @@
+<template xmlns:piechart="http://www.w3.org/1999/html">
+  <div class="body-wrapper">
+    <div class="search-card">
+      <h5>停车场情况</h5>
+    </div>
+    <br>
+    <div style="display: flex;justify-content: space-around;">
+      <div style="width: 25%;display: flex;">
+      <h4 class="h4font" data="tableData">泊位数量：</h4><h3 class="h4font" data="tableData2">5</h3>
+      </div>
+      <div style="width: 25%;display: flex;">
+        <h4 class="h4font" data="tableData3">实时余位：</h4><h3 class="h4font" data="tableData4">5</h3>
+      </div>
+      <div style="width: 25%;display: flex;">
+        <h4 class="h4font" data="tableData5">实时进场：</h4><h3 class="h4font" data="tableData6">5</h3>
+      </div>
+      <div style="width: 25%;display: flex;">
+        <h4 class="h4font" data="tableData5">实时出场：</h4><h3 class="h4font" data="tableData6">5</h3>
+      </div>
+    </div>
+    <br>
+    <br>
+    <el-table :data="tableData7" 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>
+    <br>
+
+
+  </div>
+</template>
+<script>
+import api from "@/api/audit.js";
+import piechart from "@/components/pieChart";
+
+export default {
+  components: {
+    piechart
+  },
+  data() {
+    return {
+      columns: [
+        {
+          label: '编号',
+          key: 'resourceName'
+        },
+        {
+          label: '停车场',
+          key: 'resourceType'
+        },
+        {
+          label: '泊位',
+          key: 'resourceType'
+        },
+        {
+          label: '余位',
+          key: 'resourceType'
+        }
+      ],
+      tableData: [],
+      tableData2: [],
+      tableData3: [],
+      tableData4: [],
+      tableData5: [],
+      tableData6: [],
+      tableData7: [],
+      total: 0,
+      total2: 0,
+      total3: 0,
+      total4: 0,
+      total5: 0,
+      total6: 0,
+      total7: 0,
+      pageSize: 10,
+      pageNum: 1,
+      radio: '2',
+      dialogVisible: false,
+      selRow: {},
+      searchWords: undefined,
+      searchWords2: undefined,
+    }
+  },
+  mounted() {
+    this.getTableData()
+    this.getTableData2()
+    this.getTableData3()
+    this.getTableData4()
+    this.getTableData5()
+    this.getTableData6()
+    this.getTableData7()
+  },
+  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
+      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
+      })
+    },
+    getTableData2() {
+      api.applyList({}).then(res => {
+        this.tableData2 =  res.data.data
+        this.total2 = res.data.total
+      })
+    },
+    getTableData3() {
+      api.applyList({}).then(res => {
+        this.tableData3 =  res.data.data
+        this.total3 = res.data.total
+      })
+    },
+    getTableData4() {
+      api.applyList({}).then(res => {
+        this.tableData4 =  res.data.data
+        this.total4 = res.data.total
+      })
+    },
+    getTableData5() {
+      api.applyList({}).then(res => {
+        this.tableData5 =  res.data.data
+        this.total5 = res.data.total
+      })
+    },
+    getTableData6() {
+      api.applyList({}).then(res => {
+        this.tableData6 =  res.data.data
+        this.total6 = res.data.total
+      })
+    },
+    getTableData7() {
+      api.applyList({}).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>
+.body-wrapper {
+  padding: 20px;
+  background: #0c0c0c;
+  .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%;
+    }
+  }
+}
+.h4font{
+  color: #FFFFFF;
+}
+.audit-dialog{
+  .mg-bt{
+    margin-bottom: 24px;
+  }
+  .label{
+    text-align: right;
+  }
+}
+</style>

src/pages/index/layouts/indexLayout.vue

@@ -67,6 +67,7 @@ export default {
         {name: '区域停车主题', url: '/parking_area'},
         {name: '设备运营主题', url: '/service_operations'},
         {name: '操作日志', url: '/operation_log'},
+<<<<<<< Updated upstream
         {name: '停车饱和预警', url: '/saturation_warning'},
         {name: '停车缺口分析', url: '/gap_analysis'},
         {name: '停车难易指数', url: '/park_easy'},
@@ -77,6 +78,12 @@ export default {
         {name: '服务发布功能', url: '/service_publish'},
         {name: '公告功能', url: '/announcement_function'},
         {name: '消息中心功能', url: '/message'},
+=======
+        {name: '泊位使用情况', url: '/berths_usage'},
+        {name: '泊位营收情况', url: '/berths_revenue'},
+        {name: '泊位营收情况', url: '/parking_lot_situation'},
+        {name: '其他分析', url: '/other_analyse'},
+>>>>>>> Stashed changes
       ]
     }
   },

src/router/index.js

@@ -175,6 +175,7 @@ export default new Router({
           component: () => import("../pages/index/components/operation_log.vue")
         },
         {
+<<<<<<< Updated upstream
           name: "saturation_warning",
           path: "/saturation_warning",
           component: () => import("../pages/index/components/saturation_warning.vue")
@@ -223,6 +224,26 @@ export default new Router({
           name: "message",
           path: "/message",
           component: () => import("../pages/index/components/message.vue")
+=======
+          name: "berths_usage",
+          path: "/berths_usage",
+          component: () => import("../pages/index/components/berths_usage.vue")
+        },
+        {
+          name: "berths_revenue",
+          path: "/berths_revenue",
+          component: () => import("../pages/index/components/berths_revenue.vue")
+        },
+        {
+          name: "parking_lot_situation",
+          path: "/parking_lot_situation",
+          component: () => import("../pages/index/components/parking_lot_situation.vue")
+        },
+        {
+          name: "other_analyse",
+          path: "/other_analyse",
+          component: () => import("../pages/index/components/other_analyse.vue")
+>>>>>>> Stashed changes
         },
       ]
     }