<template>
  <div>
    <el-card class="cardSBJK" style="overflow-y:hidden">
      <div class="process">
        <el-tooltip :enterable="false" :id="OPNAME137" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME137" :title="tooltip" style="position: relative;left:48px;top:375px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME138" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME138" :title="tooltip" style="position: relative;left:48px;top:382px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME139" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME139" :title="tooltip" style="position: relative;left:48px;top:389px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME140" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME140" :title="tooltip" style="position: relative;left:48px;top:396px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME141" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME141" :title="tooltip" style="position: relative;left:48px;top:403px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME142" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME142" :title="tooltip" style="position: relative;left:48px;top:410px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME143" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME143" :title="tooltip" style="position: relative;left:48px;top:417px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME144" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME144" :title="tooltip" style="position: relative;left:48px;top:424px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME136" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME136" :title="tooltip" style="position: relative;left:199px;top:395px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME150" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME150" :title="tooltip" style="position: relative;left:788px;top:10px; width: 100px;height: 28px;" @click="opclickshowPanel($event)">
            <el-row>
              <div style="float: left;text-align: center;width: 60px;line-height: 12px;font-size: 15px;font-weight: bold">{{ OPNAME150 }}</div>
              <div :id="OPNAME150+circle" class="circle"/>
              <!--<div :id="OPNAME102+fang" class="fang" style="margin-left: 9px"/>-->
            </el-row>
          </div>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME102" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME102" :title="tooltip" style="position: relative;left:788px;top:50px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME103" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME103" :title="tooltip" style="position: relative;left:788px;top:41px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME104" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME104" :title="tooltip" style="position: relative;left:788px;top:36px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME105" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME105" :title="tooltip" style="position: relative;left:788px;top:31px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME145" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME145" :title="tooltip" style="position: relative;left:788px;top:25px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME106" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME106" :title="tooltip" style="position: relative;left:788px;top:20px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME1061" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME1061" :title="tooltip" style="position: relative;left:788px;top:15px; width: 100px;height: 28px;" @click="opclickshowPanel($event)">
            <el-row>
              <div style="float: left;text-align: center;width: 60px;line-height: 12px;font-size: 15px;font-weight: bold">{{ OPNAME1061 }}</div>
              <div :id="OPNAME1061+circle" class="circle"/>
              <!--<div :id="OPNAME106+fang" class="fang" style="margin-left: 9px"/>-->
            </el-row>
          </div>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME107" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME107" :title="tooltip" style="position: relative;left:788px;top:8px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME108" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME108" :title="tooltip" style="position: relative;left:788px;top:3px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME109" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME109" :title="tooltip" style="position: relative;left:788px;top:-3px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME1091" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME1091" :title="tooltip" style="position: relative;left:788px;top:-8px; width: 100px;height: 28px;" @click="opclickshowPanel($event)">
            <el-row>
              <div style="float: left;text-align: center;width: 60px;line-height: 12px;font-size: 15px;font-weight: bold">{{ OPNAME1091 }}</div>
              <div :id="OPNAME1091+circle" class="circle"/>
              <!--<div :id="OPNAME109+fang" class="fang" style="margin-left: 9px"/>-->
            </el-row>
          </div>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME110" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME110" :title="tooltip" style="position: relative;left:788px;top:-12px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME111" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME111" :title="tooltip" style="position: relative;left:788px;top:-18px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME112" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME112" :title="tooltip" style="position: relative;left:788px;top:-25px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME113" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME113" :title="tooltip" style="position: relative;left:889px;top:-380px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME114" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME114" :title="tooltip" style="position: relative;left:889px;top:-325px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME101" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME101" :title="tooltip" style="position: relative;left:895px;top:-305px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME149" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME149" :title="tooltip" style="position: relative;left:895px;top:-270px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME115" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME115" :title="tooltip" style="position: relative;left:895px;top:-266px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME116" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME116" :title="tooltip" style="position: relative;left:895px;top:-232px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME117" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME117" :title="tooltip" style="position: relative;left:895px;top:-230px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME118" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME118" :title="tooltip" style="position: relative;left:1032px;top:-461px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME119" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME119" :title="tooltip" style="position: relative;left:1032px;top:-446px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME120" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME120" :title="tooltip" style="position: relative;left:1032px;top:-430px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME121" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME121" :title="tooltip" style="position: relative;left:1032px;top:-325px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME122" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME122" :title="tooltip" style="position: relative;left:1032px;top:-245px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME123" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME123" :title="tooltip" style="position: relative;left:1128px;top:-770px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME124" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME124" :title="tooltip" style="position: relative;left:1128px;top:-751px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME125" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME125" :title="tooltip" style="position: relative;left:1128px;top:-736px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME126" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME126" :title="tooltip" style="position: relative;left:1128px;top:-720px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME127" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME127" :title="tooltip" style="position: relative;left:1128px;top:-445px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME128" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME128" :title="tooltip" style="position: relative;left:1128px;top:-444px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME129" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME129" :title="tooltip" style="position: relative;left:1280px;top:-908px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME130" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME130" :title="tooltip" style="position: relative;left:1280px;top:-898px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME131" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME131" :title="tooltip" style="position: relative;left:1280px;top:-858px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME132" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME132" :title="tooltip" style="position: relative;left:1280px;top:-780px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME133" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME133" :title="tooltip" style="position: relative;left:1283px;top:-777px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME1331" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME1331" :title="tooltip" style="position: relative;left:1283px;top:-777px; width: 100px;height: 28px;" @click="opclickshowPanel($event)">
            <el-row>
              <!--<div :id="OPNAME1331+fang" class="fang"/>-->
              <div :id="OPNAME1331+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">{{ OPNAME1331 }}</div>
            </el-row>
          </div>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME134" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME134" :title="tooltip" style="position: relative;left:1280px;top:-705px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME135" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME135" :title="tooltip" style="position: relative;left:1280px;top:-630px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME146" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME146" :title="tooltip" style="position: relative;left:1450px;top:-1167px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME148" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :id="OPNAME148" :title="tooltip" style="position: relative;left:1568px;top:-1195px; width: 100px;height: 28px;" @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>
        </el-tooltip>
        <el-tooltip :enterable="false" :id="OPNAME147" placement="top" @mouseover.native.prevent="changeActive($event)">
          <div slot="content">{{ tooltip1 }}<br>{{ tooltip2 }}<br>{{ tooltip3 }}<br>单击查看MES系统</div>
          <div :title="tooltip" style="position: relative;left:1330px;top:-660px; width: 100px;height: 28px;" @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="OPNAME147+circle" class="circle" style="margin-left: 4px"/>
            </el-row>
          </div>
        </el-tooltip>
        <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>
        </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>
        </div>
      </div>
      <div style="position: absolute;margin-top: -825px;margin-left: 20px;height: 30px;width: 120px;font-weight: bold;font-size: 20px;color: black;z-index: 999;">
        {{ nowdate }}
      </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>-->

      <div style="position: relative;margin-top: -610px;margin-left: 490px;;width: 120px;height: 600px;background-color: transparent;overflow-y:hidden">
        <div style="">
          <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>
      <div style="position: relative;margin-top: -600px;margin-left: 617px;width: 154px;height: 600px;background-color: transparent;overflow-y:hidden">
        <div style="">
          <el-table :highlight-current-row="false" :stripe="false" :show-header="false" :data="tableData2" max-height="365" style="width: 148px;text-align: center" size="mini">
            <el-table-column label="总装机床" align="left" width="148" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.机床图号 }}&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>
    </el-card>

    <!--    <div style="position: absolute;margin-top: -610px;margin-left: 490px;;width: 1200px;height: auto;background-color: transparent">-->
    <!--      <div>-->
    <!--        <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>-->

  </div>

</template>

<script>
import $ from 'jquery'
import { getwork_state, getOP_state, searchtooltip, getOP_state2, getDaijiagong, getZongzhuang, getBuzhuang } from '@/api/ManufacturingCenter/EquipmentMonitoring'
import { wsuri, name3 } from '@/utils/request'
import { mapGetters } from 'vuex' // 暂无用
export default {
  data() {
    return {
      tableData1: '',
      tableData2: '',
      returns1: '',
      returns2: '',
      fang: '_fang',
      circle: '_circle',
      tooltip: '',
      tooltip1: '',
      tooltip2: '',
      tooltip3: '',
      nowdate: '',
      socketConnect: true,
      机床总装: '总装机床',
      部件装配: '装配部件',
      OPNAME101: 'OP1010',
      OPNAME102: 'OP1020',
      OPNAME103: 'OP1030',
      OPNAME104: 'OP1040',
      OPNAME105: 'OP1050',
      OPNAME106: 'OP1060',
      OPNAME1061: 'OP1061',
      OPNAME107: 'OP1070',
      OPNAME108: 'OP1080',
      OPNAME109: 'OP1090',
      OPNAME1091: 'OP1091',
      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',
      OPNAME1331: 'OP1331',
      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',
      OPNAME150: 'OP1500',
      timer: null,
      opname: ''
    }
  },
  computed: { // 暂无用
    ...mapGetters([
      'sidebar'
    ])
  },
  watch: { // 暂无用
    sidebar(val) {
      console.log(val)
    }
  },
  mounted() {
    // 获取时间
    var date = new Date()
    var y = date.getFullYear()
    var m = date.getMonth() + 1
    m = m < 10 ? '0' + m : m
    var d = date.getDate()
    d = d < 10 ? ('0' + d) : d
    var time1 = y + '-' + m + '-' + d
    this.nowdate = time1
    // 获取时间
    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() {
    // 页面结束之前关闭所有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 => {
        // 通过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.232&port=61101'
        var aaa = 'http://192.168.1.232:8007/#/login?OPNAME=' + $event.path[2].id
        window.open(aaa)
      }
    },
    // 工位电流值
    // 1停机灰色 2开机黄色 3运行绿色 4报警红色
    // 0 电流计故障 蓝 1 设备关机 灰 2 设备开机 黄 3 设备工作 绿 10断网或电脑关机 透明
    getOP_state() {
      getOP_state().then(response => {
        for (let i = 0; i < response.data.length; i++) {
          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').removeClass('circle4')
            $('#' + 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') // 绿色
          } 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') // 蓝色
          } 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') // 灰色
          } 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') // 灰色圈
          }
        }
      })
    },
    // 鼠标移入加入class
    changeActive($event) {
      if ($event.path[2].id) {
        this.tooltip1 = ''
        this.tooltip2 = ''
        this.tooltip3 = ''
        this.returns1 = ''
        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++) {
                this.returns1 = this.returns1 + res2.data[i].机床图号 + '<br>'
              }
              this.returns1 = this.returns1 + '</div>'
            } else {
              this.returns1 = '<div slot="content">无总装机床</div>'
            }
          })
        } 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++) {
                this.returns2 = this.returns2 + res3.data[i].机床图号 + '&nbsp;&nbsp;&nbsp;' + res3.data[i].任务名称 + '<br>'
              }
              this.returns2 = this.returns2 + '</div>'
            } else {
              this.returns2 = '<div slot="content">无装配部件</div>'
            }
          })
        } else if ($event.path[2].id === 'OP1470') {
          searchtooltip($event.path[2].id).then(response => {
            if (response.data[0].工艺计划流水号 === 0 || response.data[0].工艺计划流水号 === null) {
              this.tooltip1 = '设备名称：' + response.data[0].设备名称
              getDaijiagong($event.path[2].id).then(res1 => {
                if (res1.data.length !== 0) {
                  this.tooltip3 = '热处理零件：' + res1.data[0].零件图号
                } else {
                  this.tooltip3 = '热处理零件：无'
                }
              })
            } else {
              this.tooltip1 = '设备名称：' + response.data[0].设备名称
              this.tooltip3 = '热处理零件：' + response.data[0].零件图号_零件工艺计划
            }
            this.tooltip2 = ''
          })
        } else if ($event.path[2].id === 'OP1460') {
          searchtooltip($event.path[2].id).then(response => {
            if (response.data[0].工艺计划流水号 === 0 || response.data[0].工艺计划流水号 === null) {
              this.tooltip1 = '设备名称：' + response.data[0].设备名称
              getDaijiagong($event.path[2].id).then(res1 => {
                if (res1.data.length !== 0) {
                  this.tooltip3 = '处理零件：' + res1.data[0].零件图号
                } else {
                  this.tooltip3 = '处理零件：无'
                }
              })
            } else {
              this.tooltip1 = '设备名称：' + response.data[0].设备名称
              this.tooltip3 = '处理零件：' + response.data[0].零件图号_零件工艺计划
            }
            this.tooltip2 = ''
          })
        } else if ($event.path[2].id === 'OP1480') {
          searchtooltip($event.path[2].id).then(response => {
            if (response.data[0].工艺计划流水号 === 0 || response.data[0].工艺计划流水号 === null) {
              this.tooltip1 = '设备名称：' + response.data[0].设备名称
              getDaijiagong($event.path[2].id).then(res1 => {
                if (res1.data.length !== 0) {
                  this.tooltip3 = '处理零件：' + res1.data[0].零件图号
                } else {
                  this.tooltip3 = '处理零件：无'
                }
              })
            } else {
              this.tooltip1 = '设备名称：' + response.data[0].设备名称
              this.tooltip3 = '处理零件：' + response.data[0].零件图号_零件工艺计划
            }
            this.tooltip2 = ''
          })
        } else {
          searchtooltip($event.path[2].id).then(response => {
            if (response.data[0].工艺计划流水号 === 0 || response.data[0].工艺计划流水号 === null) {
              this.tooltip1 = '设备名称：' + response.data[0].设备名称
              getDaijiagong($event.path[2].id).then(res1 => {
                if (res1.data.length !== 0) {
                  this.tooltip3 = '加工零件：' + res1.data[0].零件图号
                } else {
                  this.tooltip3 = '加工零件：无'
                }
              })
            } else {
              this.tooltip1 = '设备名称：' + response.data[0].设备名称
              this.tooltip3 = '加工零件：' + response.data[0].零件图号_零件工艺计划
            }
            getOP_state2($event.path[2].id).then(res => {
              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 = '设备状态：工位电脑关闭'
              }
            })
          })
        }
      }
    },
    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
    }
  }
}
</script>

<style scoped>
  >>>.el-table th, .el-table tr {
    /* background-color: #FFF; */
  }
  /* 滚动条 */
  >>>.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
  }
  >>>.el-table--enable-row-hover >>> .el-table__body tr:hover > td {
    background: transparent !important;
  }
  >>>.el-table{
    /* 表格字体颜色 */
    color:black;
    /* 表格边框颜色 */
    /* border: 0.5px solid #758a99; */
    height: 500px;
    background: transparent !important;
  }
  /* 表格内背景颜色 */
  >>>.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;
  }

  .cardSBJK{
    overflow: auto;
  }
  .process{
    position: relative;
    text-align: center;
    margin-left: 0px;
    margin-top: 0px;
    width: 1690px;
    height: 830px;
    /*border: 1px solid red;*/
    background: url('../../../assets/img/StationLayout.jpg') repeat;
    background-repeat:no-repeat;
    background-size:100% 100%;-moz-background-size:100% 100%;
    overflow: hidden;
  }
  /*绿色*/
  .circle{
    float: left;
    width: 10px;
    height: 10px;
    background-color:limegreen;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    /*background: url('../../../assets/img/greenTwinkle.gif');*/
  }
   /*黄色*/
  .circle1{
    float: left;
    width: 10px;
    height: 10px;
    background-color:#FFBB00 ;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    /*background: url('../../../assets/img/yellowTwinkle.gif');*/
  }
  /*灰色*/
  .circle2{
    float: left;
    width: 10px;
    height: 10px;
    background-color:gray;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    /*background: url('../../../assets/img/grayTwinkle.gif');*/
  }
  /*红色*/
  .circle3{
    float: left;
    width: 10px;
    height: 10px;
    background-color:red;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    /*background: url('../../../assets/img/blueTwinkle.gif');*/
  }
  /*灰色圈*/
  .circle4{
    float: left;
    width: 10px;
    height: 10px;
    border:2px solid gray;
    background-color:transparent;
    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>
<!--<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&#45;&#45;border, .el-table&#45;&#45;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&#45;&#45;striped .el-table__body tr.el-table__row&#45;&#45;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&#45;&#45;enable-row-hover .el-table__body tr:hover>td{-->
<!--    background-color: transparent !important;-->
<!--  }-->
<!--</style>-->
