修复

src/views/bigScreen/components/mapCentre.vue

@@ -105,7 +105,7 @@ export default {
   methods: {
     actionBtn(id) {
       this.action = id;
-      console.log(id);
+      // console.log(id);
       this.$emit("actionBtn", id);
       if (id == 1) {
         this.$refs.personageTrack.open();

src/views/bigScreen/index.vue

@@ -33,53 +33,53 @@
     </transition>
     <div class="child-view">
       <!-- <router-view /> -->
-      <my-map v-on:leftAnimationAction="leftAnimationAction" v-on:rightAnimationAction="rightAnimationAction"></my-map>
+      <my-map
+        v-on:leftAnimationAction="leftAnimationAction"
+        v-on:rightAnimationAction="rightAnimationAction"
+      ></my-map>
     </div>
   </div>
 </template>
 
 <script>
 // import myRouter from '../../router.js'
-import myMap from "./map/index.vue"
+import myMap from "./map/index.vue";
 export default {
   data() {
     return {
-      newTime: '',
-      currentWork:'',
-      input:'',
-      leftAnimation:true,
-      rightAnimation:true,
-      time:''
-    }
+      newTime: "",
+      currentWork: "",
+      input: "",
+      leftAnimation: true,
+      rightAnimation: true,
+      time: "",
+    };
   },
   created() {
     // 获取当前年月日周
     let dayList = {
-      0: '星期日',
-      1: '星期一',
-      2: '星期二',
-      3: '星期三',
-      4: '星期四',
-      5: '星期五',
-      6: '星期六',
-    }
+      0: "星期日",
+      1: "星期一",
+      2: "星期二",
+      3: "星期三",
+      4: "星期四",
+      5: "星期五",
+      6: "星期六",
+    };
     this.newTime =
-      this.$moment(new Date()).add(0, 'year').format('YYYY-MM-DD') +
-      ' '
-    this.currentWork = dayList[this.$moment().weekday()]
+      this.$moment(new Date()).add(0, "year").format("YYYY-MM-DD") + " ";
+    this.currentWork = dayList[this.$moment().weekday()];
   },
-  methods:{
-    search(){
-      
+  methods: {
+    search() {},
+    leftAnimationAction() {
+      this.leftAnimation = !this.leftAnimation;
     },
-    leftAnimationAction(){
-      this.leftAnimation = !this.leftAnimation
-    },
-    rightAnimationAction(){
-      this.rightAnimation = !this.rightAnimation
+    rightAnimationAction() {
+      this.rightAnimation = !this.rightAnimation;
     },
   },
-  components:{myMap},
+  components: { myMap },
   // computed: {
   //   routerList() {
   //     let staticRouter = myRouter.options.routes.filter(
@@ -88,7 +88,7 @@ export default {
   //     return staticRouter
   //   },
   // },
-  mounted(){
+  mounted() {
     let time = new Date(Date.now());
     // let time = new Date(Date.now());
 
@@ -97,10 +97,10 @@ export default {
       time.toLocaleDateString().replace(/\//g, "-") +
       " " +
       time.toTimeString().substr(0, 8);
-    this.time = this.time.split(' ')[1]
-      console.log(this.time)
-  }
-}
+    this.time = this.time.split(" ")[1];
+    // console.log(this.time)
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -110,7 +110,7 @@ div {
 .pc-container {
   overflow: hidden;
   height: 100%;
-  background: url('../../assets/images/zhifa/main-background.jpg') no-repeat
+  background: url("../../assets/images/zhifa/main-background.jpg") no-repeat
     center;
   background-size: cover;
   position: relative;
@@ -134,30 +134,34 @@ div {
   //   transition: all .8s ease;
   // }
   // .left-animation-enter{
-  //   transform: translateX(510px);   
+  //   transform: translateX(510px);
   //   opacity: 0;
   // }
   // .left-animation-leave-active{
   //   transition: all .8s ease;
   // }
   // .left-animation-leave{
-  //   transform: translateX(510px);   
+  //   transform: translateX(510px);
   //   opacity: 1;
   // }
-  .left-animation-enter-active, .left-animation-leave-active {
+  .left-animation-enter-active,
+  .left-animation-leave-active {
     transition: all 1s;
   }
-  .left-animation-enter, .left-animation-leave-to {
-  /* 进入的初始状态和离开的最终状态 */
+  .left-animation-enter,
+  .left-animation-leave-to {
+    /* 进入的初始状态和离开的最终状态 */
     opacity: 0;
     transform: translateX(-510px);
   }
 
-  .right-animation-enter-active, .right-animation-leave-active {
+  .right-animation-enter-active,
+  .right-animation-leave-active {
     transition: all 1s;
   }
-  .right-animation-enter, .right-animation-leave-to {
-  /* 进入的初始状态和离开的最终状态 */
+  .right-animation-enter,
+  .right-animation-leave-to {
+    /* 进入的初始状态和离开的最终状态 */
     opacity: 0;
     transform: translateX(510px);
   }
@@ -185,20 +189,20 @@ div {
     left: 0;
     height: 80px;
     width: 100%;
-    background-image: url('../../assets/images/img_title@2x.png');
+    background-image: url("../../assets/images/img_title@2x.png");
     background-size: 100% 100%;
     display: flex;
     padding: 0 40px;
     .system-title {
       padding: 18px 0 0 65px;
       font-size: 40px;
-      font-family: 'YouSheBiaoTiHei';
+      font-family: "YouSheBiaoTiHei";
       font-weight: 400;
       color: #ffffff;
       display: flex;
       // justify-content: center;
       flex: 1;
-      text-shadow: 3px 3px 0px #0C1015, 2px 2px 0px #1A3F76;
+      text-shadow: 3px 3px 0px #0c1015, 2px 2px 0px #1a3f76;
       letter-spacing: 4px;
       &::before {
         content: attr(text);
@@ -206,7 +210,7 @@ div {
         z-index: 10;
         color: #ffffff;
         // 渐变样式
-        background: linear-gradient(180deg, #FFFFFF 0%, #4499D6 100%);
+        background: linear-gradient(180deg, #ffffff 0%, #4499d6 100%);
         -webkit-background-clip: text;
         color: transparent;
         // 去除继承父级样式
@@ -226,16 +230,16 @@ div {
       .new-time {
         padding: 32px 0 0 10px;
         font-size: 18px;
-        font-family: 'D-DIN';
+        font-family: "D-DIN";
         font-weight: 400;
-        color: #D3EEF2;
+        color: #d3eef2;
       }
       .new-work {
         padding: 28px 0 0 10px;
         font-size: 18px;
-        font-family: 'Source Han Sans CN-Medium';
+        font-family: "Source Han Sans CN-Medium";
         font-weight: 500;
-        color: #D3EEF2;
+        color: #d3eef2;
         line-height: 26px;
       }
     }
@@ -286,4 +290,3 @@ div {
   }
 }
 </style>
-

src/views/bigScreen/map/index.vue

@@ -195,6 +195,11 @@ import personPopup from "../../components/personPopup/index.vue";
 import eventPopup from "../../components/eventPopup/index.vue";
 import carPopup from "../../components/carPopup/index.vue";
 import monitoringPopup from "../../components/monitoringPopup/index.vue";
+
+import jiangningwangge from "@/utils/data/江宁开发区网格.json";
+
+import weilan from "@/utils/data/围栏1.json";
+
 import axios from "axios";
 
 export default {
@@ -334,69 +339,63 @@ export default {
     },
     addLayer8() {
       // 加载geojson
-      axios.get("./data/江宁开发区网格.geojson").then((res) => {
-        console.log(res.data);
-        let geojson = L.geoJSON(res.data, {
-          pane: "mapLayer2",
-          style: function (feature) {
-            return {
-              color: "#ffa500",
-              weight: 3,
-              fillColor: "#ffa500",
-              fillOpacity: 0.3,
-            };
-          },
-          onEachFeature: (feature, layer) => {
-            let text = feature.properties.name;
-            let bounds = layer._bounds;
-            let center = bounds.getCenter();
-            let myIcon = L.divIcon({
-              className: "land-name2",
-              html: text,
-              iconSize: [150, 24],
-              iconAnchor: [75, 12],
-            });
-            // 多边形上的标记点;
-            L.marker(center, {
-              pane: "mapLayer3",
-              icon: myIcon,
-            }).addTo(this.mapLayers.mapLayer8);
-          },
-        });
-        // .addTo(this.mapLayers.mapLayer8);
+      let geojson = L.geoJSON(jiangningwangge, {
+        pane: "mapLayer2",
+        style: function (feature) {
+          return {
+            color: "#ffa500",
+            weight: 3,
+            fillColor: "#ffa500",
+            fillOpacity: 0.3,
+          };
+        },
+        onEachFeature: (feature, layer) => {
+          let text = feature.properties.name;
+          let bounds = layer._bounds;
+          let center = bounds.getCenter();
+          let myIcon = L.divIcon({
+            className: "land-name2",
+            html: text,
+            iconSize: [150, 24],
+            iconAnchor: [75, 12],
+          });
+          // 多边形上的标记点;
+          L.marker(center, {
+            pane: "mapLayer3",
+            icon: myIcon,
+          }).addTo(this.mapLayers.mapLayer8);
+        },
       });
+      // .addTo(this.mapLayers.mapLayer8);
 
       // 加载geojson
-      axios.get("./data/围栏1.geojson").then((res) => {
-        console.log(res.data);
-        let geojson = L.geoJSON(res.data, {
-          pane: "mapLayer2",
-          style: function (feature) {
-            return {
-              color: "#62E1FA",
-              weight: 1,
-              fillColor: "#62E1FA",
-              fillOpacity: 0.3,
-            };
-          },
-          onEachFeature: (feature, layer) => {
-            let text = feature.properties.name;
-            let bounds = layer._bounds;
-            let center = bounds.getCenter();
-            let myIcon = L.divIcon({
-              className: "land-name5",
-              html: text,
-              iconSize: [150, 24],
-              iconAnchor: [75, 12],
-            });
-            // 多边形上的标记点;
-            L.marker(center, {
-              pane: "mapLayer3",
-              icon: myIcon,
-            }).addTo(this.mapLayers.mapLayer8);
-          },
-        }).addTo(this.mapLayers.mapLayer8);
-      });
+      let geojson2 = L.geoJSON(weilan, {
+        pane: "mapLayer2",
+        style: function (feature) {
+          return {
+            color: "#62E1FA",
+            weight: 1,
+            fillColor: "#62E1FA",
+            fillOpacity: 0.3,
+          };
+        },
+        onEachFeature: (feature, layer) => {
+          let text = feature.properties.name;
+          let bounds = layer._bounds;
+          let center = bounds.getCenter();
+          let myIcon = L.divIcon({
+            className: "land-name5",
+            html: text,
+            iconSize: [150, 24],
+            iconAnchor: [75, 12],
+          });
+          // 多边形上的标记点;
+          L.marker(center, {
+            pane: "mapLayer3",
+            icon: myIcon,
+          }).addTo(this.mapLayers.mapLayer8);
+        },
+      }).addTo(this.mapLayers.mapLayer8);
     },
     addLayer1() {
       this.mapLayers.mapLayer1.clearLayers();
@@ -713,9 +712,9 @@ export default {
       // document.getElementsByName('monitoring').addEventListener("click",function(){//通过个体ElementsById()方法获得的element对象中的addEventListener()方法用于添加事件监听器，第一个参数设置事件类型，第二个参数可用来设置具体事件
       // 	console.log("点击");
       // })
-      console.log(marker);
+      // console.log(marker);
       marker.on("click", (e) => {
-        console.log(e);
+        // console.log(e);
         this.$nextTick(() => {
           document
             .querySelector("#monitoring" + index)
@@ -810,7 +809,7 @@ export default {
             };
           },
           onEachFeature: (feature, layer) => {
-            console.log(feature.properties.name);
+            // console.log(feature.properties.name);
             let polygon = L.polygon(layer._latlngs, {
               text: feature.properties.name,
               textStyle: {

src/views/components/personagetrack/index.vue

@@ -3,27 +3,28 @@
     <div class="personage-track">
       <div class="track-title">
         <div class="titlebg"></div>
-        <span class="name">{{ person ? '李飞':'执法一队1号车' }}</span>
-        <span>{{ person ? '执法1队队员':'苏A568974' }}</span>
+        <span class="name">{{ person ? "李飞" : "执法一队1号车" }}</span>
+        <span>{{ person ? "执法1队队员" : "苏A568974" }}</span>
       </div>
       <div class="track-content">
         <div class="oneList">
-          <div class="item" :class="person ? 'item-left':'car-item'">
+          <div class="item" :class="person ? 'item-left' : 'car-item'">
             <div class="ball"></div>
             <div class="content">
-              {{ person ? '人员编号：':'车辆编号：' }}<span>{{ person ? '201128881111100':'201128881111100' }}</span>
+              {{ person ? "人员编号：" : "车辆编号："
+              }}<span>{{
+                person ? "201128881111100" : "201128881111100"
+              }}</span>
             </div>
           </div>
-          <div class="item car-item"  v-if="!person">
+          <div class="item car-item" v-if="!person">
             <div class="ball"></div>
-            <div class="content">
-              驾驶员姓名：<span>张三</span>
-            </div>
+            <div class="content">驾驶员姓名：<span>张三</span></div>
           </div>
           <div class="item">
             <div class="ball"></div>
             <div class="content">
-              当前状态：<span>{{ person ? '移动中':'行驶中' }}</span>
+              当前状态：<span>{{ person ? "移动中" : "行驶中" }}</span>
             </div>
           </div>
         </div>
@@ -58,16 +59,20 @@
                       placeholder="结束时间"
                     >
                     </el-date-picker>
-                    <img class="data_icon" src="@/assets/images/timeIcon.png" alt="">
+                    <img
+                      class="data_icon"
+                      src="@/assets/images/timeIcon.png"
+                      alt=""
+                    />
                   </div>
                 </div>
               </div>
               <div class="btns reset">
-                <img src="@/assets/images/reset.png" alt="">
+                <img src="@/assets/images/reset.png" alt="" />
                 <span>重置</span>
               </div>
               <div class="btns">
-                <img src="@/assets/images/inquire.png" alt="">
+                <img src="@/assets/images/inquire.png" alt="" />
                 <span>查询</span>
               </div>
             </div>
@@ -83,7 +88,7 @@
               <!-- <div id="personageTrackMap">
 
               </div> -->
-              <img src="@/assets/images/minMap.png" alt="">
+              <img src="@/assets/images/minMap.png" alt="" />
             </div>
           </div>
         </div>
@@ -92,37 +97,37 @@
   </dia-log>
 </template>
 <script>
-import diaLog from "../../components/dialog/index.vue"
+import diaLog from "../../components/dialog/index.vue";
 export default {
-  components:{diaLog},
+  components: { diaLog },
   data() {
     return {
-      startTime:'',
-      title:'人员行程轨迹',
-      person:false,
-      endTime:'',
-      heightStyle:{
-        height:'500px'
-      }
-    }
+      startTime: "",
+      title: "人员行程轨迹",
+      person: false,
+      endTime: "",
+      heightStyle: {
+        height: "500px",
+      },
+    };
   },
-  methods:{
+  methods: {
     open(person) {
-      console.log(person)
-      if(person == 'person'){
-        this.title = '人员行程轨迹'
+      // console.log(person)
+      if (person == "person") {
+        this.title = "人员行程轨迹";
         this.person = true;
       } else {
-        this.title = '车辆行程轨迹'
+        this.title = "车辆行程轨迹";
         this.person = false;
       }
-      this.$refs.dialog.open('1');
+      this.$refs.dialog.open("1");
     },
     Close() {
       this.$refs.dialog.Close();
-    }
+    },
   },
-}
+};
 </script>
 <style lang="scss" scoped>
 .personage-track {
@@ -136,15 +141,15 @@ export default {
       top: -18px;
       width: 50px;
       height: 50px;
-      background-image: url('../../../assets/images/personnel.png');
+      background-image: url("../../../assets/images/personnel.png");
       background-position: center;
       background-size: 100% 100%;
     }
     span {
       font-size: 14px;
-      font-family: 'Source Han Sans CN-Medium';
+      font-family: "Source Han Sans CN-Medium";
       font-weight: 500;
-      color: #E9F4FF;
+      color: #e9f4ff;
       line-height: 14px;
     }
     .name {
@@ -165,22 +170,23 @@ export default {
         .ball {
           width: 4px;
           height: 4px;
-          background: #DAEBFF;
-          box-shadow: 0px 0px 10px 5px rgba(0,119,255,0.25), 0px 0px 5px 0px rgba(229,241,255,0.25);
+          background: #daebff;
+          box-shadow: 0px 0px 10px 5px rgba(0, 119, 255, 0.25),
+            0px 0px 5px 0px rgba(229, 241, 255, 0.25);
           border-radius: 20px 20px 20px 20px;
           margin-right: 15px;
         }
         .content {
           font-size: 14px;
-          font-family: 'Source Han Sans CN-Medium';
+          font-family: "Source Han Sans CN-Medium";
           font-weight: 500;
-          color: #CCCCCC;
+          color: #cccccc;
           line-height: 20px;
           span {
             font-size: 14px;
-            font-family: 'Source Han Sans CN-Medium';
+            font-family: "Source Han Sans CN-Medium";
             font-weight: 500;
-            color: #E9F4FF;
+            color: #e9f4ff;
             line-height: 20px;
           }
         }
@@ -199,8 +205,9 @@ export default {
         .ball {
           width: 4px;
           height: 4px;
-          background: #DAEBFF;
-          box-shadow: 0px 0px 10px 5px rgba(0,119,255,0.25), 0px 0px 5px 0px rgba(229,241,255,0.25);
+          background: #daebff;
+          box-shadow: 0px 0px 10px 5px rgba(0, 119, 255, 0.25),
+            0px 0px 5px 0px rgba(229, 241, 255, 0.25);
           border-radius: 20px 20px 20px 20px;
           margin-right: 15px;
         }
@@ -208,12 +215,12 @@ export default {
           display: flex;
           align-items: center;
           font-size: 14px;
-          font-family: 'Source Han Sans CN-Medium';
+          font-family: "Source Han Sans CN-Medium";
           font-weight: 500;
-          color: #CCCCCC;
+          color: #cccccc;
           line-height: 20px;
           .time-query {
-            background-image: url('../../../assets/images/timebg.png');
+            background-image: url("../../../assets/images/timebg.png");
             width: 440px;
             height: 35px;
             background-size: 100% 100%;
@@ -223,7 +230,8 @@ export default {
               ::v-deep .el-input__prefix {
                 display: none;
               }
-              .star-time,.end-time {
+              .star-time,
+              .end-time {
                 position: relative;
                 .data_icon {
                   position: absolute;
@@ -240,25 +248,25 @@ export default {
                     width: 100%;
                     height: 35px;
                     font-size: 14px;
-                    font-family: 'Source Han Sans CN-Medium';
+                    font-family: "Source Han Sans CN-Medium";
                     font-weight: 500;
-                    color: #E9F4FF;
+                    color: #e9f4ff;
                   }
                   .el-input__inner::placeholder {
                     /* 在这里添加你想要修改的 placeholder 样式 */
                     font-size: 14px;
-                    font-family: 'Source Han Sans CN-Regular';
+                    font-family: "Source Han Sans CN-Regular";
                     font-weight: 400;
-                    color: #D3EEF2;
+                    color: #d3eef2;
                     -webkit-background-clip: text;
-                    -webkit-text-fill-color: rgba(211,238,242,0.2);
+                    -webkit-text-fill-color: rgba(211, 238, 242, 0.2);
                   }
                 }
               }
               .symbol {
                 width: 14px;
                 height: 6px;
-                background-image: url('../../../assets/images/routeTime.png');
+                background-image: url("../../../assets/images/routeTime.png");
                 background-size: 100% 100%;
               }
             }
@@ -266,7 +274,7 @@ export default {
           .btns {
             width: 92px;
             height: 35px;
-            background-image: url('../../../assets/images/inquirebg.png');
+            background-image: url("../../../assets/images/inquirebg.png");
             background-size: 100% 100%;
             display: flex;
             align-items: center;
@@ -277,14 +285,14 @@ export default {
             }
             span {
               font-size: 14px;
-              font-family: 'Source Han Sans CN-Regular';
+              font-family: "Source Han Sans CN-Regular";
               font-weight: 400;
-              color: #FFFFFF;
+              color: #ffffff;
               line-height: 20px;
             }
           }
           .reset {
-            background-image: url('../../../assets/images/resetbg.png');
+            background-image: url("../../../assets/images/resetbg.png");
             margin: 0 20px;
           }
         }
@@ -300,16 +308,17 @@ export default {
           .ball {
             width: 4px;
             height: 4px;
-            background: #DAEBFF;
-            box-shadow: 0px 0px 10px 5px rgba(0,119,255,0.25), 0px 0px 5px 0px rgba(229,241,255,0.25);
+            background: #daebff;
+            box-shadow: 0px 0px 10px 5px rgba(0, 119, 255, 0.25),
+              0px 0px 5px 0px rgba(229, 241, 255, 0.25);
             border-radius: 20px 20px 20px 20px;
             margin-right: 15px;
           }
           .contentTitle {
             font-size: 14px;
-            font-family: 'Source Han Sans CN-Medium';
+            font-family: "Source Han Sans CN-Medium";
             font-weight: 500;
-            color: #CCCCCC;
+            color: #cccccc;
             line-height: 20px;
           }
         }
@@ -330,6 +339,5 @@ export default {
       }
     }
   }
-  
 }
 </style>