Skip to content

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

Merge branch 'dev' of git.vtstar.net:zhongtong/zhongtong-avi-web into dev

parents 1cfd91c0 61808aa1
Hide whitespace changes
Inline Side-by-side
Showing with 1588 additions and 731 deletions
src/views/Monitor/components/ComplexionPaint.vue
View file @ 1c2cf687
...@@ -533,6 +533,10 @@ ...@@ -533,6 +533,10 @@
> >
<p>{{query['HDG1-204'].busNo}}</p> <p>{{query['HDG1-204'].busNo}}</p>
</div> </div>
<!-- 实时车辆 -->
<div class="onlineNum">
<p>总量 <span>{{ this.onlineNum? this.onlineNum : '0' }}</span></p>
</div>
<Tooltip <Tooltip
ref="toolRef" ref="toolRef"
:query="BusInformation" :query="BusInformation"
...@@ -553,10 +557,12 @@ export default { ...@@ -553,10 +557,12 @@ export default {
}, },
data () { data () {
return { return {
// 定时器
timer: null,
// 当前在线人数 // 当前在线人数
onlineNum: null, onlineNum: null,
// 车体定位信息 // 车辆定位数据
busPosition: {}, carPostionInfo: {},
// 面色/漆作业区域实时信息 // 面色/漆作业区域实时信息
query: {}, query: {},
// 根据车身号获得当前车体信息 // 根据车身号获得当前车体信息
...@@ -574,26 +580,25 @@ export default { ...@@ -574,26 +580,25 @@ export default {
}, },
mounted () { mounted () {
this.getComplexionPaintInformation(); this.pollingGetInterface();
},
beforeDestroy () {
clearInterval(this.timer);
}, },
methods: { methods: {
// 查询面色/漆作业区实时信息 // 获取面色/漆作业区实时信息
getComplexionPaintInformation () { getComplexionPaintInformation () {
this.$fetch('area-controller/realTime-get', { areaNo: '6' }) this.$fetch('area-controller/realTime-get', { areaNo: '6' })
.then(res => { .then(res => {
// console.log(res); for (let item of res) {
// this.query = _.cloneDeep(res); if (item.code === '6') {
for (let i = 0; i < res.length; i++) { this.query = item.stationMap;
if (res[i].code === '6') {
console.log(res[i]);
this.query = _.cloneDeep(res[i].stationMap);
// 获取当前在线人数 // 获取当前在线人数
this.onlineNum = _.clone(res[i].onlineNum); this.onlineNum = _.clone(item.onlineNum);
console.log(this.onlineNum) console.log(this.onlineNum);
break;
} }
} }
console.log(this.query);
}) })
.catch(error => { .catch(error => {
reject(error); reject(error);
...@@ -601,24 +606,16 @@ export default { ...@@ -601,24 +606,16 @@ export default {
}, },
// 解析车体类型及车体定位样式 // 解析车体类型及车体定位样式
judgeCarTypeAndcarStationstyle (outOrIn, station) { judgeCarTypeAndcarStationstyle (outOrIn, station) {
//根据车位编码Station 判断是否该车位已经被定位 // 判断有无车体定位信息
// let stateTemp = _.cloneDeep(this.$route.query); if (this.carPostionInfo.hasOwnProperty(station)) {
// console.log('aaa', stateTemp); return 'isPositioned';
// this.$fetch('area-controller/busNo-get', {stateTemp}).then(res => {
// console.log(res);
// this.busPosition = _.cloneDeep(res);
// if (this.busPosition.hasOwnProperty(station)) {
// return 'isPositioned'
// } else {
if (outOrIn === 'OTHER') {
return 'carOutFactory';
} else { } else {
return ''; if (outOrIn === 'OTHER') {
return 'carOutFactory';
} else {
return '';
}
} }
// }
// }).catch(error => {
// reject(error);
// })
}, },
clickBtn (busNub) { clickBtn (busNub) {
console.log(busNub); console.log(busNub);
...@@ -637,6 +634,34 @@ export default { ...@@ -637,6 +634,34 @@ export default {
.catch(error => { .catch(error => {
reject(error); reject(error);
}); });
},
// 查询车辆定位
getCarPostion () {
let queryParams = { orderNo: '1111', workOrderNo: '' };
// 请求接口
this.$fetch('area-controller/busNo-get', { queryParams }).then(
res => {
this.carPostionInfo = _.cloneDeep(res);
}
);
},
// 轮询请求接口
pollingGetInterface () {
// 查询车辆定位
console.log('2222', this.$route.query);
if (
this.$route.query.hasOwnProperty('orderNo') ||
this.$route.query.hasOwnProperty('workOrderNo')
) {
this.getCarPostion();
}
// 获取面色/漆作业区实时信息
this.getComplexionPaintInformation();
this.timer = setInterval(() => {
this.carPostionInfo = {};
// 获取面色/漆作业区实时信息
this.getComplexionPaintInformation();
}, 20000);
} }
} }
}; };
...@@ -646,6 +671,20 @@ export default { ...@@ -646,6 +671,20 @@ export default {
min-height: 100%; min-height: 100%;
background: rgba(0, 7, 12, 1); background: rgba(0, 7, 12, 1);
.onlineNum {
position: absolute;
color: #ffffff;
z-index: 999;
right: 300px;
top: 50px;
color: #00b4ff;
font-size: 16px;
font-weight: 750;
span {
margin: 30px;
font-size: 24px;
}
}
.paint-content { .paint-content {
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
...@@ -730,7 +769,7 @@ export default { ...@@ -730,7 +769,7 @@ export default {
.paint-row-13-3, .paint-row-13-3,
.paint-row-13-5 { .paint-row-13-5 {
position: absolute; position: absolute;
width: 140px; width: 100px;
height: 40px; height: 40px;
cursor: pointer; cursor: pointer;
background: url("../../../assets/images/Monitor/monitor_car.png") background: url("../../../assets/images/Monitor/monitor_car.png")
...@@ -739,7 +778,7 @@ export default { ...@@ -739,7 +778,7 @@ export default {
background-position: 0 16px; background-position: 0 16px;
p { p {
font-size: 14px; font-size: 12px;
margin: 0; margin: 0;
color: #ffffff; color: #ffffff;
font-weight: bold; font-weight: bold;
......
src/views/Monitor/components/Electrophoresis.vue
View file @ 1c2cf687
...@@ -433,6 +433,10 @@ ...@@ -433,6 +433,10 @@
> >
<p>{{query['HDG1-66'].busNo}}</p> <p>{{query['HDG1-66'].busNo}}</p>
</div> </div>
<!-- 实时车辆 -->
<div class="onlineNum">
<p>总量 <span>{{ this.onlineNum? this.onlineNum : '0' }}</span></p>
</div>
<Tooltip <Tooltip
ref="toolRef" ref="toolRef"
:query="BusInformation" :query="BusInformation"
...@@ -449,57 +453,63 @@ export default { ...@@ -449,57 +453,63 @@ export default {
}, },
data () { data () {
return { return {
//定时器
timer: null,
// 车辆定位数据
carPostionInfo: {},
// 当前在线人数 // 当前在线人数
onlineNum: null, onlineNum: null,
// 车体定位信息
busPosition: {},
// 电泳作业区域实时信息 // 电泳作业区域实时信息
query: {}, query: {},
// 根据车身号获得当前车体信息 // 根据车身号获得当前车体信息
BusInformation: { BusInformation: {
'saleOrderNo': '201905201252', saleOrderNo: '201905201252',
'planOrderNo': '83848484', planOrderNo: '83848484',
'code': 'EDSCSFDGVG', code: 'EDSCSFDGVG',
'busType': 'car', busType: 'car',
'orderSize': '20', orderSize: '20',
'unit': 'From China', unit: 'From China',
'shop': '二号车间', shop: '二号车间',
'line': '4-25' line: '4-25'
} }
}; };
}, },
mounted () { mounted () {
this.getElectrophoresisInformation(); this.pollingGetInterface();
console.log(this.$route) console.log('2222', this.timer);
},
beforeDestroy () {
clearInterval(this.timer);
}, },
methods: { methods: {
// 点击车位弹出车体信息 // 点击车位弹出车体信息
clickBtn (row) { clickBtn (row) {
console.log(row) console.log(row);
this.$refs.toolRef.$refs.tooltip.style.visibility = 'visible'; this.$refs.toolRef.$refs.tooltip.style.visibility = 'visible';
let left = window.event.clientX; let left = window.event.clientX;
let top = window.event.clientY; let top = window.event.clientY;
this.$refs.toolRef.$refs.tooltip.style.top = top - 100 + 'px'; this.$refs.toolRef.$refs.tooltip.style.top = top - 100 + 'px';
this.$refs.toolRef.$refs.tooltip.style.left = left - 100 + 'px'; this.$refs.toolRef.$refs.tooltip.style.left = left - 100 + 'px';
this.$fetch('area-controller/busNo-get', {busNo: row}).then(res => { this.$fetch('area-controller/busNo-get', { busNo: row })
console.log('res', res); .then(res => {
// this.BusInformation = _.cloneDeep(res); console.log('res', res);
}).catch(error => { // this.BusInformation = _.cloneDeep(res);
reject(error) })
}) .catch(error => {
reject(error);
});
}, },
// 查询电泳实时信息 // 查询电泳实时信息
getElectrophoresisInformation () { getElectrophoresisInformation () {
this.$fetch('area-controller/realTime-get', { areaNo: '2' }) this.$fetch('area-controller/realTime-get', { areaNo: '2' })
.then(res => { .then(res => {
console.log('getall', res); for (let item of res) {
for (let i = 0; i < res.length; i++) { if (item.code === '2') {
if (res[i].code === '2') { this.query = item.stationMap;
console.log(res[i]);
this.query = _.cloneDeep(res[i].stationMap);
// 获取当前在线人数 // 获取当前在线人数
this.onlineNum = _.clone(res[i].onlineNum); this.onlineNum = _.clone(item.onlineNum);
console.log(this.onlineNum) console.log(this.onlineNum);
break;
} }
} }
}) })
...@@ -509,24 +519,43 @@ export default { ...@@ -509,24 +519,43 @@ export default {
}, },
// 解析车体类型及车体定位样式 // 解析车体类型及车体定位样式
judgeCarTypeAndcarStationstyle (outOrIn, station) { judgeCarTypeAndcarStationstyle (outOrIn, station) {
//根据车位编码Station 判断是否该车位已经被定位 // 判断有无车体定位信息
// let stateTemp = _.cloneDeep(this.$route.query); if (this.carPostionInfo.hasOwnProperty(station)) {
// console.log('aaa', stateTemp); return 'isPositioned';
// this.$fetch('area-controller/busNo-get', {stateTemp}).then(res => {
// console.log(res);
// this.busPosition = _.cloneDeep(res);
// if (this.busPosition.hasOwnProperty(station)) {
// return 'isPositioned'
// } else {
if (outOrIn === 'OTHER') {
return 'carOutFactory';
} else { } else {
return ''; if (outOrIn === 'OTHER') {
return 'carOutFactory';
} else {
return '';
}
} }
// } },
// }).catch(error => { // 查询车辆定位
// reject(error); getCarPostion () {
// }) let queryParams = { orderNo: '1111', workOrderNo: '' };
// 请求接口
this.$fetch('area-controller/busNo-get', { queryParams }).then(
res => {
this.carPostionInfo = _.cloneDeep(res);
}
);
},
// 轮询请求接口
pollingGetInterface () {
// 查询车辆定位
if (
this.$route.query.hasOwnProperty('orderNo') ||
this.$route.query.hasOwnProperty('workOrderNo')
) {
this.getCarPostion();
}
// 获取电泳作业区实时信息
this.getElectrophoresisInformation();
this.timer = setInterval(() => {
this.carPostionInfo = {};
// 获取电泳作业区实时信息
this.getElectrophoresisInformation();
}, 20000);
} }
} }
}; };
...@@ -536,13 +565,27 @@ export default { ...@@ -536,13 +565,27 @@ export default {
.page-pack { .page-pack {
min-height: 100%; min-height: 100%;
background: rgba(0, 7, 12, 1); background: rgba(0, 7, 12, 1);
.onlineNum {
position: absolute;
color: #ffffff;
z-index: 999;
right: 300px;
top: 50px;
color: #00b4ff;
font-size: 16px;
font-weight: 750;
span {
margin: 30px;
font-size: 24px;
}
}
.elect-content { .elect-content {
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
width: 1600px; width: 1600px;
height: 900px; height: 900px;
background: url("../../../assets/images/Monitor/monitor_electrophoresis.png") no-repeat; background: url("../../../assets/images/Monitor/monitor_electrophoresis.png")
no-repeat;
.elect-row-1-1, .elect-row-1-1,
.elect-row-1-2, .elect-row-1-2,
.elect-row-1-3, .elect-row-1-3,
...@@ -596,7 +639,7 @@ export default { ...@@ -596,7 +639,7 @@ export default {
.elect-row-13-4, .elect-row-13-4,
.elect-row-13-5 { .elect-row-13-5 {
position: absolute; position: absolute;
width: 140px; width: 100px;
height: 40px; height: 40px;
cursor: pointer; cursor: pointer;
background: url("../../../assets/images/Monitor/monitor_car.png") background: url("../../../assets/images/Monitor/monitor_car.png")
...@@ -605,7 +648,7 @@ export default { ...@@ -605,7 +648,7 @@ export default {
background-position: 0 16px; background-position: 0 16px;
p { p {
font-size: 14px; font-size: 12px;
margin: 0; margin: 0;
color: #ffffff; color: #ffffff;
font-weight: bold; font-weight: bold;
...@@ -815,7 +858,8 @@ export default { ...@@ -815,7 +858,8 @@ export default {
.elect-row-13-2 { .elect-row-13-2 {
left: 708px; left: 708px;
} }
.elect-row-8-4,.elect-row-9-5 { .elect-row-8-4,
.elect-row-9-5 {
left: 830px; left: 830px;
} }
.carOutFactory { .carOutFactory {
......
src/views/Monitor/components/FinishedCar.vue
View file @ 1c2cf687
...@@ -3,172 +3,391 @@ ...@@ -3,172 +3,391 @@
<div class="page-pack"> <div class="page-pack">
<div class="container-pack"> <div class="container-pack">
<!-- 第一行 --> <!-- 第一行 -->
<div class="finished-row-1-1"> <div
<p>CDA213</p> class="finished-row-1-1"
@click="clickBtn(query['HDG1-147'].busNo)"
v-if="query.hasOwnProperty('HDG1-147') && query['HDG1-147'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-147'].busType, 'HDG1-147')"
>
<p>{{query['HDG1-147'].busNo}}</p>
</div> </div>
<div class="finished-row-1-2"> <div
<p>CDA213</p> class="finished-row-1-2"
@click="clickBtn(query['HDG1-163'].busNo)"
v-if="query.hasOwnProperty('HDG1-163') && query['HDG1-163'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-163'].busType, 'HDG1-163')"
>
<p>{{query['HDG1-163'].busNo}}</p>
</div> </div>
<div class="finished-row-1-3"> <div
<p>CDA213</p> class="finished-row-1-3"
@click="clickBtn(query['HDG1-205'].busNo)"
v-if="query.hasOwnProperty('HDG1-205') && query['HDG1-205'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-205'].busType, 'HDG1-205')"
>
<p>{{query['HDG1-205'].busNo}}</p>
</div> </div>
<div class="finished-row-1-4"> <div
<p>CDA213</p> class="finished-row-1-4"
@click="clickBtn(query['HDG1-206'].busNo)"
v-if="query.hasOwnProperty('HDG1-206') && query['HDG1-206'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-206'].busType, 'HDG1-206')"
>
<p>{{query['HDG1-206'].busNo}}</p>
</div> </div>
<div class="finished-row-1-5"> <div
<p>CDA213</p> class="finished-row-1-5"
@click="clickBtn(query['HDG1-207'].busNo)"
v-if="query.hasOwnProperty('HDG1-207') && query['HDG1-207'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-207'].busType, 'HDG1-207')"
>
<p>{{query['HDG1-207'].busNo}}</p>
</div> </div>
<!-- 第二行 --> <!-- 第二行 -->
<div class="finished-row-2-1"> <div
<p>CDA213</p> class="finished-row-2-1"
@click="clickBtn(query['HDG1-148'].busNo)"
v-if="query.hasOwnProperty('HDG1-148') && query['HDG1-148'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-148'].busType, 'HDG1-148')"
>
<p>{{query['HDG1-148'].busNo}}</p>
</div> </div>
<div class="finished-row-2-2"> <div
<p>CDA213</p> class="finished-row-2-2"
@click="clickBtn(query['HDG1-164'].busNo)"
v-if="query.hasOwnProperty('HDG1-164') && query['HDG1-164'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-164'].busType, 'HDG1-164')"
>
<p>{{query['HDG1-164'].busNo}}</p>
</div> </div>
<div class="finished-row-2-3"> <div
<p>CDA213</p> class="finished-row-2-3"
@click="clickBtn(query['HDG1-208'].busNo)"
v-if="query.hasOwnProperty('HDG1-208') && query['HDG1-208'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-208'].busType, 'HDG1-208')"
>
<p>{{query['HDG1-208'].busNo}}</p>
</div> </div>
<div class="finished-row-2-4"> <div
<p>CDA213</p> class="finished-row-2-4"
@click="clickBtn(query['HDG1-209'].busNo)"
v-if="query.hasOwnProperty('HDG1-209') && query['HDG1-209'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-209'].busType, 'HDG1-209')"
>
<p>{{query['HDG1-209'].busNo}}</p>
</div> </div>
<div class="finished-row-2-5"> <div
<p>CDA213</p> class="finished-row-2-5"
@click="clickBtn(query['HDG1-210'].busNo)"
v-if="query.hasOwnProperty('HDG1-210') && query['HDG1-210'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-210'].busType, 'HDG1-210')"
>
<p>{{query['HDG1-210'].busNo}}</p>
</div> </div>
<!-- 第三行 --> <!-- 第三行 -->
<div class="finished-row-3-1"> <div
<p>CDA213</p> class="finished-row-3-1"
@click="clickBtn(query['HDG1-149'].busNo)"
v-if="query.hasOwnProperty('HDG1-149') && query['HDG1-149'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-149'].busType, 'HDG1-149')"
>
<p>{{query['HDG1-149'].busNo}}</p>
</div> </div>
<div class="finished-row-3-2"> <div
<p>CDA213</p> class="finished-row-3-2"
@click="clickBtn(query['HDG1-165'].busNo)"
v-if="query.hasOwnProperty('HDG1-165') && query['HDG1-165'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-165'].busType, 'HDG1-165')"
>
<p>{{query['HDG1-165'].busNo}}</p>
</div> </div>
<div class="finished-row-3-3"> <div
<p>CDA213</p> class="finished-row-3-3"
@click="clickBtn(query['HDG1-211'].busNo)"
v-if="query.hasOwnProperty('HDG1-211') && query['HDG1-211'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-211'].busType, 'HDG1-211')"
>
<p>{{query['HDG1-211'].busNo}}</p>
</div> </div>
<div class="finished-row-3-4"> <div
<p>CDA213</p> class="finished-row-3-4"
@click="clickBtn(query['HDG1-212'].busNo)"
v-if="query.hasOwnProperty('HDG1-212') && query['HDG1-212'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-212'].busType, 'HDG1-212')"
>
<p>{{query['HDG1-212'].busNo}}</p>
</div> </div>
<div class="finished-row-3-5"> <div
<p>CDA213</p> class="finished-row-3-5"
@click="clickBtn(query['HDG1-213'].busNo)"
v-if="query.hasOwnProperty('HDG1-213') && query['HDG1-213'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-213'].busType, 'HDG1-213')"
>
<p>{{query['HDG1-213'].busNo}}</p>
</div> </div>
<!-- 涂装车出 --> <!-- 涂装车出 -->
<div class="paint-car-out"> <div
<p>CDA213</p> class="paint-car-out"
@click="clickBtn(query['HXG2-1'].busNo)"
v-if="query.hasOwnProperty('HXG2-1') && query['HXG2-1'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HXG2-1'].busType, 'HXG2-1')"
>
<p>{{query['HXG2-1'].busNo}}</p>
</div> </div>
</div> </div>
<!-- 实时车辆 -->
<div class="onlineNum">
<p>总量 <span>{{ this.onlineNum? this.onlineNum : '0' }}</span></p>
</div>
<Tooltip
ref="toolRef"
:query="BusInformation"
></Tooltip>
</div> </div>
</template> </template>
<script> <script>
export default { import Tooltip from './Tooltip';
data () { export default {
return {} components: {
Tooltip
},
data () {
return {
// 成品车作业区实时信息
query: {},
// 轮询定时器
timer: {},
// 当前在线人数
onlineNum: null,
// 车辆定位数据
carPostionInfo: {},
// 根据车身号获得当前车体信息
BusInformation: {
saleOrderNo: '2019-10-11 11:09',
planOrderNo: '83848484',
code: 'EDSCSFDGVG',
busType: 'car',
orderSize: '2222222255555550',
unit: 'From China',
shop: '二号车间',
line: '4-25'
}
};
},
mounted () {
this.pollingGetInterface();
},
beforeDestroy () {
clearInterval(this.timer);
},
methods: {
// 获取成品车作业区实时信息
getFinishedCarInformation () {
this.$fetch('area-controller/realTime-get', { areaNo: '7' }).then(
res => {
console.log(res);
for (let item of res) {
if (item.code === '7') {
this.query = item.stationMap;
// 获取当前在线人数
this.onlineNum = _.clone(item.onlineNum);
console.log(this.onlineNum);
break;
}
}
}
);
},
// 点击车位弹出车体信息
clickBtn (row) {
console.log(row);
this.$refs.toolRef.$refs.tooltip.style.visibility = 'visible';
let left = window.event.clientX;
let top = window.event.clientY;
this.$refs.toolRef.$refs.tooltip.style.top = top - 100 + 'px';
this.$refs.toolRef.$refs.tooltip.style.left = left - 100 + 'px';
this.$fetch('area-controller/busNo-get', { busNo: row })
.then(res => {
console.log('res', res);
})
.catch(error => {
reject(error);
});
},
// 解析车体类型及车体定位样式
judgeCarTypeAndcarStationstyle (outOrIn, station) {
// 判断有无车体定位信息
if (this.carPostionInfo.hasOwnProperty(station)) {
return 'isPositioned';
} else {
if (outOrIn === 'OTHER') {
return 'carOutFactory';
} else {
return '';
}
}
},
// 查询车辆定位
getCarPostion () {
let queryParams = { orderNo: '1111', workOrderNo: '' };
// 请求接口
this.$fetch('area-controller/busNo-get', { queryParams }).then(
res => {
this.carPostionInfo = _.cloneDeep(res);
}
);
},
// 轮询请求接口
pollingGetInterface () {
// 查询车辆定位
if (
this.$route.query.hasOwnProperty('orderNo') ||
this.$route.query.hasOwnProperty('workOrderNo')
) {
this.getCarPostion();
}
// 获取成品车作业区实时信息
this.getFinishedCarInformation();
this.timer = setInterval(() => {
this.carPostionInfo = {};
// 获取成品车作业区实时信息
this.getFinishedCarInformation();
}, 20000);
} }
} }
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.page-pack { .page-pack {
min-height: 100%; min-height: 100%;
background: rgba(0, 7, 12, 1); background: rgba(0, 7, 12, 1);
.onlineNum {
.container-pack { position: absolute;
position: relative; color: #ffffff;
margin: 0 auto; z-index: 999;
width: 1600px; right: 300px;
height: 900px; top: 50px;
background: url("../../../assets/images/Monitor/monitor_finished_car.png"); color: #00b4ff;
font-size: 16px;
font-weight: 750;
span {
margin: 30px;
font-size: 24px;
}
}
.container-pack {
position: relative;
margin: 0 auto;
width: 1600px;
height: 900px;
background: url("../../../assets/images/Monitor/monitor_finished_car.png");
div { div {
position: absolute; position: absolute;
width: 140px; width: 140px;
height: 50px; height: 50px;
cursor: pointer; cursor: pointer;
background: url('../../../assets/images/Monitor/monitor_car.png') no-repeat; background: url("../../../assets/images/Monitor/monitor_car.png")
background-size: 35px 18px; no-repeat;
background-position: 0 16px; background-size: 35px 18px;
background-position: 0 16px;
p { p {
font-size: 14px; font-size: 14px;
margin: 0; margin: 0;
color: #ffffff; color: #ffffff;
font-weight: bold; font-weight: bold;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
}
} }
}
// 第一行 // 第一行
.finished-row-1-1 { .finished-row-1-1 {
top: 395px; top: 395px;
left: 200px; left: 200px;
} }
.finished-row-1-2 { .finished-row-1-2 {
top: 395px; top: 395px;
left: 365px; left: 365px;
} }
.finished-row-1-3 { .finished-row-1-3 {
top: 395px; top: 395px;
left: 680px; left: 680px;
} }
.finished-row-1-4 { .finished-row-1-4 {
top: 395px; top: 395px;
left: 830px; left: 830px;
} }
.finished-row-1-5 { .finished-row-1-5 {
top: 395px; top: 395px;
left: 1010px; left: 1010px;
} }
// 第二行 // 第二行
.finished-row-2-1 { .finished-row-2-1 {
top: 442px; top: 442px;
left: 200px; left: 200px;
} }
.finished-row-2-2 { .finished-row-2-2 {
top: 442px; top: 442px;
left: 365px; left: 365px;
} }
.finished-row-2-3 { .finished-row-2-3 {
top: 442px; top: 442px;
left: 680px; left: 680px;
} }
.finished-row-2-4 { .finished-row-2-4 {
top: 442px; top: 442px;
left: 830px; left: 830px;
} }
.finished-row-2-5 { .finished-row-2-5 {
top: 442px; top: 442px;
left: 1010px; left: 1010px;
} }
// 第三行 // 第三行
.finished-row-3-1 { .finished-row-3-1 {
top: 495px; top: 495px;
left: 200px; left: 200px;
} }
.finished-row-3-2 { .finished-row-3-2 {
top: 495px; top: 495px;
left: 365px; left: 365px;
} }
.finished-row-3-3 { .finished-row-3-3 {
top: 495px; top: 495px;
left: 680px; left: 680px;
} }
.finished-row-3-4 { .finished-row-3-4 {
top: 495px; top: 495px;
left: 830px; left: 830px;
} }
.finished-row-3-5 { .finished-row-3-5 {
top: 495px; top: 495px;
left: 1010px; left: 1010px;
} }
// 涂装车出 // 涂装车出
.paint-car-out { .paint-car-out {
top: 435px; top: 435px;
left: 1325px; left: 1325px;
} }
.carOutFactory {
background: url("../../../assets/images/Monitor/monitor_car_external.png")
no-repeat;
background-size: 35px 18px;
background-position: 0 16px;
}
.isPositioned {
background: url("../../../assets/images/Monitor/monitor_position_car.gif")
no-repeat;
background-size: 35px 18px;
background-position: 0 16px;
} }
} }
}
</style> </style>
src/views/Monitor/components/MiddleCoat.vue
View file @ 1c2cf687
<template> <template>
<div class="page-body"> <div class="page-body">
<div class="coat-content"> <div class="coat-content">
<div class="coat-row-1-1"> <div
<p>CDA23323</p> class="coat-row-1-1"
@click="clickBtn(query['HDG1-115'].busNo)"
v-if="query.hasOwnProperty('HDG1-115') && query['HDG1-115'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-115'].busType, 'HDG1-115')"
>
<p>{{query['HDG1-115'].busNo}}</p>
</div> </div>
<div class="coat-row-1-2"> <div
<p>CDA2333</p> class="coat-row-1-2"
@click="clickBtn(query['HDG1-116'].busNo)"
v-if="query.hasOwnProperty('HDG1-116') && query['HDG1-116'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-116'].busType, 'HDG1-116')"
>
<p>{{query['HDG1-116'].busNo}}</p>
</div> </div>
<div class="coat-row-1-3"> <div
<p>CDA23</p> class="coat-row-1-3"
@click="clickBtn(query['HDG1-117'].busNo)"
v-if="query.hasOwnProperty('HDG1-117') && query['HDG1-117'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-117'].busType, 'HDG1-117')"
>
<p>{{query['HDG1-117']}}</p>
</div> </div>
<div class="coat-row-1-4"> <div
<p>CDA2</p> class="coat-row-1-4"
@click="clickBtn(query['HDG1-118'].busNo)"
v-if="query.hasOwnProperty('HDG1-118') && query['HDG1-118'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-118'].busType, 'HDG1-118')"
>
<p>{{query['HDG1-118']}}</p>
</div> </div>
<div class="coat-row-1-5"> <div
<p>CDA231312</p> class="coat-row-1-5"
@click="clickBtn(query['HDG1-119'].busNo)"
v-if="query.hasOwnProperty('HDG1-119') && query['HDG1-119'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-119'].busType, 'HDG1-119')"
>
<p>{{query['HDG1-119'].busNo}}</p>
</div> </div>
<!-- 第二行 --> <!-- 第二行 -->
<div class="coat-row-2-1"> <div
<p>CDA23323</p> class="coat-row-2-1"
@click="clickBtn(query['HDG1-120'].busNo)"
v-if="query.hasOwnProperty('HDG1-120') && query['HDG1-120'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-120'].busType, 'HDG1-120')"
>
<p>{{query['HDG1-120'].busNo}}</p>
</div> </div>
<div class="coat-row-2-2"> <div
<p>CDA2333</p> class="coat-row-2-2"
@click="clickBtn(query['HDG1-121'].busNo)"
v-if="query.hasOwnProperty('HDG1-121') && query['HDG1-121'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-121'].busType, 'HDG1-121')"
>
<p>{{query['HDG1-121'].busNo}}</p>
</div> </div>
<div class="coat-row-2-3"> <div
<p>CDA23</p> class="coat-row-2-3"
@click="clickBtn(query['HDG1-122'].busNo)"
v-if="query.hasOwnProperty('HDG1-122') && query['HDG1-122'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-122'].busType, 'HDG1-122')"
>
<p>{{query['HDG1-122'].busNo}}</p>
</div> </div>
<div class="coat-row-2-4"> <div
<p>CDA2</p> class="coat-row-2-4"
@click="clickBtn(query['HDG1-123'].busNo)"
v-if="query.hasOwnProperty('HDG1-123') && query['HDG1-123'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-123'].busType, 'HDG1-123')"
>
<p>{{query['HDG1-123'].busNo}}</p>
</div> </div>
<div class="coat-row-2-5"> <div
<p>CDA231312</p> class="coat-row-2-5"
@click="clickBtn(query['HDG1-124'].busNo)"
v-if="query.hasOwnProperty('HDG1-124') && query['HDG1-124'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-124'].busType, 'HDG1-124')"
>
<p>{{query['HDG1-124'].busNo}}</p>
</div> </div>
<div class="coat-row-2-6"> <div
<p>CDA231312</p> class="coat-row-2-6"
@click="clickBtn(query['HDG5-18'].busNo)"
v-if="query.hasOwnProperty('HDG5-18') && query['HDG5-18'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG5-18'].busType, 'HDG5-18')"
>
<p>{{query['HDG5-18']}}</p>
</div> </div>
<!-- 第三行 --> <!-- 第三行 -->
<div class="coat-row-3-1"> <div
<p>CDA23323</p> class="coat-row-3-1"
@click="clickBtn(query['HDG1-125'].busNo)"
v-if="query.hasOwnProperty('HDG1-125') && query['HDG1-125'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-125'].busType, 'HDG1-125')"
>
<p>{{query['HDG1-125'].busNo}}</p>
</div> </div>
<div class="coat-row-3-2"> <div
<p>CDA2333</p> class="coat-row-3-2"
@click="clickBtn(query['HDG1-126'].busNo)"
v-if="query.hasOwnProperty('HDG1-126') && query['HDG1-126'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-126'].busType, 'HDG1-126')"
>
<p>{{query['HDG1-126'].busNo}}</p>
</div> </div>
<div class="coat-row-3-3"> <div
<p>CDA23</p> class="coat-row-3-3"
@click="clickBtn(query['HDG1-127'].busNo)"
v-if="query.hasOwnProperty('HDG1-127') && query['HDG1-127'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-127'].busType, 'HDG1-127')"
>
<p>{{query['HDG1-127'].busNo}}</p>
</div> </div>
<div class="coat-row-3-4"> <div
<p>CDA2</p> class="coat-row-3-4"
@click="clickBtn(query['HDG1-128'].busNo)"
v-if="query.hasOwnProperty('HDG1-128') && query['HDG1-128'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-128'].busType, 'HDG1-128')"
>
<p>{{query['HDG1-128'].busNo}}</p>
</div> </div>
<div class="coat-row-3-5"> <div
<p>CDA231312</p> class="coat-row-3-5"
@click="clickBtn(query['HDG1-129'].busNo)"
v-if="query.hasOwnProperty('HDG1-129') && query['HDG1-129'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-129'].busType, 'HDG1-129')"
>
<p>{{query['HDG1-129'].busNo}}</p>
</div> </div>
<div class="coat-row-3-6"> <div
<p>CDA231312</p> class="coat-row-3-6"
@click="clickBtn(query['HDG5-19'].busNo)"
v-if="query.hasOwnProperty('HDG5-19') && query['HDG5-19'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG5-19'].busType, 'HDG5-19')"
>
<p>{{query['HDG5-19'].busNo}}</p>
</div> </div>
<!-- 第四行 --> <!-- 第四行 -->
<div class="coat-row-4-1"> <div
<p>CDA23323</p> class="coat-row-4-1"
@click="clickBtn(query['HDG1-130'].busNo)"
v-if="query.hasOwnProperty('HDG1-130') && query['HDG1-130'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-130'].busType, 'HDG1-130')"
>
<p>{{query['HDG1-130'].busNo}}</p>
</div> </div>
<div class="coat-row-4-2"> <div
<p>CDA2333</p> class="coat-row-4-2"
@click="clickBtn(query['HDG1-131'].busNo)"
v-if="query.hasOwnProperty('HDG1-131') && query['HDG1-131'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-131'].busType, 'HDG1-131')"
>
<p>{{query['HDG1-131'].busNo}}</p>
</div> </div>
<div class="coat-row-4-3"> <div
<p>CDA23</p> class="coat-row-4-3"
@click="clickBtn(query['HDG1-132'].busNo)"
v-if="query.hasOwnProperty('HDG1-132') && query['HDG1-132'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-132'].busType, 'HDG1-132')"
>
<p>{{query['HDG1-132'].busNo}}</p>
</div> </div>
<div class="coat-row-4-4"> <div
<p>CDA2</p> class="coat-row-4-4"
@click="clickBtn(query['HDG1-133'].busNo)"
v-if="query.hasOwnProperty('HDG1-133') && query['HDG1-133'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-133'].busType, 'HDG1-133')"
>
<p>{{query['HDG1-133'].busNo}}</p>
</div> </div>
<div class="coat-row-4-5"> <div
<p>CDA231312</p> class="coat-row-4-5"
@click="clickBtn(query['HDG5-20'].busNo)"
v-if="query.hasOwnProperty('HDG5-20') && query['HDG5-20'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG5-20'].busType, 'HDG5-20')"
>
<p>{{query['HDG5-20'].busNo}}</p>
</div>
<!-- 实时车辆 -->
<div class="onlineNum">
<p>总量 <span>{{ this.onlineNum? this.onlineNum : '0' }}</span></p>
</div> </div>
</div> </div>
<Tooltip
ref="toolRef"
:query="BusInformation"
></Tooltip>
</div> </div>
</template> </template>
<script> <script>
...@@ -78,27 +196,141 @@ ...@@ -78,27 +196,141 @@
* @author MARS 2019-09-28 <wangyunfan@vtstar.net> * @author MARS 2019-09-28 <wangyunfan@vtstar.net>
* @fileoverview 中涂作业区 * @fileoverview 中涂作业区
*/ */
import Tooltip from './Tooltip';
export default { export default {
components: {
Tooltip
},
data () { data () {
return {} return {
// 中涂作业区实时信息
query: {},
// 轮询定时器
timer: {},
// 当前在线人数
onlineNum: null,
// 车辆定位数据
carPostionInfo: {},
// 根据车身号获得当前车体信息
BusInformation: {
saleOrderNo: '2019-10-11 11:09',
planOrderNo: '83848484',
code: 'EDSCSFDGVG',
busType: 'car',
orderSize: '2222222255555550',
unit: 'From China',
shop: '二号车间',
line: '4-25'
}
};
}, },
mounted () {}, mounted () {
this.pollingGetInterface();
methods: {} },
} beforeDestroy () {
clearInterval(this.timer);
},
methods: {
// 获取中涂作业区实时信息
getMiddleCoatInformation () {
this.$fetch('area-controller/realTime-get', { areaNo: '5' }).then(
res => {
for (let item of res) {
if (item.code === '5') {
this.query = item.stationMap;
// 获取当前在线人数
this.onlineNum = _.clone(item.onlineNum);
console.log(this.onlineNum);
break;
}
}
}
);
},
// 点击车位弹出车体信息
clickBtn (row) {
console.log(row);
this.$refs.toolRef.$refs.tooltip.style.visibility = 'visible';
let left = window.event.clientX;
let top = window.event.clientY;
this.$refs.toolRef.$refs.tooltip.style.top = top - 100 + 'px';
this.$refs.toolRef.$refs.tooltip.style.left = left - 100 + 'px';
this.$fetch('area-controller/busNo-get', { busNo: row })
.then(res => {
console.log('res', res);
})
.catch(error => {
reject(error);
});
},
// 解析车体类型及车体定位样式
judgeCarTypeAndcarStationstyle (outOrIn, station) {
// 判断有无车体定位信息
if (this.carPostionInfo.hasOwnProperty(station)) {
return 'isPositioned';
} else {
if (outOrIn === 'OTHER') {
return 'carOutFactory';
} else {
return '';
}
}
},
// 查询车辆定位
getCarPostion () {
let queryParams = { orderNo: '1111', workOrderNo: '' };
// 请求接口
this.$fetch('area-controller/busNo-get', { queryParams }).then(
res => {
this.carPostionInfo = _.cloneDeep(res);
}
);
},
// 轮询请求接口
pollingGetInterface () {
// 查询车辆定位
if (
this.$route.query.hasOwnProperty('orderNo') ||
this.$route.query.hasOwnProperty('workOrderNo')
) {
this.getCarPostion();
}
// 获取电泳作业区实时信息
this.getMiddleCoatInformation();
this.timer = setInterval(() => {
this.carPostionInfo = {};
// 获取电泳作业区实时信息
this.getMiddleCoatInformation();
}, 20000);
}
}
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.page-body { .page-body {
min-height: 100%; min-height: 100%;
background: rgba(0, 7, 12, 1); background: rgba(0, 7, 12, 1);
.onlineNum {
position: absolute;
color: #ffffff;
z-index: 999;
right: 300px;
top: 50px;
color: #00b4ff;
font-size: 16px;
font-weight: 750;
span {
margin: 30px;
font-size: 24px;
}
}
.coat-content { .coat-content {
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
width: 1600px; width: 1600px;
height: 900px; height: 900px;
background: url('../../../assets/images/Monitor/coat-bg.png') no-repeat; background: url("../../../assets/images/Monitor/coat-bg.png") no-repeat;
.coat-row-1-1, .coat-row-1-1,
.coat-row-1-2, .coat-row-1-2,
...@@ -123,15 +355,16 @@ export default { ...@@ -123,15 +355,16 @@ export default {
.coat-row-4-4, .coat-row-4-4,
.coat-row-4-5 { .coat-row-4-5 {
position: absolute; position: absolute;
width: 140px; width: 100px;
height: 50px; height: 50px;
cursor: pointer; cursor: pointer;
background: url('../../../assets/images/Monitor/monitor_car.png') no-repeat; background: url("../../../assets/images/Monitor/monitor_car.png")
no-repeat;
background-size: 35px 18px; background-size: 35px 18px;
background-position: 0 16px; background-position: 0 16px;
p { p {
font-size: 14px; font-size: 12px;
margin: 0; margin: 0;
color: #ffffff; color: #ffffff;
font-weight: bold; font-weight: bold;
...@@ -232,6 +465,18 @@ export default { ...@@ -232,6 +465,18 @@ export default {
top: 603px; top: 603px;
left: 1260px; left: 1260px;
} }
.carOutFactory {
background: url("../../../assets/images/Monitor/monitor_car_external.png")
no-repeat;
background-size: 35px 18px;
background-position: 0 16px;
}
.isPositioned {
background: url("../../../assets/images/Monitor/monitor_position_car.gif")
no-repeat;
background-size: 35px 18px;
background-position: 0 16px;
}
} }
} }
</style> </style>
src/views/Monitor/components/Putty.vue
View file @ 1c2cf687
<template> <template>
<div class="page-body"> <div class="page-body">
<div class="putty-content"> <div class="putty-content">
<div class="putty-row-1-1"> <div
<p>CDA233231231231321312</p> class="putty-row-1-1"
@click="clickBtn(query['HDG1-95'].busNo)"
v-if="query.hasOwnProperty('HDG1-95') && query['HDG1-95'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-95'].busType, 'HDG1-95')"
>
<p>{{ query['HDG1-95'].busNo }}</p>
</div> </div>
<div class="putty-row-1-2"> <div
<p>CDA213</p> class="putty-row-1-2"
@click="clickBtn(query['HDG1-96'].busNo)"
v-if="query.hasOwnProperty('HDG1-96') && query['HDG1-96'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-96'].busType, 'HDG1-96')"
>
<p>{{query['HDG1-96'].busNo}}</p>
</div> </div>
<div class="putty-row-1-3"> <div
<p>CDA213</p> class="putty-row-1-3"
@click="clickBtn(query['HDG1-97'].busNo)"
v-if="query.hasOwnProperty('HDG1-97') && query['HDG1-97'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-97'].busType, 'HDG1-97')"
>
<p>{{query['HDG1-97'].busNo}}</p>
</div> </div>
<div class="putty-row-1-4"> <div
<p>CDA213</p> class="putty-row-1-4"
@click="clickBtn(query['HDG1-98'].busNo)"
v-if="query.hasOwnProperty('HDG1-98') && query['HDG1-98'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-98'].busType, 'HDG1-98')"
>
<p>{{query['HDG1-98'].busNo}}</p>
</div> </div>
<div class="putty-row-1-5"> <div
<p>CDA213</p> class="putty-row-1-5"
@click="clickBtn(query['HDG1-99'].busNo)"
v-if="query.hasOwnProperty('HDG1-99') && query['HDG1-99'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-99'].busType, 'HDG1-99')"
>
<p>{{query['HDG1-99'].busNo}}</p>
</div> </div>
<div class="putty-row-1-6"> <div
<p>CDA213</p> class="putty-row-1-6"
@click="clickBtn(query['HDG5-13'].busNo)"
v-if="query.hasOwnProperty('HDG5-13') && query['HDG5-13'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG5-13'].busType, 'HDG5-13')"
>
<p>{{query['HDG5-13'].busNo}}</p>
</div> </div>
<div class="putty-row-2-1"> <div
<p>CDA213</p> class="putty-row-2-1"
@click="clickBtn(query['HDG1-100'].busNo)"
v-if="query.hasOwnProperty('HDG1-100') && query['HDG1-100'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-100'].busType, 'HDG1-100')"
>
<p>{{query['HDG1-100'].busNo}}</p>
</div> </div>
<div class="putty-row-2-2"> <div
<p>CDA213</p> class="putty-row-2-2"
@click="clickBtn(query['HDG1-101'].busNo)"
v-if="query.hasOwnProperty('HDG1-101') && query['HDG1-101'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-101'].busType, 'HDG1-101')"
>
<p>{{query['HDG1-101'].busNo}}</p>
</div> </div>
<div class="putty-row-2-3"> <div
<p>CDA213</p> class="putty-row-2-3"
@click="clickBtn(query['HDG1-102'].busNo)"
v-if="query.hasOwnProperty('HDG1-102') && query['HDG1-102'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-102'].busType, 'HDG1-102')"
>
<p>{{query['HDG1-102'].busNo}}</p>
</div> </div>
<div class="putty-row-2-4"> <div
<p>CDA213</p> class="putty-row-2-4"
@click="clickBtn(query['HDG1-103'].busNo)"
v-if="query.hasOwnProperty('HDG1-103') && query['HDG1-103'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-103'].busType, 'HDG1-103')"
>
<p>{{query['HDG1-103'].busNo}}</p>
</div> </div>
<div class="putty-row-2-5"> <div
<p>CDA213</p> class="putty-row-2-5"
@click="clickBtn(query['HDG1-104'].busNo)"
v-if="query.hasOwnProperty('HDG1-104') && query['HDG1-104'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-104'].busType, 'HDG1-104')"
>
<p>{{query['HDG1-104'].busNo}}</p>
</div> </div>
<div class="putty-row-2-6"> <div
<p>CDA213</p> class="putty-row-2-6"
@click="clickBtn(query['HDG5-14'].busNo)"
v-if="query.hasOwnProperty('HDG5-14') && query['HDG5-14'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG5-14'].busType, 'HDG5-14')"
>
<p>{{query['HDG5-14'].busNo}}</p>
</div> </div>
<div class="putty-row-3-1"> <div
<p>CDA213</p> class="putty-row-3-1"
@click="clickBtn(query['HDG1-105'].busNo)"
v-if="query.hasOwnProperty('HDG1-105') && query['HDG1-105'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-105'].busType, 'HDG1-105')"
>
<p>{{query['HDG1-105'].busNo}}</p>
</div> </div>
<div class="putty-row-3-2"> <div
<p>CDA213</p> class="putty-row-3-2"
@click="clickBtn(query['HDG1-106'].busNo)"
v-if="query.hasOwnProperty('HDG1-106') && query['HDG1-106'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-106'].busType, 'HDG1-106')"
>
<p>{{query['HDG1-106']}}</p>
</div> </div>
<div class="putty-row-3-3"> <div
<p>CDA213</p> class="putty-row-3-3"
@click="clickBtn(query['HDG1-107'].busNo)"
v-if="query.hasOwnProperty('HDG1-107') && query['HDG1-107'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-107'].busType, 'HDG1-107')"
>
<p>{{query['HDG1-107'].busNo}}</p>
</div> </div>
<div class="putty-row-3-4"> <div
<p>CDA213</p> class="putty-row-3-4"
@click="clickBtn(query['HDG1-108'].busNo)"
v-if="query.hasOwnProperty('HDG1-108') && query['HDG1-108'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-108'].busType, 'HDG1-108')"
>
<p>{{query['HDG1-108'].busNo}}</p>
</div> </div>
<div class="putty-row-3-5"> <div
<p>CDA213</p> class="putty-row-3-5"
@click="clickBtn(query['HDG1-109'].busNo)"
v-if="query.hasOwnProperty('HDG1-109') && query['HDG1-109'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-109'].busType, 'HDG1-109')"
>
<p>{{query['HDG1-109'].busNo}}</p>
</div> </div>
<div class="putty-row-3-6"> <div
<p>CDA213</p> class="putty-row-3-6"
@click="clickBtn(query['HDG5-15'].busNo)"
v-if="query.hasOwnProperty('HDG5-15') && query['HDG5-15'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG5-15'].busType, 'HDG5-15')"
>
<p>{{query['HDG5-15'].busNo}}</p>
</div> </div>
<div class="putty-row-4-1"> <div
<p>CDA213</p> class="putty-row-4-1"
@click="clickBtn(query['HDG1-110'].busNo)"
v-if="query.hasOwnProperty('HDG1-110') && query['HDG1-110'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-110'].busType, 'HDG1-110')"
>
<p>{{query['HDG1-110'].busNo}}</p>
</div> </div>
<div class="putty-row-4-2"> <div
<p>CDA213</p> class="putty-row-4-2"
@click="clickBtn(query['HDG1-111'].busNo)"
v-if="query.hasOwnProperty('HDG1-111') && query['HDG1-111'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-111'].busType, 'HDG1-111')"
>
<p>{{query['HDG1-111'].busNo}}</p>
</div> </div>
<div class="putty-row-4-3"> <div
<p>CDA213</p> class="putty-row-4-3"
@click="clickBtn(query['HDG1-112'].busNo)"
v-if="query.hasOwnProperty('HDG1-112') && query['HDG1-112'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-112'].busType, 'HDG1-112')"
>
<p>{{query['HDG1-112'].busNo}}</p>
</div> </div>
<div class="putty-row-4-4"> <div
<p>CDA213</p> class="putty-row-4-4"
@click="clickBtn(query['HDG1-113'].busNo)"
v-if="query.hasOwnProperty('HDG1-113') && query['HDG1-113'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-113'].busType, 'HDG1-113')"
>
<p>{{query['HDG1-113'].busNo}}</p>
</div> </div>
<div class="putty-row-4-5"> <div
<p>CDA213</p> class="putty-row-4-5"
@click="clickBtn(query['HDG1-114'].busNo)"
v-if="query.hasOwnProperty('HDG1-114') && query['HDG1-114'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-114'].busType, 'HDG1-114')"
>
<p>{{query['HDG1-114'].busNo}}</p>
</div> </div>
<div class="putty-row-4-6"> <div
<p>CDA213</p> class="putty-row-4-6"
@click="clickBtn(query['HDG5-16'].busNo)"
v-if="query.hasOwnProperty('HDG5-16') && query['HDG5-16'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG5-16'].busType, 'HDG5-16')"
>
<p>{{query['HDG5-16'].busNo}}</p>
</div> </div>
<div <div
v-popover:nasdsd
class="putty-row-5-6" class="putty-row-5-6"
@click="showPopover(data, data.pr56, 'popover2')" @click="clickBtn(query['HDG5-17'].busNo)"
v-if="query.hasOwnProperty('HDG5-17') && query['HDG5-17'].state !== 'FREE'"
:class="judgeCarTypeAndcarStationstyle(query['HDG5-17'].busType, 'HDG5-17')"
> >
<p>{{ data.pr56.name }}</p> <p>{{query['HDG5-17'].busNo}}</p>
</div> </div>
</div> </div>
<el-popover <!-- 实时车辆 -->
:ref="item.name" <div class="onlineNum">
v-for="(item, index) in options" <p>总量 <span>{{ this.onlineNum? this.onlineNum : '0' }}</span></p>
:key="Math.random(index)" </div>
placement="top" <!-- 信息展示弹窗 -->
width="300" <Tooltip
trigger="click" ref="toolRef"
:query="BusInformation"
> >
<div class="flex-content"> </Tooltip>
<p>111: <span>{{ item.car }}</span></p>
<p>111: <span>{{ item.code }}</span></p>
<p>111: <span>{{ item.name }}</span></p>
<p>111: <span>{{ item.no }}</span></p>
<p>111: <span>{{ item.time }}</span></p>
</div>
</el-popover>
</div> </div>
</template> </template>
<script> <script>
...@@ -104,66 +219,135 @@ ...@@ -104,66 +219,135 @@
* @author MARS 2019-09-28 <wangyunfan@vtstar.net> * @author MARS 2019-09-28 <wangyunfan@vtstar.net>
* @fileoverview 腻子作业区 * @fileoverview 腻子作业区
*/ */
import Tooltip from './Tooltip';
export default { export default {
components: {
Tooltip
},
data () { data () {
return { return {
show: true, // 定时器
data: { timer: null,
pr56: { // 腻子作业区实时信息
name: 'nasdsd',
code: '这是编码啊',
no: '2233123',
time: '2019-09-29',
car: '中通客车'
},
pr51: {
name: 'qqqname',
code: 'qqq这是编码啊',
no: 'qqq2233123',
time: '2222019-09-29',
car: '中通222客车'
}
},
query: {}, query: {},
popover: null, // 根据车身号获取当前车体区域信息
options: [] BusInformation: {},
} // 车辆定位数据
carPostionInfo: {},
// 当前在线人数
onlineNum: null
};
}, },
mounted () {}, mounted () {
this.pollingGetInterface();
},
methods: { methods: {
/** // 获取腻子作业区实时信息
* @method 点击展示popover getPuttyInformation () {
* @description this.$fetch('area-controller/realTime-get', { areaNo: '4' })
*/ .then(res => {
showPopover (data, val, item) { for (let item of res) {
let keys = [] if (item.code === '4') {
let values = [] this.query = item.stationMap;
for (let key in data) { // 获取当前在线人数
keys.push(key) this.onlineNum = _.clone(item.onlineNum);
values.push(data[key]) console.log(this.onlineNum);
break;
}
}
})
.catch(error => {
reject(error);
});
},
// 解析车体类型及车体定位样式
judgeCarTypeAndcarStationstyle (outOrIn, station) {
// 判断有无车体定位信息
if (this.carPostionInfo.hasOwnProperty(station)) {
return 'isPositioned';
} else {
if (outOrIn === 'OTHER') {
return 'carOutFactory';
} else {
return '';
}
} }
let newArr = [] },
newArr = _.cloneDeep(values) // 点击车辆工位
this.options = newArr.filter(item => val.name === item.name) clickBtn (busNub) {
console.log(this.options) console.log(busNub);
console.log(this.$refs.nasdsd) let left = window.event.clientX;
let top = window.event.clientY;
console.log('left', left);
console.log('top', top);
this.$refs.toolRef.$refs.tooltip.style.visibility = 'visible';
this.$refs.toolRef.$refs.tooltip.style.top = `${top - 100}px`;
this.$refs.toolRef.$refs.tooltip.style.left = `${left}px`;
this.$fetch('area-controller/busNo-get', { busNo: busNub })
.then(res => {
console.log('res', res);
// this.BusInformation = _.cloneDeep(res);
})
.catch(error => {
reject(error);
});
},
// 查询车辆定位
getCarPostion () {
let queryParams = { orderNo: '', workOrderNo: '' };
// 请求接口
this.$fetch('area-controller/busNo-get', { queryParams }).then(
res => {
this.carPostionInfo = _.cloneDeep(res);
}
);
},
// 轮询请求接口
pollingGetInterface () {
// 查询车辆定位
if (
this.$route.query.hasOwnProperty('orderNo') ||
this.$route.query.hasOwnProperty('workOrderNo')
) {
this.getCarPostion();
}
// 获取腻子作业区实时信息
this.getPuttyInformation();
this.timer = setInterval(() => {
this.carPostionInfo = {};
// 获取腻子作业区实时信息
this.getPuttyInformation();
}, 20000);
} }
} }
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.page-body { .page-body {
min-height: 100%; min-height: 100%;
background: rgba(0, 7, 12, 1); background: rgba(0, 7, 12, 1);
.onlineNum {
position: absolute;
color: #ffffff;
z-index: 999;
right: 300px;
top: 50px;
color: #00b4ff;
font-size: 16px;
font-weight: 750;
span {
margin: 30px;
font-size: 24px;
}
}
.putty-content { .putty-content {
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
width: 1600px; width: 1600px;
height: 900px; height: 900px;
background: url('../../../assets/images/Monitor/putty-bg.png') no-repeat; background: url("../../../assets/images/Monitor/putty-bg.png") no-repeat;
// ? 公共样式 // ? 公共样式
.putty-row-1-1, .putty-row-1-1,
...@@ -195,7 +379,8 @@ export default { ...@@ -195,7 +379,8 @@ export default {
width: 140px; width: 140px;
height: 50px; height: 50px;
cursor: pointer; cursor: pointer;
background: url('../../../assets/images/Monitor/monitor_car.png') no-repeat; background: url("../../../assets/images/Monitor/monitor_car.png")
no-repeat;
background-size: 35px 18px; background-size: 35px 18px;
background-position: 0 16px; background-position: 0 16px;
...@@ -302,10 +487,21 @@ export default { ...@@ -302,10 +487,21 @@ export default {
.putty-row-5-6 { .putty-row-5-6 {
left: 1256px; left: 1256px;
} }
.putty-row-5-6 { .putty-row-5-6 {
top: 655px; top: 655px;
} }
.carOutFactory {
background: url("../../../assets/images/Monitor/monitor_car_external.png")
no-repeat;
background-size: 35px 18px;
background-position: 0 16px;
}
.isPositioned {
background: url("../../../assets/images/Monitor/monitor_position_car.gif")
no-repeat;
background-size: 35px 18px;
background-position: 0 16px;
}
} }
} }
</style> </style>
src/views/Monitor/components/SealedAnticorrosion.vue
View file @ 1c2cf687
...@@ -3,550 +3,614 @@ ...@@ -3,550 +3,614 @@
<div class="page-pack"> <div class="page-pack">
<div class="container-pack"> <div class="container-pack">
<!-- 第一行 --> <!-- 第一行 -->
<div <div
class="sealed-row-1-1" class="sealed-row-1-1"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-57') && sealedAnticorrosion['HDG1-57'].state !== 'FREE'" v-if="sealedAnticorrosion.hasOwnProperty('HDG1-57') && sealedAnticorrosion['HDG1-57'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-57'].busType, 'HDG1-57')" :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-57'].busType, 'HDG1-57')"
@click="doCarStationClick(sealedAnticorrosion['HDG1-57'].busNo)"> @click="doCarStationClick(sealedAnticorrosion['HDG1-57'].busNo)"
>
<p>{{sealedAnticorrosion['HDG1-57'].busNo}}</p> <p>{{sealedAnticorrosion['HDG1-57'].busNo}}</p>
</div> </div>
<div <div
class="sealed-row-1-2" class="sealed-row-1-2"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-67') && sealedAnticorrosion['HDG1-67'].state !== 'FREE'" v-if="sealedAnticorrosion.hasOwnProperty('HDG1-67') && sealedAnticorrosion['HDG1-67'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-67'].busType, 'HDG1-67')" :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-67'].busType, 'HDG1-67')"
@click="doCarStationClick(sealedAnticorrosion['HDG1-67'].busNo)"> @click="doCarStationClick(sealedAnticorrosion['HDG1-67'].busNo)"
>
<p>{{sealedAnticorrosion['HDG1-67'].busNo}}</p> <p>{{sealedAnticorrosion['HDG1-67'].busNo}}</p>
</div> </div>
<div <div
class="sealed-row-1-3" class="sealed-row-1-3"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-68') && sealedAnticorrosion['HDG1-68'].state !== 'FREE'" v-if="sealedAnticorrosion.hasOwnProperty('HDG1-68') && sealedAnticorrosion['HDG1-68'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-68'].busType, 'HDG1-68')" :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-68'].busType, 'HDG1-68')"
@click="doCarStationClick(sealedAnticorrosion['HDG1-68'].busNo)"> @click="doCarStationClick(sealedAnticorrosion['HDG1-68'].busNo)"
>
<p>{{sealedAnticorrosion['HDG1-68'].busNo}}</p> <p>{{sealedAnticorrosion['HDG1-68'].busNo}}</p>
</div> </div>
<div <div
class="sealed-row-1-4" class="sealed-row-1-4"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-69') && sealedAnticorrosion['HDG1-69'].state !== 'FREE'" v-if="sealedAnticorrosion.hasOwnProperty('HDG1-69') && sealedAnticorrosion['HDG1-69'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-69'].busType, 'HDG1-69')" :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-69'].busType, 'HDG1-69')"
@click="doCarStationClick(sealedAnticorrosion['HDG1-69'].busNo)"> @click="doCarStationClick(sealedAnticorrosion['HDG1-69'].busNo)"
>
<p>{{sealedAnticorrosion['HDG1-69'].busNo}}</p> <p>{{sealedAnticorrosion['HDG1-69'].busNo}}</p>
</div> </div>
<div <div
class="sealed-row-1-5" class="sealed-row-1-5"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-70') && sealedAnticorrosion['HDG1-70'].state !== 'FREE'" v-if="sealedAnticorrosion.hasOwnProperty('HDG1-70') && sealedAnticorrosion['HDG1-70'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-70'].busType, 'HDG1-70')" :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-70'].busType, 'HDG1-70')"
@click="doCarStationClick(sealedAnticorrosion['HDG1-70'].busNo)"> @click="doCarStationClick(sealedAnticorrosion['HDG1-70'].busNo)"
>
<p>{{sealedAnticorrosion['HDG1-70'].busNo}}</p> <p>{{sealedAnticorrosion['HDG1-70'].busNo}}</p>
</div> </div>
<!-- 第二行 --> <!-- 第二行 -->
<div <div
class="sealed-row-2-1" class="sealed-row-2-1"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-58') && sealedAnticorrosion['HDG1-58'].state !== 'FREE'" v-if="sealedAnticorrosion.hasOwnProperty('HDG1-58') && sealedAnticorrosion['HDG1-58'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-58'].busType, 'HDG1-58')" :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-58'].busType, 'HDG1-58')"
@click="doCarStationClick(sealedAnticorrosion['HDG1-58'].busNo)"> @click="doCarStationClick(sealedAnticorrosion['HDG1-58'].busNo)"
>
<p>{{sealedAnticorrosion['HDG1-58'].busNo}}</p> <p>{{sealedAnticorrosion['HDG1-58'].busNo}}</p>
</div> </div>
<div <div
class="sealed-row-2-2" class="sealed-row-2-2"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-71') && sealedAnticorrosion['HDG1-71'].state !== 'FREE'" v-if="sealedAnticorrosion.hasOwnProperty('HDG1-71') && sealedAnticorrosion['HDG1-71'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-71'].busType, 'HDG1-71')" :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-71'].busType, 'HDG1-71')"
@click="doCarStationClick(sealedAnticorrosion['HDG1-71'].busNo)"> @click="doCarStationClick(sealedAnticorrosion['HDG1-71'].busNo)"
>
<p>{{sealedAnticorrosion['HDG1-71'].busNo}}</p> <p>{{sealedAnticorrosion['HDG1-71'].busNo}}</p>
</div> </div>
<div <div
class="sealed-row-2-3" class="sealed-row-2-3"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-72') && sealedAnticorrosion['HDG1-72'].state !== 'FREE'" v-if="sealedAnticorrosion.hasOwnProperty('HDG1-72') && sealedAnticorrosion['HDG1-72'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-72'].busType, 'HDG1-72')" :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-72'].busType, 'HDG1-72')"
@click="doCarStationClick(sealedAnticorrosion['HDG1-72'].busNo)"> @click="doCarStationClick(sealedAnticorrosion['HDG1-72'].busNo)"
>
<p>{{sealedAnticorrosion['HDG1-72'].busNo}}</p> <p>{{sealedAnticorrosion['HDG1-72'].busNo}}</p>
</div> </div>
<div <div
class="sealed-row-2-4" class="sealed-row-2-4"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-73') && sealedAnticorrosion['HDG1-73'].state !== 'FREE'" v-if="sealedAnticorrosion.hasOwnProperty('HDG1-73') && sealedAnticorrosion['HDG1-73'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-73'].busType, 'HDG1-73')" :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-73'].busType, 'HDG1-73')"
@click="doCarStationClick(sealedAnticorrosion['HDG1-73'].busNo)"> @click="doCarStationClick(sealedAnticorrosion['HDG1-73'].busNo)"
>
<p>{{sealedAnticorrosion['HDG1-73'].busNo}}</p> <p>{{sealedAnticorrosion['HDG1-73'].busNo}}</p>
</div> </div>
<div <div
class="sealed-row-2-5" class="sealed-row-2-5"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-74') && sealedAnticorrosion['HDG1-74'].state !== 'FREE'" v-if="sealedAnticorrosion.hasOwnProperty('HDG1-74') && sealedAnticorrosion['HDG1-74'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-74'].busType, 'HDG1-74')" :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-74'].busType, 'HDG1-74')"
@click="doCarStationClick(sealedAnticorrosion['HDG1-74'].busNo)"> @click="doCarStationClick(sealedAnticorrosion['HDG1-74'].busNo)"
>
<p>{{sealedAnticorrosion['HDG1-74'].busNo}}</p> <p>{{sealedAnticorrosion['HDG1-74'].busNo}}</p>
</div> </div>
<!-- 第三行 --> <!-- 第三行 -->
<div <div
class="sealed-row-3-1" class="sealed-row-3-1"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-75') && sealedAnticorrosion['HDG1-75'].state !== 'FREE'" v-if="sealedAnticorrosion.hasOwnProperty('HDG1-75') && sealedAnticorrosion['HDG1-75'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-75'].busType, 'HDG1-75')" :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-75'].busType, 'HDG1-75')"
@click="doCarStationClick(sealedAnticorrosion['HDG1-75'].busNo)"> @click="doCarStationClick(sealedAnticorrosion['HDG1-75'].busNo)"
>
<p>{{sealedAnticorrosion['HDG1-75'].busNo}}</p> <p>{{sealedAnticorrosion['HDG1-75'].busNo}}</p>
</div> </div>
<div <div
class="sealed-row-3-2" class="sealed-row-3-2"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-76') && sealedAnticorrosion['HDG1-76'].state !== 'FREE'" v-if="sealedAnticorrosion.hasOwnProperty('HDG1-76') && sealedAnticorrosion['HDG1-76'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-76'].busType, 'HDG1-76')" :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-76'].busType, 'HDG1-76')"
@click="doCarStationClick(sealedAnticorrosion['HDG1-76'].busNo)"> @click="doCarStationClick(sealedAnticorrosion['HDG1-76'].busNo)"
>
<p>{{sealedAnticorrosion['HDG1-76'].busNo}}</p> <p>{{sealedAnticorrosion['HDG1-76'].busNo}}</p>
</div> </div>
<div <div
class="sealed-row-3-3" class="sealed-row-3-3"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-77') && sealedAnticorrosion['HDG1-77'].state !== 'FREE'" v-if="sealedAnticorrosion.hasOwnProperty('HDG1-77') && sealedAnticorrosion['HDG1-77'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-77'].busType, 'HDG1-77')" :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-77'].busType, 'HDG1-77')"
@click="doCarStationClick(sealedAnticorrosion['HDG1-77'].busNo)"> @click="doCarStationClick(sealedAnticorrosion['HDG1-77'].busNo)"
>
<p>{{sealedAnticorrosion['HDG1-77'].busNo}}</p> <p>{{sealedAnticorrosion['HDG1-77'].busNo}}</p>
</div> </div>
<div <div
class="sealed-row-3-4" class="sealed-row-3-4"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-78') && sealedAnticorrosion['HDG1-78'].state !== 'FREE'" v-if="sealedAnticorrosion.hasOwnProperty('HDG1-78') && sealedAnticorrosion['HDG1-78'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-78'].busType, 'HDG1-78')" :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-78'].busType, 'HDG1-78')"
@click="doCarStationClick(sealedAnticorrosion['HDG1-78'].busNo)"> @click="doCarStationClick(sealedAnticorrosion['HDG1-78'].busNo)"
>
<p>{{sealedAnticorrosion['HDG1-78'].busNo}}</p> <p>{{sealedAnticorrosion['HDG1-78'].busNo}}</p>
</div> </div>
<div <div
class="sealed-row-3-5" class="sealed-row-3-5"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-79') && sealedAnticorrosion['HDG1-79'].state !== 'FREE'" v-if="sealedAnticorrosion.hasOwnProperty('HDG1-79') && sealedAnticorrosion['HDG1-79'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-79'].busType, 'HDG1-79')" :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-79'].busType, 'HDG1-79')"
@click="doCarStationClick(sealedAnticorrosion['HDG1-79'].busNo)"> @click="doCarStationClick(sealedAnticorrosion['HDG1-79'].busNo)"
>
<p>{{sealedAnticorrosion['HDG1-79'].busNo}}</p> <p>{{sealedAnticorrosion['HDG1-79'].busNo}}</p>
</div> </div>
<!-- 第四行 --> <!-- 第四行 -->
<div <div
class="sealed-row-4-1" class="sealed-row-4-1"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-80') && sealedAnticorrosion['HDG1-80'].state !== 'FREE'" v-if="sealedAnticorrosion.hasOwnProperty('HDG1-80') && sealedAnticorrosion['HDG1-80'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-80'].busType, 'HDG1-80')" :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-80'].busType, 'HDG1-80')"
@click="doCarStationClick(sealedAnticorrosion['HDG1-80'].busNo)"> @click="doCarStationClick(sealedAnticorrosion['HDG1-80'].busNo)"
>
<p>{{sealedAnticorrosion['HDG1-80'].busNo}}</p> <p>{{sealedAnticorrosion['HDG1-80'].busNo}}</p>
</div> </div>
<div <div
class="sealed-row-4-2" class="sealed-row-4-2"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-81') && sealedAnticorrosion['HDG1-81'].state !== 'FREE'" v-if="sealedAnticorrosion.hasOwnProperty('HDG1-81') && sealedAnticorrosion['HDG1-81'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-81'].busType, 'HDG1-81')" :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-81'].busType, 'HDG1-81')"
@click="doCarStationClick(sealedAnticorrosion['HDG1-81'].busNo)"> @click="doCarStationClick(sealedAnticorrosion['HDG1-81'].busNo)"
>
<p>{{sealedAnticorrosion['HDG1-81'].busNo}}</p> <p>{{sealedAnticorrosion['HDG1-81'].busNo}}</p>
</div> </div>
<div <div
class="sealed-row-4-3" class="sealed-row-4-3"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-82') && sealedAnticorrosion['HDG1-82'].state !== 'FREE'" v-if="sealedAnticorrosion.hasOwnProperty('HDG1-82') && sealedAnticorrosion['HDG1-82'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-82'].busType, 'HDG1-82')" :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-82'].busType, 'HDG1-82')"
@click="doCarStationClick(sealedAnticorrosion['HDG1-82'].busNo)"> @click="doCarStationClick(sealedAnticorrosion['HDG1-82'].busNo)"
>
<p>{{sealedAnticorrosion['HDG1-82'].busNo}}</p> <p>{{sealedAnticorrosion['HDG1-82'].busNo}}</p>
</div> </div>
<div <div
class="sealed-row-4-4" class="sealed-row-4-4"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-83') && sealedAnticorrosion['HDG1-83'].state !== 'FREE'" v-if="sealedAnticorrosion.hasOwnProperty('HDG1-83') && sealedAnticorrosion['HDG1-83'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-83'].busType, 'HDG1-83')" :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-83'].busType, 'HDG1-83')"
@click="doCarStationClick(sealedAnticorrosion['HDG1-83'].busNo)"> @click="doCarStationClick(sealedAnticorrosion['HDG1-83'].busNo)"
>
<p>{{sealedAnticorrosion['HDG1-83'].busNo}}</p> <p>{{sealedAnticorrosion['HDG1-83'].busNo}}</p>
</div> </div>
<div <div
class="sealed-row-4-5" class="sealed-row-4-5"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-84') && sealedAnticorrosion['HDG1-84'].state !== 'FREE'" v-if="sealedAnticorrosion.hasOwnProperty('HDG1-84') && sealedAnticorrosion['HDG1-84'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-84'].busType, 'HDG1-84')" :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-84'].busType, 'HDG1-84')"
@click="doCarStationClick(sealedAnticorrosion['HDG1-84'].busNo)"> @click="doCarStationClick(sealedAnticorrosion['HDG1-84'].busNo)"
>
<p>{{sealedAnticorrosion['HDG1-84'].busNo}}</p> <p>{{sealedAnticorrosion['HDG1-84'].busNo}}</p>
</div> </div>
<!-- 第五行 --> <!-- 第五行 -->
<div <div
class="sealed-row-5-1" class="sealed-row-5-1"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-85') && sealedAnticorrosion['HDG1-85'].state !== 'FREE'" v-if="sealedAnticorrosion.hasOwnProperty('HDG1-85') && sealedAnticorrosion['HDG1-85'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-85'].busType, 'HDG1-85')" :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-85'].busType, 'HDG1-85')"
@click="doCarStationClick(sealedAnticorrosion['HDG1-85'].busNo)"> @click="doCarStationClick(sealedAnticorrosion['HDG1-85'].busNo)"
>
<p>{{sealedAnticorrosion['HDG1-85'].busNo}}</p> <p>{{sealedAnticorrosion['HDG1-85'].busNo}}</p>
</div> </div>
<div <div
class="sealed-row-5-2" class="sealed-row-5-2"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-86') && sealedAnticorrosion['HDG1-86'].state !== 'FREE'" v-if="sealedAnticorrosion.hasOwnProperty('HDG1-86') && sealedAnticorrosion['HDG1-86'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-86'].busType, 'HDG1-86')" :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-86'].busType, 'HDG1-86')"
@click="doCarStationClick(sealedAnticorrosion['HDG1-86'].busNo)"> @click="doCarStationClick(sealedAnticorrosion['HDG1-86'].busNo)"
>
<p>{{sealedAnticorrosion['HDG1-86'].busNo}}</p> <p>{{sealedAnticorrosion['HDG1-86'].busNo}}</p>
</div> </div>
<div <div
class="sealed-row-5-3" class="sealed-row-5-3"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-87') && sealedAnticorrosion['HDG1-87'].state !== 'FREE'" v-if="sealedAnticorrosion.hasOwnProperty('HDG1-87') && sealedAnticorrosion['HDG1-87'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-87'].busType, 'HDG1-87')" :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-87'].busType, 'HDG1-87')"
@click="doCarStationClick(sealedAnticorrosion['HDG1-87'].busNo)"> @click="doCarStationClick(sealedAnticorrosion['HDG1-87'].busNo)"
>
<p>{{sealedAnticorrosion['HDG1-87'].busNo}}</p> <p>{{sealedAnticorrosion['HDG1-87'].busNo}}</p>
</div> </div>
<div <div
class="sealed-row-5-4" class="sealed-row-5-4"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-88') && sealedAnticorrosion['HDG1-88'].state !== 'FREE'" v-if="sealedAnticorrosion.hasOwnProperty('HDG1-88') && sealedAnticorrosion['HDG1-88'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-88'].busType, 'HDG1-88')" :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-88'].busType, 'HDG1-88')"
@click="doCarStationClick(sealedAnticorrosion['HDG1-88'].busNo)"> @click="doCarStationClick(sealedAnticorrosion['HDG1-88'].busNo)"
>
<p>{{sealedAnticorrosion['HDG1-88'].busNo}}</p> <p>{{sealedAnticorrosion['HDG1-88'].busNo}}</p>
</div> </div>
<div <div
class="sealed-row-5-5" class="sealed-row-5-5"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-89') && sealedAnticorrosion['HDG1-89'].state !== 'FREE'" v-if="sealedAnticorrosion.hasOwnProperty('HDG1-89') && sealedAnticorrosion['HDG1-89'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-89'].busType, 'HDG1-89')" :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-89'].busType, 'HDG1-89')"
@click="doCarStationClick(sealedAnticorrosion['HDG1-89'].busNo)"> @click="doCarStationClick(sealedAnticorrosion['HDG1-89'].busNo)"
>
<p>{{sealedAnticorrosion['HDG1-89'].busNo}}</p> <p>{{sealedAnticorrosion['HDG1-89'].busNo}}</p>
</div> </div>
<!-- 第六行 --> <!-- 第六行 -->
<div <div
class="sealed-row-6-1" class="sealed-row-6-1"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-90') && sealedAnticorrosion['HDG1-90'].state !== 'FREE'" v-if="sealedAnticorrosion.hasOwnProperty('HDG1-90') && sealedAnticorrosion['HDG1-90'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-90'].busType, 'HDG1-90')" :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-90'].busType, 'HDG1-90')"
@click="doCarStationClick(sealedAnticorrosion['HDG1-90'].busNo)"> @click="doCarStationClick(sealedAnticorrosion['HDG1-90'].busNo)"
>
<p>{{sealedAnticorrosion['HDG1-90'].busNo}}</p> <p>{{sealedAnticorrosion['HDG1-90'].busNo}}</p>
</div> </div>
<div <div
class="sealed-row-6-2" class="sealed-row-6-2"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-91') && sealedAnticorrosion['HDG1-91'].state !== 'FREE'" v-if="sealedAnticorrosion.hasOwnProperty('HDG1-91') && sealedAnticorrosion['HDG1-91'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-91'].busType, 'HDG1-91')" :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-91'].busType, 'HDG1-91')"
@click="doCarStationClick(sealedAnticorrosion['HDG1-91'].busNo)"> @click="doCarStationClick(sealedAnticorrosion['HDG1-91'].busNo)"
>
<p>{{sealedAnticorrosion['HDG1-91'].busNo}}</p> <p>{{sealedAnticorrosion['HDG1-91'].busNo}}</p>
</div> </div>
<div <div
class="sealed-row-6-3" class="sealed-row-6-3"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-92') && sealedAnticorrosion['HDG1-92'].state !== 'FREE'" v-if="sealedAnticorrosion.hasOwnProperty('HDG1-92') && sealedAnticorrosion['HDG1-92'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-92'].busType, 'HDG1-92')" :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-92'].busType, 'HDG1-92')"
@click="doCarStationClick(sealedAnticorrosion['HDG1-92'].busNo)"> @click="doCarStationClick(sealedAnticorrosion['HDG1-92'].busNo)"
>
<p>{{sealedAnticorrosion['HDG1-92'].busNo}}</p> <p>{{sealedAnticorrosion['HDG1-92'].busNo}}</p>
</div> </div>
<div <div
class="sealed-row-6-4" class="sealed-row-6-4"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-93') && sealedAnticorrosion['HDG1-93'].state !== 'FREE'" v-if="sealedAnticorrosion.hasOwnProperty('HDG1-93') && sealedAnticorrosion['HDG1-93'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-93'].busType, 'HDG1-93')" :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-93'].busType, 'HDG1-93')"
@click="doCarStationClick(sealedAnticorrosion['HDG1-93'].busNo)"> @click="doCarStationClick(sealedAnticorrosion['HDG1-93'].busNo)"
>
<p>{{sealedAnticorrosion['HDG1-93'].busNo}}</p> <p>{{sealedAnticorrosion['HDG1-93'].busNo}}</p>
</div> </div>
<div <div
class="sealed-row-6-5" class="sealed-row-6-5"
v-if="sealedAnticorrosion.hasOwnProperty('HDG1-94') && sealedAnticorrosion['HDG1-94'].state !== 'FREE'" v-if="sealedAnticorrosion.hasOwnProperty('HDG1-94') && sealedAnticorrosion['HDG1-94'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-94'].busType, 'HDG1-94')" :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-94'].busType, 'HDG1-94')"
@click="doCarStationClick(sealedAnticorrosion['HDG1-94'].busNo)"> @click="doCarStationClick(sealedAnticorrosion['HDG1-94'].busNo)"
>
<p>{{sealedAnticorrosion['HDG1-94'].busNo}}</p> <p>{{sealedAnticorrosion['HDG1-94'].busNo}}</p>
</div> </div>
<!-- 右一列 --> <!-- 右一列 -->
<div <div
class="sealed-right-column-1-1" class="sealed-right-column-1-1"
v-if="sealedAnticorrosion.hasOwnProperty('HDG5-8') && sealedAnticorrosion['HDG5-8'].state !== 'FREE'" v-if="sealedAnticorrosion.hasOwnProperty('HDG5-8') && sealedAnticorrosion['HDG5-8'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG5-8'].busType, 'HDG5-8')" :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG5-8'].busType, 'HDG5-8')"
@click="doCarStationClick(sealedAnticorrosion['HDG5-8'].busNo)"> @click="doCarStationClick(sealedAnticorrosion['HDG5-8'].busNo)"
>
<p>{{sealedAnticorrosion['HDG5-8'].busNo}}</p> <p>{{sealedAnticorrosion['HDG5-8'].busNo}}</p>
</div> </div>
<div <div
class="sealed-right-column-1-2" class="sealed-right-column-1-2"
v-if="sealedAnticorrosion.hasOwnProperty('HDG5-9') && sealedAnticorrosion['HDG5-9'].state !== 'FREE'" v-if="sealedAnticorrosion.hasOwnProperty('HDG5-9') && sealedAnticorrosion['HDG5-9'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG5-9'].busType, 'HDG5-9')" :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG5-9'].busType, 'HDG5-9')"
@click="doCarStationClick(sealedAnticorrosion['HDG5-9'].busNo)"> @click="doCarStationClick(sealedAnticorrosion['HDG5-9'].busNo)"
>
<p>{{sealedAnticorrosion['HDG5-9'].busNo}}</p> <p>{{sealedAnticorrosion['HDG5-9'].busNo}}</p>
</div> </div>
<div <div
class="sealed-right-column-1-3" class="sealed-right-column-1-3"
v-if="sealedAnticorrosion.hasOwnProperty('HDG5-10') && sealedAnticorrosion['HDG5-10'].state !== 'FREE'" v-if="sealedAnticorrosion.hasOwnProperty('HDG5-10') && sealedAnticorrosion['HDG5-10'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG5-10'].busType, 'HDG5-10')" :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG5-10'].busType, 'HDG5-10')"
@click="doCarStationClick(sealedAnticorrosion['HDG5-10'].busNo)"> @click="doCarStationClick(sealedAnticorrosion['HDG5-10'].busNo)"
>
<p>{{sealedAnticorrosion['HDG5-10'].busNo}}</p> <p>{{sealedAnticorrosion['HDG5-10'].busNo}}</p>
</div> </div>
<div <div
class="sealed-right-column-1-4" class="sealed-right-column-1-4"
v-if="sealedAnticorrosion.hasOwnProperty('HDG5-11') && sealedAnticorrosion['HDG5-11'].state !== 'FREE'" v-if="sealedAnticorrosion.hasOwnProperty('HDG5-11') && sealedAnticorrosion['HDG5-11'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG5-11'].busType, 'HDG5-11')" :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG5-11'].busType, 'HDG5-11')"
@click="doCarStationClick(sealedAnticorrosion['HDG5-11'].busNo)"> @click="doCarStationClick(sealedAnticorrosion['HDG5-11'].busNo)"
>
<p>{{sealedAnticorrosion['HDG5-11'].busNo}}</p> <p>{{sealedAnticorrosion['HDG5-11'].busNo}}</p>
</div> </div>
<div <div
class="sealed-right-column-1-5" class="sealed-right-column-1-5"
v-if="sealedAnticorrosion.hasOwnProperty('HDG5-12') && sealedAnticorrosion['HDG5-12'].state !== 'FREE'" v-if="sealedAnticorrosion.hasOwnProperty('HDG5-12') && sealedAnticorrosion['HDG5-12'].state !== 'FREE'"
:class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG5-12'].busType, 'HDG5-12')" :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG5-12'].busType, 'HDG5-12')"
@click="doCarStationClick(sealedAnticorrosion['HDG5-12'].busNo)"> @click="doCarStationClick(sealedAnticorrosion['HDG5-12'].busNo)"
>
<p>{{sealedAnticorrosion['HDG5-12'].busNo}}</p> <p>{{sealedAnticorrosion['HDG5-12'].busNo}}</p>
</div> </div>
</div> </div>
<!-- 实时车辆 -->
<div class="onlineNum">
<p>总量 <span>{{ this.onlineNum? this.onlineNum : '0' }}</span></p>
</div>
<!-- 详细信息展示组件 --> <!-- 详细信息展示组件 -->
<Tooltip <Tooltip
ref="toolRef" ref="toolRef"
:query="currentBusInfo"> :query="currentBusInfo"
>
</Tooltip> </Tooltip>
</div> </div>
</template> </template>
<script> <script>
import Tooltip from './Tooltip' import Tooltip from './Tooltip';
export default { export default {
components: { components: {
Tooltip Tooltip
}, },
data () { data () {
return { return {
// 密封防腐作业区域实时数据 // 密封防腐作业区域实时数据
sealedAnticorrosion: {}, sealedAnticorrosion: {},
// 筛选条件订单号 // 筛选条件订单号
orderNo: '', orderNo: '',
// 筛选条件工单号 // 筛选条件工单号
workOrderNo: '', workOrderNo: '',
// 车体定位数据 // 车体定位数据
carPostion: {}, carPostion: {},
// 当前车体信息 // 当前车体信息
currentBusInfo: {} currentBusInfo: {}
};
},
methods: {
// 解析车体类型及车体定位样式
judgeCarTypeAndCarStationStyle (carType, caeNumber) {
if (this.carPostion.hasOwnProperty(caeNumber)) {
return 'monitor-car-location-position';
} else {
if (carType === 'OWN') {
return '';
} else {
return 'monitor-car-external';
}
} }
}, },
methods: { // 点击工位
// 解析车体类型及车体定位样式 doCarStationClick (busNo) {
judgeCarTypeAndCarStationStyle (carType, caeNumber) { let queryParams = { busNo: busNo };
if (this.carPostion.hasOwnProperty(caeNumber)) { this.$refs.toolRef.$refs.tooltip.style.visibility = 'visible';
return 'monitor-car-location-position' let left = window.event.clientX;
} else { let top = window.event.clientY;
if (carType === 'OWN') { this.$refs.toolRef.$refs.tooltip.style.top = top - 100 + 'px';
return '' this.$refs.toolRef.$refs.tooltip.style.left = left - 100 + 'px';
} else { this.$fetch('area-controller/busNo-get', queryParams).then(
return 'monitor-car-external' response => {
} this.currentBusInfo = _.cloneDeep(response);
} }
}, );
// 点击工位 },
doCarStationClick (busNo) { // 获取密封防腐作业区实时数据
let queryParams = { busNo: busNo } getSealedAnticorrosionRealTimeData () {
this.$refs.toolRef.$refs.tooltip.style.visibility = 'visible'; let queryParams = { areaNo: '3' };
let left = window.event.clientX; this.$fetch('area-controller/realTime-get', queryParams).then(
let top = window.event.clientY; response => {
this.$refs.toolRef.$refs.tooltip.style.top = top - 100 + 'px';
this.$refs.toolRef.$refs.tooltip.style.left = left - 100 + 'px';
this.$fetch('area-controller/busNo-get', queryParams).then(response => {
this.currentBusInfo = _.cloneDeep(response)
})
},
// 获取密封防腐作业区实时数据
getSealedAnticorrosionRealTimeData () {
let queryParams = { areaNo: '3' }
this.$fetch('area-controller/realTime-get', queryParams).then(response => {
for (let item of response) { for (let item of response) {
if (item.code === '3') { if (item.code === '3') {
this.sealedAnticorrosionRealTime = _.cloneDeep(item) 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 () {
// 获取密封防腐作业区实时数据
this.getSealedAnticorrosionRealTimeData();
// 根据工单号或订单号定位当前车体位置 // 根据工单号或订单号定位当前车体位置
getCurrentPosition () { this.getCurrentPosition();
let queryParams = { orderNo: this.orderNo, workOrderNo: this.workOrderNo } setInterval(() => {
this.$fetch('area-controller/workOrderNo-get', queryParams).then(response => { this.carPostion = {};
this.carPostion = _.cloneDeep(response)
})
},
// 轮询查询区域实时信息
pollingGetAreaRealTimeData () {
// 获取密封防腐作业区实时数据 // 获取密封防腐作业区实时数据
this.getSealedAnticorrosionRealTimeData() this.getSealedAnticorrosionRealTimeData();
// 根据工单号或订单号定位当前车体位置 }, 20000);
this.getCurrentPosition()
setInterval(() => {
this.carPostion = {}
// 获取密封防腐作业区实时数据
this.getSealedAnticorrosionRealTimeData()
}, 20000)
}
},
mounted () {
setTimeout(() => {
// 轮询查询区域实时信息
this.pollingGetAreaRealTimeData()
}, 0)
} }
},
mounted () {
setTimeout(() => {
// 轮询查询区域实时信息
this.pollingGetAreaRealTimeData();
}, 0);
} }
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.page-pack { .page-pack {
min-height: 100%; min-height: 100%;
background: rgba(0, 7, 12, 1); background: rgba(0, 7, 12, 1);
position: relative;
.onlineNum {
position: absolute;
color: #ffffff;
z-index: 999;
right: 300px;
top: 50px;
color: #00b4ff;
font-size: 16px;
font-weight: 750;
span {
margin: 30px;
font-size: 24px;
}
}
.container-pack {
position: relative; position: relative;
margin: 0 auto;
width: 1600px;
height: 900px;
background: url("../../../assets/images/Monitor/monitor_sealed_anticorrosion.png");
.container-pack { div {
position: relative; position: absolute;
margin: 0 auto; width: 140px;
width: 1600px; height: 50px;
height: 900px; cursor: pointer;
background: url("../../../assets/images/Monitor/monitor_sealed_anticorrosion.png"); background: url("../../../assets/images/Monitor/monitor_car.png")
no-repeat;
div { background-size: 35px 18px;
position: absolute; background-position: 0 16px;
width: 140px;
height: 50px;
cursor: pointer;
background: url('../../../assets/images/Monitor/monitor_car.png') no-repeat;
background-size: 35px 18px;
background-position: 0 16px;
p { p {
font-size: 14px; font-size: 14px;
margin: 0; margin: 0;
color: #ffffff; color: #ffffff;
font-weight: bold; font-weight: bold;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
}
} }
}
// 第一行 // 第一行
.sealed-row-1-1 { .sealed-row-1-1 {
top: 265px; top: 265px;
left: 155px; left: 155px;
} }
.sealed-row-1-2 { .sealed-row-1-2 {
top: 265px; top: 265px;
left: 345px; left: 345px;
} }
.sealed-row-1-3 { .sealed-row-1-3 {
top: 265px; top: 265px;
left: 530px; left: 530px;
} }
.sealed-row-1-4 { .sealed-row-1-4 {
top: 265px; top: 265px;
left: 720px; left: 720px;
} }
.sealed-row-1-5 { .sealed-row-1-5 {
top: 265px; top: 265px;
left: 910px; left: 910px;
} }
// 第二行 // 第二行
.sealed-row-2-1 { .sealed-row-2-1 {
top: 352px; top: 352px;
left: 155px; left: 155px;
} }
.sealed-row-2-2 { .sealed-row-2-2 {
top: 352px; top: 352px;
left: 345px; left: 345px;
} }
.sealed-row-2-3 { .sealed-row-2-3 {
top: 352px; top: 352px;
left: 530px; left: 530px;
} }
.sealed-row-2-4 { .sealed-row-2-4 {
top: 352px; top: 352px;
left: 720px; left: 720px;
} }
.sealed-row-2-5 { .sealed-row-2-5 {
top: 352px; top: 352px;
left: 910px; left: 910px;
} }
// 第三行 // 第三行
.sealed-row-3-1 { .sealed-row-3-1 {
top: 435px; top: 435px;
left: 210px; left: 210px;
} }
.sealed-row-3-2 { .sealed-row-3-2 {
top: 437px; top: 437px;
left: 345px; left: 345px;
} }
.sealed-row-3-3 { .sealed-row-3-3 {
top: 437px; top: 437px;
left: 530px; left: 530px;
} }
.sealed-row-3-4 { .sealed-row-3-4 {
top: 437px; top: 437px;
left: 720px; left: 720px;
} }
.sealed-row-3-5 { .sealed-row-3-5 {
top: 437px; top: 437px;
left: 910px; left: 910px;
} }
// 第四行 // 第四行
.sealed-row-4-1 { .sealed-row-4-1 {
top: 520px; top: 520px;
left: 210px; left: 210px;
} }
.sealed-row-4-2 { .sealed-row-4-2 {
top: 520px; top: 520px;
left: 392px; left: 392px;
} }
.sealed-row-4-3 { .sealed-row-4-3 {
top: 520px; top: 520px;
left: 572px; left: 572px;
} }
.sealed-row-4-4 { .sealed-row-4-4 {
top: 520px; top: 520px;
left: 752px; left: 752px;
} }
.sealed-row-4-5 { .sealed-row-4-5 {
top: 520px; top: 520px;
left: 936px; left: 936px;
} }
// 第五行 // 第五行
.sealed-row-5-1 { .sealed-row-5-1 {
top: 605px; top: 605px;
left: 155px; left: 155px;
} }
.sealed-row-5-2 { .sealed-row-5-2 {
top: 605px; top: 605px;
left: 345px; left: 345px;
} }
.sealed-row-5-3 { .sealed-row-5-3 {
top: 605px; top: 605px;
left: 530px; left: 530px;
} }
.sealed-row-5-4 { .sealed-row-5-4 {
top: 605px; top: 605px;
left: 720px; left: 720px;
} }
.sealed-row-5-5 { .sealed-row-5-5 {
top: 605px; top: 605px;
left: 910px; left: 910px;
} }
// 第六行 // 第六行
.sealed-row-6-1 { .sealed-row-6-1 {
top: 690px; top: 690px;
left: 155px; left: 155px;
} }
.sealed-row-6-2 { .sealed-row-6-2 {
top: 690px; top: 690px;
left: 345px; left: 345px;
} }
.sealed-row-6-3 { .sealed-row-6-3 {
top: 690px; top: 690px;
left: 530px; left: 530px;
} }
.sealed-row-6-4 { .sealed-row-6-4 {
top: 690px; top: 690px;
left: 720px; left: 720px;
} }
.sealed-row-6-5 { .sealed-row-6-5 {
top: 690px; top: 690px;
left: 910px; left: 910px;
} }
// 右一列 // 右一列
.sealed-right-column-1-1 { .sealed-right-column-1-1 {
top: 352px; top: 352px;
left: 1275px; left: 1275px;
} }
.sealed-right-column-1-2 { .sealed-right-column-1-2 {
top: 438px; top: 438px;
left: 1275px; left: 1275px;
} }
.sealed-right-column-1-3 { .sealed-right-column-1-3 {
top: 522px; top: 522px;
left: 1275px; left: 1275px;
} }
.sealed-right-column-1-4 { .sealed-right-column-1-4 {
top: 604px; top: 604px;
left: 1318px; left: 1318px;
} }
.sealed-right-column-1-5 { .sealed-right-column-1-5 {
top: 688px; top: 688px;
left: 1318px; left: 1318px;
}
} }
} }
}
// 轻客车体样式 // 轻客车体样式
.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 { .monitor-car-location-position {
background: url('../../../assets/images/Monitor/monitor_position_car.gif') !important; background: url("../../../assets/images/Monitor/monitor_position_car.gif") !important;
background-size: cover !important; background-size: cover !important;
} }
</style> </style>
src/views/Monitor/components/SheetMetalCar.vue
View file @ 1c2cf687
...@@ -283,7 +283,10 @@ ...@@ -283,7 +283,10 @@
<p>{{query['HDG1-56'].busNo}}</p> <p>{{query['HDG1-56'].busNo}}</p>
</div> </div>
</div> </div>
<!-- 实时车辆 -->
<div class="onlineNum">
<p>总量 <span>{{ this.onlineNum? this.onlineNum : '0' }}</span></p>
</div>
<!-- 信息展示弹窗 --> <!-- 信息展示弹窗 -->
<Tooltip <Tooltip
ref="toolRef" ref="toolRef"
...@@ -301,10 +304,12 @@ export default { ...@@ -301,10 +304,12 @@ export default {
}, },
data () { data () {
return { return {
// 定时器
timer: null,
// 当前在线人数 // 当前在线人数
onlineNum: null, onlineNum: null,
// 车体定位信息 // 车辆定位数据
busPosition: {}, carPostionInfo: {},
// 钣金车存放区实时信息 // 钣金车存放区实时信息
query: {}, query: {},
// 根据车身号获得当前车体信息 // 根据车身号获得当前车体信息
...@@ -321,23 +326,23 @@ export default { ...@@ -321,23 +326,23 @@ export default {
}; };
}, },
mounted () { mounted () {
this.getSheetMetalInformation(); this.pollingGetInterface();
},
beforeDestroy () {
clearInterval(this.timer);
}, },
methods: { methods: {
// 获取钣金车存放区实时信息 // 获取钣金车存放区实时信息
getSheetMetalInformation () { getSheetMetalInformation () {
this.$fetch('area-controller/realTime-get', { areaNo: '1' }) this.$fetch('area-controller/realTime-get', { areaNo: '1' })
.then(res => { .then(res => {
// this.query = _.cloneDeep(res); for (let item of res) {
// console.log(this.query); if (item.code === '1') {
console.log(res); this.query = item.stationMap;
for (let i = 0; i < res.length; i++) {
if (res[i].code === '1') {
this.query = _.cloneDeep(res[i].stationMap);
console.log(this.query)
// 获取当前在线人数 // 获取当前在线人数
this.onlineNum = _.clone(res[i].onlineNum); this.onlineNum = _.clone(item.onlineNum);
console.log(this.onlineNum) console.log(this.onlineNum);
break;
} }
} }
}) })
...@@ -345,6 +350,7 @@ export default { ...@@ -345,6 +350,7 @@ export default {
reject(error); reject(error);
}); });
}, },
// 点击车辆工位
clickBtn (busNub) { clickBtn (busNub) {
console.log(busNub); console.log(busNub);
let left = window.event.clientX; let left = window.event.clientX;
...@@ -352,8 +358,8 @@ export default { ...@@ -352,8 +358,8 @@ export default {
console.log('left', left); console.log('left', left);
console.log('top', top); console.log('top', top);
this.$refs.toolRef.$refs.tooltip.style.visibility = 'visible'; this.$refs.toolRef.$refs.tooltip.style.visibility = 'visible';
this.$refs.toolRef.$refs.tooltip.style.top = top - 100 + 'px'; this.$refs.toolRef.$refs.tooltip.style.top = `${top - 100}px`;
this.$refs.toolRef.$refs.tooltip.style.left = left - 100 + 'px'; this.$refs.toolRef.$refs.tooltip.style.left = `${left}px`;
this.$fetch('area-controller/busNo-get', { busNo: busNub }) this.$fetch('area-controller/busNo-get', { busNo: busNub })
.then(res => { .then(res => {
console.log('res', res); console.log('res', res);
...@@ -365,24 +371,43 @@ export default { ...@@ -365,24 +371,43 @@ export default {
}, },
// 解析车体类型及车体定位样式 // 解析车体类型及车体定位样式
judgeCarTypeAndcarStationstyle (outOrIn, station) { judgeCarTypeAndcarStationstyle (outOrIn, station) {
//根据车位编码Station 判断是否该车位已经被定位 // 判断有无车体定位信息
// let stateTemp = _.cloneDeep(this.$route.query); if (this.carPostionInfo.hasOwnProperty(station)) {
// console.log('aaa', stateTemp); return 'isPositioned';
// this.$fetch('area-controller/busNo-get', {stateTemp}).then(res => {
// console.log(res);
// this.busPosition = _.cloneDeep(res);
// if (this.busPosition.hasOwnProperty(station)) {
// return 'isPositioned'
// } else {
if (outOrIn === 'OTHER') {
return 'carOutFactory';
} else { } else {
return ''; if (outOrIn === 'OTHER') {
return 'carOutFactory';
} else {
return '';
}
} }
// } },
// }).catch(error => { // 查询车辆定位
// reject(error); getCarPostion () {
// }) let queryParams = { orderNo: '1111', workOrderNo: '' };
// 请求接口
this.$fetch('area-controller/busNo-get', { queryParams }).then(
res => {
this.carPostionInfo = _.cloneDeep(res);
}
);
},
// 轮询请求接口
pollingGetInterface () {
// 查询车辆定位
if (
this.$route.query.hasOwnProperty('orderNo') ||
this.$route.query.hasOwnProperty('workOrderNo')
) {
this.getCarPostion();
}
// 获取钣金作业区实时信息
this.getSheetMetalInformation();
this.timer = setInterval(() => {
this.carPostionInfo = {};
// 获取钣金作业区实时信息
this.getSheetMetalInformation();
}, 20000);
} }
} }
}; };
...@@ -392,7 +417,20 @@ export default { ...@@ -392,7 +417,20 @@ export default {
.page-pack { .page-pack {
min-height: 100%; min-height: 100%;
background: rgba(0, 7, 12, 1); background: rgba(0, 7, 12, 1);
.onlineNum {
position: absolute;
color: #ffffff;
z-index: 999;
right: 300px;
top: 50px;
color: #00b4ff;
font-size: 16px;
font-weight: 750;
span {
margin: 30px;
font-size: 24px;
}
}
.container-pack { .container-pack {
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
...@@ -598,6 +636,18 @@ export default { ...@@ -598,6 +636,18 @@ export default {
top: 700px; top: 700px;
left: 579px; left: 579px;
} }
.carOutFactory {
background: url("../../../assets/images/Monitor/monitor_car_external.png")
no-repeat;
background-size: 35px 18px;
background-position: 0 16px;
}
.isPositioned {
background: url("../../../assets/images/Monitor/monitor_position_car.gif")
no-repeat;
background-size: 35px 18px;
background-position: 0 16px;
}
} }
} }
</style> </style>
src/views/Monitor/components/Tooltip.vue
View file @ 1c2cf687
...@@ -74,12 +74,12 @@ export default { ...@@ -74,12 +74,12 @@ export default {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss">
.tooltip { .tooltip {
position: absolute; position: absolute;
padding: 20px 0 0 0; padding: 20px 0 0 0;
width: 260px; width: 260px;
height: 266px; height: 246px;
border-radius: 9px; border-radius: 9px;
background: #000000; background: #000000;
opacity: 0.8; opacity: 0.8;
......
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