<template>
|
<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 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'
|
|
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>
|
.el-font-size {
|
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>
|
