无人机管理后台前端(已迁走)
罗广辉
2025-10-11 02409bfbe15f22fc3b5dccadabfd860a660a49d9
src/views/wel/index.vue
@@ -1,28 +1,99 @@
<template>
  <div>
  </div>
  <wel-container>
    <div class="workbench" v-if="display">
      <div class="workleft">
        <!-- 设备统计  -->
        <statistics></statistics>
        <!-- 综合统计分析 -->
        <div class="comprehensiveCon">
          <div class="comprehensive">
            <div class="center">
              <div class="centerLeft">
                <!-- 工单统计 -->
                <proportionStatic></proportionStatic>
                <!-- 飞行统计 -->
                <flightStatistics></flightStatistics>
              </div>
              <div class="centerRight">
                <!-- 机巢工单数量排名(件) -->
                <flyratio></flyratio>
                <!-- 任务成果 -->
                <taskOutcome></taskOutcome>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="workright">
        <Bocklog></Bocklog>
        <CalenBox></CalenBox>
      </div>
    </div>
  </wel-container>
</template>
<script>
import { mapGetters } from 'vuex';
<script setup>
import taskOutcome from './components/taskOutcome.vue'
import flightStatistics from './components/flightStatistics.vue'
import proportionStatic from './components/proportionStatic.vue'
import flyratio from './components/flyratio.vue'
import Bocklog from './components/backlog.vue'
import CalenBox from './components/calendarBox.vue'
import * as echarts from 'echarts'
import useEchartsResize from '@/hooks/useEchartsResize'
import { mapGetters } from 'vuex'
import { getJobEventByStatus, getJobEventTotal, getFly, getFlyTime } from '@/api/home/index'
import overviewImg1 from '@/assets/images/workbench/tc1.png'
export default {
  name: 'wel',
  data() {
    return {
      activeNames: ['1', '2', '3', '5'],
      logActiveNames: ['37'],
    };
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  methods: {
    handleChange(val) {
      window.console.log(val);
    },
  },
};
import fy1 from '@/assets/images/workbench/fy1.png'
import statistics from './components/statistics.vue'
import { ElMessage } from 'element-plus'
let checked = ref('CURRENT_YEAR')
const display = ref(false)
let timeListStr = ['本周', '本月', '本年']
let timeListEnum = ['CURRENT_WEEK', 'CURRENT_MONTH', 'CURRENT_YEAR']
const params = ref({
  date_enum: 'CURRENT_YEAR',
  device_sn: '',
  end_date: undefined,
  start_date: undefined,
})
const dateSelect = ref('CURRENT_YEAR')
let timeClick = (item, index) => {
  checked.value = item
  params.value.date_enum = item
  dateSelect.value = item
}
const refresh = () => {
  params.value.date_enum = 'CURRENT_YEAR'
  checked.value = 'CURRENT_YEAR'
  dateSelect.value = 'CURRENT_YEAR'
}
// 跳转
const jumpshebei = () => {
  ElMessage.warning('加急开发中...')
}
const eventTotal = ref(0)
const data = ref([])
onMounted(() => {
  getJobEventTotal().then(res => {
    eventTotal.value = res?.data?.data || 0
  })
  setTimeout(() => {
    display.value = true
  },100)
})
</script>
<style>
@@ -30,3 +101,117 @@
  font-size: 14px;
}
</style>
<style scoped lang="scss">
.workbench {
  height: 100%;
  flex: 1;
  // padding: 0px 20px 0 10px;
  display: flex;
  justify-content: space-between;
}
.workleft {
  width: 68%;
  margin-right: 10px;
  height: 100%;
  .comprehensiveCon {
    // background: #ffffff !important;
    height: pxToVh(776);
    border-radius: 8px 8px 8px 8px;
    .comprehensive {
      // padding: 14px 14px 0 21px;
      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .name {
          display: flex;
          align-items: center;
          font-weight: bold;
          font-size: 16px;
          color: #363636;
          font-family: 'Source Han Sans CN';
          span {
            margin-right: 4px;
          }
          img {
            cursor: pointer;
          }
        }
        .arrow {
          cursor: pointer;
        }
        .time-card {
          text-align: center;
          // height: 30px;
          height: pxToVh(30);
          background: #ffffff;
          border-radius: 4px 0px 0px 4px;
          border: 1px solid #e5e5e5;
          font-weight: 400;
          font-size: 14px;
          color: #7c8091;
          display: flex;
          width: 282px;
          margin-left: 15px;
          .card-item {
            width: 94px;
            height: 100%;
            line-height: 28px;
            cursor: pointer;
            font-family: 'Source Han Sans CN';
            font-weight: 400;
            font-size: 14px;
            color: #7c8091;
          }
          .card-item:first-child {
            border-right: 1px solid #e5e5e5;
          }
          .card-item:nth-child(2) {
            border-right: 1px solid #e5e5e5;
          }
          .card-item.active {
            color: #1441ff;
            border: 1px solid #1c5cff;
          }
        }
      }
      // 工、单
      .center {
        display: flex;
        .centerLeft {
          width: 50%;
        }
        .centerRight {
          width: 50%;
        }
      }
    }
  }
}
.workright {
  width: 0;
  flex: 1;
  height: 100%;
  // display: flex;
  // flex-direction: column;
}
</style>