Skip to content

Z
zhongtong-avi-web
Commit f1191a7e authored by 李志鸣's avatar 李志鸣
Browse files
Options

fea(详细信息弹窗): 增加数据判空

parent fbe44e96
Hide whitespace changes
Inline Side-by-side
Showing with 288 additions and 118 deletions
src/views/Monitor/components/SealedAnticorrosion.vue
View file @ f1191a7e
...@@ -3,116 +3,221 @@ ...@@ -3,116 +3,221 @@
<div class="page-pack"> <div class="page-pack">
<div class="container-pack"> <div class="container-pack">
<!-- 第一行 --> <!-- 第一行 -->
<div class="sealed-row-1-1"> <div
<p>CDA213</p> class="sealed-row-1-1"
</div> v-if="sealedAnticorrosion.hasOwnProperty('HDG1-57') && sealedAnticorrosion['HDG1-57'].state !== 'FREE'"
<div class="sealed-row-1-2"> :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-57'].busType, 'HDG1-57')">
<p>CDA213</p> <p>{{sealedAnticorrosion['HDG1-57'].busNo}}</p>
</div> </div>
<div class="sealed-row-1-3"> <div
<p>CDA213</p> class="sealed-row-1-2"
</div> v-if="sealedAnticorrosion.hasOwnProperty('HDG1-67') && sealedAnticorrosion['HDG1-67'].state !== 'FREE'"
<div class="sealed-row-1-4"> :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-67'].busType, 'HDG1-67')">
<p>CDA213</p> <p>{{sealedAnticorrosion['HDG1-67'].busNo}}</p>
</div> </div>
<div class="sealed-row-1-5"> <div
<p>CDA213</p> class="sealed-row-1-3"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-68') && sealedAnticorrosion['HDG1-68'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-68'].busType, 'HDG1-68')">
<p>{{sealedAnticorrosion['HDG1-68'].busNo}}</p>
</div>
<div
class="sealed-row-1-4"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-69') && sealedAnticorrosion['HDG1-69'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-69'].busType, 'HDG1-69')">
<p>{{sealedAnticorrosion['HDG1-69'].busNo}}</p>
</div>
<div
class="sealed-row-1-5"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-70') && sealedAnticorrosion['HDG1-70'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-70'].busType, 'HDG1-70')">
<p>{{sealedAnticorrosion['HDG1-70'].busNo}}</p>
</div> </div>
<!-- 第二行 --> <!-- 第二行 -->
<div class="sealed-row-2-1"> <div
<p>CDA213</p> class="sealed-row-2-1"
</div> v-if="sealedAnticorrosion.hasOwnProperty('HDG1-58') && sealedAnticorrosion['HDG1-58'].state !== 'FREE'"
<div class="sealed-row-2-2"> :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-58'].busType, 'HDG1-58')">
<p>CDA213</p> <p>{{sealedAnticorrosion['HDG1-58'].busNo}}</p>
</div> </div>
<div class="sealed-row-2-3"> <div
<p>CDA213</p> class="sealed-row-2-2"
</div> v-if="sealedAnticorrosion.hasOwnProperty('HDG1-71') && sealedAnticorrosion['HDG1-71'].state !== 'FREE'"
<div class="sealed-row-2-4"> :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-71'].busType, 'HDG1-71')">
<p>CDA213</p> <p>{{sealedAnticorrosion['HDG1-71'].busNo}}</p>
</div> </div>
<div class="sealed-row-2-5"> <div
<p>CDA213</p> class="sealed-row-2-3"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-72') && sealedAnticorrosion['HDG1-72'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-72'].busType, 'HDG1-72')">
<p>{{sealedAnticorrosion['HDG1-72'].busNo}}</p>
</div>
<div
class="sealed-row-2-4"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-73') && sealedAnticorrosion['HDG1-73'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-73'].busType, 'HDG1-73')">
<p>{{sealedAnticorrosion['HDG1-73'].busNo}}</p>
</div>
<div
class="sealed-row-2-5"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-74') && sealedAnticorrosion['HDG1-74'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-74'].busType, 'HDG1-74')">
<p>{{sealedAnticorrosion['HDG1-74'].busNo}}</p>
</div> </div>
<!-- 第三行 --> <!-- 第三行 -->
<div class="sealed-row-3-1"> <div
<p>CDA213</p> class="sealed-row-3-1"
</div> v-if="sealedAnticorrosion.hasOwnProperty('HDG1-75') && sealedAnticorrosion['HDG1-75'].state !== 'FREE'"
<div class="sealed-row-3-2"> :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-75'].busType, 'HDG1-75')">
<p>CDA213</p> <p>{{sealedAnticorrosion['HDG1-75'].busNo}}</p>
</div> </div>
<div class="sealed-row-3-3"> <div
<p>CDA213</p> class="sealed-row-3-2"
</div> v-if="sealedAnticorrosion.hasOwnProperty('HDG1-76') && sealedAnticorrosion['HDG1-76'].state !== 'FREE'"
<div class="sealed-row-3-4"> :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-76'].busType, 'HDG1-76')">
<p>CDA213</p> <p>{{sealedAnticorrosion['HDG1-76'].busNo}}</p>
</div> </div>
<div class="sealed-row-3-5"> <div
<p>CDA213</p> class="sealed-row-3-3"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-77') && sealedAnticorrosion['HDG1-77'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-77'].busType, 'HDG1-77')">
<p>{{sealedAnticorrosion['HDG1-77'].busNo}}</p>
</div>
<div
class="sealed-row-3-4"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-78') && sealedAnticorrosion['HDG1-78'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-78'].busType, 'HDG1-78')">
<p>{{sealedAnticorrosion['HDG1-78'].busNo}}</p>
</div>
<div
class="sealed-row-3-5"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-79') && sealedAnticorrosion['HDG1-79'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-79'].busType, 'HDG1-79')">
<p>{{sealedAnticorrosion['HDG1-79'].busNo}}</p>
</div> </div>
<!-- 第四行 --> <!-- 第四行 -->
<div class="sealed-row-4-1"> <div
<p>CDA213</p> class="sealed-row-4-1"
</div> v-if="sealedAnticorrosion.hasOwnProperty('HDG1-80') && sealedAnticorrosion['HDG1-80'].state !== 'FREE'"
<div class="sealed-row-4-2"> :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-80'].busType, 'HDG1-80')">
<p>CDA213</p> <p>{{sealedAnticorrosion['HDG1-80'].busNo}}</p>
</div> </div>
<div class="sealed-row-4-3"> <div
<p>CDA213</p> class="sealed-row-4-2"
</div> v-if="sealedAnticorrosion.hasOwnProperty('HDG1-81') && sealedAnticorrosion['HDG1-81'].state !== 'FREE'"
<div class="sealed-row-4-4"> :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-81'].busType, 'HDG1-81')">
<p>CDA213</p> <p>{{sealedAnticorrosion['HDG1-81'].busNo}}</p>
</div> </div>
<div class="sealed-row-4-5"> <div
<p>CDA213</p> class="sealed-row-4-3"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-82') && sealedAnticorrosion['HDG1-82'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-82'].busType, 'HDG1-82')">
<p>{{sealedAnticorrosion['HDG1-82'].busNo}}</p>
</div>
<div
class="sealed-row-4-4"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-83') && sealedAnticorrosion['HDG1-83'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-83'].busType, 'HDG1-83')">
<p>{{sealedAnticorrosion['HDG1-83'].busNo}}</p>
</div>
<div
class="sealed-row-4-5"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-84') && sealedAnticorrosion['HDG1-84'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-84'].busType, 'HDG1-84')">
<p>{{sealedAnticorrosion['HDG1-84'].busNo}}</p>
</div> </div>
<!-- 第五行 --> <!-- 第五行 -->
<div class="sealed-row-5-1"> <div
<p>CDA213</p> class="sealed-row-5-1"
</div> v-if="sealedAnticorrosion.hasOwnProperty('HDG1-85') && sealedAnticorrosion['HDG1-85'].state !== 'FREE'"
<div class="sealed-row-5-2"> :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-85'].busType, 'HDG1-85')">
<p>CDA213</p> <p>{{sealedAnticorrosion['HDG1-85'].busNo}}</p>
</div> </div>
<div class="sealed-row-5-3"> <div
<p>CDA213</p> class="sealed-row-5-2"
</div> v-if="sealedAnticorrosion.hasOwnProperty('HDG1-86') && sealedAnticorrosion['HDG1-86'].state !== 'FREE'"
<div class="sealed-row-5-4"> :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-86'].busType, 'HDG1-86')">
<p>CDA213</p> <p>{{sealedAnticorrosion['HDG1-86'].busNo}}</p>
</div> </div>
<div class="sealed-row-5-5"> <div
<p>CDA213</p> class="sealed-row-5-3"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-87') && sealedAnticorrosion['HDG1-87'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-87'].busType, 'HDG1-87')">
<p>{{sealedAnticorrosion['HDG1-87'].busNo}}</p>
</div>
<div
class="sealed-row-5-4"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-88') && sealedAnticorrosion['HDG1-88'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-88'].busType, 'HDG1-88')">
<p>{{sealedAnticorrosion['HDG1-88'].busNo}}</p>
</div>
<div
class="sealed-row-5-5"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-89') && sealedAnticorrosion['HDG1-89'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-89'].busType, 'HDG1-89')">
<p>{{sealedAnticorrosion['HDG1-89'].busNo}}</p>
</div> </div>
<!-- 第六行 --> <!-- 第六行 -->
<div class="sealed-row-6-1"> <div
<p>CDA213</p> class="sealed-row-6-1"
</div> v-if="sealedAnticorrosion.hasOwnProperty('HDG1-90') && sealedAnticorrosion['HDG1-90'].state !== 'FREE'"
<div class="sealed-row-6-2"> :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-90'].busType, 'HDG1-90')">
<p>CDA213</p> <p>{{sealedAnticorrosion['HDG1-90'].busNo}}</p>
</div> </div>
<div class="sealed-row-6-3"> <div
<p>CDA213</p> class="sealed-row-6-2"
</div> v-if="sealedAnticorrosion.hasOwnProperty('HDG1-91') && sealedAnticorrosion['HDG1-91'].state !== 'FREE'"
<div class="sealed-row-6-4"> :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-91'].busType, 'HDG1-91')">
<p>CDA213</p> <p>{{sealedAnticorrosion['HDG1-91'].busNo}}</p>
</div> </div>
<div class="sealed-row-6-5"> <div
<p>CDA213</p> class="sealed-row-6-3"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-92') && sealedAnticorrosion['HDG1-92'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-92'].busType, 'HDG1-92')">
<p>{{sealedAnticorrosion['HDG1-92'].busNo}}</p>
</div>
<div
class="sealed-row-6-4"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-93') && sealedAnticorrosion['HDG1-93'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-93'].busType, 'HDG1-93')">
<p>{{sealedAnticorrosion['HDG1-93'].busNo}}</p>
</div>
<div
class="sealed-row-6-5"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-94') && sealedAnticorrosion['HDG1-94'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-94'].busType, 'HDG1-94')">
<p>{{sealedAnticorrosion['HDG1-94'].busNo}}</p>
</div> </div>
<!-- 右一列 --> <!-- 右一列 -->
<div class="sealed-right-column-1-1"> <div
<p>CDA213</p> class="sealed-right-column-1-1"
</div> v-if="sealedAnticorrosion.hasOwnProperty('HDG5-8') && sealedAnticorrosion['HDG5-8'].state !== 'FREE'"
<div class="sealed-right-column-1-2"> :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG5-8'].busType, 'HDG5-8')">
<p>CDA213</p> <p>{{sealedAnticorrosion['HDG5-8'].busNo}}</p>
</div> </div>
<div class="sealed-right-column-1-3"> <div
<p>CDA213</p> class="sealed-right-column-1-2"
</div> v-if="sealedAnticorrosion.hasOwnProperty('HDG5-9') && sealedAnticorrosion['HDG5-9'].state !== 'FREE'"
<div class="sealed-right-column-1-4"> :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG5-9'].busType, 'HDG5-9')">
<p>CDA213</p> <p>{{sealedAnticorrosion['HDG5-9'].busNo}}</p>
</div> </div>
<div class="sealed-right-column-1-5"> <div
<p>CDA213</p> class="sealed-right-column-1-3"
v-if="sealedAnticorrosion.hasOwnProperty('HDG5-10') && sealedAnticorrosion['HDG5-10'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG5-10'].busType, 'HDG5-10')">
<p>{{sealedAnticorrosion['HDG5-10'].busNo}}</p>
</div>
<div
class="sealed-right-column-1-4"
v-if="sealedAnticorrosion.hasOwnProperty('HDG5-11') && sealedAnticorrosion['HDG5-11'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG5-11'].busType, 'HDG5-11')">
<p>{{sealedAnticorrosion['HDG5-11'].busNo}}</p>
</div>
<div
class="sealed-right-column-1-5"
v-if="sealedAnticorrosion.hasOwnProperty('HDG5-12') && sealedAnticorrosion['HDG5-12'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG5-12'].busType, 'HDG5-12')">
<p>{{sealedAnticorrosion['HDG5-12'].busNo}}</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -123,24 +228,54 @@ ...@@ -123,24 +228,54 @@
data () { data () {
return { return {
// 密封防腐作业区域实时数据 // 密封防腐作业区域实时数据
sealedAnticorrosionRealTime: {} sealedAnticorrosion: {},
// 筛选条件订单号
orderNo: '',
// 筛选条件工单号
workOrderNo: '',
// 车体定位数据
carPostion: {}
} }
}, },
methods: { methods: {
// 解析车体类型及车体定位样式 // 解析车体类型及车体定位样式
judgeCarTypeAndCarStationStyle (carType, caeNumber) {}, judgeCarTypeAndCarStationStyle (carType, caeNumber) {
if (this.carPostion.hasOwnProperty(caeNumber)) {
return 'monitor-car-location-position'
} else {
if (carType === 'OWN') {
return ''
} else {
return 'monitor-car-external'
}
}
},
// 获取密封防腐作业区实时数据 // 获取密封防腐作业区实时数据
getSealedAnticorrosionRealTimeData () { getSealedAnticorrosionRealTimeData () {
let queryParams = { areaNo: '3' } let queryParams = { areaNo: '3' }
this.$fetch('area-controller/realTime-get', queryParams).then(response => { this.$fetch('area-controller/realTime-get', queryParams).then(response => {
console.log(response) for (let item of response) {
if (item.code === '3') {
this.sealedAnticorrosionRealTime = _.cloneDeep(item)
}
}
})
},
// 根据工单号或订单号定位当前车体位置
getCurrentPosition () {
let queryParams = { orderNo: this.orderNo, workOrderNo: this.workOrderNo }
this.$fetch('area-controller/workOrderNo-get', queryParams).then(response => {
this.carPostion = _.cloneDeep(response)
}) })
}, },
// 轮询查询区域实时信息 // 轮询查询区域实时信息
pollingGetAreaRealTimeData () { pollingGetAreaRealTimeData () {
// 获取密封防腐作业区实时数据 // 获取密封防腐作业区实时数据
this.getSealedAnticorrosionRealTimeData() this.getSealedAnticorrosionRealTimeData()
// 根据工单号或订单号定位当前车体位置
this.getCurrentPosition()
setInterval(() => { setInterval(() => {
this.carPostion = {}
// 获取密封防腐作业区实时数据 // 获取密封防腐作业区实时数据
this.getSealedAnticorrosionRealTimeData() this.getSealedAnticorrosionRealTimeData()
}, 20000) }, 20000)
...@@ -342,4 +477,16 @@ ...@@ -342,4 +477,16 @@
} }
} }
} }
// 轻客车体样式
.monitor-car-external {
background: url('../../../assets/images/Monitor/monitor_car_external.png') !important;
background-size: cover !important;
}
// 定位车体样式
.monitor-car-location-position {
background: url('../../../assets/images/Monitor/monitor_position_car.gif') !important;
background-size: cover !important;
}
</style> </style>
src/views/Monitor/components/Tooltip.vue
View file @ f1191a7e
<template> <template>
<div <div
class="tooltip" class="tooltip"
ref="tooltip" ref="tooltip">
> <p>
<p><span>销售订单号: </span><span>{{ query.saleOrderNo }}</span></p> <span>销售订单号: </span>
<p><span>主计划工单号: </span><span>{{ query.planOrderNo }}</span></p> <span>{{ carStationInfo.hasOwnProperty('saleOrderNo') && carStationInfo.saleOrderNo !== null ? carStationInfo.saleOrderNo : '暂无' }}</span>
<p><span>车间计划工单号: </span><span>{{ query.code }}</span></p> </p>
<p><span>车型: </span><span>{{ query.busType }}</span></p> <p>
<p><span>订单数量: </span><span>{{ query.orderSize }}</span></p> <span>主计划工单号: </span>
<p><span>单位: </span><span>{{ query.unit }}</span></p> <span>{{ carStationInfo.hasOwnProperty('planOrderNo') && carStationInfo.planOrderNo !== null ? carStationInfo.planOrderNo : '暂无' }}</span>
<p><span>车间: </span><span>{{ query.shop }}</span></p> </p>
<p><span>产线: </span><span>{{ query.line }}</span></p> <p>
<span>车间计划工单号: </span>
<span>{{ carStationInfo.hasOwnProperty('code') && carStationInfo.code !== null ? carStationInfo.code : '暂无' }}</span>
</p>
<p>
<span>车型: </span>
<span>{{ carStationInfo.hasOwnProperty('busType') && carStationInfo.busType !== null ? carStationInfo.busType : '暂无' }}</span>
</p>
<p>
<span>订单数量: </span>
<span>{{ carStationInfo.hasOwnProperty('orderSize') && carStationInfo.orderSize !== null ? carStationInfo.orderSize : '暂无' }}</span>
</p>
<p>
<span>单位: </span>
<span>{{ carStationInfo.hasOwnProperty('unit') && carStationInfo.unit !== null ? carStationInfo.unit : '暂无' }}</span>
</p>
<p>
<span>车间: </span>
<span>{{ carStationInfo.hasOwnProperty('shop') && carStationInfo.shop !== null ? carStationInfo.shop : '暂无' }}</span>
</p>
<p>
<span>产线: </span>
<span>{{ carStationInfo.hasOwnProperty('line') && carStationInfo.line !== null ? arStationInfo.line : '暂无' }}</span>
</p>
<!-- <p><span>计划完工时间: </span><span>{{ query.saleOrderNo }}</span></p> --> <!-- <p><span>计划完工时间: </span><span>{{ query.saleOrderNo }}</span></p> -->
<div <div
class="close-btn" class="close-btn"
@click="closeTooltip" @click="closeTooltip">
>
<i class="el-icon-circle-close"></i> <i class="el-icon-circle-close"></i>
</div> </div>
</div> </div>
...@@ -34,16 +56,17 @@ export default { ...@@ -34,16 +56,17 @@ export default {
}, },
data () { data () {
return { return {
data: {} carStationInfo: {}
} }
}, },
watch: { watch: {
query (v) { query: {
this.data = _.cloneDeep(v) handler (newVal, oldVal) {
this.carStationInfo = _.cloneDeep(newVal)
},
deep: true
} }
}, },
methods: { methods: {
closeTooltip () { closeTooltip () {
this.$refs.tooltip.style.visibility = 'hidden' this.$refs.tooltip.style.visibility = 'hidden'
......
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