662 lines
37 KiB
Vue
662 lines
37 KiB
Vue
<template>
|
||
<el-card>
|
||
<div class="process">
|
||
<div :id="OPNAME137" :title="tooltip" style="position: relative;left:48px;top:375px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<!--<div :id="OPNAME137+fang" class="fang"/>-->
|
||
<div :id="OPNAME137+circle" class="circle" style="margin-left: 11px;"/>
|
||
<div style="float: left;text-align: center;width: 50px;line-height: 12px;font-size: 15px;font-weight: bold;margin-left: 3px">{{ OPNAME137 }}</div>
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME138" :title="tooltip" style="position: relative;left:48px;top:382px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<!--<div :id="OPNAME138+fang" class="fang"/>-->
|
||
<div :id="OPNAME138+circle" class="circle" style="margin-left: 11px;"/>
|
||
<div style="float: left;text-align: center;width: 50px;line-height: 12px;font-size: 15px;font-weight: bold;margin-left: 3px">{{ OPNAME138 }}</div>
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME139" :title="tooltip" style="position: relative;left:48px;top:389px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<!--<div :id="OPNAME139+fang" class="fang"/>-->
|
||
<div :id="OPNAME139+circle" class="circle" style="margin-left: 11px;"/>
|
||
<div style="float: left;text-align: center;width: 50px;line-height: 12px;font-size: 15px;font-weight: bold;margin-left: 3px">{{ OPNAME139 }}</div>
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME140" :title="tooltip" style="position: relative;left:48px;top:396px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<!--<div :id="OPNAME140+fang" class="fang"/>-->
|
||
<div :id="OPNAME140+circle" class="circle" style="margin-left: 11px;"/>
|
||
<div style="float: left;text-align: center;width: 50px;line-height: 12px;font-size: 15px;font-weight: bold;margin-left: 3px">{{ OPNAME140 }}</div>
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME141" :title="tooltip" style="position: relative;left:48px;top:403px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<!--<div :id="OPNAME141+fang" class="fang"/>-->
|
||
<div :id="OPNAME141+circle" class="circle" style="margin-left: 11px;"/>
|
||
<div style="float: left;text-align: center;width: 50px;line-height: 12px;font-size: 15px;font-weight: bold;margin-left: 3px">{{ OPNAME141 }}</div>
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME142" :title="tooltip" style="position: relative;left:48px;top:410px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<!--<div :id="OPNAME142+fang" class="fang"/>-->
|
||
<div :id="OPNAME142+circle" class="circle" style="margin-left: 11px;"/>
|
||
<div style="float: left;text-align: center;width: 50px;line-height: 12px;font-size: 15px;font-weight: bold;margin-left: 3px">{{ OPNAME142 }}</div>
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME143" :title="tooltip" style="position: relative;left:48px;top:417px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<!--<div :id="OPNAME143+fang" class="fang"/>-->
|
||
<div :id="OPNAME143+circle" class="circle" style="margin-left: 11px;"/>
|
||
<div style="float: left;text-align: center;width: 50px;line-height: 12px;font-size: 15px;font-weight: bold;margin-left: 3px">{{ OPNAME143 }}</div>
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME144" :title="tooltip" style="position: relative;left:48px;top:424px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<!--<div :id="OPNAME144+fang" class="fang"/>-->
|
||
<div :id="OPNAME144+circle" class="circle" style="margin-left: 11px;"/>
|
||
<div style="float: left;text-align: center;width: 50px;line-height: 12px;font-size: 15px;font-weight: bold;margin-left: 3px">{{ OPNAME144 }}</div>
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME136" :title="tooltip" style="position: relative;left:149px;top:395px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<!--<div :id="OPNAME136+fang" class="fang"/>-->
|
||
<div :id="OPNAME136+circle" class="circle" style="margin-left: 11px;"/>
|
||
<div style="float: left;text-align: center;width: 50px;line-height: 12px;font-size: 15px;font-weight: bold;margin-left: 3px">{{ OPNAME136 }}</div>
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME102" :title="tooltip" style="position: relative;left:788px;top:76px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<div style="float: left;text-align: center;width: 60px;line-height: 12px;font-size: 15px;font-weight: bold">{{ OPNAME102 }}</div>
|
||
<div :id="OPNAME102+circle" class="circle"/>
|
||
<!--<div :id="OPNAME102+fang" class="fang" style="margin-left: 9px"/>-->
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME103" :title="tooltip" style="position: relative;left:788px;top:71px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<div style="float: left;text-align: center;width: 60px;line-height: 12px;font-size: 15px;font-weight: bold">{{ OPNAME103 }}</div>
|
||
<div :id="OPNAME103+circle" class="circle"/>
|
||
<!--<div :id="OPNAME103+fang" class="fang" style="margin-left: 9px"/>-->
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME104" :title="tooltip" style="position: relative;left:788px;top:66px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<div style="float: left;text-align: center;width: 60px;line-height: 12px;font-size: 15px;font-weight: bold">{{ OPNAME104 }}</div>
|
||
<div :id="OPNAME104+circle" class="circle"/>
|
||
<!--<div :id="OPNAME104+fang" class="fang" style="margin-left: 9px"/>-->
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME105" :title="tooltip" style="position: relative;left:788px;top:61px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<div style="float: left;text-align: center;width: 60px;line-height: 12px;font-size: 15px;font-weight: bold">{{ OPNAME105 }}</div>
|
||
<div :id="OPNAME105+circle" class="circle"/>
|
||
<!--<div :id="OPNAME105+fang" class="fang" style="margin-left: 9px"/>-->
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME145" :title="tooltip" style="position: relative;left:788px;top:55px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<div style="float: left;text-align: center;width: 60px;line-height: 12px;font-size: 15px;font-weight: bold">{{ OPNAME145 }}</div>
|
||
<div :id="OPNAME145+circle" class="circle"/>
|
||
<!--<div :id="OPNAME105+fang" class="fang" style="margin-left: 9px"/>-->
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME106" :title="tooltip" style="position: relative;left:788px;top:50px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<div style="float: left;text-align: center;width: 60px;line-height: 12px;font-size: 15px;font-weight: bold">{{ OPNAME106 }}</div>
|
||
<div :id="OPNAME106+circle" class="circle"/>
|
||
<!--<div :id="OPNAME106+fang" class="fang" style="margin-left: 9px"/>-->
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME107" :title="tooltip" style="position: relative;left:788px;top:43px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<div style="float: left;text-align: center;width: 60px;line-height: 12px;font-size: 15px;font-weight: bold">{{ OPNAME107 }}</div>
|
||
<div :id="OPNAME107+circle" class="circle"/>
|
||
<!--<div :id="OPNAME107+fang" class="fang" style="margin-left: 9px"/>-->
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME108" :title="tooltip" style="position: relative;left:788px;top:38px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<div style="float: left;text-align: center;width: 60px;line-height: 12px;font-size: 15px;font-weight: bold">{{ OPNAME108 }}</div>
|
||
<div :id="OPNAME108+circle" class="circle"/>
|
||
<!--<div :id="OPNAME108+fang" class="fang" style="margin-left: 9px"/>-->
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME109" :title="tooltip" style="position: relative;left:788px;top:32px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<div style="float: left;text-align: center;width: 60px;line-height: 12px;font-size: 15px;font-weight: bold">{{ OPNAME109 }}</div>
|
||
<div :id="OPNAME109+circle" class="circle"/>
|
||
<!--<div :id="OPNAME109+fang" class="fang" style="margin-left: 9px"/>-->
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME110" :title="tooltip" style="position: relative;left:788px;top:27px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<div style="float: left;text-align: center;width: 60px;line-height: 12px;font-size: 15px;font-weight: bold">{{ OPNAME110 }}</div>
|
||
<div :id="OPNAME110+circle" class="circle"/>
|
||
<!--<div :id="OPNAME110+fang" class="fang" style="margin-left: 9px"/>-->
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME111" :title="tooltip" style="position: relative;left:788px;top:21px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<div style="float: left;text-align: center;width: 60px;line-height: 12px;font-size: 15px;font-weight: bold">{{ OPNAME111 }}</div>
|
||
<div :id="OPNAME111+circle" class="circle"/>
|
||
<!--<div :id="OPNAME111+fang" class="fang" style="margin-left: 9px"/>-->
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME112" :title="tooltip" style="position: relative;left:788px;top:15px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<div style="float: left;text-align: center;width: 60px;line-height: 12px;font-size: 15px;font-weight: bold">{{ OPNAME112 }}</div>
|
||
<div :id="OPNAME112+circle" class="circle"/>
|
||
<!--<div :id="OPNAME112+fang" class="fang" style="margin-left: 9px"/>-->
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME113" :title="tooltip" style="position: relative;left:889px;top:-300px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<div style="float: left;text-align: center;width: 60px;line-height: 12px;font-size: 15px;font-weight: bold">{{ OPNAME113 }}</div>
|
||
<div :id="OPNAME113+circle" class="circle"/>
|
||
<!--<div :id="OPNAME113+fang" class="fang" style="margin-left: 12px"/>-->
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME114" :title="tooltip" style="position: relative;left:889px;top:-245px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<div style="float: left;text-align: center;width: 60px;line-height: 12px;font-size: 15px;font-weight: bold">{{ OPNAME114 }}</div>
|
||
<div :id="OPNAME114+circle" class="circle"/>
|
||
<!--<div :id="OPNAME114+fang" class="fang" style="margin-left: 12px"/>-->
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME101" :title="tooltip" style="position: relative;left:895px;top:-225px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<div style="float: left;text-align: center;width: 60px;line-height: 12px;font-size: 15px;font-weight: bold">{{ OPNAME101 }}</div>
|
||
<div :id="OPNAME101+circle" class="circle"/>
|
||
<!--<div :id="OPNAME101+fang" class="fang" style="margin-left: 12px"/>-->
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME149" :title="tooltip" style="position: relative;left:895px;top:-190px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<div style="float: left;text-align: center;width: 60px;line-height: 12px;font-size: 15px;font-weight: bold">{{ OPNAME149 }}</div>
|
||
<div :id="OPNAME149+circle" class="circle"/>
|
||
<!--<div :id="OPNAME149+fang" class="fang" style="margin-left: 12px"/>-->
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME115" :title="tooltip" style="position: relative;left:895px;top:-186px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<div style="float: left;text-align: center;width: 60px;line-height: 12px;font-size: 15px;font-weight: bold">{{ OPNAME115 }}</div>
|
||
<div :id="OPNAME115+circle" class="circle"/>
|
||
<!--<div :id="OPNAME115+fang" class="fang" style="margin-left: 9px"/>-->
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME116" :title="tooltip" style="position: relative;left:895px;top:-152px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<div style="float: left;text-align: center;width: 60px;line-height: 12px;font-size: 15px;font-weight: bold">{{ OPNAME116 }}</div>
|
||
<div :id="OPNAME116+circle" class="circle"/>
|
||
<!--<div :id="OPNAME116+fang" class="fang" style="margin-left: 9px"/>-->
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME117" :title="tooltip" style="position: relative;left:895px;top:-150px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<div style="float: left;text-align: center;width: 60px;line-height: 12px;font-size: 15px;font-weight: bold">{{ OPNAME117 }}</div>
|
||
<div :id="OPNAME117+circle" class="circle"/>
|
||
<!--<div :id="OPNAME117+fang" class="fang" style="margin-left: 9px"/>-->
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME118" :title="tooltip" style="position: relative;left:1032px;top:-381px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<!--<div :id="OPNAME118+fang" class="fang"/>-->
|
||
<div :id="OPNAME118+circle" class="circle" style="margin-left: 13px"/>
|
||
<div style="float: left;text-align: center;width: 50px;line-height: 12px;font-size: 15px;font-weight: bold;margin-left: 3px">{{ OPNAME118 }}</div>
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME119" :title="tooltip" style="position: relative;left:1032px;top:-366px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<!--<div :id="OPNAME119+fang" class="fang"/>-->
|
||
<div :id="OPNAME119+circle" class="circle" style="margin-left: 13px"/>
|
||
<div style="float: left;text-align: center;width: 50px;line-height: 12px;font-size: 15px;font-weight: bold;margin-left: 3px">{{ OPNAME119 }}</div>
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME120" :title="tooltip" style="position: relative;left:1032px;top:-350px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<!--<div :id="OPNAME120+fang" class="fang"/>-->
|
||
<div :id="OPNAME120+circle" class="circle" style="margin-left: 13px"/>
|
||
<div style="float: left;text-align: center;width: 50px;line-height: 12px;font-size: 15px;font-weight: bold;margin-left: 3px">{{ OPNAME120 }}</div>
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME121" :title="tooltip" style="position: relative;left:1032px;top:-255px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<!--<div :id="OPNAME121+fang" class="fang"/>-->
|
||
<div :id="OPNAME121+circle" class="circle" style="margin-left: 13px"/>
|
||
<div style="float: left;text-align: center;width: 50px;line-height: 12px;font-size: 15px;font-weight: bold;margin-left: 3px">{{ OPNAME121 }}</div>
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME122" :title="tooltip" style="position: relative;left:1032px;top:-175px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<!--<div :id="OPNAME122+fang" class="fang"/>-->
|
||
<div :id="OPNAME122+circle" class="circle" style="margin-left: 13px"/>
|
||
<div style="float: left;text-align: center;width: 50px;line-height: 12px;font-size: 15px;font-weight: bold;margin-left: 3px">{{ OPNAME122 }}</div>
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME123" :title="tooltip" style="position: relative;left:1128px;top:-685px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<!--<div :id="OPNAME123+fang" class="fang"/>-->
|
||
<div :id="OPNAME123+circle" class="circle" style="margin-left: 13px"/>
|
||
<div style="float: left;text-align: center;width: 50px;line-height: 12px;font-size: 15px;font-weight: bold;margin-left: 3px">{{ OPNAME123 }}</div>
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME124" :title="tooltip" style="position: relative;left:1128px;top:-666px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<!--<div :id="OPNAME124+fang" class="fang"/>-->
|
||
<div :id="OPNAME124+circle" class="circle" style="margin-left: 13px"/>
|
||
<div style="float: left;text-align: center;width: 50px;line-height: 12px;font-size: 15px;font-weight: bold;margin-left: 3px">{{ OPNAME124 }}</div>
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME125" :title="tooltip" style="position: relative;left:1128px;top:-651px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<!--<div :id="OPNAME125+fang" class="fang"/>-->
|
||
<div :id="OPNAME125+circle" class="circle" style="margin-left: 13px"/>
|
||
<div style="float: left;text-align: center;width: 50px;line-height: 12px;font-size: 15px;font-weight: bold;margin-left: 3px">{{ OPNAME125 }}</div>
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME126" :title="tooltip" style="position: relative;left:1128px;top:-635px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<!--<div :id="OPNAME126+fang" class="fang"/>-->
|
||
<div :id="OPNAME126+circle" class="circle" style="margin-left: 13px"/>
|
||
<div style="float: left;text-align: center;width: 50px;line-height: 12px;font-size: 15px;font-weight: bold;margin-left: 3px">{{ OPNAME126 }}</div>
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME127" :title="tooltip" style="position: relative;left:1128px;top:-395px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<!--<div :id="OPNAME127+fang" class="fang"/>-->
|
||
<div :id="OPNAME127+circle" class="circle" style="margin-left: 13px"/>
|
||
<div style="float: left;text-align: center;width: 50px;line-height: 12px;font-size: 15px;font-weight: bold;margin-left: 3px">{{ OPNAME127 }}</div>
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME128" :title="tooltip" style="position: relative;left:1128px;top:-374px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<!--<div :id="OPNAME128+fang" class="fang"/>-->
|
||
<div :id="OPNAME128+circle" class="circle" style="margin-left: 13px"/>
|
||
<div style="float: left;text-align: center;width: 50px;line-height: 12px;font-size: 15px;font-weight: bold;margin-left: 3px">{{ OPNAME128 }}</div>
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME129" :title="tooltip" style="position: relative;left:1280px;top:-828px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<!--<div :id="OPNAME129+fang" class="fang"/>-->
|
||
<div :id="OPNAME129+circle" class="circle" style="margin-left: 13px"/>
|
||
<div style="float: left;text-align: center;width: 50px;line-height: 12px;font-size: 15px;font-weight: bold;margin-left: 3px">{{ OPNAME129 }}</div>
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME130" :title="tooltip" style="position: relative;left:1280px;top:-818px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<!--<div :id="OPNAME130+fang" class="fang"/>-->
|
||
<div :id="OPNAME130+circle" class="circle" style="margin-left: 13px"/>
|
||
<div style="float: left;text-align: center;width: 50px;line-height: 12px;font-size: 15px;font-weight: bold;margin-left: 3px">{{ OPNAME130 }}</div>
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME131" :title="tooltip" style="position: relative;left:1280px;top:-778px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<!--<div :id="OPNAME131+fang" class="fang"/>-->
|
||
<div :id="OPNAME131+circle" class="circle" style="margin-left: 13px"/>
|
||
<div style="float: left;text-align: center;width: 50px;line-height: 12px;font-size: 15px;font-weight: bold;margin-left: 3px">{{ OPNAME131 }}</div>
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME132" :title="tooltip" style="position: relative;left:1280px;top:-700px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<!--<div :id="OPNAME132+fang" class="fang"/>-->
|
||
<div :id="OPNAME132+circle" class="circle" style="margin-left: 13px"/>
|
||
<div style="float: left;text-align: center;width: 50px;line-height: 12px;font-size: 15px;font-weight: bold;margin-left: 3px">{{ OPNAME132 }}</div>
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME133" :title="tooltip" style="position: relative;left:1283px;top:-697px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<!--<div :id="OPNAME133+fang" class="fang"/>-->
|
||
<div :id="OPNAME133+circle" class="circle" style="margin-left: 10px"/>
|
||
<div style="float: left;text-align: center;width: 50px;line-height: 12px;font-size: 15px;font-weight: bold;margin-left: 3px">{{ OPNAME133 }}</div>
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME134" :title="tooltip" style="position: relative;left:1280px;top:-605px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<!--<div :id="OPNAME134+fang" class="fang"/>-->
|
||
<div :id="OPNAME134+circle" class="circle" style="margin-left: 13px"/>
|
||
<div style="float: left;text-align: center;width: 50px;line-height: 12px;font-size: 15px;font-weight: bold;margin-left: 3px">{{ OPNAME134 }}</div>
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME135" :title="tooltip" style="position: relative;left:1280px;top:-590px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<!--<div :id="OPNAME135+fang" class="fang"/>-->
|
||
<div :id="OPNAME135+circle" class="circle" style="margin-left: 13px"/>
|
||
<div style="float: left;text-align: center;width: 50px;line-height: 12px;font-size: 15px;font-weight: bold;margin-left: 3px">{{ OPNAME135 }}</div>
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME146" :title="tooltip" style="position: relative;left:1450px;top:-1057px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<!--<div :id="OPNAME135+fang" class="fang"/>-->
|
||
<div :id="OPNAME146+circle" class="circle" style="margin-left: 13px"/>
|
||
<div style="float: left;text-align: center;width: 50px;line-height: 12px;font-size: 15px;font-weight: bold;margin-left: 3px">{{ OPNAME146 }}</div>
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME148" :title="tooltip" style="position: relative;left:1568px;top:-1085px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<!--<div :id="OPNAME135+fang" class="fang"/>-->
|
||
<div :id="OPNAME148+circle" class="circle" style="margin-left: 13px"/>
|
||
<div style="float: left;text-align: center;width: 50px;line-height: 12px;font-size: 15px;font-weight: bold;margin-left: 3px">{{ OPNAME148 }}</div>
|
||
</el-row>
|
||
</div>
|
||
<div :id="OPNAME147" :title="tooltip" style="position: relative;left:1336px;top:-548px; width: 100px;height: 28px;" @mouseover="changeActive($event)" @mouseout="removeActive($event)" @click="opclickshowPanel($event)">
|
||
<el-row>
|
||
<div style="float: left;text-align: center;width: 60px;line-height: 12px;font-size: 15px;font-weight: bold">{{ OPNAME147 }}</div>
|
||
<div :id="OPNAME147+circle" class="circle"/>
|
||
<!--<div :id="OPNAME117+fang" class="fang" style="margin-left: 9px"/>-->
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</template>
|
||
|
||
<script>
|
||
import $ from 'jquery'
|
||
import { getwork_state, getOP_state, searchtooltip } from '@/api/ManufacturingCenter/EquipmentMonitoring'
|
||
import { wsuri, name3 } from '@/utils/request'
|
||
export default {
|
||
data() {
|
||
return {
|
||
fang: '_fang',
|
||
circle: '_circle',
|
||
tooltip: '',
|
||
socketConnect: true,
|
||
OPNAME101: 'OP1010',
|
||
OPNAME102: 'OP1020',
|
||
OPNAME103: 'OP1030',
|
||
OPNAME104: 'OP1040',
|
||
OPNAME105: 'OP1050',
|
||
OPNAME106: 'OP1060',
|
||
OPNAME107: 'OP1070',
|
||
OPNAME108: 'OP1080',
|
||
OPNAME109: 'OP1090',
|
||
OPNAME110: 'OP1100',
|
||
OPNAME111: 'OP1110',
|
||
OPNAME112: 'OP1120',
|
||
OPNAME113: 'OP1130',
|
||
OPNAME114: 'OP1140',
|
||
OPNAME115: 'OP1150',
|
||
OPNAME116: 'OP1160',
|
||
OPNAME117: 'OP1170',
|
||
OPNAME118: 'OP1180',
|
||
OPNAME119: 'OP1190',
|
||
OPNAME120: 'OP1200',
|
||
OPNAME121: 'OP1210',
|
||
OPNAME122: 'OP1220',
|
||
OPNAME123: 'OP1230',
|
||
OPNAME124: 'OP1240',
|
||
OPNAME125: 'OP1250',
|
||
OPNAME126: 'OP1260',
|
||
OPNAME127: 'OP1270',
|
||
OPNAME128: 'OP1280',
|
||
OPNAME129: 'OP1290',
|
||
OPNAME130: 'OP1300',
|
||
OPNAME131: 'OP1310',
|
||
OPNAME132: 'OP1320',
|
||
OPNAME133: 'OP1330',
|
||
OPNAME134: 'OP1340',
|
||
OPNAME135: 'OP1350',
|
||
OPNAME136: 'OP1360',
|
||
OPNAME137: 'OP1370',
|
||
OPNAME138: 'OP1380',
|
||
OPNAME139: 'OP1390',
|
||
OPNAME140: 'OP1400',
|
||
OPNAME141: 'OP1410',
|
||
OPNAME142: 'OP1420',
|
||
OPNAME143: 'OP1430',
|
||
OPNAME144: 'OP1440',
|
||
OPNAME145: 'OP1450',
|
||
OPNAME146: 'OP1460',
|
||
OPNAME147: 'OP1470',
|
||
OPNAME148: 'OP1480',
|
||
OPNAME149: 'OP1490',
|
||
timer: null,
|
||
opname: ''
|
||
}
|
||
},
|
||
mounted() {
|
||
this.connect()
|
||
this.getwork_state()
|
||
this.getOP_state()
|
||
this.timer = setInterval(this.getwork_state, 60 * 1000) // 工位状态 60秒 一刷新
|
||
},
|
||
beforeDestroy() {
|
||
// 页面结束之前关闭所有timer，防止资源占用
|
||
clearInterval(this.timer)
|
||
},
|
||
methods: {
|
||
// 工作状态 0 黄色 1 绿色
|
||
getwork_state() {
|
||
this.getOP_state()
|
||
|
||
// function opclickshowPanel() {
|
||
// console.log(this.opname)
|
||
// if (this.opname != undefined) {
|
||
// var aaa = 'http://localhost:8065/webpage/MesWebFun02.htm?opname=' + this.opname + '&ip=192.168.1.103&port=8015'
|
||
// window.open(aaa)
|
||
// }
|
||
// }
|
||
|
||
getwork_state().then(response => {
|
||
console.log(response.data)
|
||
// 通过jQuery添加类选择器和移除类选择器
|
||
for (let i = 0; i < response.data.length; i++) {
|
||
// 点击工位事件
|
||
// 通过“事件监听”的方式来绑定事件（也叫Dom2级事件处理程序）
|
||
// document.getElementById(response.data[i].设备号).onclick = _this.opclickshowPanel(); //鼠标单击的时候调用showMes这个函数
|
||
// $('#' + response.data[i].设备号).bind('click', opclickshowPanel)
|
||
if (response.data[i].设备状态 === '1') {
|
||
$('#' + response.data[i].设备号 + '_fang').removeClass('fang1')
|
||
$('#' + response.data[i].设备号 + '_fang').addClass('fang')
|
||
} else if (response.data[i].设备状态 === '0') {
|
||
$('#' + response.data[i].设备号 + '_fang').removeClass('fang')
|
||
$('#' + response.data[i].设备号 + '_fang').addClass('fang1')
|
||
}
|
||
}
|
||
})
|
||
},
|
||
opclickshowPanel($event) {
|
||
if ($event.path[2].id !== undefined && $event.path[2].id !== null && $event.path[2].id !== '') {
|
||
var aaa = 'http://192.168.1.232/webpage/MesWebFun02.htm?opname=' + $event.path[2].id + '&ip=192.168.1.231&port=61101'
|
||
window.open(aaa)
|
||
}
|
||
},
|
||
// 工位电流值
|
||
// 1停机灰色 2开机黄色 3运行绿色 4报警红色
|
||
getOP_state() {
|
||
getOP_state().then(response => {
|
||
for (let i = 0; i < response.data.length; i++) {
|
||
if (response.data[i].状态代码 === '1') {
|
||
$('#' + response.data[i].工位号 + '_circle').removeClass('circle3')
|
||
$('#' + response.data[i].工位号 + '_circle').removeClass('circle1')
|
||
$('#' + response.data[i].工位号 + '_circle').removeClass('circle')
|
||
$('#' + response.data[i].工位号 + '_circle').addClass('circle2')
|
||
} else if (response.data[i].状态代码 === '2') {
|
||
$('#' + response.data[i].工位号 + '_circle').removeClass('circle')
|
||
$('#' + response.data[i].工位号 + '_circle').removeClass('circle3')
|
||
$('#' + response.data[i].工位号 + '_circle').removeClass('circle2')
|
||
$('#' + 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').addClass('circle')
|
||
} else if (response.data[i].状态代码 === '4') {
|
||
$('#' + response.data[i].工位号 + '_circle').removeClass('circle')
|
||
$('#' + response.data[i].工位号 + '_circle').removeClass('circle1')
|
||
$('#' + response.data[i].工位号 + '_circle').removeClass('circle2')
|
||
$('#' + response.data[i].工位号 + '_circle').addClass('circle3')
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 鼠标移入加入class
|
||
changeActive($event) {
|
||
searchtooltip($event.path[2].id).then(response => {
|
||
console.log(response.data)
|
||
if (response.data.length > 0) {
|
||
if (response.data[0].工艺计划流水号 === 0) {
|
||
response.data[0].零件图号_零件工艺计划 = '-'
|
||
}
|
||
this.tooltip = '当前正在加工:' + response.data[0].零件图号_零件工艺计划
|
||
} else {
|
||
this.tooltip = '没有零件加工'
|
||
}
|
||
})
|
||
// $event.currentTarget.className="active";
|
||
},
|
||
removeActive($event) {
|
||
// $event.currentTarget.className="";
|
||
},
|
||
/* socket连接*/
|
||
connect() {
|
||
if (this.socketConnect === true) {
|
||
this.initWebsocket()
|
||
} else {
|
||
this.websocketclose()
|
||
}
|
||
},
|
||
// 初始化websocket
|
||
initWebsocket() {
|
||
this.websock = new WebSocket(wsuri)// 这里面的this都指向vue
|
||
this.websock.onopen = this.websocketopen
|
||
this.websock.onmessage = this.websocketonmessage
|
||
this.websock.onerror = this.websocketerror
|
||
},
|
||
// 打开
|
||
websocketopen() {
|
||
console.log('WebSocket连接成功')
|
||
this.websock.send('{<' + name3 + '>}')
|
||
},
|
||
// 数据接收
|
||
websocketonmessage(msg) {
|
||
this.msg = msg.data
|
||
// console.log(msg)
|
||
var msgArray = this.msg.split('|')
|
||
if (msgArray !== '' && msgArray.length >= 4) {
|
||
var command = msgArray[1]
|
||
var opname = msgArray[2]
|
||
var value = msgArray[3]
|
||
switch (command) {
|
||
case 'MachineStatusAlarm':// hight 报错不管心跳
|
||
case 'Alarm':
|
||
if (value === 1) {
|
||
console.log(1)
|
||
} else {
|
||
console.log(2)
|
||
}
|
||
break
|
||
case 'PartPalletStatus':// 托盘到位
|
||
if (value === 1) {
|
||
console.log(1)
|
||
} else {
|
||
console.log(2)
|
||
}
|
||
break
|
||
case 'OEE':// 托盘到位
|
||
if (value === '1') {
|
||
$('#' + opname + '_circle').removeClass('circle3')
|
||
$('#' + opname + '_circle').removeClass('circle1')
|
||
$('#' + opname + '_circle').removeClass('circle')
|
||
$('#' + opname + '_circle').addClass('circle2')
|
||
} else if (value === '2') {
|
||
$('#' + opname + '_circle').removeClass('circle')
|
||
$('#' + opname + '_circle').removeClass('circle3')
|
||
$('#' + opname + '_circle').removeClass('circle2')
|
||
$('#' + opname + '_circle').addClass('circle1')
|
||
} else if (value === '3') {
|
||
$('#' + opname + '_circle').removeClass('circle3')
|
||
$('#' + opname + '_circle').removeClass('circle1')
|
||
$('#' + opname + '_circle').removeClass('circle2')
|
||
$('#' + opname + '_circle').addClass('circle')
|
||
} else if (value === '4') {
|
||
$('#' + opname + '_circle').removeClass('circle')
|
||
$('#' + opname + '_circle').removeClass('circle1')
|
||
$('#' + opname + '_circle').removeClass('circle2')
|
||
$('#' + opname + '_circle').addClass('circle3')
|
||
}
|
||
// getOP_state() // 初始化设备状态
|
||
break
|
||
default:
|
||
break
|
||
}
|
||
}
|
||
},
|
||
// 关闭
|
||
websocketclose() {
|
||
this.websock.close()
|
||
},
|
||
// 失败
|
||
websocketerror() {
|
||
console.log('WebSocket连接失败')
|
||
this.socketConnect = false
|
||
},
|
||
searchState() {}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.process{
|
||
text-align: center;
|
||
margin-left: 0px;
|
||
margin-top: 0px;
|
||
width: 1690px;
|
||
height: 830px;
|
||
/*border: 1px solid red;*/
|
||
background: url('../../../assets/img/img25.png') repeat;
|
||
background-repeat:no-repeat;
|
||
background-size:100% 100%;-moz-background-size:100% 100%;
|
||
}
|
||
/*绿色*/
|
||
.circle{
|
||
float: left;
|
||
width: 10px;
|
||
height: 10px;
|
||
background-color:limegreen;
|
||
border-radius: 50%;
|
||
-moz-border-radius: 50%;
|
||
-webkit-border-radius: 50%;
|
||
}
|
||
/*黄色*/
|
||
.circle1{
|
||
float: left;
|
||
width: 10px;
|
||
height: 10px;
|
||
background-color:#FFBB00 ;
|
||
border-radius: 50%;
|
||
-moz-border-radius: 50%;
|
||
-webkit-border-radius: 50%;
|
||
}
|
||
/*灰色*/
|
||
.circle2{
|
||
float: left;
|
||
width: 10px;
|
||
height: 10px;
|
||
background-color:gray;
|
||
border-radius: 50%;
|
||
-moz-border-radius: 50%;
|
||
-webkit-border-radius: 50%;
|
||
}
|
||
/*红色*/
|
||
.circle3{
|
||
float: left;
|
||
width: 10px;
|
||
height: 10px;
|
||
background-color:red;
|
||
border-radius: 50%;
|
||
-moz-border-radius: 50%;
|
||
-webkit-border-radius: 50%;
|
||
}
|
||
.fang{
|
||
float: left;
|
||
width: 10px;
|
||
height: 10px;
|
||
background-color:limegreen;
|
||
}
|
||
.fang1{
|
||
float: left;
|
||
width: 10px;
|
||
height: 10px;
|
||
background-color:#FFBB00 ;
|
||
}
|
||
</style>
|