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

<template>
  <div class="body-wrapper">
      <el-form class="form-wrapper" :inline="true" :model="formInline">
        <el-form-item label="所在区">
          <el-select v-model="formInline.region" placeholder="请选择所在区">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="停车场名称">
          <el-input v-model="formInline.interfaceName" placeholder="请输入停车场名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    <div style="display: flex; justify-content: space-between;">
      <div style="width: 50%; height: 300px">
        <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>-->
        <piechart
          class="model-pie-body"
          id="chart1"
          :roseType="false"
          :radiusArr="['30%', '70%']"
          :colorArr="modelPieColor"
          :labelFormat="['{name|{b}}', '{sub|{@value}次 {d}%}', '{hr|}']"
          :dataset="modelData.list"
          :encode="{ itemName: 'name', value: 'value' }"
        />
      </div>
    </div>
  </div>
</template>
<script>
import  piechart from "@/components/pieChart";
import barchart from "@/components/barChart";
import api from "@/api/article_liao";

export default {
  components: {
    piechart,
    barchart
  },
  data() {
    return {
      formInline: {
        interfaceName: '',
        region: ''
      },
        options: [{
          value: '源汇区',
          label: '源汇区'
        }, {
          value: '郾城区',
          label: '郾城区'
        }, {
          value: '召陵区',
          label: '召陵区'
        }, {
          value: '临颍县',
          label: '临颍县'
        }, {
          value: '舞阳县',
          label: '舞阳县'
        }],
      value: '',
      modelPieColor: ["#4382f6", "#9078f8", "#79a7db", "#FF9800", "#9C27B0"],
      modelPieColor1: ["#4382f6", "#9078f8", "#6aa1e1", "#FF9800", "#9C27B0"],
      modelData: {
        list: []
      },
      bardata: [],
    }
  },
  mounted() {
    this.dashAccessDataAnalysisStat1()
    this.dashAccessDataAnalysisStat2()
  },
  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>${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');
    },
    dashAccessDataAnalysisStat1(){
      api.dashAccessDataAnalysisStat1().then(res =>{
        this.bardata = res.data
      })
    },
    dashAccessDataAnalysisStat2(){
      api.dashAccessDataAnalysisStat2().then(res =>{
        this.modelData.list = res.data
      })
    },
  }
}
</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 {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #0c0c0c;

}

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

.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;
}
</style>