增加了导航栏

改变了全局的样式，底色

src/App.vue

@@ -1,12 +1,35 @@
 <template>
-  <div id="app">
-    <router-view/>
+  <div id="app" class="main">
+    <router-view />
   </div>
 </template>
 
-
 <script>
-</script>
-<style>
+export default {
+  created() {
+    //在页面加载时读取sessionStorage里的状态信息
+    if (sessionStorage.getItem("store")) {
+      this.$store.replaceState(
+        Object.assign(
+          {},
+          this.$store.state,
+          JSON.parse(sessionStorage.getItem("store"))
+        )
+      );
+    }
 
-</style>
+    //在页面刷新时将vuex里的信息保存到sessionStorage里
+    window.addEventListener("beforeunload", () => {
+      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
+    });
+  },
+};
+</script>
+<style scoped>
+.main {
+  background-color: #eceef3;
+  background: url("./assets/wave.svg") no-repeat;
+  /* background-size: contain; */
+  background-position: left bottom;
+}
+</style>

src/assets/css/global.css

@@ -3,59 +3,60 @@
 html,
 body,
 #app {
-    height: 100%;
-    margin: 0px;
-    padding: 0px;
-    min-width: 1366px;
+  height: 100%;
+  margin: 0px;
+  padding: 0px;
+  min-width: 1366px;
+
 }
 
 .el-breadcrumb {
-    padding: 15px 0 15px 10px;
-    font-size: 13px;
+  padding: 15px 0 15px 10px;
+  font-size: 13px;
 }
 
 .el-card {
-    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
 }
 
 .el-footer {
-    background-color: #444C5B;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    font-size: 12px;
-    color: #ffffff;
+  background-color: #444c5b;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  font-size: 12px;
+  color: #ffffff;
 }
 
 .el-form {
-    margin-top: 12px;
+  margin-top: 12px;
 }
 
 .divi {
-    display: block;
-    height: 1px;
-    width: 100%;
-    margin: 24px 0;
-    background-color: #dcdfe6;
-    position: relative;
+  display: block;
+  height: 1px;
+  width: 100%;
+  margin: 24px 0;
+  background-color: #dcdfe6;
+  position: relative;
 }
 
 .centered {
-    margin: 0 auto;
+  margin: 0 auto;
 }
 
 .coalblock {
-    width: 115px;
-    height: 77px;
-    border: solid 1px #dcdfe6;
-    padding-top: 20px;
-    margin-left: 25px;
-    text-align: center;
-    display: inline-block;
+  width: 115px;
+  height: 77px;
+  border: solid 1px #dcdfe6;
+  padding-top: 20px;
+  margin-left: 25px;
+  text-align: center;
+  display: inline-block;
 }
 
 .el-select {
-    margin-bottom: 10px;
+  margin-bottom: 10px;
 }
 
 .com-container {
@@ -69,11 +70,48 @@ body,
   height: 100%;
   overflow: hidden;
 }
-/* .table-wrapper ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-  } */
-  .el-tabs__nav-scroll {
-    overflow: hidden;
-    background-color: aliceblue;
-}
+
+.el-tabs__item {
+  width: 166px;
+  height: 47px;
+  line-height: 47px;
+  text-align: center;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.el-tabs__nav-scroll {
+  background-color: #696969;
+  /* color: #eceef3; */
+  /* background-color: rgba(255, 255, 255, 100); */
+}
+
+.el-tabs--card > .el-tabs__header .el-tabs__nav {
+  border: none;
+}
+.el-tabs__item {
+  /* color: #4adefe; */
+  color:#FFFFFF;
+}
+
+.el-tabs__header {
+    padding: 0;
+    position: relative;
+    margin: 0;
+}
+.el-tabs--card>.el-tabs__header .el-tabs__item {
+  border-left: 0px;
+}
+.el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
+  /* border-bottom-color: #FFF; */
+  border-bottom-color: #696969;
+}
+
+.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
+  /* background-color: rgba(255, 255, 255, 100); */
+  background-color: #696969;
+  border-bottom-color: none;
+  /* color: rgba(97, 154, 241, 100); */
+  
+  /* color: #FDD000; */
+}

src/assets/wave.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#1a1a1a" fill-opacity="0.8" d="M0,32L34.3,69.3C68.6,107,137,181,206,192C274.3,203,343,149,411,117.3C480,85,549,75,617,80C685.7,85,754,107,823,138.7C891.4,171,960,213,1029,229.3C1097.1,245,1166,235,1234,202.7C1302.9,171,1371,117,1406,90.7L1440,64L1440,320L1405.7,320C1371.4,320,1303,320,1234,320C1165.7,320,1097,320,1029,320C960,320,891,320,823,320C754.3,320,686,320,617,320C548.6,320,480,320,411,320C342.9,320,274,320,206,320C137.1,320,69,320,34,320L0,320Z"></path></svg>

src/common/headline.vue

@@ -1,19 +1,73 @@
 <template>
   <div class="title">
-    {{title}}
+    {{ title }}
+    <div class="right">
+      <el-dropdown>
+        <span class="el-dropdown-link">
+          <img src="~@/assets/avatar.png" :alt="userName" /><span class="center">{{ userName }}</span>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item @click="handleChange('logout')">大数据平台</el-dropdown-item>
+            <el-dropdown-item @click="handleChange('logout')">算法平台</el-dropdown-item>
+            <el-dropdown-item @click="handleChange('logout')">云平台</el-dropdown-item>
+            <el-dropdown-item @click="handleChange('logout')">退出</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  props: ["title"]
+  name:'headline',
+  methods: {
+    handleChange(val) {
+      switch (val) {
+        case "logout":
+          window.location.href = "http://112.126.68.148/#/";
+          break;
+      }
+    }
+  },
+  computed: {
+    userName: {
+      get() {
+        if(this.$store.state.name == "" | this.$store.state.name == undefined | this.$store.state.name == null) {
+          this.$store.commit("updateName", "admin");
+        }
+        return this.$store.state.name;
+      }
+    },
+    title() {
+      return this.$store.state.title;
+    }
+  }
 };
 </script>
 
 <style scoped>
 .title {
-  color: #4adefe;
+  /* color: #4adefe; */
+  color: black;
   text-align: center;
   font-size: 30px;
+  background-color: #eceef3;
+  /* border-bottom:1px solid #000; */
+}
+.right {
+  float: right;
+}
+img {
+  height: 40px;
+  margin-top: -20px;
+  border-radius: 50%;
+}
+.center {
+  font-size: 20px;
+  font-weight:bold;
+  position: relative;
+  bottom: 5px;
 }
 </style>

src/router/index.js

@@ -662,14 +662,14 @@ const router = new Router({
     },
   ],
 });
-router.beforeEach((to, from, next) => {
-    let token = Vue.cookie.get('token')
-    if (!token || !/\S/.test(token)) {
-    //   clearLoginInfo()
-      // next({ name: 'login' })
-        window.location.href = "http://112.126.68.148/#/"
-    }else{
-        next()
-    }
-  })
+// router.beforeEach((to, from, next) => {
+//     let token = Vue.cookie.get('token')
+//     if (!token || !/\S/.test(token)) {
+//     //   clearLoginInfo()
+//       // next({ name: 'login' })
+//         window.location.href = "http://112.126.68.148/#/"
+//     }else{
+//         next()
+//     }
+//   })
 export default router;

src/store/index.js

@@ -6,10 +6,17 @@ Vue.use(Vuex)
 export default new Vuex.Store({
   state: {
     websocketIP: "182.92.79.148:8081",
+    name: "",
+    title: "主界面",
 
   },
   mutations: {
-
+    updateName (state, name) {
+      state.name = name
+    },
+    updateTitle (state, title) {
+      state.title = title
+    }
   },
   actions: {
 

src/views/Home.vue

@@ -27,6 +27,7 @@
         </div>
         <el-menu
           class="el-menu-vertical-demo"
+          style="margin-left: -2px"
           :default-active="$route.path"
           @select="handleSelect"
         >
@@ -71,6 +72,9 @@
         </el-menu>
       </el-col>
       <el-col :span="20">
+        <el-row style="margin-top: 0px">
+          <headline></headline>
+        </el-row>
         <!-- 展示   -->
         <router-view></router-view>
       </el-col>
@@ -139,13 +143,13 @@
             </el-menu-item>
           </template>
         </el-menu>
-        <div class="logout" @click="loginOut">退出</div>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
+import headline from "@/common/headline";
 export default {
   name: "Home",
   data() {
@@ -191,9 +195,10 @@ export default {
       this.$router.push({
         path: key,
       });
+      this.$store.commit("updateTitle", this.findTitleName(key).name);
     },
-    loginOut() {
-      window.location.href = "http://112.126.68.148/#/";
+    findTitleName(key){
+      return this.menu_left.find(item => item.path == key) ? this.menu_left.find(item => item.path == key) : this.menu_right.find(item => item.path == key);
     },
   },
   computed: {
@@ -209,6 +214,9 @@ export default {
       );
     },
   },
+  components: {
+    headline
+  }
 };
 </script>
 
@@ -219,7 +227,7 @@ export default {
 .el-menu-vertical-demo {
   width: 1px;
 }
-.logout {
+/* .logout {
   background-color: #c0c0c0;
   width: 120px;
   height: 33px;
@@ -229,7 +237,7 @@ export default {
   text-align: center;
   margin-left: 20px;
   margin-top: 20px;
-}
+} */
 /* .toggle-button {
         font-size: 10px;
         line-height: 24px;

src/views/main.vue

@@ -33,4 +33,5 @@ export default {
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+</style>

src/views/mining/Monitor/Index.vue

@@ -1,8 +1,5 @@
 <template>
   <div class="monitor">
-    <el-row style="margin-top: 0px">
-      <headline title="采煤工作面系统图"></headline>
-    </el-row>
     <el-row :gutter="20">
       <el-col :span="12">
         <div class="grid-content bg-purple">
@@ -27,13 +24,12 @@
 </template>
 
 <script>
-import Emulsion from "./Emulsion.vue"; 
+import Emulsion from "./Emulsion.vue";
 import errorRecording from "../../../components/mining/monitor/error_recording";
 import processStatistics from "../../../components/mining/monitor/process_statistics";
 import safetyStatistics from "../../../components/mining/monitor/safety_statistics";
 import CoalMining from "./CoalMining.vue";
 import bar from "./echarts/Bars.vue";
-import headline from "@/common/headline"
 export default {
   components: {
     Emulsion,
@@ -42,7 +38,6 @@ export default {
     errorRecording,
     processStatistics,
     safetyStatistics,
-    headline
   },
   data() {
     return {};
@@ -53,13 +48,14 @@ export default {
 <style scoped>
 .monitor {
   width: 100%;
-  height: 900px;
+  height: 845px;
   position: relative;
-  background-image: linear-gradient(
-    to right,
-    #06133c 0%,
-    #011669 50%,
-    #06133c 100%
-  );
+  background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%),
+    linear-gradient(
+      to top,
+      rgba(255, 255, 255, 0.4) 0%,
+      rgba(0, 0, 0, 0.25) 200%
+    );
+  background-blend-mode: multiply;
 }
 </style>

src/views/mining/envTest/index.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="main">
-    <div class="header"><headline title="采煤工作面环境监测"></headline></div>
     <div class="left">
       <div class="center">
         <span class="title">工作面信息</span>
@@ -232,21 +231,19 @@ export default {
 <style lang="less" scoped>
 .main {
   width: 100%;
-  height: 900px;
+  height: 845px;
   position: relative;
   display: flex;
-  background-image: linear-gradient(
-    to right,
-    #06133c 0%,
-    #011669 5045 #06133c 100%
-  );
-}
-.header {
-  position: absolute;
-  left: 600px;
+  background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%),
+    linear-gradient(
+      to top,
+      rgba(255, 255, 255, 0.4) 0%,
+      rgba(0, 0, 0, 0.25) 200%
+    );
+  background-blend-mode: multiply;
 }
 .left {
-  margin-top: 50px;
+  margin-top: 5px;
   width: 30%;
   height: 100%;
 }
@@ -308,7 +305,7 @@ export default {
   }
 }
 .right {
-  margin-top: 50px;
+  margin-top: 5px;
   height: 100%;
   width: 70%;
   span {

src/views/mining/machines/index.vue

@@ -1,8 +1,5 @@
 <template>
   <div id="outer">
-    <div class="title">
-      <p style="color: #4adefe">三机监控</p>
-    </div>
     <img style="width: 1300px; margin-left: 100px" src="./顶部.png" />
     <div style="height: 50px"></div>
     <div class="row">
@@ -273,13 +270,14 @@ export default {
 <style lang="less" scoped>
 #outer {
   width: 100%;
-  height: 900px;
-  background-image: linear-gradient(
-    to right,
-    rgb(6, 19, 60) 0%,
-    rgb(1, 22, 105) 50%,
-    rgb(6, 19, 60) 100%
-  );
+  height: 845px;
+  background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%),
+    linear-gradient(
+      to top,
+      rgba(255, 255, 255, 0.4) 0%,
+      rgba(0, 0, 0, 0.25) 200%
+    );
+  background-blend-mode: multiply;
   position: relative;
   .title {
     position: relative;

src/views/mining/supporting/supporting.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="wrapper">
-    <div><headline title="采煤工作面支护系统"></headline></div>
    <img class="leftImg" src="@/assets/img/supportRight.png" alt="">
    <img class="rightImg" src="@/assets/img/supportLeft.png" alt="">
    <!-- <div class="leftImg"></div> -->
@@ -131,14 +130,15 @@ export default {
 <style scoped>
 .wrapper {
   width: 100%;
-  height: 900px;
+  height: 845px;
   position: relative;
-  background-image: linear-gradient(
-    to right,
-    #06133c 0%,
-    #011669 50%,
-    #06133c 100%
-  );
+  background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%),
+    linear-gradient(
+      to top,
+      rgba(255, 255, 255, 0.4) 0%,
+      rgba(0, 0, 0, 0.25) 200%
+    );
+  background-blend-mode: multiply;
 }
 
 .leftImg{