* 优化弹窗展示

src/utils/EnumConst.js

@@ -1,3 +1,5 @@
+import i18n from "@/i18n";
+
 export const MachineStatus = {
   "00": {
     label: "online",
@@ -18,3 +20,38 @@ export const MachineStatus = {
     code: "01"
   }
 }
+
+export const PileHoleStatus = {
+  DIC: {
+    NotStated: {
+      color: '#C1C1C1',
+      name: i18n.t("screen.notStart")
+    },
+    InProcess: {
+      color: '#FF5454',
+      name: i18n.t("screen.inProcess")
+    },
+    Completed: {
+      color: '#93D467',
+      name: i18n.t("screen.completed")
+    },
+    Deviation: {
+      color: '#F6E65C',
+      name: i18n.t("screen.deviation")
+    }
+  },
+  codeToStatus: function (code) {
+    switch (code) {
+      case "00":
+        return this.DIC.Completed;
+      case "01":
+        return this.DIC.NotStated;
+      case "02":
+        return this.DIC.InProcess;
+      case "03":
+        return tthis.DIC.Deviation;
+      default:
+        return this.DIC.NotStated;
+    }
+  },
+}

src/views/cons/screen/index.vue

@@ -92,13 +92,12 @@
         </template>
       </MachineIndex>
       <div class="pile-status-legend">
-        <div class="legend-item" v-for="item in LegendItem">
+        <div class="legend-item" v-for="item in PileHoleStatus.DIC">
           <i :style="{ backgroundColor:item.color }"/>
           {{ item.name }}
         </div>
       </div>
     </div>
-    <!--    <PileHoleDetail ref="pileHoleDialog"/>-->
   </div>
 </template>
 
@@ -117,7 +116,7 @@ import PileHoleDetail from "@/views/cons/screen/PileHoleDetail.vue";
 import {copyObj} from "@/utils";
 import {Circle} from "@/components/map/GeoJson";
 import pileMachine from "./img/pile-machine.svg"
-import {MachineStatus} from "@/utils/EnumConst";
+import {MachineStatus, PileHoleStatus} from "@/utils/EnumConst";
 import ComponentHandle from "@/utils/ComponentHandle"
 
 export default {
@@ -140,6 +139,9 @@ export default {
 
   },
   computed: {
+    PileHoleStatus() {
+      return PileHoleStatus
+    },
     MachineStatus() {
       return MachineStatus
     },
@@ -220,24 +222,6 @@ export default {
             ],
           },
         ],
-      },
-      LegendItem: {
-        NotStated: {
-          color: '#C1C1C1',
-          name: this.$t("screen.notStart")
-        },
-        InProcess: {
-          color: '#FF5454',
-          name: this.$t("screen.inProcess")
-        },
-        Completed: {
-          color: '#93D467',
-          name: this.$t("screen.completed")
-        },
-        Deviation: {
-          color: '#F6E65C',
-          name: this.$t("screen.deviation")
-        }
       }
     };
   },
@@ -321,6 +305,7 @@ export default {
       listPileHoleRealtimeIndex({}).then(response => {
         this.pileHoleList = response.data
         this.pileHoleList.forEach((item, index) => {
+          const codeToStatus = PileHoleStatus.codeToStatus(item.consStatus);
           const geom = new BDLayers.Lib.Overlays.FromGeoJson(Circle({
             radius: 0.4,
             coordinates: [item.lng, item.lat],
@@ -328,7 +313,7 @@ export default {
               {
                 lineColor: '#34495e',
                 lineWidth: 1,
-                polygonFill: '#1bbc9b',
+                polygonFill: codeToStatus.color,
                 polygonOpacity: 0.2
               }
             ]
@@ -341,7 +326,7 @@ export default {
                 {
                   lineColor: '#34495e',
                   lineWidth: 1,
-                  polygonFill: '#1bbc9b',
+                  polygonFill: codeToStatus.color,
                   polygonOpacity: 0.2
                 }
               ])
@@ -351,7 +336,7 @@ export default {
               {
                 lineColor: 'green',
                 lineWidth: 1,
-                polygonFill: '#1bbc9b',
+                polygonFill: codeToStatus.color,
                 polygonOpacity: 0.2
               }
             ])
@@ -370,7 +355,7 @@ export default {
                     {
                       lineColor: '#34495e',
                       lineWidth: 1,
-                      polygonFill: '#1bbc9b',
+                      polygonFill: codeToStatus.color,
                       polygonOpacity: 0.2
                     }
                   ])