LQBZ_web/src/views/als/faultStatistics/echarts.vue

<template>
  <div class="view-carrierFlightMission">
    <div class="view-carrierFlightMission-FlightMission-btn">
      <div class="view-carrierFlightMission-FlightMission-btn-right">
        <div class="input-with-select">
          <span>日期</span>
          <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" v-model="statisticsDate" placeholder="选择日期"> </el-date-picker>
        </div>
        <div class="input-with-select">
          <span>地区</span>
          <el-select v-model="select.groups" placeholder="请选择">
            <el-option v-for="item in groupsList" :key="item.groups" :label="item.groups" :value="item.groups"> </el-option>
          </el-select>
        </div>
        <div class="input-with-select">
          <span>专业</span>
          <el-select v-model="select.major" placeholder="请选择">
            <el-option v-for="item in majorList" :key="item.major" :label="item.major" :value="item.major"> </el-option>
          </el-select>
        </div>
        <div class="input-with-select">
          <span>机型</span>
          <el-select v-model="select.aircraftModel" placeholder="请选择" @change="getFaultStatisticsListAll({ distinctField: 'aircraft_num' })">
            <el-option v-for="item in aircraftModelList" :key="item.aircraftModel" :label="item.aircraftModel" :value="item.aircraftModel"> </el-option>
          </el-select>
        </div>
        <div class="input-with-select">
          <span>机号</span>
          <el-select v-model="select.aircraftNum" placeholder="请选择">
            <el-option v-for="item in aircraftNumList" :key="item.aircraftNum" :label="item.aircraftNum" :value="item.aircraftNum"> </el-option>
          </el-select>
        </div>
        <div class="input-with-select">
          <span>部件</span>
          <el-select v-model="select.faultyPartsName" placeholder="请选择">
            <el-option v-for="item in faultyPartsNameList" :key="item.faultyPartsName" :label="item.faultyPartsName" :value="item.faultyPartsName"> </el-option>
          </el-select>
        </div>
        <el-button @click="searchClick" style="border-color: rgb(13, 128, 164); background-color: rgb(13, 128, 164); color: #fff">查询</el-button>
      </div>
    </div>
    <div class="view-dataType-table">
      <el-row>
        <el-col :span="12">
          <Card title="故障件数量统计图">
            <template slot="content">
              <div class="baseBar-box" ref="echartLeft"></div>
            </template>
          </Card>
        </el-col>
        <el-col :span="12">
          <Card title="故障件数量统计图">
            <template slot="content">
              <div class="baseBar-box" ref="echartRight"></div>
            </template>
          </Card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getFaultStatisticsListAll, getAircaftTypeAndModelTree, removeFaultStatistics, getFaultStatisticsEcharts } from '@/api/als/faultStatistics'
import { debounce } from '@/utils/index'
import * as echarts from 'echarts'
export default {
  name: 'FaultStatistics',
  data() {
    // 这里存放数据
    return {
      keyWord: '',
      aircaftModelIdList: [],
      currentNodeKey: null,
      currentNode: null,
      menuTreeData: [],
      treeObj: {
        title: '所属机种',
        activityheight: '275px',
        searchIcon: false,
        configure: {
          children: 'children',
          label: 'label'
        }
      },
      groupsList: [],
      majorList: [],
      aircraftModelList: [],
      aircraftNumList: [],
      faultyPartsNameList: [],
      statisticsDate: [],
      select: {
        startStatisticsDate: '',
        endStatisticsDate: '',
        major: '特设',
        aircraftModel: 'J-11'
      },
      typeTree: {
        children: 'children',
        label: 'label'
      },
      searchValue: '',
      options: {
        stripe: true, // 斑马纹
        mutiSelect: true, // 多选框
        index: false, // 显示序号， 多选则 mutiSelect
        loading: false, // 表格动画
        initTable: false, // 是否一挂载就加载数据
        border: true,
        height: 'calc(100vh - 300px)'
      },
      tableCheckItems: [],
      form: {
        id: '',
        statisticsDate: '',
        warZone: '',
        army: '',
        division: '',
        groups: '',
        squadron: '',
        aircraftNum: '',
        aircraftModel: '',
        factoryNum: '',
        machineType: '',
        machineNum: '',
        machineModel: '',
        machineName: '',
        landingGear: '',
        major: '',
        faultyPartsName: '',
        faultyPartsModel: '',
        faultyPartsNum: '',
        engineModel: '',
        engineNum: '',
        engineSerialNum: '',
        faultyPartsPosition: '',
        faultyPhenomenon: '',
        faultyPlace: '',
        findOpportunity: '',
        systems: '',
        timingType: '',
        faultyPartsManufacturer: '',
        faultyPartsRenovate: '',
        installationTime: '',
        totalWorkTime: '',
        repairTime: '',
        replacementPartsModel: '',
        replacementPartsNum: '',
        replacementPartsManufacturer: '',
        replacementTotalWorkTime: '',
        replacementPartsRenovate: '',
        replacementRepairTime: '',
        faultyAbnormalCode: '',
        faultyPartsInstallDate: '',
        faultyReason: '',
        faultyNature: '',
        faultyResponsibility: '',
        faultyConsequence: '',
        handlingSuggestions: '',
        influenceFrequency: '',
        errorFlyFrequency: '',
        identificationMethod: '',
        discoveredPeople: '',
        exclusionMethod: '',
        exclusionPeople: '',
        examinePeople: '',
        examineTime: '',
        exclusionDate: '',
        exclusionWorkTime: '',
        exclusionPeopleNum: '',
        exclusionTime: '',
        isAchievement: '',
        needTestFly: '',
        repairStatus: '',
        remarks: '',
        tenantId: '',
        delFlag: '',
        version: '',
        createBy: '',
        createTime: '',
        updateBy: '',
        updateTime: ''
      },
      debounceFn: debounce(this.fetch, 500)
    }
  },
  watch: {
    keyWord() {
      this.debounceFn()
    }
  },
  mounted() {
    this.getFaultStatisticsAPI()
    // this.getAircaftTypeAndModelTreeAPI()
  },
  methods: {
    async getFaultStatisticsListAll(params) {
      if (params.distinctField == 'aircraft_num') {
        params.aircraftModel = this.select.aircraftModel
      }
      const { data } = await getFaultStatisticsListAll({ ...params })
      if (params.distinctField == 'groups') {
        this.groupsList = data
      } else if (params.distinctField == 'major') {
        this.majorList = data
      } else if (params.distinctField == 'aircraft_model') {
        this.aircraftModelList = data
      } else if (params.distinctField == 'aircraft_num') {
        this.aircraftNumList = data
      } else if (params.distinctField == 'faulty_parts_name') {
        this.faultyPartsNameList = data
      }
    },

    async getAircaftTypeAndModelTreeAPI(params) {
      const { data } = await getAircaftTypeAndModelTree(params)
      this.menuTreeData = data
      if (data.length) {
        this.currentNodeKey = data[0].value
        this.currentNode = data[0]
        this.aircaftModelIdList = this.getTreeLeafData(data[0]?.children).map((e) => e.id)
        this.getFaultStatisticsAPI({ aircaftModelIdList: this.aircaftModelIdList })
      }
    },
    getTreeLeafData(list) {
      const newArr = []
      function getLeaf(data, arr) {
        data.forEach((e) => {
          if (e.type === 1) {
            arr.push(e)
          }
          if (e.children.length) {
            getLeaf(e.children, arr)
          }
        })
      }
      getLeaf(list, newArr)
      return newArr
    },
    echartsLeft(names, values) {
      const echartLeft = echarts.init(this.$refs.echartLeft)
      const option = {
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          axisLabel: {
            color: '#fff'
          },
          type: 'category',
          data: names
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#fff'
          }
        },
        series: [
          {
            data: values,
            type: 'bar'
          }
        ]
      }
      echartLeft.setOption(option)
    },
    echartsRight(values) {
      const echartRight = echarts.init(this.$refs.echartRight)
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            label: {
              color: '#fff'
            },
            data: values,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      echartRight.setOption(option)
    },
    async getFaultStatisticsAPI(params) {
      const { keyWord } = this
      const res = await getFaultStatisticsEcharts({ keyWord, ...params })
      this.getFaultStatisticsListAll({ distinctField: 'groups' })
      this.getFaultStatisticsListAll({ distinctField: 'major' })
      this.getFaultStatisticsListAll({ distinctField: 'aircraft_model' })
      this.getFaultStatisticsListAll({ distinctField: 'aircraft_num' })
      this.getFaultStatisticsListAll({ distinctField: 'faulty_parts_name' })
      const names = []
      const values = []
      const data = []
      res.data.forEach((e) => {
        names.push(e.faultyPartsName)
        values.push(e.nameCount)
        data.push({
          name: e.faultyPartsName,
          value: e.nameCount
        })
      })
      this.echartsLeft(names, values)
      this.echartsRight(data)
    },

    fetch() {
      this.getFaultStatisticsAPI()
    },

    searchClick() {
      console.log(this.statisticsDate)
      if (this.statisticsDate != null) {
        this.select.startStatisticsDate = this.statisticsDate[0]
        this.select.endStatisticsDate = this.statisticsDate[1]
      }
      this.getFaultStatisticsAPI(this.select)
    },

    handleClose() {
      this.dialogVisible = false
      this.form = {
        id: '',
        statisticsDate: '',
        warZone: '',
        army: '',
        division: '',
        groups: '',
        squadron: '',
        aircraftNum: '',
        aircraftModel: '',
        factoryNum: '',
        machineType: '',
        machineNum: '',
        machineModel: '',
        machineName: '',
        landingGear: '',
        major: '',
        faultyPartsName: '',
        faultyPartsModel: '',
        faultyPartsNum: '',
        engineModel: '',
        engineNum: '',
        engineSerialNum: '',
        faultyPartsPosition: '',
        faultyPhenomenon: '',
        faultyPlace: '',
        findOpportunity: '',
        systems: '',
        timingType: '',
        faultyPartsManufacturer: '',
        faultyPartsRenovate: '',
        installationTime: '',
        totalWorkTime: '',
        repairTime: '',
        replacementPartsModel: '',
        replacementPartsNum: '',
        replacementPartsManufacturer: '',
        replacementTotalWorkTime: '',
        replacementPartsRenovate: '',
        replacementRepairTime: '',
        faultyAbnormalCode: '',
        faultyPartsInstallDate: '',
        faultyReason: '',
        faultyNature: '',
        faultyResponsibility: '',
        faultyConsequence: '',
        handlingSuggestions: '',
        influenceFrequency: '',
        errorFlyFrequency: '',
        identificationMethod: '',
        discoveredPeople: '',
        exclusionMethod: '',
        exclusionPeople: '',
        examinePeople: '',
        examineTime: '',
        exclusionDate: '',
        exclusionWorkTime: '',
        exclusionPeopleNum: '',
        exclusionTime: '',
        isAchievement: '',
        needTestFly: '',
        repairStatus: '',
        remarks: '',
        tenantId: '',
        delFlag: '',
        version: '',
        createBy: '',
        createTime: '',
        updateBy: '',
        updateTime: ''
      }
    }
  }
}
</script>

<style lang="scss">
@import '../index.scss';
</style>