Skip to content

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

fea(AVI大屏首页): 功能联调(20%)

parent 9faa1574
Show whitespace changes
Inline Side-by-side
Showing with 322 additions and 57 deletions
src/views/Monitor/index.vue
View file @ 8c4a35d7
...@@ -31,71 +31,288 @@ ...@@ -31,71 +31,288 @@
<div class="electrophoresis-pack" @click="doElectrophoresisClick"> <div class="electrophoresis-pack" @click="doElectrophoresisClick">
<div> <div>
<!--上左区--> <!--上左区-->
<div class="t-l-washed-4"></div> <div
<div class="t-l-pure-water-wash-1"></div> class="t-l-washed-4"
<div class="t-l-electrophoretic-transfer"></div> v-if="electorophoresis.hasOwnProperty('STC1-1') && electorophoresis['STC1-1'].state !== 'FREE'"
<div class="t-l-electrophoretic-tank"></div> :class="judgeCarTypeAndCarStationStyle(electorophoresis['STC1-1'].busType, 'STC1-1')">
<div class="t-l-UF1"></div> </div>
<div class="t-l-UF2"></div> <div
<div class="t-l-pure-water-wash-2"></div> class="t-l-pure-water-wash-1"
<div class="t-l-electrophoresis-down"></div> v-if="electorophoresis.hasOwnProperty('STC1-2') && electorophoresis['STC1-2'].state !== 'FREE'"
<div class="t-l-station"></div> :class="judgeCarTypeAndCarStationStyle(electorophoresis['STC1-2'].busType, 'STC1-2')">
</div>
<div
class="t-l-electrophoretic-transfer"
v-if="electorophoresis.hasOwnProperty('STC1-3') && electorophoresis['STC1-3'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['STC1-3'].busType, 'STC1-3')">
</div>
<div
class="t-l-electrophoretic-tank"
v-if="electorophoresis.hasOwnProperty('STC1-4') && electorophoresis['STC1-4'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['STC1-4'].busType, 'STC1-4')">
</div>
<div
class="t-l-UF1"
v-if="electorophoresis.hasOwnProperty('STC1-5') && electorophoresis['STC1-5'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['STC1-5'].busType, 'STC1-5')">
</div>
<div
class="t-l-UF2"
v-if="electorophoresis.hasOwnProperty('STC1-6') && electorophoresis['STC1-6'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['STC1-6'].busType, 'STC1-6')">
</div>
<div
class="t-l-pure-water-wash-2"
v-if="electorophoresis.hasOwnProperty('STC1-7') && electorophoresis['STC1-7'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['STC1-7'].busType, 'STC1-7')">
</div>
<div
class="t-l-electrophoresis-down"
v-if="electorophoresis.hasOwnProperty('HDG2-2') && electorophoresis['HDG2-2'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG2-2'].busType, 'HDG2-2')">
</div>
<div
class="t-l-station"
v-if="electorophoresis.hasOwnProperty('HDG1-45') && electorophoresis['HDG1-45'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-45'].busType, 'HDG1-45')">
</div>
<!--上中区--> <!--上中区-->
<div class="t-m-washed-3"></div> <div
<div class="t-m-phosphating"></div> class="t-m-washed-3"
<div class="t-m-tune"></div> v-if="electorophoresis.hasOwnProperty('STC1-8') && electorophoresis['STC1-8'].state !== 'FREE'"
<div class="t-m-washed-2"></div> :class="judgeCarTypeAndCarStationStyle(electorophoresis['STC1-8'].busType, 'STC1-8')">
<div class="t-m-washed-1"></div> </div>
<div class="t-m-degreasing"></div> <div
<div class="t-m-pre-degreasing"></div> class="t-m-phosphating"
<div class="t-m-electrophoresis-up"></div> v-if="electorophoresis.hasOwnProperty('STC1-9') && electorophoresis['STC1-9'].state !== 'FREE'"
<div class="t-m-station"></div> :class="judgeCarTypeAndCarStationStyle(electorophoresis['STC1-9'].busType, 'STC1-9')">
</div>
<div
class="t-m-tune"
v-if="electorophoresis.hasOwnProperty('STC1-10') && electorophoresis['STC1-10'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['STC1-10'].busType, 'STC1-10')">
</div>
<div
class="t-m-washed-2"
v-if="electorophoresis.hasOwnProperty('STC1-11') && electorophoresis['STC1-11'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['STC1-11'].busType, 'STC1-11')">
</div>
<div
class="t-m-washed-1"
v-if="electorophoresis.hasOwnProperty('STC1-12') && electorophoresis['STC1-12'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['STC1-12'].busType, 'STC1-12')">
</div>
<div
class="t-m-degreasing"
v-if="electorophoresis.hasOwnProperty('STC1-13') && electorophoresis['STC1-13'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['STC1-13'].busType, 'STC1-13')">
</div>
<div
class="t-m-pre-degreasing"
v-if="electorophoresis.hasOwnProperty('STC1-14') && electorophoresis['STC1-14'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['STC1-14'].busType, 'STC1-14')">
</div>
<div
class="t-m-electrophoresis-up"
v-if="electorophoresis.hasOwnProperty('HDG2-1') && electorophoresis['HDG2-1'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG2-1'].busType, 'HDG2-1')">
</div>
<div
class="t-m-station"
v-if="electorophoresis.hasOwnProperty('HDG1-47') && electorophoresis['HDG1-47'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-47'].busType, 'HDG1-47')">
</div>
<!-- 中间两车道点 --> <!-- 中间两车道点 -->
<div class="m-m-station-1"></div> <div
<div class="m-m-station-2"></div> class="m-m-station-1"
v-if="electorophoresis.hasOwnProperty('HDG1-36') && electorophoresis['HDG1-36'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-36'].busType, 'HDG1-36')">
</div>
<div
class="m-m-station-2"
v-if="electorophoresis.hasOwnProperty('HDG1-46') && electorophoresis['HDG1-46'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-46'].busType, 'HDG1-46')">
</div>
<!--上右区--> <!--上右区-->
<div class="t-r-pretreatment-line-1"></div> <div
<div class="t-r-pretreatment-line-2"></div> class="t-r-pretreatment-line-1"
<div class="t-r-pretreatment-line-3"></div> v-if="electorophoresis.hasOwnProperty('HDG1-31') && electorophoresis['HDG1-31'].state !== 'FREE'"
<div class="t-r-pretreatment-line-4"></div> :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-31'].busType, 'HDG1-31')">
<div class="t-r-station-1"></div> </div>
<div class="t-r-station-2"></div> <div
<div class="t-r-station-3"></div> class="t-r-pretreatment-line-2"
<div class="t-r-station-4"></div> v-if="electorophoresis.hasOwnProperty('HDG1-32') && electorophoresis['HDG1-32'].state !== 'FREE'"
<div class="t-r-high-pressure-water-wash"></div> :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-32'].busType, 'HDG1-32')">
<div class="t-r-station"></div> </div>
<div
class="t-r-pretreatment-line-3"
v-if="electorophoresis.hasOwnProperty('HDG1-33') && electorophoresis['HDG1-33'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-33'].busType, 'HDG1-33')">
</div>
<div
class="t-r-pretreatment-line-4"
v-if="electorophoresis.hasOwnProperty('HDG1-34') && electorophoresis['HDG1-34'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-34'].busType, 'HDG1-34')">
</div>
<div
class="t-r-station-1"
v-if="electorophoresis.hasOwnProperty('HDG1-49') && electorophoresis['HDG1-49'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-49'].busType, 'HDG1-49')">
</div>
<div
class="t-r-station-2"
v-if="electorophoresis.hasOwnProperty('HDG1-50') && electorophoresis['HDG1-50'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-50'].busType, 'HDG1-50')">
</div>
<div
class="t-r-station-3"
v-if="electorophoresis.hasOwnProperty('HDG1-51') && electorophoresis['HDG1-51'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-51'].busType, 'HDG1-51')">
</div>
<div
class="t-r-station-4"
v-if="electorophoresis.hasOwnProperty('HDG1-52') && electorophoresis['HDG1-52'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-52'].busType, 'HDG1-52')">
</div>
<div
class="t-r-high-pressure-water-wash"
v-if="electorophoresis.hasOwnProperty('HDG1-35') && electorophoresis['HDG1-35'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-35'].busType, 'HDG1-35')">
</div>
<div
class="t-r-station"
v-if="electorophoresis.hasOwnProperty('HDG1-48') && electorophoresis['HDG1-48'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-48'].busType, 'HDG1-48')">
</div>
<!--左区--> <!--左区-->
<div class="l-station-1"></div> <div
<div class="l-station-2"></div> class="l-station-1"
<div class="l-station-3"></div> v-if="electorophoresis.hasOwnProperty('HDG5-2') && electorophoresis['HDG5-2'].state !== 'FREE'"
<div class="l-station-4"></div> :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG5-2'].busType, 'HDG5-2')">
<div class="l-station-5"></div> </div>
<div class="l-station-6"></div> <div
class="l-station-2"
v-if="electorophoresis.hasOwnProperty('HDG5-3') && electorophoresis['HDG5-3'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG5-3'].busType, 'HDG5-3')">
</div>
<div
class="l-station-3"
v-if="electorophoresis.hasOwnProperty('HDG5-4') && electorophoresis['HDG5-4'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG5-4'].busType, 'HDG5-4')">
</div>
<div
class="l-station-4"
v-if="electorophoresis.hasOwnProperty('HDG5-5') && electorophoresis['HDG5-5'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG5-5'].busType, 'HDG5-5')">
</div>
<div
class="l-station-5"
v-if="electorophoresis.hasOwnProperty('HDG5-6') && electorophoresis['HDG5-6'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG5-6'].busType, 'HDG5-6')">
</div>
<div
class="l-station-6"
v-if="electorophoresis.hasOwnProperty('HDG5-7') && electorophoresis['HDG5-7'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG5-7'].busType, 'HDG5-7')">
</div>
<!--下区--> <!--下区-->
<div class="b-column-1-electrophoresis-baking-1"></div> <div
<div class="b-column-1-electrophoresis-baking-2"></div> class="b-column-1-electrophoresis-baking-1"
<div class="b-column-1-frame-baking"></div> v-if="electorophoresis.hasOwnProperty('HDG1-37') && electorophoresis['HDG1-37'].state !== 'FREE'"
<div class="b-column-1-station"></div> :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-37'].busType, 'HDG1-37')">
<div class="b-column-2-electrophoresis-baking-1"></div> </div>
<div class="b-column-2-electrophoresis-baking-2"></div> <div
<div class="b-column-2-station-1"></div> class="b-column-1-electrophoresis-baking-2"
<div class="b-column-2-station-2"></div> v-if="electorophoresis.hasOwnProperty('HDG1-41') && electorophoresis['HDG1-41'].state !== 'FREE'"
<div class="b-column-3-electrophoresis-baking"></div> :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-41'].busType, 'HDG1-41')">
<div class="b-column-3-strong-cold"></div> </div>
<div class="b-column-3-station-1"></div> <div
<div class="b-column-3-station-2"></div> class="b-column-1-frame-baking"
<div class="b-column-4-strong-cold"></div> v-if="electorophoresis.hasOwnProperty('HDG1-59') && electorophoresis['HDG1-59'].state !== 'FREE'"
<div class="b-column-4-station-1"></div> :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-59'].busType, 'HDG1-59')">
<div class="b-column-4-frame-painting"></div> </div>
<div class="b-column-4-station-2"></div> <div
class="b-column-1-station"
v-if="electorophoresis.hasOwnProperty('HDG1-63') && electorophoresis['HDG1-63'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-63'].busType, 'HDG1-63')">
</div>
<div
class="b-column-2-electrophoresis-baking-1"
v-if="electorophoresis.hasOwnProperty('HDG1-38') && electorophoresis['HDG1-38'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-38'].busType, 'HDG1-38')">
</div>
<div
class="b-column-2-electrophoresis-baking-2"
v-if="electorophoresis.hasOwnProperty('HDG1-42') && electorophoresis['HDG1-42'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-42'].busType, 'HDG1-42')">
</div>
<div
class="b-column-2-station-1"
v-if="electorophoresis.hasOwnProperty('HDG1-60') && electorophoresis['HDG1-60'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-60'].busType, 'HDG1-60')">
</div>
<div
class="b-column-2-station-2"
v-if="electorophoresis.hasOwnProperty('HDG1-64') && electorophoresis['HDG1-64'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-64'].busType, 'HDG1-64')">
</div>
<div
class="b-column-3-electrophoresis-baking"
v-if="electorophoresis.hasOwnProperty('HDG1-39') && electorophoresis['HDG1-39'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-39'].busType, 'HDG1-39')">
</div>
<div
class="b-column-3-strong-cold"
v-if="electorophoresis.hasOwnProperty('HDG1-43') && electorophoresis['HDG1-43'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-43'].busType, 'HDG1-43')">
</div>
<div
class="b-column-3-station-1"
v-if="electorophoresis.hasOwnProperty('HDG1-61') && electorophoresis['HDG1-61'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-61'].busType, 'HDG1-61')">
</div>
<div
class="b-column-3-station-2"
v-if="electorophoresis.hasOwnProperty('HDG1-65') && electorophoresis['HDG1-65'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-65'].busType, 'HDG1-65')">
</div>
<div
class="b-column-4-strong-cold"
v-if="electorophoresis.hasOwnProperty('HDG1-40') && electorophoresis['HDG1-40'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-40'].busType, 'HDG1-40')">
</div>
<div
class="b-column-4-station-1"
v-if="electorophoresis.hasOwnProperty('HDG1-44') && electorophoresis['HDG1-44'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-44'].busType, 'HDG1-44')">
</div>
<div
class="b-column-4-frame-painting"
v-if="electorophoresis.hasOwnProperty('HDG1-62') && electorophoresis['HDG1-62'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-62'].busType, 'HDG1-62')">
</div>
<div
class="b-column-4-station-2"
v-if="electorophoresis.hasOwnProperty('HDG1-66') && electorophoresis['HDG1-66'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-66'].busType, 'HDG1-66')">
</div>
</div> </div>
</div> </div>
<!--钣金车存放区--> <!--钣金车存放区-->
<div class="sheet-metal-car-pack" @click="doSheetMetalCarClick"> <div class="sheet-metal-car-pack" @click="doSheetMetalCarClick">
<div> <div>
<div class="sheet-metal-car-A1"></div> <div class="sheet-metal-car-A1"></div>
<div class="A1-station-1"></div> <div
<div class="A1-station-2"></div> class="A1-station-1"
v-if="sheetMetalCar.hasOwnProperty('HDG1-4') && sheetMetalCar['HDG1-4'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sheetMetalCar['HDG1-4'].busType, 'HDG1-4')">
</div>
<div
class="A1-station-2"
v-if="sheetMetalCar.hasOwnProperty('HDG1-3') && sheetMetalCar['HDG1-3'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sheetMetalCar['HDG1-3'].busType, 'HDG1-3')">
</div>
<div class="A1-station-3"></div> <div class="A1-station-3"></div>
<div class="A1-station-4"></div> <div class="A1-station-4"></div>
...@@ -379,8 +596,22 @@ ...@@ -379,8 +596,22 @@
workOrderNo: '', workOrderNo: '',
// 筛选条件订单号 // 筛选条件订单号
orderNo: '', orderNo: '',
// 涂装车间实时信息 // 车体定位数据
paintingWorkshopRealTimeData: [] carLocation: [],
// 电泳工作区实时信息
electorophoresis: {},
// 钣金车存放区实时信息
sheetMetalCar: {},
// 密封防腐工作区实时信息
sealedAnticorrosion: {},
// 腻子作业区实时信息
putty: {},
// 中涂作业区实时信息
middleCoat: {},
// 面/色漆作业区实时信息
complexionPaint: {},
// 成品车存放区实时信息
finishedCar: {}
} }
}, },
methods: { methods: {
...@@ -429,9 +660,43 @@ ...@@ -429,9 +660,43 @@
// 获取涂装车间实时信息 // 获取涂装车间实时信息
getPaintingWorkshopRealTimeData () { getPaintingWorkshopRealTimeData () {
this.$fetch('area-controller/realTime-get', {}).then((response) => { this.$fetch('area-controller/realTime-get', {}).then((response) => {
console.log(response) for (let item of response) {
if (item.code === '1') {
this.sheetMetalCar = _.cloneDeep(item.stationMap)
}
if (item.code === '2') {
this.electorophoresis = _.cloneDeep(item.stationMap)
}
if (item.code === '3') {
this.sealedAnticorrosion = _.cloneDeep(item.stationMap)
}
if (item.code === '4') {
this.putty = _.cloneDeep(item.stationMap)
}
if (item.code === '5') {
this.middleCoat = _.cloneDeep(item.stationMap)
}
if (item.code === '6') {
this.complexionPaint = _.cloneDeep(item.stationMap)
}
if (item.code === '7') {
this.finishedCar = _.cloneDeep(item.stationMap)
}
}
}) })
},
// 解析车体类型及车体定位样式
judgeCarTypeAndCarStationStyle (carType, carNumber) {
if (carType === 'OWN') {
return ''
} else {
return 'monitor-car-external'
}
} }
},
mounted () {
// 获取涂装车间实时信息
this.getPaintingWorkshopRealTimeData()
} }
} }
</script> </script>
......
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