菱形定位优化

ui/src/views/monitor/pfd/index.vue

@@ -99,6 +99,7 @@
                 <div class="rhombus RQ1-rhombus RQ1-rhombus-1" @click="handleDialogVisible('5606')" ref-data="5606">5606</div>
                 <div class="rhombus RQ1-rhombus RQ1-rhombus-2" @click="handleDialogVisible('5601')" ref-data="5601">5601</div>
                 <div class="rhombus RQ1-rhombus RQ1-rhombus-3" @click="handleDialogVisible('5600')" ref-data="5600">5600</div>
+                <div class="rhombus RQ1-rhombus RQ1-rhombus-4" @click="handleDialogVisible('5102')" ref-data="5102">5102</div>
               </div>
           </div>
           <!-- 冷区+热区-2 -->
@@ -1042,7 +1043,7 @@ body{
 /* 菱形点击区域 */
 .rhombus{
   position: absolute;
-  /* border: 1px solid red; */
+  border: 1px solid red;
   transform: rotate(45deg);
   /* background-color: red; */
   z-index: 20;
@@ -1050,493 +1051,497 @@ body{
   font-size: 0;
 }
 .LJL-rhombus{
-  width: 1.5%;
-  height: 0.6%;
+  width: 1.9%;
+  height: 0.8%;
 }
 .LJL-rhombus-1{
-  top: 63.2%;
-  left: 58.3%;
+  top: 63%;
+  left: 58.2%;
 }
 .JLQ-rhombus{
-  width: 1%;
-  height: 0.6%;
+  width: 1.3%;
+  height: 0.8%;
 }
 .JLQ-rhombus-1{
-  top: 35.1%;
-  left: 4.45%;
+  top: 35%;
+  left: 4.3%;
 }
 .JLQ-rhombus-2{
-  top: 35.95%;
-  left: 6.7%;
+  top: 35.86%;
+  left: 6.56%;
 }
 .JLQ-rhombus-3{
-  top: 39.79%;
+  top: 39.7%;
   left: 11.35%;
 }
 .JLQ-rhombus-4{
-  top: 39.79%;
-  left: 13.35%;
+  top: 39.7%;
+  left: 13.2%;
 }
 .JLQ-rhombus-5{
-  top: 39.79%;
-  left: 15.35%;
+  top: 39.7%;
+  left: 15.16%;
 }
 .JLQ-rhombus-6{
-  top: 39.79%;
-  left: 19.45%;
+  top: 39.7%;
+  left: 19.4%;
 }
 .JLQ-rhombus-7{
-  top: 28.85%;
-  left: 19.45%;
+  top: 28.8%;
+  left: 19.4%;
 }
 .JLQ-rhombus-8{
-  top: 32.35%;
-  left: 17.35%;
+  top: 32.3%;
+  left: 17.3%;
 }
 .JLQ-rhombus-9{
-  top: 52.18%;
-  left: 11.5%;
+  top: 52.2%;
+  left: 11.35%;
 }
 .JLQ-rhombus-10{
-  top: 52.68%;
-  left: 24.1%;
+  top: 52.56%;
+  left: 23.78%;
 }
 .JLQ-rhombus-11{
-  top: 57.34%;
-  left: 13.31%;
+  top: 57.16%;
+  left: 13.1%;
 }
 
 .JLQ-rhombus-12{
-  top: 33.9%;
-  left: 25.9%;
+  top: 33.8%;
+  left: 25.7%;
 }
 .JLQ-rhombus-13{
-  top: 29.4%;
-  left: 31.2%;
+  top: 29.3%;
+  left: 30.7%;
 }
 .JLQ-rhombus-14{
-  top: 31.9%;
-  left: 34.2%;
+  top: 31.86%;
+  left: 33.7%;
 }
 .JLQ-rhombus-15{
-  top: 33.96%;
-  left: 34.8%;
+  top: 33.9%;
+  left: 34.3%;
 }
 .JLQ-rhombus-16{
-  top: 34.4%;
-  left: 41.2%;
+  top: 34.3%;
+  left: 40.7%;
 }
 .JLQ-rhombus-17{
-  top: 30%;
-  left: 44.7%;
+  top: 29.9%;
+  left: 44.2%;
 }
 .JLQ-rhombus-18{
-  top: 35.69%;
-  left: 46.4%;
+  top: 35.6%;
+  left: 45.9%;
 }
 .JLQ-rhombus-19{
-  top: 39.39%;
-  left: 43.4%;
+  top: 39.3%;
+  left: 42.9%;
 }
 .JLQ-rhombus-20{
-  top: 39.39%;
-  left: 31.1%;
+  top: 39.36%;
+  left: 30.7%;
 }
 .JLQ-rhombus-21{
-  top: 34.5%;
-  left: 53.3%;
+  top: 34.4%;
+  left: 52.7%;
 }
 .JLQ-rhombus-22{
-  top: 39.5%;
-  left: 59.8%;
+  top: 39.4%;
+  left: 59.2%;
 }
 .JLQ-rhombus-23{
   top: 55.7%;
-  left: 55.9%;
+  left: 55.38%;
 }
 .JLQ-rhombus-24{
-  top: 54%;
-  left: 59.9%;
+  top: 53.9%;
+  left: 59.2%;
 }
 .JLQ-rhombus-25{
-  top: 63.3%;
-  left: 59.9%;
+  top: 63.1%;
+  left: 59.2%;
 }
 .JLQ-rhombus-26{
-  top: 67.5%;
-  left: 88.9%;
+  top: 67.3%;
+  left: 88%;
 }
 .JLQ-rhombus-27{
-  top: 43.7%;
-  left: 88.9%;
+  top: 43.6%;
+  left: 87.9%;
 }
 .JLQ-rhombus-28{
-  top: 25.5%;
-  left: 88.4%;
+  top: 25.4%;
+  left: 87.4%;
 }
 
 .YS-rhombus{
-  width: 0.8%;
-  height: 1%;
+  width: 1.2%;
+  height: 1.6%;
 }
 .YS-rhombus-1{
-  top: 75.75%;
-  left: 7.7%;
+  top: 75.4%;
+  left: 6.68%;
 }
 .YS-rhombus-2{
-  top: 75.75%;
-  left: 16.7%;
+  top: 75.3%;
+  left: 15.6%;
 }
 .YS-rhombus-3{
-  top: 86.7%;
-  left: 13.4%;
+  top: 86.28%;
+  left: 12.36%;
 }
 .YS-rhombus-4{
-  top: 86.75%;
-  left: 16.6%;
+  top: 86.4%;
+  left: 15.5%;
 }
 .YS-rhombus-5{
-  top: 75.75%;
-  left: 25.55%;
+  top: 75.38%;
+  left: 24.4%;
 }
 .YS-rhombus-6{
-  top: 75.75%;
-  left: 34.55%;
+  top: 75.3%;
+  left: 33.3%;
 }
 .YS-rhombus-7{
-  top: 78.5%;
-  left: 54.1%;
+  top: 78.3%;
+  left: 52.76%;
 }
 .YS-rhombus-8{
-  top: 77.86%;
-  left: 62.75%;
+  top: 77.6%;
+  left: 61.28%;
 }
 .YS-rhombus-9{
-  top: 86.86%;
-  left: 61.15%;
+  top: 86.5%;
+  left: 59.7%;
 }
 .YS-rhombus-10{
-  top: 75.46%;
-  left: 86.65%;
+  top: 75%;
+  left: 84.94%;
 }
 .YS-rhombus-11{
-  top: 77%;
-  left: 86.65%;
+  top: 76.8%;
+  left: 84.94%;
 }
 .TBP-rhombus{
-  width: 1.4%;
-  height: 1.2%;
+  width: 1.9%;
+  height: 1.5%;
 }
 .TBP-rhombus-1{
-  top: 58.4%;
-  left: 8%;
+  top: 58.3%;
+  left: 4.9%;
 }
 .TBP-rhombus-2{
-  top: 70%;
-  left: 14.4%;
+  top: 69.8%;
+  left: 11%;
 }
 .TBP-rhombus-3{
-  top: 66.7%;
-  left: 23.4%;
+  top: 66.48%;
+  left: 20%;
 }
 .TBP-rhombus-4{
-  top: 71.6%;
-  left: 31.1%;
+  top: 71.3%;
+  left: 27.5%
 }
 .TBP-rhombus-5{
-  top: 73%;
-  left: 34.61%;
+  top: 72.7%;
+  left: 31.1%;
 }
 .TBP-rhombus-6{
-  top: 58.6123%;
-  left: 33.61%;
+  top: 58.4%;
+  left: 30.9%;
 }
 .TBP-rhombus-7{
-  top: 86.96%;
-  left: 42.1%;
+  top: 86.7%;
+  left: 38.5%;
 }
 .TBP-rhombus-8{
-  top: 97.6%;
-  left: 53.5%;
+  top: 97.4%;
+  left: 49.6%;
 }
 .TBP-rhombus-9{
-  top: 80.3%;
-  left: 54%;
+  top: 80.1%;
+  left: 50.5%;
 }
 .TBP-rhombus-10{
-  top: 84.3%;
-  left: 66%;
+  top: 84%;
+  left: 62.3%;
 }
 .TBP-rhombus-11{
-  top: 80%;
-  left: 80.3%;
+  top: 79.8%;
+  left: 76.5%;
 }
 
 .TBP-rhombus-12{
-  top: 51.7%;
-  left: 69.1%;
+  top: 51.5%;
+  left: 65.4%;
 }
 .RQ1-rhombus{
-  width: 0.9%;
-  height: 1.3%;
+  width: 1.1%;
+  height: 1.9%;
 }
 .RQ1-rhombus-1{
-  top: 17.4%;
-  left: 49.41%;
+  top: 17%;
+  left: 49.3%;
 }
 .RQ1-rhombus-2{
-  top: 14.2%;
-  left: 56.41%;
+  top: 13.68%;
+  left: 56.18%;
 }
 .RQ1-rhombus-3{
-  top: 35.87%;
-  left: 56.251%;
+  top: 35.4%;
+  left: 56.2%;
+}
+.RQ1-rhombus-4{
+  top: 50.15%;
+  left: 94.5%;
 }
 .LQ1-rhombus{
-  width: 0.7%;
-  height: 1%;
+  width: 0.9%;
+  height: 1.3%;
 }
 .LQ1-rhombus-1{
-  top: 27.2%;
-  left: 7.5%;
+  top: 27%;
+  left: 7.17%;
 }
 .LQ1-rhombus-2{
-  top: 29.92%;
-  left: 18.25%;
+  top: 29.8%;
+  left: 17.88%;
 }
 .LQ1-rhombus-3{
-  top: 35.8%;
-  left: 19.35%;
+  top: 35.7%;
+  left: 19%;
 }
 .LQ1-rhombus-4{
-  top: 35.8%;
-  left: 21.2%;
+  top: 35.7%;
+  left: 20.9%;
 }
 .LQ1-rhombus-5{
-  top: 38.2%;
-  left: 18.2%;
+  top: 38.1%;
+  left: 17.9%;
 }
 .LQ1-rhombus-6{
-  top: 51.7%;
-  left: 10.9%;
+  top: 51.4%;
+  left: 10.6%;
 }
 .LQ1-rhombus-7{
-  top: 49.7%;
-  left: 21.4%;
+  top: 49.5%;
+  left: 21.05%;
 }
 .LQ1-rhombus-8{
-  top: 54.8%;
-  left: 27.8%;
+  top: 54.6%;
+  left: 27.4%;
 }
 .LQ1-rhombus-9{
-  top: 39.2%;
-  left: 30.2%;
+  top: 39.1%;
+  left: 30%;
 }
 .LQ1-rhombus-10{
-  top: 53.5%;
-  left: 38.1%;
+  top: 53.26%;
+  left: 37.74%;
 }
 .LQ1-rhombus-11{
-  top: 53.5%;
-  left: 40.6%;
+  top: 53.3%;
+  left: 40.3%;
 }
 .LQ1-rhombus-12{
-  top: 53.3%;
-  left: 41.3%;
+  top: 52.8%;
+  left: 41%;
 }
 .LQ1-rhombus-13{
-  top: 53.5%;
-  left: 43.3%;
+  top: 53.2%;
+  left: 42.9%;
 }
 .LQ1-rhombus-14{
-  top: 53.05%;
-  left: 44%;
+  top: 52.8%;
+  left: 43.5%;
 }
 .LQ1-rhombus-15{
-  top: 55.3%;
-  left: 53.2%;
+  top: 55.2%;
+  left: 52.89%;
 }
 .LQ1-rhombus-16{
-  top: 38.3%;
-  left: 52.4%;
+  top: 38.2%;
+  left: 52%;
 }
 .LQ1-rhombus-17{
-  top: 36.7%;
-  left: 53.4%;
+  top: 36.56%;
+  left: 53%;
 }
 .LQ1-rhombus-18{
-  top: 30.3%;
-  left: 29.4%;
+  top: 30.2%;
+  left: 29.05%;
 }
 .LQ1-rhombus-19{
   top: 20.7%;
-  left: 46.86%;
+  left: 46.5%;
 }
 .LQ1-rhombus-20{
-  top: 15.6%;
-  left: 50.86%;
+  top: 15.5%;
+  left: 50.5%;
 }
 .LQ1-rhombus-21{
-  top: 14.6%;
-  left: 52.05%;
+  top: 14.5%;
+  left: 51.6%;
 }
 .LQ1-rhombus-22{
-  top: 32.75%;
-  left: 59.9%;
+  top: 32.67%;
+  left: 59.49%;
 }
 .LQ1-rhombus-23{
-  top: 31.25%;
-  left: 60.35%;
+  top: 31.15%;
+  left: 59.93%;
 }
 .LQ1-rhombus-24{
-  top: 29.25%;
-  left: 65.77%;
+  top: 29.1%;
+  left: 65.4%;
 }
 .LQ1-rhombus-25{
-  top: 30.5%;
-  left: 72.77%;
+  top: 30.4%;
+  left: 72.4%;
 }
 .LQ1-rhombus-26{
-  top: 18.2%;
-  left: 76.57%;
+  top: 18.1%;
+  left: 76.2%;
 }
 .LQ1-rhombus-27{
-  top: 43.6%;
-  left: 65.8%;
+  top: 43.3%;
+  left: 65.4%;
 }
 .LQ1-rhombus-28{
-  top: 43.4%;
-  left: 70.7%;
+  top: 43.3%;
+  left: 70.3%;
 }
 
 .LQ1-rhombus-29{
-  top: 43.4%;
-  left: 79.6%;
+  top: 43.3%;
+  left: 79.2%;
 }
 .LQ1-rhombus-30{
-  top: 53.8%;
-  left: 72.1%;
+  top: 53.6%;
+  left: 71.65%;
 }
 .LQ1-rhombus-31{
-  top: 58.8%;
-  left: 84%;
+  top: 58.5%;
+  left: 83.56%;
 }
 .LQ1-rhombus-32{
-  top: 61.2%;
-  left: 81.25%;
+  top: 61.06%;
+  left: 80.86%;
 }
 .LQ1-rhombus-33{
-  top: 68.96%;
-  left: 66%;
+  top: 68.66%;
+  left: 65.6%;
 }
 .LQ1-rhombus-34{
-  top: 72.76%;
-  left: 68.45%;
+  top: 72.56%;
+  left: 68.05%;
 }
 .LQ1-rhombus-35{
-  top: 77.76%;
-  left: 61.15%;
+  top: 77.46%;
+  left: 60.66%;
 }
 .LQ1-rhombus-36{
-  top: 80.5%;
-  left: 61%;
+  top: 80.2%;
+  left: 60.7%;
 }
 .LQ1-rhombus-37{
-  top: 86%;
-  left: 68.66%;
+  top: 85.7%;
+  left: 68.26%;
 }
 .LQ1-rhombus-38{
-  top: 81.7%;
-  left: 75.84%;
+  top: 81.4%;
+  left: 75.4%;
 }
 .LQ1-rhombus-39{
-  top: 81.7%;
-  left: 78.64%;
+  top: 81.4%;
+  left: 78.3%;
 }
 .LQ1-rhombus-40{
-  top: 93.3%;
-  left: 68.64%;
+  top: 92.96%;
+  left: 68.3%;
 }
 .LQ1-rhombus-41{
-  top: 95.6%;
-  left: 65.96%;
+  top: 95.2%;
+  left: 65.6%;
 }
 .LQ1-rhombus-42{
-  top: 90.2%;
-  left: 45.86%;
+  top: 90%;
+  left: 45.5%;
 }
 .LQ1-rhombus-43{
-  top: 90.5%;
-  left: 8.86%;
+  top: 90.2%;
+  left: 8.5%;
 }
 .LQ1-rhombus-44{
-  top: 68.1%;
-  left: 45.96%;
+  top: 67.8%;
+  left: 45.5%;
 }
 .LQ1-rhombus-45{
-  top: 77.1%;
-  left: 50.2%;
+  top: 76.78%;
+  left: 49.86%;
 }
 .LQ1-rhombus-46{
-  top: 77.1%;
-  left: 85.6%;
+  top: 76.87%;
+  left: 85.2%;
 }
 
 .LQ1-rhombus-47{
-  top: 80.31%;
-  left: 85.6%;
+  top: 80.06%;
+  left: 85.16%;
 }
 .LQ1-rhombus-48{
-  top: 78.81%;
-  left: 86.8%;
+  top: 78.5%;
+  left: 86.36%;
 }
 .LQ1-rhombus-49{
-  top: 74.91%;
-  left: 86.8%;
+  top: 74.71%;
+  left: 86.4%;
 }
 .LQ2-rhombus{
-  width: 1.4%;
-  height: 1.7%;
+  width: 1.8%;
+  height: 2.2%;
 }
 .LQ2-rhombus-1{
-  top: 5.3%;
-  left: 32.7%;
+  top: 4.8%;
+  left: 31.4%;
 }
 .LQ2-rhombus-2{
-  top: 11.3%;
-  left: 35.3%;
+  top: 10.7%;
+  left: 34%;
 }
 .RQ2-rhombus{
-  width: 1.4%;
-  height: 1.7%;
+  width: 1.6%;
+  height: 1.9%;
 }
 .RQ2-rhombus-1{
-  top: 18.8%;
-  left: 53.6%;
+  top: 18.5%;
+  left: 53.2%;
 }
 .RQ2-rhombus-2{
-  top: 33.4%;
-  left: 53.3%;
+  top: 33.2%;
+  left: 53.1%;
 }
 .RQ2-rhombus-3{
-  top: 76.1%;
-  left: 49.8%;
+  top: 75.6%;
+  left: 49.46%;
 }
 .RQ2-rhombus-4{
-  top: 82.7%;
-  left: 44.8%;
+  top: 82.1%;
+  left: 44.4%;
 }
 .RQ2-rhombus-5{
-  top: 18.5%;
-  left: 71.1%;
+  top: 18.3%;
+  left: 71%;
 }
 .RQ2-rhombus-6{
-  top: 18.5%;
-  left: 82.1%;
+  top: 18.3%;
+  left: 82%;
 }
 .RQ2-rhombus-7{
-  top: 40.5%;
-  left: 78.9%;
+  top: 40.2%;
+  left: 78.7%;
 }
 
 /* 方形区域 */