夜间停车统计，车辆类型

src/pages/index/components/night_parking_statistics.vue

@@ -0,0 +1,223 @@
+<template>
+  <div class="body-wrapper">
+    <div class="page-container">
+      <h2 style="color: #3498db;">日夜间停车总小时数</h2>
+      <div style="width: 99%; height: 480px">
+        <linechart
+          :autoStop="false"
+          :top="30"
+          :bottom="180"
+          :left="40"
+          :legendTop="0"
+          yAxisName="(停车数)"
+          :dataset="linedata"
+          :xlabelFormat="taskFinishXFormat"
+          :tooltipFormat="lineTooltipFormat"
+          :encode="[
+              { x: 'month', y: 'lastAmount', seriesName: '泊位盈余情况',bool:'true' },
+            ]"
+          id="sxcyfzqk"
+        />
+      </div>
+      <el-form class="form-wrapper" :inline="true" :model="formInline">
+        <el-form-item label="停车场名称">
+          <el-input v-model="formInline.carParkName" placeholder="请输入"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit">查询</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table :data="tableData">
+        <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 layout="prev, pager, next" :total="total" @current-change="handlePageChange"
+                       :current-page.sync="pageNum" :page-size.sync="pageSize">
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import linechart from "@/components/lineChart";
+import api from "@/api/article_z";
+
+
+export default {
+  components: {
+    linechart
+  },
+  data() {
+    return {
+      linedata: [],
+      pageNum: 1,
+      pageSize: 10,
+      total: 0,
+      formInline: {
+        carParkName: ''
+      },
+      tableData: [],
+      columns: [
+        {
+          label: '停车场',
+          key: 'carParkName'
+        },
+        {
+          label: '日间停车总时长',
+          key: 'dayTime'
+        },
+        {
+          label: '夜间停车总时长',
+          key: 'nightTime'
+        }
+      ],
+    }
+  },
+  mounted() {
+    this.getLinedata()
+    this.getTabledata()
+  },
+  watch: {
+
+  },
+  methods: {
+    taskFinishXFormat(name) {
+      var str = name.split("");
+      return str.join("\n");
+    },
+    getLinedata(){
+      api.queryBerthPerationNalysis_Bwyyqk().then(res=>{
+        this.linedata=res.data;
+      })
+    },
+    lineTooltipFormat(params) {
+      const data = params[0].data;
+      return `<div class="line-tooltip">
+        <div style="color: ${params[0].color}">${params[0].seriesName}: ${
+        params[0].data.lastAmount || "--"
+      }</div>`;
+    },
+    getTabledata() {
+      const {pageNum, pageSize} = this;
+      // todo
+      api.queryList({current: pageNum, size: pageSize, ...this.formInline}).then(res => {
+        this.tableData = res.data.records || []
+        this.total = res.data.total || 0
+      })
+    },
+    onSubmit() {
+      this.pageNum = 1;
+      this.getTabledata()
+    },
+    handlePageChange() {
+      this.getTabledata()
+    }
+  }
+}
+</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;
+  .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%;
+    }
+  }
+}
+.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%;
+    }
+  }
+}
+.audit-dialog{
+  .mg-bt{
+    margin-bottom: 24px;
+  }
+  .label{
+    text-align: right;
+  }
+}
+.middle-map {
+  width: 100%;
+  height: 800px;
+  .bottom {
+    height: 90%;
+    width: 100%;
+  }
+  /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;
+    }
+  }
+}
+
+</style>

src/pages/index/components/vehicle_type.vue

@@ -0,0 +1,209 @@
+<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>
+        <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: 50%;height: 500px;">
+        <h4 style="color: white">车型分类</h4>
+        <piechart
+          class="model-pie-body"
+          id="chart3"
+          :radiusArr="['30%', '70%']"
+          :roseType = "false"
+          :colorArr="modelPieColor4"
+          :labelFormat="['{name|{b}}', '{sub|{@value}辆 {d}%}', '{hr|}']"
+          :dataset="modelData4"
+          :encode="{ itemName: 'name', value: 'value' }"
+        />
+      </div>
+      <br>
+    </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: 'lastYearAmount', seriesName: '入场',bool:'true' },
+            ]"
+          id="sxcyfzqk"
+        />
+      </div>
+      <div style="width: 50%;height: 500px;">
+        <h4 style="color: white">新能源车排名</h4>
+        <div class="progress-wrapper">
+          <div style="display: flex;line-height: 50px;" v-for="item in progresslist">
+            <span style="color: #fff; padding: 0 10px;">{{item.label}}</span>
+            <el-progress :text-inside="false" :stroke-width="26" :percentage="item.value" define-back-color="#191e3a" text-color="#888ea8"></el-progress>
+          </div>
+        </div>
+      </div>
+      <br>
+    </div>
+  </div>
+</template>
+<script>
+import piechart from "@/components/pieChart";
+import linechart from "@/components/lineChart";
+import api from "@/api/article_liao";
+export default {
+  components: {
+    piechart,
+    linechart
+  },
+  data() {
+    return {
+      linedata: [],
+      modelPieColor: ["#4382f6","#9078f8","#DAA520","#2E8B57"],
+      modelData: [],
+      modelPieColor4: ["#4382f6","#9078f8"],
+      modelData4: [],
+      modelPieColor5: ["#4382f6","#9078f8"],
+      modelData5: [],
+      progresslist: [{
+        label: '比亚迪',
+        value: 30
+      },{
+        label: '特斯拉',
+        value: 50
+      },{
+        label: '特斯拉',
+        value: 70
+      }]
+    }
+  },
+  mounted() {
+    this.parkBehaviorDuration()
+    this.parkBehaviorRange()
+    this.parkBehaviorTemporary()
+    this.parkBehaviorNight()
+  },
+  watch: {
+  },
+  methods: {
+    lineTooltipFormat(params) {
+      return `<div class="line-tooltip">
+        <div style="color: ${params[0].color}">${params[0].seriesName}: ${
+        params[0].data.lastYearAmount || "--"
+      }</div>
+      </div>`;
+    },
+    parkBehaviorDuration() {
+      api.parkBehaviorDuration().then(res =>{
+        this.modelData = res.data
+      })
+    },
+    parkBehaviorRange(){
+      api.parkBehaviorRange().then(res =>{
+        this.linedata = res.data
+      })
+    },
+    parkBehaviorTemporary(){
+      api.parkBehaviorTemporary().then(res =>{
+        this.modelData4 = res.data
+      })
+    },
+    parkBehaviorNight(){
+      api.parkBehaviorNight().then(res =>{
+        this.modelData5 = res.data
+      })
+    },
+  }
+}
+</script>
+<style  lang="scss" scoped>
+.body-wrapper {
+  padding: 20px;
+  background: #0c0c0c;
+  width: 100%;
+  .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;
+}
+.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;
+  }
+}
+.progress-wrapper {
+  width: 100%;
+  height: 480px;
+  .el-progress {
+    line-height: 50px;
+  }
+}
+/deep/.el-progress-bar__outer {
+  background-color: #191e3a !important;
+}
+</style>

src/pages/index/layouts/indexLayout.vue

@@ -99,6 +99,8 @@ export default {
         {name: '临时停车统计', url: '/temp_parking-statistics'},
         {name: '泊位周转分析 ', url: '/berth_turnover'},
         {name: '停车场泊位分析 ', url: '/parking_lot'},
+        {name: '夜间停车统计 ', url: '/night_parking_statistics'},
+        {name: '车辆类型 ', url: '/vehicle_type'},
       ]
     }
   },

src/router/index.js

@@ -333,6 +333,16 @@ export default new Router({
           path: "/berth_use",
           component: () => import("../pages/index/components/berth_use.vue")
         },
+        {
+          name: "night_parking_statistics",
+          path: "/night_parking_statistics",
+          component: () => import("../pages/index/components/night_parking_statistics.vue")
+        },
+        {
+          name: "vehicle_type",
+          path: "/vehicle_type",
+          component: () => import("../pages/index/components/vehicle_type.vue")
+        },
       ]
     }
   ]