meswork/JY1.0
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

yidui

Browse Source
This commit is contained in:
Vergil
2020-02-14 15:18:43 +08:00
parent e8eeade817
commit 1895977eb2
25 changed files with 1304 additions and 738 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
src/views/ManufacturingCenter/EquipmentMonitoring/index.vue
View File

@@ -532,49 +532,76 @@
</el-row>
</div>
</el-tooltip>
<el-tooltip :id="机床总装" placement="bottom" @mouseover.native.prevent="changeActive($event)">
<div slot="content" style="max-height: 200px;overflow: auto" v-html="returns1"/>
<div :title="tooltip" style="position: relative;left:520px;top:-1280px; width: 100px;height: 28px;">
<div :id="机床总装" placement="bottom" @mouseover.native.prevent="changeActive($event)">
<!-- <div slot="content" style="max-height: 200px;overflow: auto" v-html="returns1"/>-->
<div style="max-height: 200px;overflow: auto"/>
<!-- <div :title="tooltip" style="position: relative;left:520px;top:-1280px; width: 100px;height: 28px;">-->
<div style="position: relative;left:520px;top:-1280px; width: 100px;height: 28px;">
<el-row>
<div style="float: left;text-align: center;width: 60px;line-height: 12px;font-size: 15px;font-weight: bold;margin-left: 3px">{{ 机床总装 }}</div>
</el-row>
</div>
</el-tooltip>
<el-tooltip :id="部件装配" placement="bottom" @mouseover.native.prevent="changeActive($event)">
<div slot="content" style="max-height: 200px;overflow: auto" v-html="returns2"/>
<div :title="tooltip" style="position: relative;left:660px;top:-1308px; width: 100px;height: 28px;">
</div>
<div :id="部件装配" placement="bottom" @mouseover.native.prevent="changeActive($event)">
<!-- <div slot="content" style="max-height: 200px;overflow: auto" v-html="returns2"/>-->
<div style="max-height: 200px;overflow: auto"/>
<!-- <div :title="tooltip" style="position: relative;left:660px;top:-1308px; width: 100px;height: 28px;">-->
<div style="position: relative;left:660px;top:-1308px; width: 100px;height: 28px;">
<el-row>
<div style="float: left;text-align: center;width: 60px;line-height: 12px;font-size: 15px;font-weight: bold;margin-left: 3px">{{ 部件装配 }}</div>
</el-row>
</div>
</el-tooltip>
</div>
</div>
<el-card style="position: absolute;background: #ffffff;margin-top: -825px;margin-left: 1540px;height: 130px;width: 120px">
<div style="margin-top: 6px">
<div class="circle4" style="margin-top: 3px"/>
<el-tooltip>
<div slot="content">设备开机<br>电流计正常工作<br>工控机关机</div>
<span style="margin-left: 5px">电脑关机</span>
</el-tooltip>
</div>
<div style="margin-top: 6px">
<div class="circle" style="margin-top: 3px"/>
<span style="margin-left: 5px">设备开机</span>
</div>
<div style="margin-top: 6px">
<div class="circle1" style="margin-top: 3px"/>
<span style="margin-left: 5px">设备工作</span>
</div>
<div style="margin-top: 6px">
<div class="circle2" style="margin-top: 3px"/>
<span style="margin-left: 5px">设备关机</span>
</div>
<div style="margin-top: 6px">
<div class="circle3" style="margin-top: 3px"/>
<span style="margin-left: 5px">电流计故障</span>
</div>
</el-card>
<!-- <el-card style="position: absolute;background: #ffffff;margin-top: -825px;margin-left: 1540px;height: 130px;width: 120px">-->
<!-- <div style="margin-top: 6px">-->
<!-- <div class="circle4" style="margin-top: 3px"/>-->
<!-- <el-tooltip>-->
<!-- <div slot="content">设备开机<br>电流计正常工作<br>工控机关机</div>-->
<!-- <span style="margin-left: 5px">电脑关机</span>-->
<!-- </el-tooltip>-->
<!-- </div>-->
<!-- <div style="margin-top: 6px">-->
<!-- <div class="circle" style="margin-top: 3px"/>-->
<!-- <span style="margin-left: 5px">设备开机</span>-->
<!-- </div>-->
<!-- <div style="margin-top: 6px">-->
<!-- <div class="circle1" style="margin-top: 3px"/>-->
<!-- <span style="margin-left: 5px">设备工作</span>-->
<!-- </div>-->
<!-- <div style="margin-top: 6px">-->
<!-- <div class="circle2" style="margin-top: 3px"/>-->
<!-- <span style="margin-left: 5px">设备关机</span>-->
<!-- </div>-->
<!-- <div style="margin-top: 6px">-->
<!-- <div class="circle3" style="margin-top: 3px"/>-->
<!-- <span style="margin-left: 5px">电流计故障</span>-->
<!-- </div>-->
<!-- </el-card>-->
</el-card>
<div style="position: absolute;margin-top: -610px;margin-left: 490px;height: 350px;width: 124px;background-color: transparent">
<el-table :highlight-current-row="false" :stripe="false" :show-header="false" :data="tableData1" style="width: 433px; text-align: center" size="mini">
<el-table-column label="总装机床" align="center" width="120" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.机床图号 }}
</template>
</el-table-column>
</el-table>
</div>
<div style="position: absolute;margin-top: -610px;margin-left: 625px;background-color: transparent">
<el-table :highlight-current-row="false" :stripe="false" :show-header="false" :data="tableData2" max-height="365" style="width: 156px;text-align: center" size="mini">
<el-table-column label="总装机床" align="left" width="150" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.机床图号 }}&nbsp;&nbsp;&nbsp;&nbsp;{{ scope.row.任务名称 }}
</template>
</el-table-column>
<!-- <el-table-column label="任务名称" align="left" width="70" show-overflow-tooltip>-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.任务名称 }}-->
<!-- </template>-->
<!-- </el-table-column>-->
</el-table>
</div>
</div>
</template>
@@ -586,6 +613,8 @@ import { mapGetters } from 'vuex' // 暂无用
export default {
data() {
return {
tableData1: '',
tableData2: '',
returns1: '',
returns2: '',
fang: '_fang',
@@ -668,6 +697,12 @@ export default {
this.connect()
// this.getwork_state()
this.getOP_state()
getZongzhuang().then(res2 => {
this.tableData1 = res2.data
})
getBuzhuang().then(res3 => {
this.tableData2 = res3.data
})
// this.timer = setInterval(this.getwork_state, 60 * 1000) // 工位状态 60秒 一刷新
},
beforeDestroy() {
@@ -711,7 +746,7 @@ export default {
},
// 工位电流值
// 1停机灰色 2开机黄色 3运行绿色 4报警红色
// 0 电流计故障 蓝闪 1 设备关机 灰闪 2 设备开机 黄闪 3 设备工作 绿闪 10断网或电脑关机 灰色
// 0 电流计故障 蓝 1 设备关机 灰 2 设备开机 黄 3 设备工作 绿 10断网或电脑关机 透明
getOP_state() {
getOP_state().then(response => {
for (let i = 0; i < response.data.length; i++) {
@@ -720,31 +755,31 @@ export default {
$('#' + response.data[i].工位号 + '_circle').removeClass('circle3')
$('#' + response.data[i].工位号 + '_circle').removeClass('circle2')
$('#' + response.data[i].工位号 + '_circle').removeClass('circle4')
$('#' + response.data[i].工位号 + '_circle').addClass('circle1') // 黄色闪
$('#' + response.data[i].工位号 + '_circle').addClass('circle1') // 黄色
} else if (response.data[i].状态代码 === '3') {
$('#' + response.data[i].工位号 + '_circle').removeClass('circle3')
$('#' + response.data[i].工位号 + '_circle').removeClass('circle1')
$('#' + response.data[i].工位号 + '_circle').removeClass('circle2')
$('#' + response.data[i].工位号 + '_circle').removeClass('circle4')
$('#' + response.data[i].工位号 + '_circle').addClass('circle') // 绿色闪
$('#' + response.data[i].工位号 + '_circle').addClass('circle') // 绿色
} else if (response.data[i].状态代码 === '0') {
$('#' + response.data[i].工位号 + '_circle').removeClass('circle')
$('#' + response.data[i].工位号 + '_circle').removeClass('circle1')
$('#' + response.data[i].工位号 + '_circle').removeClass('circle2')
$('#' + response.data[i].工位号 + '_circle').removeClass('circle4')
$('#' + response.data[i].工位号 + '_circle').addClass('circle3') // 蓝色闪
$('#' + response.data[i].工位号 + '_circle').addClass('circle3') // 蓝色
} else if (response.data[i].状态代码 === '1') {
$('#' + response.data[i].工位号 + '_circle').removeClass('circle')
$('#' + response.data[i].工位号 + '_circle').removeClass('circle1')
$('#' + response.data[i].工位号 + '_circle').removeClass('circle3')
$('#' + response.data[i].工位号 + '_circle').removeClass('circle4')
$('#' + response.data[i].工位号 + '_circle').addClass('circle2') // 灰色闪
$('#' + response.data[i].工位号 + '_circle').addClass('circle2') // 灰色
} else {
$('#' + response.data[i].工位号 + '_circle').removeClass('circle3')
$('#' + response.data[i].工位号 + '_circle').removeClass('circle1')
$('#' + response.data[i].工位号 + '_circle').removeClass('circle')
$('#' + response.data[i].工位号 + '_circle').removeClass('circle2')
$('#' + response.data[i].工位号 + '_circle').addClass('circle4') // 灰色
$('#' + response.data[i].工位号 + '_circle').addClass('circle4') // 灰色圈
}
}
})
@@ -759,6 +794,7 @@ export default {
this.returns2 = ''
if ($event.path[2].id === '机床总装') {
getZongzhuang().then(res2 => {
// this.tableData1 = res2.data
if (res2.data.length !== 0) {
this.returns1 = '<div slot="content">总装机床：<br>'
for (let i = 0; i < res2.data.length; i++) {
@@ -771,6 +807,7 @@ export default {
})
} else if ($event.path[2].id === '部件装配') {
getBuzhuang().then(res3 => {
this.tableData2 = res3.data
if (res3.data.length !== 0) {
this.returns2 = '<div slot="content">部件装配：<br>'
for (let i = 0; i < res3.data.length; i++) {
@@ -848,7 +885,19 @@ export default {
this.tooltip3 = '加工零件：' + response.data[0].零件图号_零件工艺计划
}
getOP_state2($event.path[2].id).then(res => {
if (res.data[0].状态代码 === '1') { this.tooltip2 = '设备状态：关机' } else if (res.data[0].状态代码 === '2') { this.tooltip2 = '设备状态：等待' } else if (res.data[0].状态代码 === '3') { this.tooltip2 = '设备状态：运行' } else if (res.data[0].状态代码 === '4') { this.tooltip2 = '设备状态：报警' }
if (res.data[0].状态代码 === '0') {
this.tooltip2 = '设备状态：设备报警'
} else if (res.data[0].状态代码 === '1') {
this.tooltip2 = '设备状态：关机'
} else if (res.data[0].状态代码 === '2') {
this.tooltip2 = '设备状态：等待'
} else if (res.data[0].状态代码 === '3') {
this.tooltip2 = '设备状态：运行'
} else if (res.data[0].状态代码 === '4') {
this.tooltip2 = '设备状态：报警'
} else if (res.data[0].状态代码 === '10') {
this.tooltip2 = '设备状态：工位电脑关闭'
}
})
})
}
@@ -960,7 +1009,7 @@ export default {
background-size:100% 100%;-moz-background-size:100% 100%;
overflow: hidden;
}
/*绿色闪*/
/*绿色*/
.circle{
float: left;
width: 10px;
@@ -969,9 +1018,9 @@ export default {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
background: url('../../../assets/img/greenTwinkle.gif');
/*background: url('../../../assets/img/greenTwinkle.gif');*/
}
/*黄色闪*/
/*黄色*/
.circle1{
float: left;
width: 10px;
@@ -980,9 +1029,9 @@ export default {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
background: url('../../../assets/img/yellowTwinkle.gif');
/*background: url('../../../assets/img/yellowTwinkle.gif');*/
}
/*灰色闪*/
/*灰色*/
.circle2{
float: left;
width: 10px;
@@ -991,25 +1040,26 @@ export default {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
background: url('../../../assets/img/grayTwinkle.gif');
/*background: url('../../../assets/img/grayTwinkle.gif');*/
}
/*蓝色闪*/
/*红色*/
.circle3{
float: left;
width: 10px;
height: 10px;
background-color:dodgerblue;
background-color:red;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
background: url('../../../assets/img/blueTwinkle.gif');
/*background: url('../../../assets/img/blueTwinkle.gif');*/
}
/*灰色*/
/*灰色圈*/
.circle4{
float: left;
width: 10px;
height: 10px;
background-color:gray;
border:2px solid gray;
background-color:transparent;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
@@ -1027,3 +1077,71 @@ export default {
background-color:#FFBB00 ;
}
</style>
<style lang="scss">
/* 滚动条 */
.el-table__body-wrapper::-webkit-scrollbar-thumb {
background: rgb(42,118,206);
width: 1px;
border: none;
border-radius:4px;
}
.el-table__body-wrapper::-webkit-scrollbar {
color: rgb(42,118,206);
width: 4px;
}
/* 滚动条 */
.el-table td, .el-table th.is-leaf {
border: 0px solid #EBEEF5;
}
.el-table--border, .el-table--group {
border: 0px solid #EBEEF5;
}
.el-table::before {
left: 0;
bottom: 0;
width: 100%;
/* height: 1px; */
}
.el-table tbody tr:hover>td {
background-color:transparent!important
}
.el-table{
/* 表格字体颜色 */
color:black;
/* 表格边框颜色 */
/* border: 0.5px solid #758a99; */
height: 500px;
background: transparent;
}
/* 表格内背景颜色 */
.el-table th, .el-table tr,.el-table td{
border: 0;
background-color: transparent;
}
/* 双数行背景颜色 */
.el-table--striped .el-table__body tr.el-table__row--striped td {
background-color: transparent;
background-color: rgba(148, 144, 144, 0.3)
}
/* 使表格背景透明 */
.el-table th, .el-table tr {
background-color: transparent;
}
/* 删除表格下横线 */
.el-table::before {
left: 0;
bottom: 0;
width: 100%;
height: 0px;
}
/* 表格表头字体颜色 */
.el-table thead {
color: white;
font-weight: 500;
background-color: rgba(148, 144, 144, 0.3)
}
.el-table--enable-row-hover .el-table__body tr:hover>td{
background-color: transparent !important;
}
</style>