前三

src/api/audit.js

@@ -17,16 +17,4 @@ export default {
   tccqkView(params) {
     return axios.get('/dash/parking/lot/situation/view', {params})
   },
-  // 收费趋势
-  sfqs(params) {
-    return axios.post('/dash/business/conditions/stat1', params)
-  },
-  // 车辆类型
-  cllx(params) {
-    return axios.post('/dash/parking/operate/stat4', params)
-  },
-  // // 经营情况_列表
-  // jyqk(params) {
-  //   return axios.get('/dash/business/conditions/page', {params})
-  // }
 }

src/pages/index/components/demo1.vue

@@ -112,7 +112,7 @@
       const {pageNum, pageSize} = this
       let that = this
       let params4 = {current: pageNum, size: pageSize}
-      let requestList = [api.tccqkView(), api.sfqs(),api.cllx(), api.jyqk(params4)];
+      let requestList = [api.tccqkView(), api.sfqs(),api.cllx(), api.tccqkListByPage(params4)];
       Promise.all(requestList).then(res => {
         that.viewData = res[0].data
         that.linedata = res[1].data || []

src/pages/index/components/parking_index.vue

@@ -0,0 +1,114 @@
+<template xmlns:piechart="http://www.w3.org/1999/html">
+  <div class="body-wrapper">
+    <div style="display: flex; justify-content: space-between;">
+      <div class="body-box" style="width: 43%;height:400px;border-radius: 5px;background-color: #f6f5f5;padding: 20px;color: #525252;">
+        <h2>概览</h2>
+        <div class="box-item" style="border: 2px dotted #a1a1a1;border-radius: 5px;padding: 20px 20px 40px 20px;margin-top: 15px">
+          <h4 style="float: left">停车场总数</h4>
+          <span style="float: right;color: red">{{viewData.totalParking}}</span>
+        </div>
+        <div class="box-item" style="border: 2px dotted #757575;border-radius: 5px;padding: 20px 20px 40px 20px;margin-top: 15px">
+          <h4 style="float: left">今日停车记录数</h4>
+          <span style="float: right;color: #fc6969">{{viewData.todayTotal}}</span>
+        </div>
+        <div class="box-item" style="border: 2px dotted #757575;border-radius: 5px;padding: 20px 20px 40px 20px;margin-top: 15px">
+          <h4 style="float: left">今日实收总额</h4>
+          <span style="float: right;color: #fc6969">{{viewData.todayInput}}</span>
+        </div>
+        <div class="box-item" style="border: 2px dotted #757575;border-radius: 5px;padding: 20px 20px 40px 20px;margin-top: 15px">
+          <h4 style="float: left">日均时长泊位利用率</h4>
+          <span style="float: right;color: #fc6969">{{viewData.dailyBerth}}</span>
+        </div>
+      </div>
+      <div class="body-box" style="width: 48%;height:400px;border-radius: 5px;background-color: #f6f5f5;padding: 20px;color: #525252;">
+        <h1>停车收入概览</h1>
+        <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>
+    <div style="display: flex; justify-content: space-between;">
+      <div class="body-box" style="width:98%;height:400px;border-radius: 5px;background-color: #f6f5f5;padding: 20px;margin-top: 20px;color: #525252;">
+        <h1>停车收入概览</h1>
+        <barchart
+          class="side-chart"
+          :autoStop="false"
+          :colorArr="['#ffd201', '#00eacb', '#01b4ff', '#5d78ff']"
+          legendIcon="react"
+          :bottom="30"
+          :xlabelFormat="xLabelFormat"
+          :top="60"
+          yAxisName="(个)"
+          :tooltip="tooltipFormat"
+          :dataset="bardata"
+          :encode="[
+            {x: 'month', y: 'hs', seriesName: '接入数量'}]"
+          :labelSize="15"
+          id="fxdqhszzt"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import api from "@/api/audit.js";
+import  piechart from "@/components/pieChart";
+import barchart from "@/components/barChart";
+
+export default {
+  components: {
+    piechart,
+    barchart
+  },
+  data() {
+    return {
+      viewData:{
+        totalParking:"0",
+        todayTotal:"0",
+        todayInput:"0",
+        dailyBerth:"0"
+      },
+      modelPieColor: ["#4382f6", "#81f878", "#f2ff90", "#FF9800", "#9C27B0"],
+      modelData: {
+        list: [{name: '源汇区',value:'38.4'},{name:'郾城区',value:'26.4'}, {name:'召陵区',value:'35.2'}]
+      },
+      bardata: [{month:'源汇区',hs:'600'},{month:'郾城区',hs:'685'},{month:'召陵区',hs:'843'},],
+    }
+  },
+  mounted() {
+  },
+  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>`;
+    },
+    xLabelFormat(name) {
+      const nameArr = []
+      for (let i = 0; i < name.length; i += 7) {
+        nameArr.push(name.substring(i, i + 7))
+      }
+      return nameArr.join('\n');
+    },
+  }
+}
+</script>
+<style  lang="scss" scoped>
+.body-wrapper {
+  padding: 20px;
+}
+
+</style>

src/pages/index/components/parking_order.vue

@@ -0,0 +1,360 @@
+<template>
+  <div class="body-wrapper">
+    <el-tabs  v-model="activeName">
+      <el-tab-pane label="支付订单查询" name="支付订单查询">
+        <el-form class="form-wrapper" :inline="true" :model="formInline1" style="margin-bottom: 20px;">
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="订单号:">
+                <el-input v-model="formInline1.orderCode" placeholder="请输入"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="日期:">
+                <el-date-picker
+                  v-model="formInline1.time"
+                  type="daterange"
+                  align="right"
+                  unlink-panels
+                  range-separator="-"
+                  value-format="yyyy-MM-dd HH:mm:ss"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item>
+                <el-button type="primary" class="query-btn" @click="onSubmit1">查询</el-button>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <el-table :data="tableData1">
+          <el-table-column v-for="(item, index) in columns1" :key="index" :label="item.label" :prop="item.key">
+          </el-table-column>
+        </el-table>
+        <div class="table-pagination">
+          <el-pagination layout="prev, pager, next" :total="total1" @current-change="handlePageChange1"
+                         :current-page.sync="pageNum1" :page-size.sync="pageSize1">
+          </el-pagination>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="欠费订单查询" name="欠费订单查询">
+        <el-form class="form-wrapper" :inline="true" :model="formInline2" style="margin-bottom: 20px;">
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="订单号: ">
+                <el-input v-model="formInline2.orderCode" placeholder="请输入"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="车牌号: ">
+                <el-input v-model="formInline2.plateNo" placeholder="请输入"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item>
+                <el-button type="primary" class="query-btn" @click="onSubmit2">查询</el-button>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <el-table :data="tableData2">
+          <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 layout="prev, pager, next" :total="total1" @current-change="handlePageChange2"
+                         :current-page.sync="pageNum2" :page-size.sync="pageSize2">
+          </el-pagination>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="查询欠费订单信息" name="查询欠费订单信息">
+        <el-form class="form-wrapper" :inline="true" :model="formInline3" style="margin-bottom: 20px;">
+          <el-row>
+            <el-col :span="6">
+              <el-form-item label="订单号:">
+                <el-input v-model="formInline3.orderCode" placeholder="请输入"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="泊位号:">
+                <el-input v-model="formInline3.berthCode" placeholder="请输入"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="车牌号:">
+                <el-input v-model="formInline3.plateNo" placeholder="请输入"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <el-form-item>
+                <el-button type="primary" class="query-btn" @click="onSubmit3">查询</el-button>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <el-table :data="tableData3">
+          <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 layout="prev, pager, next" :total="total3" @current-change="handlePageChange3"
+                         :current-page.sync="pageNum3" :page-size.sync="pageSize3">
+          </el-pagination>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="查询预付订单信息" name="查询预付订单信息">
+        <el-form class="form-wrapper" :inline="true" :model="formInline4" style="margin-bottom: 20px;">
+          <el-row>
+            <el-col :span="6">
+              <el-form-item label="订单号:">
+                <el-input v-model="formInline4.orderCode" placeholder="请输入"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="泊位号:">
+                <el-input v-model="formInline4.berthCode" placeholder="请输入"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="车牌号:">
+                <el-input v-model="formInline4.plateNo" placeholder="请输入"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <el-form-item>
+                <el-button type="primary" class="query-btn" @click="onSubmit3">查询</el-button>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <el-table :data="tableData4">
+          <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 layout="prev, pager, next" :total="total4" @current-change="handlePageChange3"
+                         :current-page.sync="pageNum4" :page-size.sync="pageSize4">
+          </el-pagination>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+<script>
+import api from "@/api/audit.js";
+import dictionary from "@/util/dictionary";
+
+export default {
+  components: {},
+  data() {
+    return {
+      activeName: '支付订单查询',
+      columns1: [
+        {
+          label: '订单号',
+          key: 'orderCode'
+        },
+        {
+          label: '支付日期',
+          key: ''
+        },
+        {
+          label: '支付金额',
+          key: ''
+        },
+        {
+          label: '泊位号',
+          key: ''
+        },
+        {
+          label: '车牌号',
+          key: ''
+        },
+        {
+          label: '入场日期',
+          key: ''
+        },
+        {
+          label: '出场日期',
+          key: ''
+        }
+      ],
+      tableData1: [],
+      total1: 0,
+      pageSize1: 10,
+      pageNum1: 1,
+      formInline1: {
+        orderCode: '',
+        time:''
+      },
+      columns2: [
+        {
+          label: '欠费订单号',
+          key: ''
+        },
+        {
+          label: '车牌号',
+          key: ''
+        },
+        {
+          label: '修改日期',
+          key: ''
+        },
+        {
+          label: '欠费金额',
+          key: ''
+        }
+      ],
+      tableData2: [],
+      total2: 0,
+      pageSize2: 10,
+      pageNum2: 1,
+      formInline2: {
+        orderCode: '',
+        plateNo:''
+      },
+      columns3: [
+        {
+          label: '订单号',
+          key: ''
+        },
+        {
+          label: '泊位号',
+          key: ''
+        },
+        {
+          label: '车牌号',
+          key: ''
+        },
+        {
+          label: '应付金额',
+          key: ''
+        },
+      ],
+      tableData3: [],
+      total3: 0,
+      pageSize3: 10,
+      pageNum3: 1,
+      formInline3: {
+        orderCode:'',
+        berthCode:'',
+        plateNo: ''
+      },
+      columns4: [
+        {
+          label: '订单号',
+          key: ''
+        },
+        {
+          label: '泊位号',
+          key: ''
+        },
+        {
+          label: '车牌号',
+          key: ''
+        },
+        {
+          label: '预付金额',
+          key: ''
+        },
+      ],
+      tableData4: [],
+      total4: 0,
+      pageSize4: 10,
+      pageNum4: 1,
+      formInline4: {
+        orderCode:'',
+        berthCode:'',
+        plateNo: ''
+      }
+    }
+  },
+  mounted() {
+    // this.getTableData1()
+    // this.getTableData2()
+    // this.getTableData3()
+  },
+  watch: {
+  },
+  methods: {
+    onSubmit1() {
+      this.pageNum1 = 1
+      this.getTableData1()
+    },
+    onSubmit2() {
+      this.pageNum2 = 1
+      this.getTableData2()
+    },
+    onSubmit3() {
+      this.pageNum3 = 1
+      this.getTableData3()
+    },
+    onSubmit4() {
+      this.pageNum4 = 1
+      this.getTableData4()
+    },
+    handlePageChange1() {
+      this.getTableData1()
+    },
+    getTableData1() {
+      const {pageNum1, pageSize1} = this
+      api.carListByPage({current: pageNum1, size: pageSize1, ...this.formInline1}).then(res => {
+        this.tableData1 = (res.data.records || []).map(item => ({...item, carType: dictionary.typeMap[item.carType]}))
+        this.total1 = res.data.total
+      })
+    },
+    handlePageChange2() {
+      this.getTableData2()
+    },
+    getTableData2() {
+      const {pageNum2, pageSize2} = this
+      api.gjListByPage({current: pageNum2, size: pageSize2, ...this.formInline2}).then(res => {
+        this.tableData2 = res.data.records || []
+        this.total2 = res.data.total
+      })
+    },
+    handlePageChange3() {
+      this.getTableData3()
+    },
+    getTableData3() {
+      const {pageNum3, pageSize3} = this
+      api.tcjlListByPage({current: pageNum3, size: pageSize3, ...this.formInline3}).then(res => {
+        this.tableData3 = res.data.records || []
+        this.total3 = res.data.total
+      })
+    },
+    handlePageChange4() {
+      this.getTableData3()
+    },
+    getTableData4() {
+      const {pageNum4, pageSize4} = this
+      api.tcjlListByPage({current: pageNum4, size: pageSize4, ...this.formInline4}).then(res => {
+        this.tableData4 = res.data.records || []
+        this.total4 = res.data.total
+      })
+    }
+  }
+}
+</script>
+<style  lang="scss" scoped>
+.body-wrapper {
+  padding: 20px;
+  .button-block{
+    text-align: right;
+    margin-bottom: 20px;
+  }
+  .table-pagination{
+    text-align: right;
+  }
+  .search-card{
+    margin-bottom: 20px;
+    text-align: center;
+    .input-wrapper{
+      width: 36%;
+    }
+  }
+}
+</style>

src/pages/index/components/product_order_search.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="body-wrapper">
+    <el-form class="form-wrapper" :inline="true" :model="formInline1" style="margin-bottom: 20px;">
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="选择订单状态:">
+            <el-select clearable v-model="formInline1.orderStatus" 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="8">
+          <el-form-item>
+            <el-button type="primary" class="query-btn" @click="onSubmit1">查询</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <el-table :data="tableData1">
+      <el-table-column v-for="(item, index) in columns1" :key="index" :label="item.label" :prop="item.key">
+      </el-table-column>
+    </el-table>
+    <div class="table-pagination">
+      <el-pagination layout="prev, pager, next" :total="total1" @current-change="handlePageChange1"
+                     :current-page.sync="pageNum1" :page-size.sync="pageSize1">
+      </el-pagination>
+    </div>
+
+  </div>
+</template>
+<script>
+import api from "@/api/audit.js";
+import dictionary from "@/util/dictionary";
+
+export default {
+  components: {},
+  data() {
+    return {
+      columns1: [
+        {
+          label: '订单编号',
+          key: 'orderCode'
+        },
+        {
+          label: '支付金额(元)',
+          key: 'payAmount'
+        },
+        {
+          label: '下单时间',
+          key: 'orderTime'
+        },
+        {
+          label: '订单状态',
+          key: 'orderType'
+        },
+        {
+          label: '修改日期',
+          key: 'modifiedTime'
+        },
+        {
+          label: '修改人',
+          key: 'modifiedPerson'
+        },
+      ],
+      tableData1: [],
+      total1: 0,
+      pageSize1: 10,
+      pageNum1: 1,
+      formInline1: {
+        orderStatus: ''
+      },
+    }
+  },
+  mounted() {
+    // this.getTableData1()
+  },
+  watch: {},
+  methods: {
+    onSubmit1() {
+      this.pageNum1 = 1
+      this.getTableData1()
+    },
+    handlePageChange1() {
+      this.getTableData1()
+    },
+    getTableData1() {
+      const {pageNum1, pageSize1} = this
+      api.carListByPage({current: pageNum1, size: pageSize1, ...this.formInline1}).then(res => {
+        this.tableData1 = (res.data.records || []).map(item => ({...item, carType: dictionary.typeMap[item.carType]}))
+        this.total1 = res.data.total
+      })
+    },
+
+  }
+}
+</script>
+<style lang="scss" scoped>
+.body-wrapper {
+  padding: 20px;
+
+  .button-block {
+    text-align: right;
+    margin-bottom: 20px;
+  }
+
+  .table-pagination {
+    text-align: right;
+  }
+
+  .search-card {
+    margin-bottom: 20px;
+    text-align: center;
+
+    .input-wrapper {
+      width: 40%;
+    }
+  }
+}
+</style>

src/pages/index/layouts/indexLayout.vue

@@ -38,6 +38,10 @@ export default {
       menu: [
         {name: 'demo1', url: '/demo1'},
         {name: 'demo2', url: '/demo2'},
+        {name: '概览系统', url: '/parking_index'},
+        {name: '订单修改查询', url: '/product_order_search'},
+        {name: '停车订单查询', url: '/parking_order'},
+        {name: '泊位列表', url: '/berth_list'},
       ]
     }
   },

src/router/index.js

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