Commit 855b3b0c authored by arvin's avatar arvin

站位计划维护

parent d7397b32
<template>
<div>
gantt
</div>
</template>
<script>
export default {
name: 'TfMomWebGantt',
data() {
return {
}
},
mounted() {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
</style>
<template>
<div>
hello world
<div class="show-page-com stationPlan-maintenance-page">
<searchBar @showStation="showStation" @search="search" />
<station v-show="headerShow" :sorties-id="sortiesId" />
</div>
</template>
<script>
import searchBar from './searchBar.vue'
import station from './station.vue'
export default {
name: 'TfMomWebIndex',
name: 'StationPlanMaintenance',
components: { searchBar, station },
data() {
return {
sortiesId: '',
form: {},
headerShow: true
}
},
......@@ -19,11 +25,172 @@ export default {
},
methods: {
search(form) {
this.form = form
this.sortiesId = form.sorties
},
showStation(flag) {
this.headerShow = flag
}
}
}
</script>
<style lang="scss" scoped>
<style lang="scss">
.stationPlan-maintenance-page{
margin: 4px;
margin-top: 0px;
padding: 8px;
height: calc(100% - 20px);
width: calc(100% - 24px);
background-color: #fff;
.color{
&.Not{
background-color: #cccccc;
}
&.Yes{
background-color: #59c4e6;
}
&.Delivery{
background-color: #e87c25;
}
&.Run{
background-color: #fcce10;
}
&.Finish{
background-color: #97b552;
}
&.Paused{
background-color: #8a7ca8;
}
&.Reserved{
background-color: #c1232b;
}
&.Issued{
background-color: #bd0b9f;
}
&.TF_ZF{
background-color: #666;
}
}
.search-bar{
height: 40px;
.legnd {
display: flex;
> div {
align-items: center;
margin-left: 8px;
display: flex;
cursor: pointer;
flex-direction: column;
> div:first-child {
line-height: 20px;
i {
display: inline-block;
width: 11px;
height: 11px;
margin-right: 6px;
&:hover {
opacity: 0.7;
}
}
span {
display: inline-block;
font-size: 10px;
line-height: 20px;
}
}
div:last-child {
font-size: 10px;
width: 100%;
line-height: 20px;
text-align: center;
}
}
}
}
.station-bar{
.load{
text-align: center;
line-height: 50px;
}
>.top{
display: flex;
margin-bottom: 15px;
> div {
// height: 160px;
flex: 1;
position: relative;
border: 1px solid #ccc;
border-radius: 5px;
max-width: 15.6%;
box-shadow: 1px 1px 5px 5px #eaeaea;
box-sizing: border-box;
&:not(:last-child) {
margin-right: 16px;
}
cursor: pointer;
&:hover {
transform: scale(1.05);
transition: 0.2s linear all;
box-shadow: 1px 1px 5px 5px #d8efff;
> div:first-child {
background-color: green;
}
}
&.cur {
box-shadow: 1px 1px 5px 5px #d8efff;
border: 1px solid #bffaff;
> div:first-child {
background-color: green;
}
}
> div:first-child {
position: absolute;
right: 0;
background-color: #ccc;
padding: 6px 10px;
color: #fff;
max-width: 50%;
min-width: 54px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
font-weight: bold;
font-size: 14px;
}
> div:nth-child(2) {
margin-top: 30px;
height: 100px;
background: url("/icons/stand.png") no-repeat center center;
}
> div:last-child {
height: 26px;
line-height: 26px;
text-align: center;
font-size: 12px;
box-shadow: 1px -4px 5px -2px #eaeaea;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
&.state0 {
background-color: #92d050;
}
&.state1 {
background-color: #f2f79e;
}
&.state2 {
background-color: #f9df73;
}
&.state3 {
background-color: #f4b2a6;
}
}
}
}
}
}
</style>
<template>
<el-form :inline="true" :model="form" class="demo-form-inline search-bar">
<el-form-item label="">
<span style="cursor:pointer;" @click="headerOpen">
<i v-if="headerShow" class="el-icon-caret-top" title="收缩站位" />
<i v-else class="el-icon-caret-bottom" title="展开" />
</span>
</el-form-item>
<el-form-item label="机型:">
<el-select v-model="form.model" :style="{'width':'90px'}" size="mini" placeholder="机型">
<el-option
v-for="item in modelData"
:key="item.id"
:label="item.defName"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="架次:">
<el-select v-model="form.sorties" :style="{'width':'80px'}" size="mini" placeholder="架次">
<el-option
v-for="item in sortiesData"
:key="item.id"
:label="item.defName"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="筛选:">
<el-input v-model="form.AOName" size="mini" :style="{'width':'140px'}" placeholder="请输入AO名称" />
</el-form-item>
<el-form-item label="时间:">
<el-date-picker
v-model="form.searchTime"
type="daterange"
:style="{'width':'170px'}"
size="mini"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
/>
</el-form-item>
<el-form-item>
<el-button type="" size="mini" @click="goto">站位计划调整</el-button>
</el-form-item>
<el-form-item
style="width: calc(100% - 850px);
text-align: right;"
>
<div class="legnd">
<div
v-for="item in stateOptions"
:key="item.id"
@click="colorGetGantt(item.value)"
>
<div>
<i class="color" :class="item.value" />
<span :class="{ curtatus: item.value === curColorStatus}">{{
item.label
}}</span>
</div>
<div>{{ item.count || 0 }}</div>
</div>
</div>
</el-form-item>
</el-form>
</template>
<script>
export default {
name: 'TfMomWebSearchBar',
data() {
return {
headerShow: true,
modelData: [],
sortiesData: [],
stateOptions: [],
curColorStatus: '',
timeoutId: null,
form: {}
}
},
watch: {
'form.model': {
immediate: true,
handler(val) {
if (!val) {
return
}
this.$set(this.form, 'sorties', '')
this.getSortiesList()
}
},
'form.sorties': {
immediate: true,
handler() {
this.search()
}
},
'form.AOName': {
immediate: true,
handler(val) {
this.search()
}
},
'form.searchTime': {
immediate: true,
handler() {
this.search()
}
}
},
created() {
this.getModelData()
this.getStateOptions()
},
mounted() {
},
methods: {
getStateOptions() {
this.$utils.getDicListByCode('PlanState').then(res => {
this.stateOptions = res
})
},
getSortiesList() {
this.sortiesData = []
const params = { 'searchItems': { 'items': [{ 'fieldName': 'id', 'operator': 'NEQ', 'value': 0 }] }, 'sortItem': [{ 'fieldName': 'modifyTime', 'sortOrder': 'asc' }] }
this.$api.searchApi('AircraftSorties', params).then(res => {
if (res.items && res.items.content) {
this.sortiesData = res.items.content
this.$set(this.form, 'sorties', this.sortiesData[0].id)
}
})
},
getModelData() {
this.modelData = []
const params = { 'searchItems': { 'items': [{ 'fieldName': 'id', 'operator': 'NEQ', 'value': 0 }] }, 'sortItem': [{ 'fieldName': 'modifyTime', 'sortOrder': 'asc' }] }
this.$api.searchApi('AircraftType', params).then(res => {
if (res.items && res.items.content) {
this.modelData = res.items.content
this.$set(this.form, 'model', this.modelData[0].id)
}
})
},
colorGetGantt(state) {
if (this.curColorStatus === state) {
this.curColorStatus = ''
} else {
this.curColorStatus = state
}
this.form.state = this.curColorStatus
this.search()
},
headerOpen() {
this.headerShow = !this.headerShow
this.$emit('showStation', this.headerShow)
},
search() {
this.timeoutId = setTimeout(() => {
this.$emit('search', this.form)
}, 500)
},
goto() {
}
}
}
</script>
<style lang="scss" scoped>
</style>
<template>
<div class="station-bar">
<div v-if="postionList.length" class="top">
<div
v-for="item in postionList"
:key="item.id"
:class="{ cur: item.id === platformId }"
@click="triggerGetGantt(item.id)"
>
<div :title="item.serialNumber">
{{ item.serialNumber }}
</div>
<div />
<div :class="item | colorFilter">
{{
"计划总数:" +
item.carryCount +
",完成数:" +
item.completeCount
}}
完成率:
{{ item | proportionFilter }}
</div>
</div>
</div>
<div v-else class="load">
<div v-show="standLoading" class="load">
<i class="el-icon-loading" />
<span>数据加载中···</span>
</div>
<div v-show="!standLoading">
<span>暂无数据</span>
</div>
</div>
</div>
</template>
<script>
import { post } from '@/utils/http'
export default {
name: 'Station',
filters: {
proportionFilter: function(row) {
var num = 0
if (row.completeCount && row.carryCount) {
return (
Math.round((row.completeCount / row.carryCount) * 1000) / 10 + '%'
)
}
return num + '%'
},
colorFilter: function(row) {
var num = 3
if (row.completeCount && row.carryCount) {
var val = row.completeCount / row.carryCount
if (val < 0.5) {
num = 3
} else if (val < 0.8) {
num = 2
} else if (val < 1) {
num = 1
} else {
num = 0
}
}
return 'state' + num
}
},
props: {
sortiesId: {
type: [Number, String],
default: () => ''
}
},
data() {
return {
postionList: [],
platformId: '',
standLoading: false
}
},
watch: {
sortiesId: {
immediate: true,
handler(val) {
if (!val) {
return
}
this.getStation()
}
}
},
mounted() {
},
methods: {
getStation() {
const params = {
'searchItems': { 'items': [{ 'fieldName': 'aircraftSortiesId', 'operator': 'EQ', 'value': this.sortiesId }] },
'openProps': [{ name: 'aircraftSorties' }],
'sortItem': [{ 'fieldName': 'serialNumber', 'sortOrder': 'asc' }]
}
this.standLoading = true
post('ExtPosition/positionSearch', params).then(res => {
if (res.items) {
this.postionList = res.items
} else {
this.postionList = []
}
this.standLoading = false
}).catch(() => {
this.postionList = []
this.standLoading = false
})
},
triggerGetGantt(id) {
this.platformId = id
}
}
}
</script>
<style lang="scss" scoped>
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment