网格化菜单优化,网络状态判断

package.json

@@ -30,6 +30,7 @@
     "leaflet-minimap": "^3.6.1",
     "leaflet.chinatmsproviders": "^3.0.4",
     "leaflet.markercluster": "^1.5.0",
+    "mapbox-gl": "^2.15.0",
     "mars3d": "^3.0.13",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",

src/views/gridman/navigation/index.vue

@@ -30,7 +30,7 @@
                     url:"/gridman_emphasis",
                     top:30,
                 },{
-                    lable:"区域划分",
+                    lable:"护林员",
                     url:"",
                     top:90,
                 },{
@@ -38,7 +38,11 @@
                     url:"",
                     top:140,
                 },{
-                    lable:"护林员",
+                    lable:"一张图",
+                    url:"",
+                    top:160,
+                },{
+                    lable:"网格管理",
                     url:"",
                     top:160,
                 },{
@@ -91,8 +95,8 @@
   }
 
   .gridman-navigation .nav-item{
-      width:150px;
+      width:120px;
-      height:150px;
+      height:120px;
       float:left;
       margin:0px 30px;
       cursor:pointer;
@@ -112,12 +116,12 @@
     transform: scale(1.1);
 }
 .gridman-navigation .nav-item img{
-    width:150px;
+    width:120px;
     transition:all 0.2s;
 }
 
 .nav-lable{
-    width:150px;
+    width:120px;
     position:relative;
     top:20px;
     font-size:20px;

src/views/home/index.vue

@@ -10,7 +10,7 @@
         <div class="time-info">
           <div class="time-time-info" style="margin-right:15px;">{{ time }}</div>
           <div class="time-time-info" style="margin-right:15px;">{{ date }}</div>
-          <div class="time-time-info" style="margin-right:15px;">星期一</div>
+          <div class="time-time-info" style="margin-right:15px;">星期{{ workday }}</div>
         </div>
 
         <!-- 天气中心 -->
@@ -19,8 +19,12 @@
           <div class="temperature">{{ temperature }}</div>
         </div>
 
+        <div class="newworkstate">
+          网络状态：<span :style="{'color':newworkstate=='网络正常'?'#67C23A':'#E6A23C'}">{{newworkstate}}</span>
+        </div>
+
         <!-- 退出按钮 -->
-        <div class="logout-button" style="position:relative;z-index:999999999999999999999999999999999999999999;"
+        <div class="logout-button" style="position:relative;z-index:999999999999;"
           @click="logout()"></div>
       </div>
     </div>
@@ -197,7 +201,7 @@
     </div>
     <!-- 呼叫中心 -->
     <div class="callCenterBox" v-if="callCenterVisible">
-      <callCenter></callCenter>
+      <callCenter @callUser="callUser"></callCenter>
     </div>
     <!-- 展开收起两边弹窗 -->
     <div class="diatoggleBtn" id="diatoggleBtn" @click="diaToggle"></div>
@@ -302,8 +306,10 @@ export default {
       waterCenter: null,
       date: null,
       time: null,
+      workday:null,
       weater: null,
       temperature: null,
+      newworkstate:null,  //网络状态
       globalmap: null,
       // configUrl: "config/config.json",
       configUrl: `config/${areaName}Config.json`,
@@ -355,6 +361,9 @@ export default {
     // 获取天气
     this.getWeater();
 
+    // 获取网络状态
+    this.getNetWorkState();
+
     //脱敏
     window.hiddenReadData = function (e) {
       e.innerHTML = e.getAttribute('data-phone').replace(/(\d{3})\d*(\d{4})/, '$1****$2');
@@ -373,6 +382,10 @@ export default {
     window.delFirePoint = this.delFirePoint
   },
   methods: {
+    // 一件呼叫
+    callUser(){
+      this.personVisible = true;
+    },
     diaToggle() {
       console.log('feixianConfigJson', feixianConfigJson)
       console.log('conf', this.configUrl)
@@ -537,11 +550,9 @@ export default {
     },
     // 退出登录
     logout() {
-      localStorage.setItem("X-Token", "");
+      // localStorage.setItem("X-Token", "");
-
+      // window.location.reload();
-
+      this.$router.push({'path':'/index'})
-
-      window.location.reload();
     },
     // 物资
     wuzi(item) {
@@ -814,6 +825,8 @@ export default {
       let date = new Date();
       this.time = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ":" + (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ":" + (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
       this.date = date.getFullYear() + '-' + ((date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)) + '-' + ((date.getDate()) < 10 ? '0' + (date.getDate()) : (date.getDate()));
+      let workdays = ['日','一','二','三','四','五','六']
+      this.workday = workdays[date.getDay()];
     },
     // 当前天气
     getWeater() {
@@ -833,7 +846,26 @@ export default {
         }
       });
     },
+    // 获取网络状态
+    getNetWorkState(){
+      if(window.navigator.onLine){
+        this.newworkstate = "网络正常"
+      }else{
+        this.newworkstate = "网络断开"
+      }
 
+      let _this  = this;
+      window.addEventListener("online",function(e){
+        _this.newworkstate = "网络正常"
+      })
+      window.addEventListener("offline",function(e){
+        _this.newworkstate = "网络断开"
+        _this.$message({
+          type:"error",
+          message:"网络已断开！"
+        })
+      })
+    },
     // 添加天地图
     addTileLayer(layer) {
       this.removeTileLayer()
@@ -986,21 +1018,32 @@ export default {
 
 
 .header-info {
-  min-width: 560px;
+  min-width: 660px;
   height: 30px;
   position: absolute;
   top: 30px;
-  right: 60px;
+  right: 0px;
 }
 
 .weather-info {
-  width: 160px;
+  width: 140px;
   height: 25px;
   line-height: 24px;
   color: #fff;
   float: left;
   text-align: center;
   padding: 0px 10px;
+  position:relative;
+}
+
+ .weather-info::after {
+  content: "";
+  width: 2px;
+  height: 14px;
+  top: 6px;
+  background: #B8FFFF;
+  position: absolute;
+  right: 0px;
 }
 
 .weather-info .weater {
@@ -1015,8 +1058,8 @@ export default {
   color: #fff;
   text-align: center;
   float: left;
-  margin: 0px 20px;
+  margin: 0px 10px;
-  margin-right: 20px;
+  margin-right: 10px;
   position: relative;
 }
 
@@ -1035,6 +1078,16 @@ export default {
   float: left;
 }
 
+.newworkstate{
+  float:left;
+  height: 25px;
+  line-height: 24px;
+  color: #fff;
+  text-align: center;
+  padding: 0px 10px;
+}
+
+
 .logout-button {
   width: 95px;
   height: 25px;
@@ -1045,7 +1098,7 @@ export default {
   float: left;
   position: relative;
   top: 0px;
-  right: -50px;
+  left:20px;
   cursor: pointer;
   z-index: 999999999999999999999999999;
 }

src/views/home/widget/callcenter.vue

@@ -49,7 +49,7 @@
             </el-carousel>
          </div>
          <div >
-            <img class="call-phone cursor"  src="img/callphone.png"  @click="callPhoneAll" />
+            <img class="call-phone cursor"  src="img/callphone.png"  @click="callUser" />
          </div>
     </div>
 </template>
@@ -105,6 +105,9 @@ export default {
     created(){
         this.initWebSocket()
         this.getListData()  
+
+        // 首次加载页面获取在线人数
+        this.getOnLineInfo();
     },
     mounted(){
         
@@ -123,8 +126,8 @@ export default {
             _this.allPersonArr = rel
           })
         },
-        callPhoneAll(){
+        callUser(){
-
+            this.$emit("callUser");
         },
         initWebSocket() {
             let _this = this;