kgraph-ui/src/views/index.vue

<template>
  <div>
    <el-row>
      <el-col :span="12" class="card-box">
        <el-card>
          <el-form ref="form" :model="form" label-width="80px" style="margin-left: 20%;margin-top: 20px;" @submit.native.prevent>
            <el-form-item label="机号">
              <el-input v-model="form.searchNum" style=" width: 50%;" placeholder="请输入内容" @keyup.enter.native="search" @clear="search" clearable> </el-input>
              <el-button type="primary" icon="el-icon-search" @click="search"></el-button>
            </el-form-item>
            <span></span>
          </el-form>
          <el-row style="margin: 20px;" v-loading="loadingAircraftStatus">
            <el-col :span="4" v-for="(item) in airCraftList" :key="item.airNumber" @click.native="showDetails(item.airNumber)">
              <div shadow="hover" class="card">
                <span style="font-size: 25px;display: block; color: wheat">机号</span>
                <span class="span1" :style="{color: item.color1}">{{item.airNumber}}</span>
                <span style="color: wheat">状态：
                  <span v-if="item.cnt == 0" style="color: green">健康</span>
                  <span v-else style="color: red">故障</span>
                </span>
              </div>
            </el-col>
          </el-row>
          <pagination
            v-show="airCraftTotal>0"
            :total="airCraftTotal"
            :page.sync="form.pageNum"
            :limit.sync="form.pageSize"
            @pagination="search"
            :page-sizes="[24, 36, 48, 60]"
          />
        </el-card>
      </el-col>
      <el-col :span="12" class="card-box">
        <el-row v-loading="loadingBreakdownList">
          <BreakdownSchedule :breakdownList="breakdownList"></BreakdownSchedule>
        </el-row>

        <el-row>
          <el-card style="margin-top: 10px;">
            <!-- <el-row style="text-align: center;">
              <el-col :span="8" >
                  当月故障飞机数
              </el-col>
              <el-col :span="8">
                当月故障维修完成数
              </el-col>
              <el-col :span="8">
                可出动飞机数
              </el-col>
            </el-row> -->
            <el-row v-loading="loadingAircraftStatusCurrentMonth">
              <el-col :span="8">
                <div shadow="always" style="background-color:rgba(255,0,0,0.5); text-align: center; margin-left:12px;padding: 0px; border:1px solid #e6ebf5">
                  <span style="font-size:1.5rem">当月故障飞机数</span>
                  <br>
                  <span style="font-size:3rem">{{ aircraftStatusCurrentMonth.breakdownNumber }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div shadow="always" style="background-color:rgba(0,255,0,0.5); text-align: center; margin-left:12px;padding: 0px; border:1px solid #e6ebf5">
                  <span style="font-size:1.5rem">当月故障维修完成数</span>
                  <br>
                  <span style="font-size:3rem">{{ aircraftStatusCurrentMonth.repairedNumber }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div shadow="always" style="background-color:rgba(0,0,255,0.5); text-align: center; margin-left:12px;margin-right:12px;padding: 0px; border:1px solid #e6ebf5">
                  <span style="font-size:1.5rem">可出动飞机数</span>
                  <br>
                  <span style="font-size:3rem">{{ aircraftStatusCurrentMonth.availableNumber }}</span>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-row>
        <el-row v-loading="loadingDetails">
          <el-card style="margin-top: 10px; font-size:2rem">
            <el-row>飞机状态详细信息</el-row>
            <el-row>
              机号：{{ aircraftDetial.airNumber }}
            </el-row>
            <el-row>
              故障系统：{{ aircraftDetial.systems? aircraftDetial.systems:'无'}}
            </el-row>
            <el-row>
              维修完成度：
              <!-- <el-progress :text-inside="true" :stroke-width="22" :percentage="aircraftDetial.breakdownCount === 0 ? 100: aircraftDetial.repairRate" status="warning"></el-progress> 
              <el-progress type="circle" :percentage="100" status="success"></el-progress> -->
              {{ aircraftDetial.breakdownCount === 0 ? 100: aircraftDetial.repairRate }} %
            </el-row>
          </el-card>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  // import echarts from "echarts";
  import { getAircraftStatus, getAircraftStatusCurrentMonth, getBreakdownInfoByAirNumber, getBreakdownSchedule } from '@/api/showInfo/breakdown'
  import BreakdownSchedule from "@/views/index/breakdownSchedule"
  export default {
    components: { BreakdownSchedule },
    data() {
      return {
        form:{
          searchNum: "",
          pageNum: 1,
          pageSize: 24,
        },
        airCraftTotal:0,
        airCraftList:[],
        aircraftStatusCurrentMonth: {
          breakdownNumber:"-",
          repairedNumber:"-",
          availableNumber:"-",
        },
        aircraftDetial: {
          airNumber: "-",
          systems: "-",
          repairRate: "-",
          breakdownCount: "-",
        },
        breakdownList: [],
        queryBreakdownParams: {
          pageNum: 1,
          pageSize: 10,
        },
        breakdownTotal:0,
        loadingAircraftStatus: false,
        loadingAircraftStatusCurrentMonth: false,
        loadingDetails: false,
        loadingBreakdownList: false,
      }
    },
    created() {
      this.search()
      this.getAircraftStatusCurrentMonth()
      this.getBreakdownSchedule()
    },
    methods: {
      search(){
        this.loadingAircraftStatus = true
        getAircraftStatus(this.form).then(resp => {
          this.airCraftList = resp.rows;
          this.airCraftTotal = resp.total;
          this.loadingAircraftStatus = false;
        })
      },
      getAircraftStatusCurrentMonth(){
        this.loadingAircraftStatusCurrentMonth = true;
        getAircraftStatusCurrentMonth().then(resp => {
          this.aircraftStatusCurrentMonth = {
            breakdownNumber: resp.data.breakdownNumber,
            repairedNumber: resp.data.breakdownNumber - resp.data.repairingNumber,
            availableNumber: resp.data.availableNumber,
          }
          this.loadingAircraftStatusCurrentMonth = false
        })
      },
      showDetails(airNumber){
        this.loadingDetails = true
        getBreakdownInfoByAirNumber(airNumber).then(resp => {
          this.aircraftDetial = {
            airNumber: resp.data.airNumber,
            systems: resp.data.systems,
            repairRate: Math.round(resp.data.repairingCount * 100 / resp.data.breakdownCount),
            breakdownCount: resp.data.breakdownCount
          }
          this.loadingDetails = false
        })
      },
      getBreakdownSchedule(){
        this.loadingBreakdownList = true;
        getBreakdownSchedule(this.queryBreakdownParams).then(resp => {
          let rows = resp.rows
          for(let row of rows){
            row.countDown = 30-Math.round((new Date()- new Date(row.discoveryDate))/24/60/60/1000)
          }
          this.breakdownList = resp.rows;
          this.breakdownTotal = resp.total;
          this.loadingBreakdownList = false;
        })
      }
    }
  }
</script>

<style scoped>
  @font-face {
    font-family: "FZZhiYi-M12S";
    src: url("../assets/knowledge/ziti.ttf");
    font-weight: normal;
    font-style: normal;
  }

  #chart {
    width: 1200px;
    height: 600px;
    margin-left: 20px;
  }

  .span1 {
    display: block;
    font-family: FZZhiYi-M12S;
    font-size: 45px;
  }

  h2 {
    margin: 20px 0;
  }

  .card {
    text-align: center;
    margin: 20px;
    background-image: url("../assets/knowledge/panel.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  /* .el-table tr {
    background-color: transparent
  } */

  .el-card__body {
    padding: 0px;
  }

</style>