目录样式调整，生成线条的颜色调整，值班人员列表增加电话，主页改成gis地图

gassafety-web/src/components/TopNav/index.vue

@@ -146,13 +146,13 @@ export default {
       } else {
         // 显示左侧联动菜单
         path = this.activeRoutes(key);
-        console.log(path)
-        console.log(this.$route.path)
+        console.log(path);
+        console.log(this.$route.path);
         if (this.$route.path != path[0].path) {
-          if(path[0].path){
+          if (path[0].path) {
             this.$router.push(path[0].path);
-          }else{
-            if(path[0].path=="" && this.$route.path=="/index") return;
+          } else {
+            if (path[0].path == "" && this.$route.path == "/index") return;
             this.$router.push("/index");
           }
         }
@@ -207,6 +207,22 @@ export default {
   font-weight: 600;
   text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
   padding: 0 5px;
+  border-bottom: none;
+  position: relative;
+  &:after {
+    content: "";
+    position: absolute;
+    width: 2px;
+    height: 38px;
+    background: radial-gradient(
+      circle,
+      #ffffff 0%,
+      rgba(255, 255, 255, 0) 100%
+    );
+    right: -20px;
+    top: 21px;
+    opacity: 1;
+  }
 }
 
 .el-menu--horizontal > .el-menu-item.is-active {
@@ -219,6 +235,7 @@ export default {
 .el-menu--horizontal > .el-submenu .el-submenu__title {
   height: 50px !important;
   line-height: 50px !important;
+  margin-left:15px;
 }
 .el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
 .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus {

gassafety-web/src/router/index.js

@@ -53,16 +53,30 @@ export const constantRoutes = [
     component: (resolve) => require(['@/views/error/401'], resolve),
     hidden: true
   },
+  // {
+  //   path: '',
+  //   component: Layout,
+  //   redirect: 'index',
+  //   children: [
+  //     {
+  //       path: 'index',
+  //       component: (resolve) => require(['@/views/index_v1'], resolve),
+  //       name: '首页',
+  //       meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //     }
+  //   ]
+  // },
+  // 首页改成地图
   {
     path: '',
     component: Layout,
-    redirect: 'index',
+    redirect: '/enterprise/mapView',
     children: [
       {
-        path: 'index',
-        component: (resolve) => require(['@/views/index_v1'], resolve),
-        name: '首页',
-        meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+        path: '/enterprise/mapView',
+        component: (resolve) => require(['@/views/enterprise/mapView'], resolve),
+        // name: '首页',
+        // meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
       }
     ]
   },

gassafety-web/src/store/modules/permission.js

@@ -26,7 +26,8 @@ const permission = {
         path: 'index',
         meta: { title: '统计报表', icon: 'dashboard'}
       }]
-      state.topbarRouters = routes.concat(index);
+      // state.topbarRouters = routes.concat(index);
+      state.topbarRouters = routes;
     },
     SET_SIDEBAR_ROUTERS: (state, routes) => {
       state.sidebarRouters = routes;

gassafety-web/src/utils/gaodeMapView.js

@@ -736,7 +736,7 @@ class gaodeMap {
       let path = coordinates ? eval(coordinates) : [];
       let polyline = new AMap.Polyline({
         path,
-        strokeColor: "#F7FE38",
+        strokeColor: "#2EE7E7",
         strokeWeight: 4,
         strokeOpacity: 0.9,
         zIndex: 50,
@@ -760,7 +760,7 @@ class gaodeMap {
       polyline.on("mouseout", e => {
         // console.log("polyline.getExtData().lineData.alarmState",polyline.getExtData().lineData.alarmState)
         if (polyline.getExtData().lineData.alarmState == 1) return;
-        polyline.setOptions({ strokeColor: "#F7FE38" });
+        polyline.setOptions({ strokeColor: "#2EE7E7" });
         // infoWindow.close();
       });
       // 计算info的位置
@@ -1119,7 +1119,7 @@ class gaodeMap {
       opstions.isState = 0;
       item.setExtData(opstions);
       let attr = item.getOptions();
-      attr.strokeColor = "#F7FE38";
+      attr.strokeColor = "#2EE7E7";
       item.setOptions(attr);
     });
   }

gassafety-web/src/views/enterprise/mapView/index.vue

@@ -492,7 +492,7 @@ export default {
             options.lineData.alarmId = alarmId;
             options.lineData.orderId = orderId;
             if (endTime) {
-              polyline.setOptions({ strokeColor: "#F7FE38" });
+              polyline.setOptions({ strokeColor: "#2EE7E7" });
               options.lineData.alarmState = 0;
               // 报警类型
               options.lineData.alarmType = null;
@@ -514,6 +514,7 @@ export default {
         });
       }
 
+      console.log("deviceArr", deviceArr);
       // 其他设备
       if (deviceArr.length > 0) {
         deviceArr.forEach((item) => {
@@ -591,8 +592,7 @@ export default {
         "ws://192.168.2.23:8903/gassafety/websocketServer"
       );
       this.ws.onopen = (evt) => {
-        console.log("WebSockets=======gogogog");
-        // this.ws.send("WebSockets!=========================");
+        console.log("WebSockets开启");
       };
       this.ws.onmessage = (evt) => {
         console.log("推送", evt);
@@ -604,9 +604,6 @@ export default {
       this.ws.onclose = () => {
         console.log("ws协议关闭");
       };
-      // this.ws.onclose = function (evt) {
-      //   console.log("关闭");
-      // };
     },
 
     // 右下角数据
@@ -914,7 +911,7 @@ export default {
           no: index,
           userId: item.userId,
           userName: item.userName,
-          userPhone: item.phone,
+          userPhone: item.phonenumber,
         };
       });
       console.log("值班人员", workManArr);
@@ -937,11 +934,10 @@ export default {
             );
           });
           item.maxPage = Math.ceil(this.allList[index].length / num);
-        }else{
+        } else {
           // 如果为空，就直接把item.list写成[];
-          item.list=[];
+          item.list = [];
         }
-        
       });
     },
     pageBack(item) {
@@ -1099,8 +1095,9 @@ export default {
         // 清空左边列表
         // this.changeBtnDataClear();
         // this.gaoMap.placeSearch.search(this.keyWord);
-        await this.getDeviceInfo({ deviceName: this.keyWord });
+        this.gaoMap.markers = [];
         this.gaoMap.polyLines = [];
+        await this.getDeviceInfo({ deviceName: this.keyWord });
         await this.getPipeList({ pipeName: this.keyWord });
         // 值班人员
         await this.getInspectorLocations({ userName: this.keyWord });
@@ -1108,8 +1105,6 @@ export default {
         // 设备报警
         this.getSelectAlarmDevice();
         this.pipeList();
-        console.log(this.changeBtnData);
-        console.log(this.allList)
       }
     },
     // 清空左边列表
@@ -1190,6 +1185,7 @@ export default {
     window.removeEventListener("mousedown", this.barClose);
     // 关闭scoket
     if (this.ws) {
+      console.log("socket关闭了");
       this.ws.close();
       this.ws = null;
     }
@@ -1205,7 +1201,6 @@ export default {
   bottom: 0;
   width: 100%;
 }
-
 .btn-wrapper {
   position: fixed;
   right: 32px;

gassafety-web/src/views/statistics/ind/index.vue

+<template>
+  <div class="dashboard-editor-container">
+
+    <panel-group @handleSetLineChartData="handleSetLineChartData" />
+
+    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
+      <line-chart :chart-data="lineChartData" />
+    </el-row>
+
+    <el-row :gutter="32">
+      <el-col :xs="24" :sm="24" :lg="8">
+        <div class="chart-wrapper">
+          <raddar-chart />
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="24" :lg="8">
+        <div class="chart-wrapper">
+          <pie-chart />
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="24" :lg="8">
+        <div class="chart-wrapper">
+          <bar-chart />
+        </div>
+      </el-col>
+    </el-row>
+
+    
+  </div>
+</template>
+
+<script>
+import PanelGroup from '../../dashboard/PanelGroup'
+import LineChart from '../../dashboard/LineChart'
+import RaddarChart from '../../dashboard/RaddarChart'
+import PieChart from '../../dashboard/PieChart'
+import BarChart from '../../dashboard/BarChart'
+//报表
+const lineChartData = {
+  newVisitis: {
+    expectedData: [100, 120, 161, 134, 105, 160, 165],
+    actualData: [120, 82, 91, 154, 162, 140, 145]
+  },
+  messages: {
+    expectedData: [200, 192, 120, 144, 160, 130, 140],
+    actualData: [180, 160, 151, 106, 145, 150, 130]
+  },
+  purchases: {
+    expectedData: [80, 100, 121, 104, 105, 90, 100],
+    actualData: [120, 90, 100, 138, 142, 130, 130]
+  },
+  shoppings: {
+    expectedData: [130, 140, 141, 142, 145, 150, 160],
+    actualData: [120, 82, 91, 154, 162, 140, 130]
+  }
+}
+
+export default {
+  name: 'Index',
+  components: {
+    PanelGroup,
+    LineChart,
+    RaddarChart,
+    PieChart,
+    BarChart
+  },
+  data() {
+    return {
+      lineChartData: lineChartData.newVisitis
+    }
+  },
+  methods: {
+    handleSetLineChartData(type) {
+      this.lineChartData = lineChartData[type]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dashboard-editor-container {
+  padding: 32px;
+  background-color: rgb(240, 242, 245);
+  position: relative;
+
+  .chart-wrapper {
+    background: #fff;
+    padding: 16px 16px 0;
+    margin-bottom: 32px;
+  }
+}
+
+@media (max-width:1024px) {
+  .chart-wrapper {
+    padding: 8px;
+  }
+}
+</style>