@@ -1,234 +1,328 @@
< template >
< el-card >
< div class = "process" >
< div style = "position: relative;left:39px;top:375px; width: 100px;height: 28px;" >
< div :id = "OPNAME137" :title = "tooltip" style = "position: relative;left:39px;top:375px; width: 100px;height: 28px;" @mouseover ="changeActive($event)" @mouseout ="removeActive($event)" @click ="opclickshowPanel($event)" >
< el-row >
< div class = "fang" /> < div 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 >
< 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 style = "position: relative;left:39px;top:382px; width: 100px;height: 28px;" >
< div :id = "OPNAME138" :title = "tooltip" style = "position: relative;left:39px;top:382px; width: 100px;height: 28px;" @mouseover ="changeActive($event)" @mouseout ="removeActive($event)" @click ="opclickshowPanel($event)" >
< el -row >
< div class = "fang" /> < div 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 >
< 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 style = "position: relative;left:39px;top:389px; width: 100px;height: 28px;" >
< div :id = "OPNAME139" :title = "tooltip" style = "position: relative;left:39px;top:389px; width: 100px;height: 28px;" @mouseover ="changeActive($event)" @mouseout ="removeActive($event)" @click ="opclickshowPanel($event)" >
< el -row >
< div class = "fang" /> < div 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 >
< 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 style = "position: relative;left:39px;top:396px; width: 100px;height: 28px;" >
< div :id = "OPNAME140" :title = "tooltip" style = "position: relative;left:39px;top:396px; width: 100px;height: 28px;" @mouseover ="changeActive($event)" @mouseout ="removeActive($event)" @click ="opclickshowPanel($event)" >
< el -row >
< div class = "fang" /> < div 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 >
< 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 style = "position: relative;left:39px;top:403px; width: 100px;height: 28px;" >
< div :id = "OPNAME141" :title = "tooltip" style = "position: relative;left:39px;top:403px; width: 100px;height: 28px;" @mouseover ="changeActive($event)" @mouseout ="removeActive($event)" @click ="opclickshowPanel($event)" >
< el -row >
< div class = "fang" /> < div 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 >
< 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 style = "position: relative;left:39px;top:410px; width: 100px;height: 28px;" >
< div :id = "OPNAME142" :title = "tooltip" style = "position: relative;left:39px;top:410px; width: 100px;height: 28px;" @mouseover ="changeActive($event)" @mouseout ="removeActive($event)" @click ="opclickshowPanel($event)" >
< el -row >
< div class = "fang" /> < div 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 >
< 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 style = "position: relative;left:39px;top:417px; width: 100px;height: 28px;" >
< div :id = "OPNAME143" :title = "tooltip" style = "position: relative;left:39px;top:417px; width: 100px;height: 28px;" @mouseover ="changeActive($event)" @mouseout ="removeActive($event)" @click ="opclickshowPanel($event)" >
< el -row >
< div class = "fang" /> < div 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 >
< 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 style = "position: relative;left:39px;top:424px; width: 100px;height: 28px;" >
< div :id = "OPNAME144" :title = "tooltip" style = "position: relative;left:39px;top:424px; width: 100px;height: 28px;" @mouseover ="changeActive($event)" @mouseout ="removeActive($event)" @click ="opclickshowPanel($event)" >
< el -row >
< div class = "fang" /> < div 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 >
< 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 style = "position: relative;left:140px;top:395px; width: 100px;height: 28px;" >
< div :id = "OPNAME136" :title = "tooltip" style = "position: relative;left:140px;top:395px; width: 100px;height: 28px;" @mouseover ="changeActive($event)" @mouseout ="removeActive($event)" @click ="opclickshowPanel($event)" >
< el -row >
< div class = "fang" /> < div 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 >
< 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 style = "position: relative;left:788px;top:25px; width: 100px;height: 28px;" >
< div :id = "OPNAME101" :title = "tooltip" style = "position: relative;left:788px;top:25px; 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 class = "circle" / > < div class = "fang" style = "margin-left: 9px" / >
< 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: 9px" / >
< / el-row >
< / div >
< div style = "position: relative;left:788px;top:48px; width: 100px;height: 28px;" >
< div :id = "OPNAME102" :title = "tooltip" style = "position: relative;left:788px;top:48px; 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 class = "circle" / > < div class = "fang" style = "margin-left: 9px" / >
< 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 style = "position: relative;left:788px;top:64px; width: 100px;height: 28px;" >
< div :id = "OPNAME103" :title = "tooltip" style = "position: relative;left:788px;top:64px; 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 class = "circle" / > < div class = "fang" style = "margin-left: 9px" / >
< 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 style = "position: relative;left:788px;top:60px; width: 100px;height: 28px;" >
< div :id = "OPNAME104" :title = "tooltip" style = "position: relative;left:788px;top:60px; 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 class = "circle" / > < div class = "fang" style = "margin-left: 9px" / >
< 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 style = "position: relative;left:892px;top:76px; width: 100px;height: 28px;" >
< div :id = "OPNAME105" :title = "tooltip" style = "position: relative;left:892px;top:76px; width: 100px;height: 28px;" @mouseover ="changeActive($event)" @mouseout ="removeActive($event)" @click ="opclickshowPanel($event)" >
< el -row >
< div class = "fang" /> < div class = "circle" style = "margin-left: 9px" / > < div style = "float: left;text-align: center;width: 60px;line-height: 12px;font-size: 15px;font-weight: bold" > { { OPNAME105 } } < / div >
< div :id = "OPNAME105+fang" class = "fang" / >
< div :id = "OPNAME105+circle" class = "circle" style = "margin-left: 9px" / >
< div style = "float: left;text-align: center;width: 60px;line-height: 12px;font-size: 15px;font-weight: bold" > { { OPNAME105 } } < / div >
< / el-row >
< / div >
< div style = "position: relative;left:788px;top:48px; width: 100px;height: 28px;" >
< div :id = "OPNAME106" :title = "tooltip" style = "position: relative;left:788px;top:48px; 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 class = "circle" / > < div class = "fang" style = "margin-left: 9px" / >
< 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 style = "position: relative;left:788px;top:43px; width: 100px;height: 28px;" >
< 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 class = "circle" / > < div class = "fang" style = "margin-left: 9px" / >
< 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 style = "position: relative;left:788px;top:38px; width: 100px;height: 28px;" >
< 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 class = "circle" / > < div class = "fang" style = "margin-left: 9px" / >
< 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 style = "position: relative;left:788px;top:32px; width: 100px;height: 28px;" >
< 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 class = "circle" / > < div class = "fang" style = "margin-left: 9px" / >
< 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 style = "position: relative;left:788px;top:27px; width: 100px;height: 28px;" >
< 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 class = "circle" / > < div class = "fang" style = "margin-left: 9px" / >
< 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 style = "position: relative;left:788px;top:21px; width: 100px;height: 28px;" >
< 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 class = "circle" / > < div class = "fang" style = "margin-left: 9px" / >
< 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 style = "position: relative;left:788px;top:15px; width: 100px;height: 28px;" >
< 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 class = "circle" / > < div class = "fang" style = "margin-left: 9px" / >
< 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 style = "position: relative;left:889px;top:-300px; width: 100px;height: 28px;" >
< 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 class = "circle" / > < div class = "fang" style = "margin-left: 12px" / >
< 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 style = "position: relative;left:889px;top:-245px; width: 100px;height: 28px;" >
< 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 class = "circle" / > < div class = "fang" style = "margin-left: 12px" / >
< 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 style = "position: relative;left:895px;top:-163px; width: 100px;height: 28px;" >
< div :id = "OPNAME115" :title = "tooltip" style = "position: relative;left:895px;top:-163px; 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 class = "circle" / > < div class = "fang" style = "margin-left: 9px" / >
< 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 style = "position: relative;left:895px;top:-128px; width: 100px;height: 28px;" >
< div :id = "OPNAME116" :title = "tooltip" style = "position: relative;left:895px;top:-128px; 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 class = "circle" / > < div class = "fang" style = "margin-left: 9px" / >
< 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 style = "position: relative;left:895px;top:-124px; width: 100px;height: 28px;" >
< div :id = "OPNAME117" :title = "tooltip" style = "position: relative;left:895px;top:-124px; 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 class = "circle" / > < div class = "fang" style = "margin-left: 9px" / >
< 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 style = "position: relative;left:1022px;top:-326px; width: 100px;height: 28px;" >
< div :id = "OPNAME118" :title = "tooltip" style = "position: relative;left:1022px;top:-326px; width: 100px;height: 28px;" @mouseover ="changeActive($event)" @mouseout ="removeActive($event)" @click ="opclickshowPanel($event)" >
< el -row >
< div class = "fang" /> < div 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 >
< 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 style = "position: relative;left:1022px;top:-311px; width: 100px;height: 28px;" >
< div :id = "OPNAME119" :title = "tooltip" style = "position: relative;left:1022px;top:-311px; width: 100px;height: 28px;" @mouseover ="changeActive($event)" @mouseout ="removeActive($event)" @click ="opclickshowPanel($event)" >
< el -row >
< div class = "fang" /> < div 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 >
< 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 style = "position: relative;left:1022px;top:-295px; width: 100px;height: 28px;" >
< div :id = "OPNAME120" :title = "tooltip" style = "position: relative;left:1022px;top:-295px; width: 100px;height: 28px;" @mouseover ="changeActive($event)" @mouseout ="removeActive($event)" @click ="opclickshowPanel($event)" >
< el -row >
< div class = "fang" /> < div 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 >
< 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 style = "position: relative;left:1020px;top:-190px; width: 100px;height: 28px;" >
< div :id = "OPNAME121" :title = "tooltip" style = "position: relative;left:1020px;top:-190px; width: 100px;height: 28px;" @mouseover ="changeActive($event)" @mouseout ="removeActive($event)" @click ="opclickshowPanel($event)" >
< el -row >
< div class = "fang" /> < div 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 >
< 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 style = "position: relative;left:1020px;top:-120px; width: 100px;height: 28px;" >
< div :id = "OPNAME122" :title = "tooltip" style = "position: relative;left:1020px;top:-120px; width: 100px;height: 28px;" @mouseover ="changeActive($event)" @mouseout ="removeActive($event)" @click ="opclickshowPanel($event)" >
< el -row >
< div class = "fang" /> < div 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 >
< 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 style = "position: relative;left:1118px;top:-585px; width: 100px;height: 28px;" >
< div :id = "OPNAME123" :title = "tooltip" style = "position: relative;left:1118px;top:-585px; width: 100px;height: 28px;" @mouseover ="changeActive($event)" @mouseout ="removeActive($event)" @click ="opclickshowPanel($event)" >
< el -row >
< div class = "fang" /> < div 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 >
< 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 style = "position: relative;left:1118px;top:-568px; width: 100px;height: 28px;" >
< div :id = "OPNAME124" :title = "tooltip" style = "position: relative;left:1118px;top:-568px; width: 100px;height: 28px;" @mouseover ="changeActive($event)" @mouseout ="removeActive($event)" @click ="opclickshowPanel($event)" >
< el -row >
< div class = "fang" /> < div 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 >
< 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 style = "position: relative;left:1118px;top:-553px; width: 100px;height: 28px;" >
< div :id = "OPNAME125" :title = "tooltip" style = "position: relative;left:1118px;top:-553px; width: 100px;height: 28px;" @mouseover ="changeActive($event)" @mouseout ="removeActive($event)" @click ="opclickshowPanel($event)" >
< el -row >
< div class = "fang" /> < div 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 >
< 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 style = "position: relative;left:1118px;top:-537px; width: 100px;height: 28px;" >
< div :id = "OPNAME126" :title = "tooltip" style = "position: relative;left:1118px;top:-537px; width: 100px;height: 28px;" @mouseover ="changeActive($event)" @mouseout ="removeActive($event)" @click ="opclickshowPanel($event)" >
< el -row >
< div class = "fang" /> < div 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 >
< 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 style = "position: relative;left:1124px;top:-341px; width: 100px;height: 28px;" >
< div :id = "OPNAME127" :title = "tooltip" style = "position: relative;left:1124px;top:-341px; width: 100px;height: 28px;" @mouseover ="changeActive($event)" @mouseout ="removeActive($event)" @click ="opclickshowPanel($event)" >
< el -row >
< div class = "fang" /> < div 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 >
< 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 style = "position: relative;left:1120px;top:-319px; width: 100px;height: 28px;" >
< div :id = "OPNAME128" :title = "tooltip" style = "position: relative;left:1120px;top:-319px; width: 100px;height: 28px;" @mouseover ="changeActive($event)" @mouseout ="removeActive($event)" @click ="opclickshowPanel($event)" >
< el -row >
< div class = "fang" /> < div 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 >
< 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 style = "position: relative;left:1270px;top:-769px; width: 100px;height: 28px;" >
< div :id = "OPNAME129" :title = "tooltip" style = "position: relative;left:1270px;top:-769px; width: 100px;height: 28px;" @mouseover ="changeActive($event)" @mouseout ="removeActive($event)" @click ="opclickshowPanel($event)" >
< el -row >
< div class = "fang" /> < div 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 >
< 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 style = "position: relative;left:1270px;top:-759px; width: 100px;height: 28px;" >
< div :id = "OPNAME130" :title = "tooltip" style = "position: relative;left:1270px;top:-759px; width: 100px;height: 28px;" @mouseover ="changeActive($event)" @mouseout ="removeActive($event)" @click ="opclickshowPanel($event)" >
< el -row >
< div class = "fang" /> < div 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 >
< 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 style = "position: relative;left:1270px;top:-719px; width: 100px;height: 28px;" >
< div :id = "OPNAME131" :title = "tooltip" style = "position: relative;left:1270px;top:-719px; width: 100px;height: 28px;" @mouseover ="changeActive($event)" @mouseout ="removeActive($event)" @click ="opclickshowPanel($event)" >
< el -row >
< div class = "fang" /> < div 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 >
< 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 style = "position: relative;left:1270px;top:-649px; width: 100px;height: 28px;" >
< div :id = "OPNAME132" :title = "tooltip" style = "position: relative;left:1270px;top:-649px; width: 100px;height: 28px;" @mouseover ="changeActive($event)" @mouseout ="removeActive($event)" @click ="opclickshowPanel($event)" >
< el -row >
< div class = "fang" /> < div 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 >
< 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 style = "position: relative;left:1273px;top:-640px; width: 100px;height: 28px;" >
< div :id = "OPNAME133" :title = "tooltip" style = "position: relative;left:1273px;top:-640px; width: 100px;height: 28px;" >
< el-row >
< div class = "fang" /> < div 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 >
< 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 style = "position: relative;left:1270px;top:-545px; width: 100px;height: 28px;" >
< div :id = "OPNAME134" :title = "tooltip" style = "position: relative;left:1270px;top:-545px; width: 100px;height: 28px;" >
< el-row >
< div class = "fang" /> < div 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 >
< 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 style = "position: relative;left:1270px;top:-535px; width: 100px;height: 28px;" >
< div :id = "OPNAME135" :title = "tooltip" style = "position: relative;left:1270px;top:-535px; width: 100px;height: 28px;" >
< el-row >
< div class = "fang" /> < div 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 >
< 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 >
< / el-card >
< / template >
< script > import { wsuri , name } from '@/utils/request'
< 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 : '787878' ,
socketConnect : true ,
OPNAME101 : 'OP1010' ,
OPNAME102 : 'OP1020' ,
@@ -274,18 +368,105 @@ export default {
OPNAME142 : 'OP1420' ,
OPNAME143 : 'OP1430' ,
OPNAME144 : 'OP1440' ,
timer : null
timer : null ,
opname : ''
}
} ,
mounted ( ) {
this . connect ( )
this . timer = setInterval ( this . searchState , 15 * 1000 ) // 工位状态 15秒 一刷新
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 => {
// 通过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 ( 'fang' )
$ ( '#' + response . data [ i ] . 设备号 + '_fang' ) . addClass ( 'fang1' )
} else if ( response . data [ i ] . 设备状态 === '0' ) {
$ ( '#' + response . data [ i ] . 设备号 + '_fang' ) . removeClass ( 'fang1' )
$ ( '#' + response . data [ i ] . 设备号 + '_fang' ) . addClass ( 'fang' )
}
}
} )
} ,
opclickshowPanel ( $event ) {
if ( $event . path [ 2 ] . id != undefined && $event . path [ 2 ] . id !== null && $event . path [ 2 ] . id !== '' )
{
var aaa = 'http://localhost:8065/webpage/MesWebFun02.htm?opname=' + $event . path [ 2 ] . id + '&ip=192.168.1.103&port=8015'
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 => {
if ( response . data . length > 0 ) {
if ( response . data [ 0 ] . 工艺计划流水号 == 0 ) {
response . data [ 0 ] . 工艺计划流水号 = null
}
this . tooltip = '当前零件图号:' + response . data [ 0 ] . 工艺计划流水号
}
} )
// $event.currentTarget.className="active";
} ,
removeActive ( $event ) {
// $event.currentTarget.className="";
} ,
tooltipselect ( ) {
console . log ( 76576576 )
this . tooltip = '7867564657676754'
} ,
/* socket连接*/
connect ( ) {
if ( this . socketConnect === true ) {
@@ -304,19 +485,60 @@ export default {
// 打开
websocketopen ( ) {
console . log ( 'WebSocket连接成功' )
this . websock . send ( '{<' + name + '>}' )
this . websock . send ( '{<' + name3 + '>}' )
} ,
// 数据接收
websocketonmessage ( msg ) {
this . msg = msg
console. log ( msg )
const aa = this . msg . data . split( '|' )
console . log ( aa [ 1 ] )
// if (aa[1] === '') {
//
// } else if (aa[1] === '') {
//
// }
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 ) {
} else {
}
break
case 'PartPalletStatus' : // 托盘到位
if ( value == 1 ) {
} else {
}
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 ( ) {
@@ -344,6 +566,7 @@ export default {
background - repeat : no - repeat ;
background - size : 100 % 100 % ; - moz - background - size : 100 % 100 % ;
}
/*绿色*/
. circle {
float : left ;
width : 10 px ;
@@ -353,15 +576,17 @@ export default {
- moz - border - radius : 50 % ;
- webkit - border - radius : 50 % ;
}
/*黄色*/
. circle1 {
float : left ;
width : 10 px ;
height : 10 px ;
background - color : yellow ;
background - color : # FFBB00 ;
border - radius : 50 % ;
- moz - border - radius : 50 % ;
- webkit - border - radius : 50 % ;
}
/*灰色*/
. circle2 {
float : left ;
width : 10 px ;
@@ -371,6 +596,7 @@ export default {
- moz - border - radius : 50 % ;
- webkit - border - radius : 50 % ;
}
/*红色*/
. circle3 {
float : left ;
width : 10 px ;
@@ -390,6 +616,6 @@ export default {
float : left ;
width : 10 px ;
height : 10 px ;
background - color : yellow ;
background - color : # FFBB00 ;
}
< / style >