luohe_operation/src/pages/index/components/parking_index.vue

<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>