新页面添加

src/api/audit.js

@@ -201,13 +201,18 @@ export default {
   czxyjgListByPage(params) {
     return axios.get('/dash/car/owner/credit/page', {params})
   },
-  // 申请列表
-  applyList(params) {
-    return axios.get('/resourceApply/selectBackedApplyList', {params});
+  // 收费趋势
+  sfqs(params) {
+    return axios.post('/dash/business/conditions/stat1', params)
   },
-  // 审核
-  applyResource(params) {
-    return axios.post('/resourceApply/approveApply', params);
+  // 车辆类型
+  cllx(params) {
+    return axios.post('/dash/business/conditions/stat2', params)
+  },
+  // 经营情况——
+  jyqk(params) {
+    return axios.get('/dash/business/conditions/page', {params})
   }
 
+
 }

src/pages/index/components/business_conditions.vue

@@ -0,0 +1,186 @@
+<template xmlns:piechart="http://www.w3.org/1999/html">
+  <div class="body-wrapper">
+    <div style="display: flex;justify-content: space-around;">
+      <div style="width: 25%;display: flex;">
+        <h4 class="h4font">泊位数量：</h4><h3 class="h4font">{{viewData.totalParkingNumber}}</h3>
+      </div>
+      <div style="width: 25%;display: flex;">
+        <h4 class="h4font">实时余位：</h4><h3 class="h4font">{{viewData.remainParkingNumber}}</h3>
+      </div>
+      <div style="width: 25%;display: flex;">
+        <h4 class="h4font">实时进场：</h4><h3 class="h4font">{{viewData.inNumber}}</h3>
+      </div>
+      <div style="width: 25%;display: flex;">
+        <h4 class="h4font">实时出场：</h4><h3 class="h4font">{{viewData.outNumber}}</h3>
+      </div>
+    </div>
+    <br>
+    <br>
+    <div class="charts">
+      <div style="width: 50%;height: 500px;">
+        <h4 style="color: white">收费趋势</h4>
+        <linechart
+          :autoStop="false"
+          :top="30"
+          :bottom="30"
+          :left="40"
+          :legendTop="0"
+          yAxisName="元"
+          :dataset="linedata"
+          :tooltipFormat="lineTooltipFormat"
+          :encode="[
+              { x: 'month', y: 'lastAmount', seriesName: '收费金额',bool:'true' },
+            ]"
+          id="sfqfqs"
+        />
+      </div>
+      <div style="width: 50%;height: 500px;">
+        <h4 style="color: white">车辆类型</h4>
+        <piechart
+          class="model-pie-body"
+          id="chart3"
+          :radiusArr="['30%', '70%']"
+          :roseType = "false"
+          :colorArr="pieColor"
+          :labelFormat="['{name|{b}}', '{sub|{@value} {d}%}', '{hr|}']"
+          :dataset="modelData"
+          :encode="{ itemName: 'name', value: 'value' }"
+        />
+      </div>
+      <br>
+    </div>
+    <br>
+    <br>
+    <el-table :data="tableData" style="background: #2a2a2a;border-color: #333;">
+      <el-table-column v-for="(item, index) in columns" :key="index" :label="item.label" :prop="item.key">
+      </el-table-column>
+    </el-table>
+    <div class="table-pagination">
+      <el-pagination :background="false" layout="total, prev, pager, next" :total="total" @current-change="handlePageChange"
+                     :current-page.sync="pageNum" :page-size.sync="pageSize">
+      </el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+  import api from "@/api/audit.js";
+  import piechart from "@/components/pieChart";
+  import linechart from "@/components/lineChart";
+  import api1 from '@/api/article_liao.js'
+
+  export default {
+    components: {
+      piechart,
+      linechart
+    },
+    data() {
+      return {
+        viewData: {
+          outNumber: "0",
+          inNumber: "0",
+          totalParkingNumber: "0",
+          remainParkingNumber: "0"
+        },
+        linedata: [],
+        modelData: [],
+        columns: [
+          {
+            label: '停车场名称',
+            key: 'carParkName'
+          },
+          {
+            label: '待结算',
+            key: 'settled'
+          },
+          {
+            label: '停入车次',
+            key: 'parkNum'
+          },
+          {
+            label: '当日停泊时长',
+            key: 'parkingduration'
+          }
+        ],
+        pieColor: ["rgb(0, 143, 251)","rgb(0, 227, 150)"],
+        tableData: [],
+        total: 0,
+        pageSize: 5,
+        pageNum: 1,
+      }
+    },
+    mounted() {
+      const {pageNum, pageSize} = this
+      let that = this
+      let params4 = {current: pageNum, size: pageSize}
+      // todo 添加对应页面接口
+      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 || []
+        that.modelData = res[2].data || []
+        this.tableData = res[3].data.records || []
+        this.total = res[3].data.total || 0
+      })
+    },
+    watch: {
+    },
+    methods: {
+      lineTooltipFormat(params) {
+        return `<div class="line-tooltip">
+        <div style="color: ${params[0].color}">${params[0].seriesName}: ${
+          params[0].data.lastAmount || "--"
+        }</div>
+      </div>`;
+      },
+      handlePageChange() {
+        this.getTableData()
+      },
+      getTableData() {
+        const {pageNum, pageSize} = this
+        api.tccqkListByPage({current: pageNum, size: pageSize}).then(res => {
+          this.tableData = res.data.records || []
+          this.total = res.data.total || 0
+        })
+      },
+    }
+  }
+</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%;
+    }
+  }
+}
+
+.charts{
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+.h4font{
+  color: #FFFFFF;
+}
+.audit-dialog{
+  .mg-bt{
+    margin-bottom: 24px;
+  }
+  .label{
+    text-align: right;
+  }
+}
+</style>

src/pages/index/components/business_overview.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="body-wrapper">
+    <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"
+          id="chart1"
+          :radiusArr="['30%', '70%']"
+          :roseType = "false"
+          :colorArr="modelPieColor"
+          :labelFormat="['{name|{b}}', '{sub|{@value} {d}%}', '{hr|}']"
+          :dataset="modelData"
+          :encode="{ itemName: 'name', value: 'value' }"
+        />
+      </div>
+      <div style="width: 33%;height: 400px;">
+        <h4 style="color: white">设备情况</h4>
+        <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: '应收'},
+            {x: 'month', y: 'cs', seriesName: '实收'}]"
+          :labelSize="15"
+          id="fxdqhszzt"
+        />
+      </div>
+      <div style="width: 33%;height: 400px;">
+        <h4 style="color: white">满位显示器</h4>
+        <el-table :data="tableData" style="background: #2a2a2a;border-color: #333;">
+          <el-table-column v-for="(item, index) in columns" :key="index" :label="item.label" :prop="item.key">
+          </el-table-column>
+        </el-table>
+        <div class="table-pagination">
+          <el-pagination :background="false" layout="total, prev, pager, next" :total="total" @current-change="handlePageChange"
+                         :current-page.sync="pageNum" :page-size.sync="pageSize">
+          </el-pagination>
+        </div>
+      </div>
+      <br>
+    </div>
+
+
+  </div>
+</template>
+<script>
+import piechart from "@/components/pieChart";
+import api from "@/api/article_z";
+
+export default {
+  components: {
+    piechart
+  },
+  data() {
+    return {
+      columns: [
+        {
+          label: '设备名称',
+          key: 'deviceName'
+        },
+        {
+          label: '状态',
+          key: 'deviceState'
+        }
+      ],
+      modelPieColor: ["#2E8B57","#9078f8"],
+      modelData: [],
+      modelPieColor2: ["#2E8B57","#9078f8"],
+      modelData2: [],
+      modelPieColor3: ["#2E8B57","#9078f8"],
+      modelData3: [],
+      tableData: [],
+      total: 0,
+      pageSize: 5,
+      pageNum: 1,
+      radio: '2',
+      dialogVisible: false,
+      selRow: {},
+    }
+  },
+  mounted() {
+    const {pageNum, pageSize} = this
+    let that = this
+    let params4 = {current: pageNum, size: pageSize}
+    let requestList = [api.queryEquipmentRunning_Sxt(), api.queryEquipmentRunning_Zj(),api.queryEquipmentRunning_Mwxsq(), api.sbyxjcList(params4)];
+    Promise.all(requestList).then(res => {
+      that.modelData = res[0].data || []
+      that.modelData2 = res[1].data || []
+      that.modelData3 = res[2].data || []
+      this.tableData = res[3].data.records || []
+      this.total = res[3].data.total || 0
+    })
+  },
+  watch: {
+  },
+  methods: {
+    handlePageChange() {
+      this.getTableData()
+    },
+    getTableData() {
+      const {pageNum, pageSize} = this
+      api1.sbyxjcList({current: pageNum, size: pageSize}).then(res => {
+        this.tableData = res.data.records || []
+        this.total = res.data.total
+      })
+    },
+  }
+}
+</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/equipment_running.vue

@@ -62,9 +62,8 @@
   </div>
 </template>
 <script>
-import api from "@/api/audit.js";
 import piechart from "@/components/pieChart";
-import api1 from "@/api/article_z";
+import api from "@/api/article_z";
 
 export default {
   components: {
@@ -99,29 +98,21 @@ export default {
     }
   },
   mounted() {
-    this.getTableData()
-    this.getModelDataData()
-    this.getModelData2Data()
-    this.getModelData3Data()
+    const {pageNum, pageSize} = this
+    let that = this
+    let params4 = {current: pageNum, size: pageSize}
+    let requestList = [api.queryEquipmentRunning_Sxt(), api.queryEquipmentRunning_Zj(),api.queryEquipmentRunning_Mwxsq(), api.sbyxjcList(params4)];
+    Promise.all(requestList).then(res => {
+      that.modelData = res[0].data || []
+      that.modelData2 = res[1].data || []
+      that.modelData3 = res[2].data || []
+      this.tableData = res[3].data.records || []
+      this.total = res[3].data.total || 0
+    })
   },
   watch: {
   },
   methods: {
-    getModelDataData(){
-      api1.queryEquipmentRunning_Sxt().then(res=>{
-        this.modelData=res.data;
-      })
-    },
-    getModelData2Data(){
-      api1.queryEquipmentRunning_Zj().then(res=>{
-        this.modelData2=res.data;
-      })
-    },
-    getModelData3Data(){
-      api1.queryEquipmentRunning_Mwxsq().then(res=>{
-        this.modelData3=res.data;
-      })
-    },
     handlePageChange() {
       this.getTableData()
     },

src/pages/index/components/park_bahavior.vue

@@ -101,6 +101,16 @@ export default {
   watch: {
   },
   methods: {
+    lineTooltipFormat(params) {
+      return `<div class="line-tooltip">
+        <div style="color: ${params[0].color}">${params[0].seriesName}: ${
+        params[0].data.lastYearAmount || "--"
+      }</div>
+        <div style="color: ${params[1].color}">${params[1].seriesName}: ${
+        params[1].data.thisYearAmount || "--"
+      }</div>
+      </div>`;
+    },
     parkBehaviorDuration() {
       api.parkBehaviorDuration().then(res =>{
         this.modelData = res.data

src/pages/index/components/record_query.vue

@@ -198,7 +198,7 @@ export default {
       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.carTypeMap[item.carType]}))
+          this.tableData1 = (res.data.records || []).map(item => ({...item, carType: dictionary.typeMap[item.carType]}))
           this.total1 = res.data.total
         })
       },

src/pages/index/layouts/indexLayout.vue

@@ -85,6 +85,8 @@ export default {
         {name: 'hot_map', url: '/hot_map'},
         {name: 'heat_map', url: '/heat_map'},
         {name: '泊位列表', url: '/berth_list'},
+        {name: '业务概览', url: '/business_overview'},
+        {name: '经营情况', url: '/business_conditions'},
       ]
     }
   },

src/router/index.js

@@ -262,6 +262,16 @@ export default new Router({
           path: "/service_monitor",
           component: () => import("../pages/index/components/service_monitor.vue")
         },
+        {
+          name: "business_overview",
+          path: "/business_overview",
+          component: () => import("../pages/index/components/business_overview.vue")
+        },
+        {
+          name: "business_conditions",
+          path: "/business_conditions",
+          component: () => import("../pages/index/components/business_conditions.vue")
+        },
       ]
     }
   ]

src/util/dictionary.js

@@ -1,4 +1,9 @@
 export default {
+  typeMap:  {
+    0: '未识别',
+    1: '小型',
+    2: '大型',
+  },
   carTypeMap:  {
     0: '临时车',
     1: '月卡车',