chen.cheng 4 сар өмнө
parent
commit
de93230522

+ 29 - 0
src/views/cons/screen/index.scss

@@ -164,6 +164,35 @@
     > :not(:first-child) {
       margin-top: 20px;
     }
+
+    .pile-status-legend {
+      position: absolute;
+      right: 23vw;
+      width: 8vw;
+      top: 0;
+
+      .legend-item {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        color: #fefefe;
+        font-family: AlimamaShuHeiTi-Bold;
+        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
+
+        &:not(:first-child) {
+          margin-top: 5px;
+        }
+
+        i {
+          display: inline-block;
+          width: 14px;
+          height: 14px;
+          border-radius: 14px;
+          margin-right: 10px;
+          border: 1px solid #4EBBCD;
+        }
+      }
+    }
   }
 
   .online-summery {

+ 26 - 1
src/views/cons/screen/index.vue

@@ -78,6 +78,12 @@
           </el-tooltip>
         </template>
       </MachineIndex>
+      <div class="pile-status-legend">
+        <div class="legend-item" v-for="item in LegendItem">
+          <i :style="{ backgroundColor:item.color }"/>
+          {{ item.name }}
+        </div>
+      </div>
     </div>
     <PileHoleDetail ref="pileHoleDialog"/>
   </div>
@@ -98,6 +104,24 @@ import PileHoleDetail from "@/views/cons/screen/PileHoleDetail.vue";
 import {copyObj} from "@/utils";
 import pileMachine from "./img/pile-machine.svg"
 
+const LegendItem = {
+  NotStated: {
+    color: '#C1C1C1',
+    name: 'Not Started'
+  },
+  InProcess: {
+    color: '#FF5454',
+    name: 'In Process'
+  },
+  Completed: {
+    color: '#93D467',
+    name: 'Completed'
+  },
+  Deviation: {
+    color: '#F6E65C',
+    name: 'Deviation'
+  }
+}
 export default {
   components: {
     PileHoleDetail,
@@ -137,6 +161,7 @@ export default {
   },
   data() {
     return {
+      LegendItem,
       mapIns: null,
       consUnit: null,
       searchVal: "",
@@ -236,7 +261,7 @@ export default {
         let marker = new BDLayers.Lib.Overlays.Marker(`marker${item.id}`, [item.lng, item.lat], {
           symbol: {
             'textName': `${item.name}`,
-            'textSize': 10,
+            'textSize': 12,
             markerWidth: 45,
             markerHeight: 45,
             markerDx: 30,