luohe_fronted/src/pages/index/components/berth_road_out.vue

<template>
  <div class="body-wrapper">
    <div style="display: flex; justify-content: space-between;">
      <div style="width: 50%; height: 300px">
        <div align="center" style="color: white">泊位饱和度</div>
        <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: 50%; height: 300px">
        <div align="center" style="color: white">泊位周转率</div>
        <linechart
          :autoStop="false"
          :top="30"
          :bottom="30"
          :left="40"
          :legendTop="0"
          yAxisName="(%)"
          :dataset="linedata1"
          :tooltipFormat="lineTooltipFormat1"
          :encode="[
              { x: 'month', y: 'lastAmount', seriesName: '泊位周转率',bool:'true' },
            ]"
          id="sxcyfzqk1"
        />
      </div>
    </div>
    <div style="display: flex; justify-content: space-between;margin-top: 5%">
      <div style="width: 50%; height: 300px;">
        <div align="center" style="color: white">特殊车辆进场占比</div>
        <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: 300px">
        <div align="center" style="color: white">泊位营收分析</div>
        <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>
    <div style="display: flex; justify-content: space-between;margin-top: 5%">
      <div style="width: 50%; height: 300px;padding-left: 25px">
        <div align="center" style="color: white">车辆进出场趋势</div>
        <linechart
          :autoStop="false"
          :top="30"
          :bottom="30"
          :left="40"
          :legendTop="0"
          yAxisName="(%)"
          :dataset="linedata2"
          :tooltipFormat="lineTooltipFormat2"
          :encode="[
              { x: 'month', y: 'lastYearAmount', seriesName: '进流率',bool:'true' },
              { x: 'month', y: 'thisYearAmount', seriesName: '出流率',bool:'true' },
            ]"
          id="sxcyfzqk2"
        />
      </div>
      <div style="width: 50%; height: 300px;margin-top: 5%;">
        <div align="center" style="font-family: Arial, Helvetica, sans-serif">
          <h4 style="color: rgb(47, 178, 77);">路段泊位饱和度合理性分析</h4>
          <h5 style="margin-top: 5px;color: rgb(49, 97, 0);">检测到周末泊位较饱和，建议适当增加泊位</h5>
          <h5  style="margin-top: 5px;color: rgb(49, 97, 0);">检测到周末泊位周转率低，建议适当增加长时段停车费用</h5>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import piechart from "@/components/pieChart";
import linechart from "@/components/lineChart";
import barchart from "@/components/barChart";
import vtable from "@/components/vtableNew";
import api from "@/api/article_liao";

export default {
  components: {
    piechart,
    linechart,
    barchart,
    vtable
  },
  data() {
    return {
      modelPieColor: ["#4382f6", "#9078f8", "#79a7db", "#FF9800"],
      modelData: {
        list: []
      },
      linedata: [],
      linedata1: [],
      linedata2: [],
      bardata: [],

    }
  },
  mounted() {
    this.dashBertRroadOutStat1()
    this.dashBertRroadOutStat2()
    this.dashBertRroadOutStat3()
    this.dashBertRroadOutStat4()
    this.dashBertRroadOutStat5()
  },
  watch: {

  },
  methods: {

    lineTooltipFormat1(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>`;
    },
    lineTooltipFormat(params) {
      const data = params[0].data;
      return `<div class="line-tooltip">
        <div style="color: ${params[1].color}">${params[1].seriesName}: ${
        params[0].data.thisYearAmount || "--"
      }(元)</div>
        <div style="color: ${params[0].color}">${params[0].seriesName}: ${
        params[0].data.lastYearAmount || "--"
      }(元)</div>
      </div>`;
    },
    lineTooltipFormat2(params) {
      const data = params[0].data;
      return `<div class="line-tooltip">
        <div style="color: ${params[1].color}">${params[1].seriesName}: ${
        params[0].data.thisYearAmount || "--"
      }(%)</div>
        <div style="color: ${params[0].color}">${params[0].seriesName}: ${
        params[0].data.lastYearAmount || "--"
      }(%)</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');
    },
    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>`;
    },
    dashBertRroadOutStat1(){
      api.dashBertRroadOutStat1().then(res =>{
        this.bardata = res.data
      })
    },
    dashBertRroadOutStat2(){
      api.dashBertRroadOutStat2().then(res =>{
        this.linedata1 = res.data
      })
    },
    dashBertRroadOutStat3(){
      api.dashBertRroadOutStat3().then(res =>{
        this.modelData.list = res.data
      })
    },
    dashBertRroadOutStat4(){
      api.dashBertRroadOutStat4().then(res =>{
        this.linedata = res.data
      })
    },
    dashBertRroadOutStat5(){
      api.dashBertRroadOutStat5().then(res =>{
        this.linedata2 = res.data
      })
    },
  }
}
</script>
<style  lang="scss" scoped>
.body-wrapper {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #0c0c0c;
}

.model-pie-body {
  width: 100%;
  height: 99%;
}


</style>