youxiw2000 / trash · Files

<template>
  <div class="app-container">
    <el-form ref="queryForm" :inline="true" label-width="105px">
      <el-form-item label="周期" prop="violationObjectType">
        <el-select v-model="params.violationObjectType">
        <el-option value="周">周</el-option>
        <el-option value="月">月</el-option>
        <el-option value="季度">季度</el-option>
        <el-option value="年">年</el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="init">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-tabs v-model="activeName" @tab-click="changeActive()" style="width:50%;float: left;">
        <el-tab-pane label="车" name="truck" style="width:50%;float: left;">
            <el-tabs tab-position="left" @tab-click="refreshChart">
              <el-tab-pane :label="item.name + '(违规' + item.count +'次)'" v-for="item in data.truck">

              </el-tab-pane>
            </el-tabs>


<!--          <el-table :data="data.truck">
            <el-table-column label="序号" align="center" type='index'/>
            <el-table-column label="车号" header-align="center" align="center" property="name"></el-table-column>
            <el-table-column property="count" label="违规次数" header-align="center" align="center"></el-table-column>
          </el-table> -->

        </el-tab-pane>
        <el-tab-pane label="企业" name="company" style="width:50%;float: left;">
          <el-tabs tab-position="left" @tab-click="refreshChart">
            <el-tab-pane :label="item.name + '(违规' + item.count +'次)'" v-for="item in data.company">

            </el-tab-pane>
            </el-tabs>
        </el-tab-pane>


        <div style="width:400px;height:400px;float: left;" id="myECharts"></div>

      </el-tabs>
      <el-row>
      <div style="width:800px;height:400px;float: right;" id="yearChart"></div>
      </el-row>
      <el-row>
      <div style="width:800px;height:400px;float: right;" id="monthChart"></div>
      </el-row>

  </div>
</template>

<script>

import {getEVTable} from "@/api/casefile/violationWarningInformation";
import {getAreaList} from "@/api/casefile/remoteServer";
import * as echarts from "echarts";


export default {
  name: "caseTable",
  props: {},
  data() {
    return {
      activeName:"truck",
      params:{
        violationObjectType:"周",
      },
      tableData: [],
      owningRegion: "",
      createTime: [],
      areas: [],
      hackReset:false,
      pickerMinDate: null,
      pickerMaxDate: null,
      data:{}
    }
  },
  mounted(){
    this.init();
  },
  created() {

  },
  methods: {
    changeActive(comm){
      let obj = {index:0};
      this.refreshChart(obj);
    },
    createChart(){
        let item = this.data["year"][0];
        if(item){


        let name = "";
        let count = 0;
        let keys = [];
        let values = [];
        for(let k in item){
          if(k == "count"){
            count = item[k];
            continue;
          }
          if(k == "name"){
            name = item[k];
            continue;
          }

          keys.push(k);
          values.push(item[k]);
        }

        let opt = {
                    title: {
                      text: "预警趋势",
                      left: "left",
                    },
                    tooltip: {
                      trigger: "axis"
                    },
                     xAxis: {

                        type: 'category',

                        data: keys

                      },

                      yAxis: {

                        type: 'value'

                      },
                    series: [
                      {
                        data:values,
                        type: "line",
                        smooth: true,
                        itemStyle: {
                          normal: {
                            label: {
                              show: true,
                              position: "top",
                              formatter: "{c}"
                            }
                          }
                        }
                      }
                    ]
                  };
        let ychart = echarts.init(document.getElementById("yearChart"));
            ychart.setOption(opt);
        }

          let thisMonth = this.data["month"][0];
          let lastMonth = this.data["month"][1];
          if(thisMonth || lastMonth){


          let keys = [];
          let values = [];
          let values1 = []



          for(let k in thisMonth){
            if(k == "count"){
              continue;
            }
            if(k == "name"){
              continue;
            }

            keys.push(k);
            values.push(thisMonth[k]);
            if(lastMonth[k]){
              values1.push(lastMonth[k]);
            }
          }

          for(let k in lastMonth){
            if(k == "count"){
              continue;
            }
            if(k == "name"){
              continue;
            }

            if(keys.indexOf(k) == -1){
              keys.push(k);
              values.push(0);
              values1.push(lastMonth[k]);
            }
          }




        let opt2 = {
                    title: {
                      text: "同期环比",
                      left: "left",
                    },

                    legend: {
                        data: ['上月', '本月']
                      },
                    tooltip: {
                      trigger: "axis"
                    },
                     xAxis: {
                        type: 'category',
                        data: keys
                      },
                      yAxis: {
                        type: 'value'
                      },
                    series: [
                      {
                            name: '上月',
                            type: 'line',
                            stack: 'Total',
                            data: values1
                          },{
                            name: '本月',
                            type: 'line',
                            stack: 'Total',
                            data: values
                          },
                    ]
                  };



            let mchart = echarts.init(document.getElementById("monthChart"));
                mchart.setOption(opt2);
 }
    },
    refreshChart(comm){

      let item = this.data[this.activeName][comm.index];
      if(!item)
        return;
      let name = "";
      let count = 0;
      let params = [];
      for(let k in item){
        if(k == "count"){
          count = item[k];
          continue;
        }
        if(k == "name"){
          name = item[k];
          continue;
        }
        params.push({"value":item[k],"name":k + "(" + item[k]+")"});
      }
      let opt = {
                  title: {
                    text: name + "违规" + count + "次分布",
                    left: "center",
                  },
                  tooltip: {
                    trigger: "item"
                  },
                  series: [
                    {
                      data:params,
                      type: "pie",
                      radius: '50%'
                    }
                  ]
                };
      let chart = echarts.init(document.getElementById("myECharts"));
          chart.setOption(opt);
    },
    init(){
      getEVTable(this.params).then(res=>{
          this.data = res.data;
          let obj = {index:0};
          this.refreshChart(obj);
          this.createChart();
      });
    },
    spanMethod({row, column, rowIndex, columnIndex}) {
      if (columnIndex == 0) {
        if (rowIndex == 0) {
          return {rowspan: 300, colspan: 1}
        } else {
          return {rowspan: 0, colspan: 0}
        }
      }
    },
    getSummaries(param) {
      const {columns, data} = param;
      const sums = [];

      let allCount = 0;
      let allRepCount = 0;
      for (let i in data) {
        allCount += Number(data[i].count==null?0:data[i].count);
        allRepCount += Number(data[i].repCount==null?0:data[i].repCount);

      }

      columns.forEach((column, index) => {
        if (index == 0 || index == 1) {
          return;
        }

        if (index == 2) {
          sums[2] = allCount;
        }

        if (index == 3) {
          sums[3] = allRepCount;
        }

        if (index == 4) {
          if(allCount==0||allRepCount==0){
            sums[4] = "0" + "%";
          }else{
            sums[4] = ((allRepCount / allCount) * 100).toFixed(2) + "%";
          }

        }
      })

      return sums;
    },

  }
}
</script>

<style scoped>

</style>