Merge branch 'master' of https://e.coding.net/g-mklx3272/luohe/luohe_fronted

src/pages/index/components/access_data_analysis.vue

@@ -74,7 +74,6 @@ export default {
       districtOptions: options.districtOptions,
       value: '',
       modelPieColor: ["#4382f6", "#9078f8", "#79a7db", "#FF9800", "#9C27B0"],
-      modelPieColor1: ["#4382f6", "#9078f8", "#6aa1e1", "#FF9800", "#9C27B0"],
       modelData: {
         list: []
       },

src/pages/index/components/berth_use.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="body-wrapper">
+    <el-form class="form-wrapper" :inline="true" :model="formInline">
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="停车场名称:">
+            <el-input v-model="formInline.parkingName" placeholder="请输入"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item>
+            <el-button type="primary" class="query-btn" @click="onSubmit">查询</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <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";
+
+export default {
+  components: {},
+  data() {
+    return {
+      columns: [
+        {
+          label: '停车场名称',
+          key: 'parkingName'
+        },
+        {
+          label: '星期一',
+          key: ''
+        },
+        {
+          label: '星期二',
+          key: ''
+        },
+        {
+          label: '星期三',
+          key: ''
+        },
+        {
+          label: '星期四',
+          key: ''
+        },
+        {
+          label: '星期五',
+          key: ''
+        },
+        {
+          label: '星期六',
+          key: ''
+        },
+        {
+          label: '星期天',
+          key: ''
+        },
+      ],
+      tableData: [],
+      total: 0,
+      pageSize: 10,
+      pageNum: 1,
+      dialogVisible: false,
+      formInline: {
+        parkingName: '',
+      },
+    }
+  },
+  mounted() {
+    // this.getTableData()
+  },
+  watch: {
+  },
+  methods: {
+    getTableData() {
+      const {pageNum, pageSize} = this
+      api.ipListByPage({current: pageNum, size: pageSize, ipAddr: this.formInline.ipAddr}).then(res => {
+        this.tableData = res.data.records || []
+        this.total = res.data.total
+      })
+    },
+    onSubmit () {
+      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-input__prefix{
+  top: 8px;
+}
+/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;
+  }
+}
+</style>

src/pages/index/components/parking_live.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="body-wrapper">
+    <el-tabs  v-model="activeName">
+      <el-tab-pane label="泊位占用率" name="泊位占用率">
+        <div style="height: 350px">
+          <linechart
+            v-if="activeName === '泊位占用率'"
+            :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>
+      </el-tab-pane>
+      <el-tab-pane label="在场会员车占比/进出场趋势" name="在场会员车占比/进出场趋势">
+        <div style="display: flex; justify-content: space-between;">
+          <div style="width: 50%; height: 400px">
+            <piechart
+              v-if="activeName === '在场会员车占比/进出场趋势'"
+              class="model-pie-body"
+              id="chart1"
+              :radiusArr="['30%', '70%']"
+              :colorArr="modelPieColor"
+              :labelFormat="['{name|{b}}', '{sub|{@value}万元 {d}%}', '{hr|}']"
+              :dataset="modelData.list"
+              :encode="{ itemName: 'name', value: 'value' }"
+            />
+          </div>
+          <div style="width: 50%; height: 400px">
+            <linechart
+              v-if="activeName === '在场会员车占比/进出场趋势'"
+              :autoStop="false"
+              :top="30"
+              :bottom="30"
+              :left="40"
+              :legendTop="0"
+              yAxisName="(辆)"
+              :dataset="linedata1"
+              :tooltipFormat="lineTooltipFormat1"
+              :encode="[
+              { x: 'month', y: 'lastYearAmount', seriesName: '入场',bool:'true' },
+              { x: 'month', y: 'thisYearAmount', seriesName: '出场',bool:'true' },
+            ]"
+              id="sxcyfzqk"
+            />
+          </div>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+<script>
+import linechart from "@/components/lineChart";
+import piechart from "@/components/pieChart";
+
+export default {
+  components: {
+    linechart,
+    piechart,
+  },
+  data() {
+    return {
+      activeName: '泊位占用率',
+      linedata: [{month: '建业智慧港停车场', lastYearAmount: 52}
+        , {month: '长申玉购物广场（螺湾店）', lastYearAmount: 20}
+        , {month: '昌建东外滩西南停车场', lastYearAmount: 60}
+        , {month: '漯河长申玉停车场', lastYearAmount: 12}
+        , {month: '万宝手机城新西店', lastYearAmount: 40}],
+
+      modelPieColor: ["#db6749", "#f8cd55", "#3c97d6", "#989bf8"],
+      modelData: {
+        list: [{name: '长期车', value: 100}, {name: '临停车', value: 100}, {name: '会员车', value: 100}]
+      },
+      linedata1: [{month: '0:00-3:00', lastYearAmount: 2, thisYearAmount: 1}
+        , {month: '3:00-6:00', lastYearAmount: 6, thisYearAmount: 8}
+        , {month: '6:00-9:00', lastYearAmount: 20, thisYearAmount: 60}
+        , {month: '9:00-12:00', lastYearAmount: 60, thisYearAmount: 22}
+        , {month: '12:00-15:00', lastYearAmount: 12, thisYearAmount: 34}
+        , {month: '15:00-18:00', lastYearAmount: 40, thisYearAmount: 60}
+        , {month: '18:00-21:00', lastYearAmount: 100, thisYearAmount: 91}
+        , {month: '21:00-0:00', lastYearAmount: 60, thisYearAmount: 20}],
+    }
+  },
+  mounted() {
+  },
+  watch: {
+  },
+  methods: {
+
+    lineTooltipFormat(params) {
+      const data = params[0].data;
+      return `<div class="line-tooltip">
+        <div style="color: ${params[0].color}">${params[0].seriesName}: ${
+        params[0].data.lastYearAmount || "--"
+      }(%)</div>
+      </div>`;
+    },
+    lineTooltipFormat1(params) {
+      const data = params[0].data;
+      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[0].data.thisYearAmount || "--"
+      }(辆)</div>
+      </div>`;
+    },
+  }
+}
+</script>
+<style  lang="scss" scoped>
+.body-wrapper {
+  padding: 20px;
+
+  .model-pie-body {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/pages/index/components/parking_period_analysis.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="body-wrapper">
+    <div style="display: flex; justify-content: space-between;height: 300px">
+      <h5 style="color: white">停车高峰时段分析</h5>
+      <linechart
+        :autoStop="false"
+        :top="30"
+        :bottom="30"
+        :left="40"
+        :legendTop="0"
+        yAxisName="(辆)"
+        :dataset="linedata"
+        :tooltipFormat="lineTooltipFormat"
+        :encode="[
+              { x: 'month', y: 'lastYearAmount', seriesName: '入场',bool:'true' },
+              { x: 'month', y: 'thisYearAmount', seriesName: '出场',bool:'true' },
+            ]"
+        id="sxcyfzqk"
+      />
+    </div>
+    <div style="display: flex; justify-content: space-between;height: 300px">
+      <h5 style="color: white">出入场压力分析</h5>
+      <barchart
+        class="side-chart"
+        :autoStop="false"
+        :colorArr="['#ffd201', '#00eacb', '#01b4ff', '#5d78ff']"
+        legendIcon="react"
+        :bottom="30"
+        :xlabelFormat="xLabelFormat"
+        :top="60"
+        yAxisName="(辆)"
+        :tooltip="tooltipFormat"
+        :dataset="modelData"
+        :encode="[
+            {x: 'month', y: 'hs', seriesName: '入场'},
+            {x: 'month', y: 'cs', seriesName: '出场'}]"
+        :labelSize="15"
+        id="fxdqhszzt"
+      />
+    </div>
+    <div style="display: flex; justify-content: space-between;height: 300px">
+      <h5 style="color: white">停车饱和度分析</h5>
+      <barchart
+        class="side-chart"
+        :autoStop="false"
+        :colorArr="['#ffd201', '#00eacb', '#01b4ff', '#5d78ff']"
+        legendIcon="react"
+        :bottom="30"
+        :xlabelFormat="xLabelFormat1"
+        :top="60"
+        yAxisName="(个)"
+        :tooltip="tooltipFormat1"
+        :dataset="modelData1"
+        :encode="[
+            {x: 'month', y: 'hs', seriesName: '占用'},
+            {x: 'month', y: 'cs', seriesName: '空闲'}]"
+        :labelSize="15"
+        id="fxdqhszzt1"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import linechart from "@/components/lineChart";
+import barchart from "@/components/barChart";
+
+export default {
+  components: {
+    linechart,
+    barchart
+  },
+  data() {
+    return {
+      modelData: [{
+        "mouth": "市图书馆停车场",
+        "hs": 6053,
+        "cs": 1921
+      },
+        {
+          "mouth": "中山公园停车场",
+          "hs": 6033,
+          "cs": 3766
+        },
+        {
+          "mouth": "天地广场停车场",
+          "hs": 2258,
+          "cs": 2513
+        }],
+      modelData1: [{
+        "mouth": "市图书馆停车场",
+        "hs": 6053,
+        "cs": 1921
+      },
+        {
+          "mouth": "中山公园停车场",
+          "hs": 6033,
+          "cs": 3766
+        },
+        {
+          "mouth": "天地广场停车场",
+          "hs": 2258,
+          "cs": 2513
+        }],
+      linedata: [{month: '0:00-3:00', lastYearAmount: 2, thisYearAmount: 1}
+        , {month: '3:00-6:00', lastYearAmount: 6, thisYearAmount: 8}
+        , {month: '6:00-9:00', lastYearAmount: 20, thisYearAmount: 60}
+        , {month: '9:00-12:00', lastYearAmount: 60, thisYearAmount: 22}
+        , {month: '12:00-15:00', lastYearAmount: 12, thisYearAmount: 34}
+        , {month: '15:00-18:00', lastYearAmount: 40, thisYearAmount: 60}
+        , {month: '18:00-21:00', lastYearAmount: 100, thisYearAmount: 91}
+        , {month: '21:00-0:00', lastYearAmount: 60, thisYearAmount: 20}],
+    }
+  },
+  mounted() {
+  },
+  watch: {},
+  methods: {
+    lineTooltipFormat(params) {
+      const data = params[0].data;
+      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[0].data.thisYearAmount || "--"
+      }(辆)</div>
+      </div>`;
+    },
+    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>${params[1].seriesName}: ${
+        params[0].data.cs || "--"}辆</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');
+    },
+    tooltipFormat1(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>${params[1].seriesName}: ${
+        params[0].data.cs || "--"}个</div>
+</div>`;
+    },
+    xLabelFormat1(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;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background: #0c0c0c;
+
+}
+</style>

src/pages/index/components/record_query.vue

@@ -264,24 +264,7 @@ export default {
   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{

src/pages/index/layouts/indexLayout.vue

@@ -91,6 +91,9 @@ export default {
         // 以下为运营管理平台
         {name: '停车场热力图', url: '/parking_heatmap'},
         {name: '停车场分析报表', url: '/parking_analysis_report'},
+        {name: '停车时段分析', url: '/parking_period_analysis'},
+        {name: '停车实况数据', url: '/parking_live'},
+        {name: '泊位利用分析', url: '/berth_use'},
       ]
     }
   },