Skip to content

Z
zhongtong-avi-web
Commit 611ec26b authored by 车宾's avatar 车宾
Browse files
Options

feat(电泳工作区)：功能联调(50%)

parent 9faa1574
Show whitespace changes
Inline Side-by-side
Showing with 372 additions and 78 deletions
src/views/Monitor/components/Electrophoresis.vue
View file @ 611ec26b
...@@ -5,204 +5,487 @@ ...@@ -5,204 +5,487 @@
<!-- 第 1 行 --> <!-- 第 1 行 -->
<div <div
class="elect-row-1-1" class="elect-row-1-1"
@click="clickBtn()" @click="clickBtn(query['STC1-1'].busNo)"
v-if="query.hasOwnProperty('STC1-1') && query['STC1-1'].state !== 'N'"
:class="judgeCarTypeAndcarStationstyle(query['STC1-1'].busType, 'STC1-1')"
> >
<p>CDA11323</p> <p>{{query['STC1-1'].busNo}}</p>
</div> </div>
<div <div
class="elect-row-1-2" class="elect-row-1-2"
@click="clickBtn()" @click="clickBtn()"
v-if="query.hasOwnProperty('STC1-8') && query['STC1-8'].state !== 'N'"
:class="judgeCarTypeAndcarStationstyle(query['STC1-8'].busType, 'STC1-8')"
> >
<p>CDA11323</p> <p>{{query['STC1-8'].busNo}}</p>
</div> </div>
<div class="elect-row-1-3"> <div
<p>CDA11323</p> class="elect-row-1-3"
v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'N'"
:class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
>
<p>{{query['HDG1-31'].busNo}}</p>
</div> </div>
<!-- 第 2 行 --> <!-- 第 2 行 -->
<div class="elect-row-2-1"> <div
<p>CDA11323</p> class="elect-row-2-1"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>{{query['HDG1-31'].busNo}}</p>
</div> </div>
<div class="elect-row-2-2"> <div
<p>CDA11323</p> class="elect-row-2-2"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>{{query['HDG1-31'].busNo}}</p>
</div> </div>
<div class="elect-row-2-3"> <div
class="elect-row-2-3"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<!-- 第 3 行 --> <!-- 第 3 行 -->
<div class="elect-row-3-1"> <div
class="elect-row-3-1"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<div class="elect-row-3-2"> <div
class="elect-row-3-2"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<div class="elect-row-3-3"> <div
class="elect-row-3-3"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<!-- 第 4 行 --> <!-- 第 4 行 -->
<div class="elect-row-4-1"> <div
class="elect-row-4-1"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<div class="elect-row-4-2"> <div
class="elect-row-4-2"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<div class="elect-row-4-3"> <div
class="elect-row-4-3"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<!-- 第 5 行 --> <!-- 第 5 行 -->
<div class="elect-row-5-1"> <div
class="elect-row-5-1"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<div class="elect-row-5-2"> <div
class="elect-row-5-2"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<div class="elect-row-5-3"> <div
class="elect-row-5-3"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<!-- 第 6 行 --> <!-- 第 6 行 -->
<div class="elect-row-6-1"> <div
class="elect-row-6-1"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<div class="elect-row-6-2"> <div
class="elect-row-6-2"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<div class="elect-row-6-3"> <div
class="elect-row-6-3"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<!-- 6.5行 --> <!-- 6.5行 -->
<div class="elect-row-6-4"> <div
class="elect-row-6-4"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<!-- 第 7 行 --> <!-- 第 7 行 -->
<div class="elect-row-7-1"> <div
class="elect-row-7-1"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<div class="elect-row-7-2"> <div
class="elect-row-7-2"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<div class="elect-row-7-3"> <div
class="elect-row-7-3"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<!-- 第 8 行 --> <!-- 第 8 行 -->
<div class="elect-row-8-1"> <div
class="elect-row-8-1"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<div class="elect-row-8-2"> <div
class="elect-row-8-2"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<div class="elect-row-8-3"> <div
class="elect-row-8-3"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<!-- 第 9 行 --> <!-- 第 9 行 -->
<div class="elect-row-9-1"> <div
class="elect-row-9-1"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<div class="elect-row-9-2"> <div
class="elect-row-9-2"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<div class="elect-row-9-3"> <div
class="elect-row-9-3"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<div class="elect-row-9-4"> <div
class="elect-row-9-4"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<!-- 第 10 行 --> <!-- 第 10 行 -->
<div class="elect-row-10-1"> <div
class="elect-row-10-1"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<div class="elect-row-10-2"> <div
class="elect-row-10-2"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<div class="elect-row-10-3"> <div
class="elect-row-10-3"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<div class="elect-row-10-4"> <div
class="elect-row-10-4"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<div class="elect-row-10-5"> <div
class="elect-row-10-5"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<!-- 第 11 行 --> <!-- 第 11 行 -->
<div class="elect-row-11-1"> <div
class="elect-row-11-1"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<div class="elect-row-11-2"> <div
class="elect-row-11-2"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<div class="elect-row-11-3"> <div
class="elect-row-11-3"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<div class="elect-row-11-4"> <div
class="elect-row-11-4"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<div class="elect-row-11-5"> <div
class="elect-row-11-5"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<!-- 第 12 行 --> <!-- 第 12 行 -->
<div class="elect-row-12-1"> <div
class="elect-row-12-1"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<div class="elect-row-12-2"> <div
class="elect-row-12-2"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<div class="elect-row-12-3"> <div
class="elect-row-12-3"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<div class="elect-row-12-4"> <div
class="elect-row-12-4"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<div class="elect-row-12-5"> <div
class="elect-row-12-5"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<!-- 第 13 行 --> <!-- 第 13 行 -->
<div class="elect-row-13-1"> <div
class="elect-row-13-1"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<div class="elect-row-13-2"> <div
class="elect-row-13-2"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<div class="elect-row-13-3"> <div
class="elect-row-13-3"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<div class="elect-row-13-4"> <div
class="elect-row-13-4"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<div class="elect-row-13-5"> <div
class="elect-row-13-5"
v-if="query['HDG1-31'].state==='Y'?true:false"
:class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
>
<p>CDA11323</p> <p>CDA11323</p>
</div> </div>
<Tooltip <Tooltip
ref="toolRef" ref="toolRef"
:query="query" :query="BusInformation"
></Tooltip> ></Tooltip>
</div> </div>
</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 {
query: {} // 电泳作业区域实时信息
query: {
'STC1-1': {
areaId: 0,
areaName: 'DF20191010',
busNo: 'DF20191010',
busType: 'Out', //IN/OUT
code: 'string',
id: 0,
keyStation: true,
laneCode: 'string',
laneId: 0,
sequence: 0,
skidID: 0,
state: 'Y', //0.1 Y/N
workshopCode: 'string'
},
'STC1-8': {
areaId: 0,
areaName: 'DF205411010',
busNo: 'DF20191010',
busType: 'In', //IN/OUT
code: 'string',
id: 0,
keyStation: true,
laneCode: 'string',
laneId: 0,
sequence: 0,
skidID: 0,
state: 'Y', //0.1 Y/N
workshopCode: 'string'
},
'HDG1-31': {
areaId: 0,
areaName: 'DF205411010',
busNo: 'DF20191010',
busType: 'Out', //IN/OUT
code: 'string',
id: 0,
keyStation: true,
laneCode: 'string',
laneId: 0,
sequence: 0,
skidID: 0,
state: 'Y', //0.1 Y/N
workshopCode: 'string'
}
},
// 根据车身号获得当前车体信息
BusInformation: {
'saleOrderNo': '201905201252',
'planOrderNo': '83848484',
'code': 'EDSCSFDGVG',
'busType': 'car',
'orderSize': '20',
'unit': 'From China',
'shop': '二号车间',
'line': '4-25'
}
};
},
mounted () {
this.getElectrophoresisInformation();
for (let key in this.query) {
console.log(key)
} }
}, },
methods: { methods: {
// 点击车位弹出车体信息
clickBtn (row) { clickBtn (row) {
this.$refs.toolRef.$refs.tooltip.style.visibility = 'visible' console.log(row)
let left = window.event.clientX this.$refs.toolRef.$refs.tooltip.style.visibility = 'visible';
let top = window.event.clientY let left = window.event.clientX;
this.$refs.toolRef.$refs.tooltip.style.top = top - 100 + 'px' let top = window.event.clientY;
this.$refs.toolRef.$refs.tooltip.style.left = left - 100 + 'px' this.$refs.toolRef.$refs.tooltip.style.top = top - 100 + 'px';
this.query = { this.$refs.toolRef.$refs.tooltip.style.left = left - 100 + 'px';
name: '111', this.$fetch('area-controller/busNo-get', {busNo: row}).then(res => {
code: '222' console.log('res', res);
}).catch(error => {
reject(error)
})
// this.BusInformation = {
// name: '111',
// code: '222'
// };
},
getElectrophoresisInformation () {
this.$fetch('area-controller/realTime-get', { areaNo: '2' })
.then(res => {
console.log('getall', res);
})
.catch(error => {
reject(error);
});
},
judgeCarTypeAndcarStationstyle (outOrIn, station) {
//根据车位编码Station 判断是否该车位已经被定位
/* .... */
console.log('outorin', outOrIn);
console.log('车位', station);
if (outOrIn === 'Out') {
return 'carOutFactory';
} else {
return '';
} }
} }
} }
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -215,8 +498,7 @@ export default { ...@@ -215,8 +498,7 @@ export default {
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,
...@@ -270,7 +552,8 @@ export default { ...@@ -270,7 +552,8 @@ export default {
width: 140px; width: 140px;
height: 40px; height: 40px;
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;
...@@ -481,6 +764,18 @@ export default { ...@@ -481,6 +764,18 @@ export default {
.elect-row-13-2 { .elect-row-13-2 {
left: 708px; left: 708px;
} }
.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 @ 611ec26b
...@@ -3,15 +3,15 @@ ...@@ -3,15 +3,15 @@
class="tooltip" class="tooltip"
ref="tooltip" ref="tooltip"
> >
<p><span>销售订单号: </span><span>销售订单号</span></p> <p><span>销售订单号: </span><span>{{ query.saleOrderNo }}</span></p>
<p><span>主计划工单号: </span><span>SCA11233</span></p> <p><span>主计划工单号: </span><span>{{ query.planOrderNo }}</span></p>
<p><span>车间计划工单号: </span><span>SCA1123asadasd3</span></p> <p><span>车间计划工单号: </span><span>{{ query.code }}</span></p>
<p><span>车型: </span><span>SCA11233</span></p> <p><span>车型: </span><span>{{ query.busType }}</span></p>
<p><span>订单数量: </span><span>SCA11233</span></p> <p><span>订单数量: </span><span>{{ query.orderSize }}</span></p>
<p><span>单位: </span><span>SCA11233</span></p> <p><span>单位: </span><span>{{ query.unit }}</span></p>
<p><span>车间: </span><span>SCA11233</span></p> <p><span>车间: </span><span>{{ query.shop }}</span></p>
<p><span>产线: </span><span>SCA11233</span></p> <p><span>产线: </span><span>{{ query.line }}</span></p>
<p><span>计划完工时间: </span><span>SCA11233</span></p> <!-- <p><span>计划完工时间: </span><span>{{ query.saleOrderNo }}</span></p> -->
<div <div
class="close-btn" class="close-btn"
@click="closeTooltip" @click="closeTooltip"
...@@ -41,7 +41,6 @@ export default { ...@@ -41,7 +41,6 @@ export default {
watch: { watch: {
query (v) { query (v) {
this.data = _.cloneDeep(v) this.data = _.cloneDeep(v)
console.log(this.data)
} }
}, },
......
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