| | |
| | | <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> |
| | |
| | | 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> |