index.vue

<template>
  <div class="hiddenStat">
    <el-form :model="queryParams" :inline="true" label-width="100px" style="margin-top: 10px">
      <el-form-item label="隐患级别" prop="hiddenLevel">
        <el-select v-model="queryParams.troubleLevel" placeholder="请选择隐患级别" clearable>
          <el-option
            v-for="dict in troubleLevelOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="parseInt(dict.dictValue)"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="隐患发现时间" prop="hiddenTime">
        <el-date-picker
          v-model="findTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          @change="dateFormat">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="search">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="stat">
      <div id="barChar" :style="{width: '50%', height: '100%'}"></div>
      <div id="pieChar" :style="{width: '50%', height: '100%'}"></div>
    </div>
  </div>

</template>
<script>
  import { hiddenStat } from "@/api/system/book";
  export default {
      name: "index",
    data(){
        return{
          queryParams:{
            hiddenLevel: null,
            beginTime: null,
            endTime: null
          },
          monthData: [],
          hiddenBarData: [],
          closeHiddenBarData: [],
          pieData: [],
          troubleLevelOptions: [],
          findTime: [new Date().getFullYear() + "-01-01 00:00:00",new Date().getFullYear() + "-12-31 23:59:59"]
        }
    },
    mounted(){
        this.getHiddenData();
        this.getDicts("t_trouble_level").then(response => {
            this.troubleLevelOptions = response.data;
        });
    },
    methods:{
      //初始化柱状图
      initBarEchars(){
        let echar = this.$echarts.init(document.getElementById('barChar'));
        let option = {
          title: {
            text: "隐患数量统计",
            left: "20"
          },
          legend: {
            type: "plain",
            align: "left",
            right: "50"
          },
          xAxis: {
            type: 'category',
            axisLabel: {
              //x轴文字的配置
              show: true,
              interval: 0,//使x轴文字显示全
              rotate: -270
            },
              //data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            data: this.monthData
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              interval: 0,
            },
          },
          series: [
            {
              name: '发现数量',
              type: 'bar',
              //data: [120, 200, 150, 80, 70, 110, 130],
              data: this.hiddenBarData
            },
            {
              name: '闭环数量',
              type: 'bar',
              data: this.closeHiddenBarData,
              /*itemStyle: {
                color: "rgba(0, 30, 255, 1)"
              }*/
            },
          ]
        }
        echar.setOption(option);
      },
      //初始化环状图
      initPieEchars(){
        let echar = this.$echarts.init(document.getElementById('pieChar'));
        let option = {
          title: {
            text: "隐患整改率",
            left: "20"
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b}:{c} ({d}%)'
          },
          legend: {
            type: "plain",
            align: "left",
            right: "50"
          },
          series: [
            {
              name: '隐患整改率',
              type: 'pie',
              radius: ['40%', '70%'],
              /*data: [
                { value: 50, name: '已整改' },
                { value: 50, name: '未整改' }
              ],*/
              data: this.pieData
            }
          ]
        }
        echar.setOption(option);

      },
      getHiddenData(){
        hiddenStat(this.queryParams).then(res =>{
          if(res.code = 200){
            this.monthData = res.data.months;
            this.hiddenBarData = res.data.hiddens;
            this.closeHiddenBarData = res.data.rectifieds;
            this.pieData = res.data.pieData;
            //柱状图初始化
            this.initBarEchars();
            //环状图初始化
            this.initPieEchars();
          }
        })
      },
      dateFormat(picker){
        if(!picker){
          this.findTime = [];
          this.queryParams.beginTime = null;
          this.queryParams.endTime = null;
        }else{
          this.queryParams.beginTime = picker[0];
          this.queryParams.endTime = picker[1];
        }
      },
      search(){
        this.getHiddenData();
      },
      resetQuery(){
        this.reset();
        this.getHiddenData();
      },
      reset(){
        this.queryParams = {
          hiddenLevel: null,
            beginTime: null,
            endTime: null
        };
        this.findTime = "";
      }
    }
  }
</script>

<style scoped lang="scss">
  .hiddenStat{
    height: calc(100vh - 50px);
    width: 100%;
  }

  .stat{
    height: 90%;
    width: 100%;
    display: inline-flex;
  }

</style>