LQBZ_web/src/views/statisticalAnalysis/statisticalAnalysisSailingMaterialSpareParts/index.vue

<template>
  <div class="view-statisticalAnalysisSailingMaterialSpareParts">
    <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" @handleRowClick="handleRowClick" class="tabl-box" />
          </template>
        </Card>
      </el-col>
      <el-col :span="12" style="margin-bottom: 15px">
        <Card title="任务基本信息">
          <template slot="content">
            <el-descriptions :column="2" class="desc-box">
              <el-descriptions-item label="任务名称">{{ row.taskName }}</el-descriptions-item>
              <el-descriptions-item label="任务时间">{{ row.taskTime }}</el-descriptions-item>
              <el-descriptions-item label="任务时长">{{ row.taskDuration }}</el-descriptions-item>
              <el-descriptions-item label="飞行环境">{{ row.env }}</el-descriptions-item>
              <el-descriptions-item label="任务类型">{{ row.taskType }}</el-descriptions-item>
              <el-descriptions-item label="任务飞机数量">{{ row.taskAircraftNum }}</el-descriptions-item>
              <el-descriptions-item label="任务地点" span="2">{{ row.taskSite }}</el-descriptions-item>
              <el-descriptions-item label="任务描述" span="2">{{ row.taskDescribe }}</el-descriptions-item>
            </el-descriptions>
          </template>
        </Card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <Card :title="`${model}装备完好率`">
          <template slot="content">
            <div class="baseBar-box" ref="echartElBarLeft"></div>
          </template>
        </Card>
      </el-col>
      <el-col :span="12">
        <Card :title="`${model}航材保障良好率`">
          <template slot="content">
            <div class="baseBar-box" ref="echartElBarRight"></div>
          </template>
        </Card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getLastMission, getMilitaryIndicatorByTaskId } from '@/api/statisticalAnalysis/statisticalAnalysisSailingMaterialSpareParts'
import * as echarts from 'echarts'
import { leftOption, rightOption } from './index'
import { columns, options } from './table.js'
export default {
  name: 'statisticalAnalysisSailingMaterialSpareParts',
  components: {},
  data() {
    // 这里存放数据
    return {
      tableData: [],
      options,
      columns: columns(this),
      model: '',
      row: {},
      taskId: '',
      leftOption,
      rightOption
    }
  },
  mounted() {},
  methods: {
    async initChart() {
      const echartElBarLeft = echarts.init(this.$refs.echartElBarLeft)
      const echartElBarRight = echarts.init(this.$refs.echartElBarRight)
      const { data } = await getMilitaryIndicatorByTaskId({ taskId: this.taskId })
      let xAxisData = []
      let guaranteedRatioList = []
      let aircraftIntactRatioList = []
      data.map((item) => {
        xAxisData.push(item.aircaftCatalogCode)
        aircraftIntactRatioList.push(item.aircraftIntactRatio)
        guaranteedRatioList.push(item.guaranteedRatio)
      })
      this.leftOption.xAxis[0].data = xAxisData
      this.leftOption.series[0].data = aircraftIntactRatioList
      this.rightOption.xAxis[0].data = xAxisData
      this.rightOption.series[0].data = guaranteedRatioList
      echartElBarLeft.setOption(this.leftOption)
      echartElBarRight.setOption(this.rightOption)
    },
    async fetchTableData() {
      const { data } = await getLastMission()
      this.tableData = data
      this.row = this.tableData[0]
      this.handleRowClick(this.tableData[0])
    },
    handleRowClick(row) {
      this.row = row
      this.taskId = row.taskId
      this.model = row.taskName
      this.initChart()
    }
  }
}
</script>

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