LQBZ_web/src/views/home/index.vue

<template>
  <div class="view-home">
    <el-row>
      <el-col :span="24" style="margin-bottom: 15px">
        <Card title="飞机状态" class="air">
          <template slot="content">
            <div class="airStatus">
              <div class="firstRow">
                <div v-for="item of 10" :key="item" class="cell">
                  <el-image style="width: 80px; height: 80px" :src="imgUrl"></el-image>
                  <div class="info">
                    <p>轰0101</p>
                    <span class="success-state">健康 </span>
                  </div>
                </div>
              </div>
              <div class="secondRow">
                <div v-for="item of 10" :key="item" class="cell">
                  <el-image style="width: 80px; height: 80px" :src="imgUrl"></el-image>
                  <div class="info">
                    <p>轰0101</p>
                    <span class="warning-state">故障 </span>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </Card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" style="margin-bottom: 15px">
        <Card title="维修状态">
          <template slot="content">
            <LTable ref="maintainTable" :defaultFetch="true" :columns="maintainColumns" :dataSource="maintainTableData" :options="maintainOptions" :fetch="maintainFetchTableData" class="tabl-box" />
          </template>
        </Card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12" style="margin-bottom: 15px">
        <Card title="历年任务">
          <template slot="content">
            <LTable ref="table" :defaultFetch="true" :columns="columns" :dataSource="tableData" :options="options" :fetch="fetchTableData" class="tabl-box" />
          </template>
        </Card>
      </el-col>
      <el-col :span="12" style="margin-bottom: 15px">
        <Card title="指标分析">
          <template slot="content">
            <div class="baseBar-box" ref="echartTop"></div>
          </template>
        </Card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <Card title="经济指标分析-项">
          <template slot="content">
            <el-select v-model="model" style="margin: 10px" placeholder="请选择" @change="handleChange(1)">
              <el-option v-for="(item, index) in selectOptions" :key="index" :label="item.avmatCatalogName" :value="item.avmatCatalogCode"> </el-option>
            </el-select>
            <div class="baseBar-box" ref="echartBottomLeft"></div>
          </template>
        </Card>
      </el-col>
      <el-col :span="8">
        <Card title="经济指标分析-件">
          <template slot="content">
            <el-select v-model="model2" style="margin: 10px" placeholder="请选择" @change="handleChange(2)">
              <el-option v-for="(item, index) in selectOptions" :key="index" :label="item.avmatCatalogName" :value="item.avmatCatalogCode"> </el-option>
            </el-select>
            <div class="baseBar-box" ref="echartBottomCenter"></div>
          </template>
        </Card>
      </el-col>
      <el-col :span="8">
        <Card title="经济指标分析-金额">
          <template slot="content">
            <el-select v-model="model3" style="margin: 10px" placeholder="请选择" @change="handleChange(3)">
              <el-option v-for="(item, index) in selectOptions" :key="index" :label="item.avmatCatalogName" :value="item.avmatCatalogCode"> </el-option>
            </el-select>
            <div class="baseBar-box" ref="echartBottomRight"></div>
          </template>
        </Card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getHomeLastMission, getAviationList, getHomeAviationProject, getHomeAviationAmount, getHomeAviationMoney } from '@/api/home'
import { getFaultStatisticsListAll } from '@/api/als/faultStatistics'

import * as echarts from 'echarts'
import { setTopOptions, bottomLeftOptions, bottomCenterOptions, bottomRightOptions } from './index'
import { columns, options, maintainColumns, maintainOptions } from './table.js'
export default {
  name: 'home',

  data() {
    // 这里存放数据
    return {
      tableData: [],
      maintainTableData: [],
      options,
      columns: columns(this),
      maintainOptions,
      maintainColumns: maintainColumns(this),
      selectOptions: [{ avmatCatalogCode: '全部', avmatCatalogName: '全部' }],

      model: '全部',
      model2: '全部',
      model3: '全部',

      setTopOptions,
      bottomLeftOptions,
      bottomCenterOptions,
      bottomRightOptions,
      imgUrl: require('@/assets/images/飞机.png')
    }
  },
  mounted() {
    this.getTreeList()
    this.initChart()
  },
  methods: {
    initChart() {
      this.fetchTermChart()
      this.fetchPieceChart()
      this.fetchSumChart()
      // this.extension(echartTop)
    },
    async fetchTableData() {
      const { data } = await getHomeLastMission()
      this.tableData = data
      this.fetchIndexAnalysis()
    },
    async maintainFetchTableData() {
      const { data } = await getFaultStatisticsListAll()
      this.maintainTableData = data
    },
    handleChange(item) {
      switch (item) {
        case 1:
          this.fetchTermChart()
          break
        case 2:
          this.fetchPieceChart()
          break
        case 3:
          this.fetchSumChart()
          break
      }
    },
    extension(chart) {
      let map = new Map([
        ['任务一', '任务名称：任务一<br/>任务时间：2023-06-02至2023-06-20'],
        ['任务二', '任务名称：任务二<br/>任务时间：2023-06-02至2023-06-20'],
        ['任务三', '任务名称：任务三<br/>任务时间：2023-06-02至2023-06-20'],
        ['任务四', '任务名称：任务四<br/>任务时间：2023-06-02至2023-06-20'],
        ['任务五', '任务名称：任务五<br/>任务时间：2023-06-02至2023-06-20']
      ])

      // 注意这里，是以X轴显示内容过长为例，如果是y轴的话，需要把params.componentType == 'xAxis'改为yAxis
      // 判断是否创建过div框,如果创建过就不再创建了
      // 该div用来盛放文本显示内容的，方便对其悬浮位置进行处理
      var elementDiv = document.getElementById('extension')
      if (!elementDiv) {
        var div = document.createElement('div')
        div.setAttribute('id', 'extension')
        div.style.display = 'block'
        document.querySelector('html').appendChild(div)
      }
      chart.on('mouseover', function (params) {
        if (params.componentType == 'xAxis') {
          var elementDiv = document.querySelector('#extension')
          //设置悬浮文本的位置以及样式
          var elementStyle = 'position: absolute;z-index: 99999;color: #fff;font-size: 12px;padding: 5px;display: inline;border-radius: 4px;background-color: #303133;box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px'
          elementDiv.style.cssText = elementStyle
          elementDiv.innerHTML = map.get(params.value)
          document.querySelector('html').onmousemove = function (event) {
            var elementDiv = document.querySelector('#extension')
            var xx = event.pageX - 10
            var yy = event.pageY + 15
            elementDiv.style.top = yy + 'px'
            elementDiv.style.left = xx + 'px'
          }
        }
      })
      chart.on('mouseout', function (params) {
        //注意这里，我是以X轴显示内容过长为例，如果是y轴的话，需要改为yAxis
        if (params.componentType == 'xAxis') {
          var elementDiv = document.querySelector('#extension')

          elementDiv.style.cssText = 'display:none'
        }
      })
    },
    async getTreeList() {
      const { data } = await getAviationList()
      this.selectOptions = this.selectOptions.concat(data)
    },
    // 指标分析
    fetchIndexAnalysis() {
      const echartTop = echarts.init(this.$refs.echartTop)
      let obj = {
        favorableList: [],
        undamagedList: [],
        onMissionAviationMaterialsList: [],
        missionAviationMaterialsList: []
      }
      let xAxisData = []
      this.tableData.map((item) => {
        xAxisData.push(item.taskName)
        obj.favorableList.push(item.favorable)
        obj.undamagedList.push(item.undamaged)
        obj.onMissionAviationMaterialsList.push(item.onMissionAviationMaterials)
        obj.missionAviationMaterialsList.push(item.missionAviationMaterials)
      })
      this.setTopOptions.xAxis[0].data = xAxisData
      this.setTopOptions.series[0].data = obj.favorableList
      this.setTopOptions.series[1].data = obj.undamagedList
      this.setTopOptions.series[2].data = obj.onMissionAviationMaterialsList
      this.setTopOptions.series[3].data = obj.missionAviationMaterialsList
      echartTop.setOption(this.setTopOptions)
    },
    // 经济指标分析-项
    async fetchTermChart() {
      const echartBottomLeft = echarts.init(this.$refs.echartBottomLeft)
      const { data } = await getHomeAviationProject({ avmatCatalogCode: this.model == '全部' ? '' : this.model, taskId: '' })
      let xAxisData = []
      let missionAviationMaterialsList = []
      let onMissionAviationMaterialsList = []
      data.map((item) => {
        xAxisData.push(item.taskName)
        missionAviationMaterialsList.push(item.missionAviationMaterials)
        onMissionAviationMaterialsList.push(item.onMissionAviationMaterials)
      })
      this.bottomLeftOptions.xAxis[0].data = xAxisData
      this.bottomLeftOptions.series[0].data = onMissionAviationMaterialsList
      this.bottomLeftOptions.series[1].data = missionAviationMaterialsList
      echartBottomLeft.setOption(this.bottomLeftOptions)
    },
    // 经济指标分析-件
    async fetchPieceChart() {
      const echartBottomCenter = echarts.init(this.$refs.echartBottomCenter)
      const { data } = await getHomeAviationAmount({ avmatCatalogCode: this.model2 == '全部' ? '' : this.model2, taskId: '' })
      let xAxisData = []
      let missionAviationMaterialsList = []
      let onMissionAviationMaterialsList = []
      data.map((item) => {
        xAxisData.push(item.taskName)
        missionAviationMaterialsList.push(item.missionAviationMaterials)
        onMissionAviationMaterialsList.push(item.onMissionAviationMaterials)
      })
      this.bottomCenterOptions.xAxis[0].data = xAxisData
      this.bottomCenterOptions.series[0].data = onMissionAviationMaterialsList
      this.bottomCenterOptions.series[1].data = missionAviationMaterialsList
      echartBottomCenter.setOption(this.bottomCenterOptions)
    },
    // 经济指标分析-金额
    async fetchSumChart() {
      const echartBottomRight = echarts.init(this.$refs.echartBottomRight)
      const { data } = await getHomeAviationMoney({ avmatCatalogCode: this.model3 == '全部' ? '' : this.model3, taskId: '' })
      let xAxisData = []
      let missionAviationMaterialsList = []
      let onMissionAviationMaterialsList = []
      data.map((item) => {
        xAxisData.push(item.taskName)
        missionAviationMaterialsList.push(item.missionAviationMaterials)
        onMissionAviationMaterialsList.push(item.onMissionAviationMaterials)
      })
      this.bottomRightOptions.xAxis[0].data = xAxisData
      this.bottomRightOptions.series[0].data = onMissionAviationMaterialsList
      this.bottomRightOptions.series[1].data = missionAviationMaterialsList
      echartBottomRight.setOption(this.bottomRightOptions)
    }
  }
}
</script>

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