Skip to content

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

fea(AVI整体大屏): 功能联调(95%) 更换首页背景图片

parent f9eca285
Hide whitespace changes
Inline Side-by-side
Showing with 387 additions and 11 deletions
src/views/Monitor/index.vue
View file @ b3572fe5
...@@ -1413,9 +1413,149 @@ ...@@ -1413,9 +1413,149 @@
</div> </div>
</div> </div>
<!--钣金车进工位--> <!--钣金车进工位-->
<div class="sheet-metal-car"></div> <div
class="sheet-metal-car"
v-if="overall.hasOwnProperty('HXG1-1') && overall['HXG1-1'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(overall['HXG1-1'].busType, 'HXG1-1')">
</div>
<!--涂装车出工位--> <!--涂装车出工位-->
<div class="paint-car"></div> <div
class="paint-car"
v-if="overall.hasOwnProperty('HXG2-1') && overall['HXG2-1'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(overall['HXG2-1'].busType, 'HXG2-1')">
</div>
<!--数据展示区域-->
<div class="data-demonstration-pack">
<div>
<div class="yesterday-in-car-num">
<span v-if="inOutCarInfo.yesterdayCarInNum === 0">0</span>
<span
v-else-if="inOutCarInfo.yesterdayCarInNum === null"
class="no-message">
暂无
</span>
<span v-else>{{inOutCarInfo.yesterdayCarInNum}}</span>
</div>
<div class="today-in-car-num">
<span v-if="inOutCarInfo.todayCarInNum === 0">0</span>
<span
v-else-if="inOutCarInfo.todayCarInNum === null"
class="no-message">
暂无
</span>
<span v-else>{{inOutCarInfo.todayCarInNum}}</span>
</div>
<div class="electrophoresis-today-in-car-num">
<span v-if="inOutCarInfo.electorophoresisTodayCarInNum === 0">0</span>
<span
v-else-if="inOutCarInfo.electorophoresisTodayCarInNum === null"
class="no-message">
暂无
</span>
<span v-else>{{inOutCarInfo.electorophoresisTodayCarInNum}}</span>
</div>
<div class="sealed-anticorrosion-today-in-car-num">
<span v-if="inOutCarInfo.sealedAnticorrosionTodayCarInNum === 0">0</span>
<span
v-else-if="inOutCarInfo.sealedAnticorrosionTodayCarInNum === null"
class="no-message">
暂无
</span>
<span v-else>{{inOutCarInfo.sealedAnticorrosionTodayCarInNum}}</span>
</div>
<div class="putty-today-in-car-num">
<span v-if="inOutCarInfo.puttyTodayCarInNum === 0">0</span>
<span
v-else-if="inOutCarInfo.puttyTodayCarInNum === null"
class="no-message">
暂无
</span>
<span v-else>{{inOutCarInfo.puttyTodayCarInNum}}</span>
</div>
<div class="middle-coat-today-in-car-num">
<span v-if="inOutCarInfo.middleCoatTodayCarInNum === 0">0</span>
<span
v-else-if="inOutCarInfo.middleCoatTodayCarInNum === null"
class="no-message">
暂无
</span>
<span v-else>{{inOutCarInfo.middleCoatTodayCarInNum}}</span>
</div>
<div class="complexion-paint-today-in-car-num">
<span v-if="inOutCarInfo.complexionPaintTodayCarInNum === 0">0</span>
<span
v-else-if="inOutCarInfo.complexionPaintTodayCarInNum === null"
class="no-message">
暂无
</span>
<span v-else>{{inOutCarInfo.complexionPaintTodayCarInNum}}</span>
</div>
<div class="yesterday-out-car-num">
<span v-if="inOutCarInfo.yesterdayCarOutNum === 0">0</span>
<span
v-else-if="inOutCarInfo.yesterdayCarOutNum === null"
class="no-message">
暂无
</span>
<span v-else>{{inOutCarInfo.yesterdayCarOutNum}}</span>
</div>
<div class="today-out-car-num">
<span v-if="inOutCarInfo.todayCarOutNum === 0">0</span>
<span
v-else-if="inOutCarInfo.todayCarOutNum === null"
class="no-message">
暂无
</span>
<span v-else>{{inOutCarInfo.todayCarOutNum}}</span>
</div>
<div class="electrophoresis-today-out-car-num">
<span v-if="inOutCarInfo.electorophoresisTodayCarOutNum === 0">0</span>
<span
v-else-if="inOutCarInfo.electorophoresisTodayCarOutNum === null"
class="no-message">
暂无
</span>
<span v-else>{{inOutCarInfo.electorophoresisTodayCarOutNum}}</span>
</div>
<div class="sealed-anticorrosion-today-out-car-num">
<span v-if="inOutCarInfo.sealedAnticorrosionTodayCarOutNum === 0">0</span>
<span
v-else-if="inOutCarInfo.sealedAnticorrosionTodayCarOutNum === null"
class="no-message">
暂无
</span>
<span v-else>{{inOutCarInfo.sealedAnticorrosionTodayCarOutNum}}</span>
</div>
<div class="putty-today-out-car-num">
<span v-if="inOutCarInfo.puttyTodayCarOutNum === 0">0</span>
<span
v-else-if="inOutCarInfo.puttyTodayCarOutNum === null"
class="no-message">
暂无
</span>
<span v-else>{{inOutCarInfo.puttyTodayCarOutNum}}</span>
</div>
<div class="middle-coat-today-out-car-num">
<span v-if="inOutCarInfo.middleCoatTodayCarOutNum === 0">0</span>
<span
v-else-if="inOutCarInfo.middleCoatTodayCarOutNum === null"
class="no-message">
暂无
</span>
<span v-else>{{inOutCarInfo.middleCoatTodayCarOutNum}}</span>
</div>
<div class="complexion-paint-today-out-car-num">
<span v-if="inOutCarInfo.complexionPaintTodayCarOutNum === 0">0</span>
<span
v-else-if="inOutCarInfo.complexionPaintTodayCarOutNum === null"
class="no-message">
暂无
</span>
<span v-else>{{inOutCarInfo.complexionPaintTodayCarOutNum}}</span>
</div>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -1429,7 +1569,9 @@ ...@@ -1429,7 +1569,9 @@
// 筛选条件订单号 // 筛选条件订单号
orderNo: '', orderNo: '',
// 车体定位数据 // 车体定位数据
carLocation: [], carLocation: {},
// 整体区域实时信息(钣金车进、钣金车出两工位)
overall: {},
// 电泳工作区实时信息 // 电泳工作区实时信息
electorophoresis: {}, electorophoresis: {},
// 钣金车存放区实时信息 // 钣金车存放区实时信息
...@@ -1443,7 +1585,40 @@ ...@@ -1443,7 +1585,40 @@
// 面/色漆作业区实时信息 // 面/色漆作业区实时信息
complexionPaint: {}, complexionPaint: {},
// 成品车存放区实时信息 // 成品车存放区实时信息
finishedCar: {} finishedCar: {},
// 定时器
timer: '',
// 进出车数据展示
inOutCarInfo: {
// 昨日进车数量
yesterdayCarInNum: null,
// 当日进车数量
todayCarInNum: null,
// 电泳当日进车数量
electorophoresisTodayCarInNum: null,
// 密封防腐当日进车数量
sealedAnticorrosionTodayCarInNum: null,
// 腻子当日进车数量
puttyTodayCarInNum: null,
// 中涂当日进车数量
middleCoatTodayCarInNum: null,
// 面/色漆当日进车数量
complexionPaintTodayCarInNum: null,
// 昨日交车数量
yesterdayCarOutNum: null,
// 当日交车数量
todayCarOutNum: null,
// 电泳当日交车数量
electorophoresisTodayCarOutNum: null,
// 密封防腐当日交车数量
sealedAnticorrosionTodayCarOutNum: null,
// 腻子当日交车数量
puttyTodayCarOutNum: null,
// 中涂当日交车数量
middleCoatTodayCarOutNum: null,
// 面/色漆当日交车数量
complexionPaintTodayCarOutNum: null
}
} }
}, },
methods: { methods: {
...@@ -1493,6 +1668,9 @@ ...@@ -1493,6 +1668,9 @@
getPaintingWorkshopRealTimeData () { getPaintingWorkshopRealTimeData () {
this.$fetch('area-controller/realTime-get', {}).then((response) => { this.$fetch('area-controller/realTime-get', {}).then((response) => {
for (let item of response) { for (let item of response) {
if (item.code === '0') {
this.overall = _.cloneDeep(item.stationMap)
}
if (item.code === '1') { if (item.code === '1') {
this.sheetMetalCar = _.cloneDeep(item.stationMap) this.sheetMetalCar = _.cloneDeep(item.stationMap)
} }
...@@ -1519,23 +1697,111 @@ ...@@ -1519,23 +1697,111 @@
}, },
// 解析车体类型及车体定位样式 // 解析车体类型及车体定位样式
judgeCarTypeAndCarStationStyle (carType, carNumber) { judgeCarTypeAndCarStationStyle (carType, carNumber) {
if (carType === 'OWN') { // 判断工位是否被定位再判断工位上的车体类型
return '' if (this.carLocation.hasOwnProperty(carNumber)) {
return 'monitor-car-location-position'
} else { } else {
return 'monitor-car-external' if (carType === 'OWN') {
return ''
} else {
return 'monitor-car-external'
}
} }
}, },
// 获取各区域进车及交车数量
getAreaBusStatisticsNumber () {
this.$fetch('area-controller/statistics-get', {}).then(response => {
for (let item of response) {
if (item.areaNo === '0') {
if (item.busType === 'IN') {
if (item.dateType === 'YESTERDAY') {
this.inOutCarInfo.yesterdayCarInNum = _.cloneDeep(item.size)
} else {
this.inOutCarInfo.todayCarInNum = _.cloneDeep(item.size)
}
} else {
if (item.dateType === 'YESTERDAY') {
this.inOutCarInfo.yesterdayCarOutNum = _.cloneDeep(item.size)
} else {
this.inOutCarInfo.todayCarOutNum = _.cloneDeep(item.size)
}
}
}
if (item.areaNo === '2') {
if (item.busType === 'IN') {
this.inOutCarInfo.electorophoresisTodayCarInNum = _.cloneDeep(item.size)
} else {
this.inOutCarInfo.electorophoresisTodayCarOutNum = _.cloneDeep(item.size)
}
}
if (item.areaNo === '3') {
if (item.busType === 'IN') {
this.inOutCarInfo.sealedAnticorrosionTodayCarInNum = _.cloneDeep(item.size)
} else {
this.inOutCarInfo.sealedAnticorrosionTodayCarOutNum = _.cloneDeep(item.size)
}
}
if (item.areaNo === '4') {
if (item.busType === 'IN') {
this.inOutCarInfo.puttyTodayCarInNum = _.cloneDeep(item.size)
} else {
this.inOutCarInfo.puttyTodayCarOutNum = _.cloneDeep(item.size)
}
}
if (item.areaNo === '5') {
if (item.busType === 'IN') {
this.inOutCarInfo.middleCoatTodayCarInNum = _.cloneDeep(item.size)
} else {
this.inOutCarInfo.middleCoatTodayCarOutNum = _.cloneDeep(item.size)
}
}
if (item.areaNo === '6') {
if (item.busType === 'IN') {
this.inOutCarInfo.complexionPaintTodayCarInNum = _.cloneDeep(item.size)
} else {
this.inOutCarInfo.complexionPaintTodayCarOutNum = _.cloneDeep(item.size)
}
}
}
})
},
// 点击搜索按钮 // 点击搜索按钮
doSearchClick () { doSearchClick () {
let queryParams = { orderNo: this.orderNo, workOrderNo: this.workOrderNo } let queryParams = { orderNo: this.orderNo, workOrderNo: this.workOrderNo }
this.$fetch('area-controller/busNo-get', queryParams).then(response => { this.$fetch('area-controller/workOrderNo-get', queryParams).then(response => {
console.log(response) this.carLocation = _.cloneDeep(response)
// 清除定时器
clearInterval(this.timer)
// 轮询查询区域实时信息
this.pollingGetAreaRealTimeData()
}) })
},
// 轮询查询区域实时信息
pollingGetAreaRealTimeData () {
for (let key in this.inOutCarInfo) {
this.inOutCarInfo[key] = null
}
// 获取涂装车间实时信息
this.getPaintingWorkshopRealTimeData()
// 获取各区域进车及交车数量
this.getAreaBusStatisticsNumber()
this.timer = setInterval(() => {
for (let key in this.inOutCarInfo) {
this.inOutCarInfo[key] = null
}
// 获取涂装车间实时信息
this.getPaintingWorkshopRealTimeData()
// 获取各区域进车及交车数量
this.getAreaBusStatisticsNumber()
this.carLocation = {}
}, 20000)
} }
}, },
mounted () { mounted () {
// 获取涂装车间实时信息 setTimeout(() => {
this.getPaintingWorkshopRealTimeData() // 轮询查询区域实时信息
this.pollingGetAreaRealTimeData()
}, 0)
} }
} }
</script> </script>
...@@ -3403,11 +3669,121 @@ ...@@ -3403,11 +3669,121 @@
top: 1232px; top: 1232px;
left: 1360px; left: 1360px;
} }
// 数据展示区域
.data-demonstration-pack {
position: absolute;
/*background-color: rgba(255, 255, 255, 0.2);*/
left: 135px;
top: 620px;
div {
position: relative;
width: 535px;
height: 265px;
div {
position: absolute;
height: 30px;
width: 24px;
line-height: 30px;
text-align: center;
font-weight: bold;
font-size: 14px;
color: #00b4ff;
}
.no-message {
font-size: 12px !important;
font-weight: 400;
}
// 昨日进车数量
.yesterday-in-car-num {
position: absolute;
top: 18px;
left: 188px;
}
// 当日进车数量
.today-in-car-num {
left: 188px;
top: 52px;
}
// 电泳当日进车数量
.electrophoresis-today-in-car-num {
left: 188px;
top: 85px;
}
// 密封防腐当日进车
.sealed-anticorrosion-today-in-car-num {
left: 188px;
top: 119px;
}
// 腻子当日进车数量
.putty-today-in-car-num {
left: 188px;
top: 151.5px;
}
// 中涂当日进车数量
.middle-coat-today-in-car-num {
left: 188px;
top: 186px;
}
// 面/色漆当日进车数量
.complexion-paint-today-in-car-num {
left: 188px;
top: 220.5px;
}
// 昨日交车数量
.yesterday-out-car-num {
left: 437px;
top: 18px;
}
// 当日交车数量
.today-out-car-num {
left: 437px;
top: 52px;
}
// 电泳当日交车数量
.electrophoresis-today-out-car-num {
left: 437px;
top: 85px;
}
// 密封防腐当日交车
.sealed-anticorrosion-today-out-car-num {
left: 437px;
top: 119px;
}
// 腻子当日交车数量
.putty-today-out-car-num {
left: 437px;
top: 151.5px;
}
// 中涂当日交车数量
.middle-coat-today-out-car-num {
left: 437px;
top: 186px;
}
// 面/色漆当日交车数量
.complexion-paint-today-out-car-num {
left: 437px;
top: 220.5px;
}
}
}
} }
} }
// 轻客车体样式
.monitor-car-external { .monitor-car-external {
background: url('../../assets/images/Monitor/monitor_car_external.png') !important; background: url('../../assets/images/Monitor/monitor_car_external.png') !important;
background-size: cover !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>
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