编写矿区监测主页以及各个页面的跳转

src/assets/icon/iconfont.css

 @font-face {
   font-family: "iconfont"; /* Project id 2766225 */
-  src: url('iconfont.woff2?t=1629798949041') format('woff2'),
-       url('iconfont.woff?t=1629798949041') format('woff'),
-       url('iconfont.ttf?t=1629798949041') format('truetype');
+  src: url('iconfont.woff2?t=1629943279368') format('woff2'),
+       url('iconfont.woff?t=1629943279368') format('woff'),
+       url('iconfont.ttf?t=1629943279368') format('truetype');
 }
 
 .iconfont {
   font-family: "iconfont" !important;
-  font-size: 18px;
+  font-size: 16px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-dian:before {
+  content: "\e605";
+}
+
 .icon-solid-home:before {
   content: "\e641";
 }

src/assets/icon/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "15162652",
+      "name": "dian",
+      "font_class": "dian",
+      "unicode": "e605",
+      "unicode_decimal": 58885
+    },
     {
       "icon_id": "1221894",
       "name": "房子 实心",

src/router/index.js

 import Vue from 'vue'
 import VueRouter from 'vue-router'
+//登陆页面
 import login from '../views/login.vue'
+//主页菜单
 import homepage from "../views/homepage.vue";
+//矿区监控
 import mineMonitoring from '../views/mineMonitoring.vue'
+//视频监控
 import videoSurveillance from '../views/videoSurveillance.vue'
+//生产自动化系统
+import AutomationHomepage from '../views/AutomationHomepage.vue'
+import AutomatedNowData from '../views/AutomatedNowData.vue'
+import AutomationHistory from '../views/AutomationHistory.vue'
+import AutomaticAlarm from '../views/AutomaticAlarm.vue'
+//生产报表系统
+import ReportHomePage from '../views/ReportHomePage.vue'
+import ReportNowData from '../views/ReportNowData.vue'
+import ReportHistory from '../views/ReportHistory.vue'
+//人员定位系统
+import PersonnelPositioning from '../views/PersonnelPositioning.vue'
+//车辆定位系统
+import CarPositioning from '../views/CarPositioning.vue'
+//边坡在线监测
+import SlopeHomePage from '../views/SlopeHomePage.vue'
+import SlopeNowData from '../views/SlopeNowData.vue'
+import SlopeHistory from '../views/SlopeHistory.vue'
+import SlopeAlarm from '../views/SlopeAlarm.vue'
+//环境在线监测
+import EnvironmentHomepage from '../views/EnvironmentHomepage.vue'
+import EnvironmentNowData from '../views/EnvironmentNowData.vue'
+import EnvironmentHistory from '../views/EnvironmentHistory.vue'
+import EnvironmentAlarm from '../views/EnvironmentAlarm.vue'
+//数字化储量管理
+import reservesHomepage from '../views/reservesHomepage.vue'
+//门禁系统
+import AccessHomepage from '../views/AccessHomepage.vue'
+
+
+
 
 
 Vue.use(VueRouter)
 
 const routes = [
+  //登陆页面
   {
     path: '/login',
     name: 'login',
     component: login
   },
+  //主页菜单
   {
     path: '/homepage',
     name: 'homepage',
     component: homepage,
     children: [
+      //矿区监控
       {
         path: '/homepage/mineMonitoring',
         component: mineMonitoring
-      },{
+      },
+      //视频监控
+      {
         path: '/homepage/videoSurveillance',
         component: videoSurveillance
       },
+      //生产自动化系统
+      {
+        path: '/homepage/AutomationHomepage',
+        component: AutomationHomepage
+      },{
+        path: '/homepage/AutomatedNowData',
+        component: AutomatedNowData
+      },{
+        path: '/homepage/AutomationHistory',
+        component: AutomationHistory
+      },{
+        path: '/homepage/AutomaticAlarm',
+        component: AutomaticAlarm
+      },
+      //生产报表系统
+      {
+        path: '/homepage/ReportHomePage',
+        component: ReportHomePage
+      },{
+        path: '/homepage/ReportNowData',
+        component: ReportNowData
+      },{
+        path: '/homepage/ReportHistory',
+        component: ReportHistory
+      },
+      //人员定位系统
+      {
+        path: '/homepage/PersonnelPositioning',
+        component: PersonnelPositioning
+      },
+      //车辆定位系统
+      {
+        path: '/homepage/CarPositioning',
+        component: CarPositioning
+      },
+      //边坡在线监测
+      {
+        path: '/homepage/SlopeHomePage',
+        component: SlopeHomePage
+      },{
+        path: '/homepage/SlopeNowData',
+        component: SlopeNowData
+      },{
+        path: '/homepage/SlopeHistory',
+        component: SlopeHistory
+      },{
+        path: '/homepage/SlopeAlarm',
+        component: SlopeAlarm
+      },
+      //环境在线监测
+      {
+        path: '/homepage/EnvironmentHomepage',
+        component: EnvironmentHomepage
+      },{
+        path: '/homepage/EnvironmentNowData',
+        component: EnvironmentNowData
+      },{
+        path: '/homepage/EnvironmentHistory',
+        component: EnvironmentHistory
+      },{
+        path: '/homepage/EnvironmentAlarm',
+        component: EnvironmentAlarm
+      },
+      //数字化储量管理
+      {
+        path: '/homepage/reservesHomepage',
+        component: reservesHomepage
+      },
+      //门禁系统
+      {
+        path: '/homepage/AccessHomepage',
+        component: AccessHomepage
+      },
     ]
   },
+  //  //懒加载
   // {
   //   path: '/about',
   //   name: 'About',
@@ -36,6 +149,7 @@ const routes = [
   //   // which is lazy-loaded when the route is visited.
   //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
   // },
+  //  //路由重定向
   // {
   //   name: 'default',
   //   path: '*',

src/store/index.js

@@ -2,7 +2,39 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 
 Vue.use(Vuex)
-
+const mineMonitoring = {
+	state:{
+	  intelligentDispatch:{
+      name:"智能派单系统",
+      context:[{name:"发货车辆",num:"36辆"},{name:"发货量",num:"36辆"}],
+    },
+    environmentalMonitoring:{
+      name:"环境监测",
+      context:[{name:"扬尘",num:"23"},{name:"噪声",num:"23dB"},{name:"温度",num:"36℃"},{name:"湿度",num:"36RH%"},{name:"气压",num:"36KPa"}],
+    },
+    locationSystem:{
+      name:"定位系统",
+      context:[{name:"矿区车辆",num:"36辆"},{name:"矿区人员",num:"36人"}],
+    },
+    slopeMonitoring:{
+      name:"边坡在线监测",
+      context:[{name:"降雨量",num:"正常"},{name:"位移",num:"正常"}],
+    },
+    productionAutomation:{
+      name:"生产自动化",
+      context:[{name:"发货车辆",num:"36辆"},{name:"发货量",num:"36辆"}],
+    }
+	},
+	mutations:{
+	
+	},
+	getters:{
+	
+	},
+	actions:{
+	
+	}
+}
 export default new Vuex.Store({
   state: {
     projectName:"鑫海数字矿山后台管理系统",
@@ -13,5 +45,6 @@ export default new Vuex.Store({
   actions: {
   },
   modules: {
+    a:mineMonitoring,
   }
 })

src/views/AccessHomepage.vue

+<template>
+  <div>
+      <span>门禁系统首页</span>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/views/AutomatedNowData.vue

+<template>
+  <div>
+      <span>生产自动化系统实时数据</span>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/views/AutomaticAlarm.vue

+<template>
+  <div>
+      <span>生产自动化报警记录</span>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/views/AutomationHistory.vue

+<template>
+  <div>
+      <span>生产自动化历史数据</span>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/views/AutomationHomepage.vue

+<template>
+  <div>
+      <span>生产自动化系统首页</span>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/views/CarPositioning.vue

+<template>
+  <div>
+      <span>车辆定位系统</span>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/views/EnvironmentAlarm.vue

+<template>
+  <div>
+      <span>环境在线监测报警记录</span>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/views/EnvironmentHistory.vue

+<template>
+  <div>
+      <span>环境在线监测历史数据</span>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/views/EnvironmentHomepage.vue

+<template>
+  <div>
+      <span>环境在线监测首页</span>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/views/EnvironmentNowData.vue

+<template>
+  <div>
+      <span>环境在线监测实时数据</span>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/views/PersonnelPositioning.vue

+<template>
+  <div>
+      <span>人员定位系统</span>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/views/ReportHistory.vue

+<template>
+  <div>
+      <span>生产报表系统历史数据</span>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/views/ReportHomePage.vue

+<template>
+  <div>
+      <span>生产报表系统首页</span>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/views/ReportNowData.vue

+<template>
+  <div>
+      <span>生产报表系统实时数据</span>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/views/SlopeAlarm.vue

+<template>
+  <div>
+      <span>边坡在线监测报警记录</span>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/views/SlopeHistory.vue

+<template>
+  <div>
+      <span>边坡在线监测历史数据</span>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/views/SlopeHomePage.vue

+<template>
+  <div>
+      <span>边坡在线监测首页</span>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/views/SlopeNowData.vue

+<template>
+  <div>
+      <span>边坡在线监测实时数据</span>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/views/homepage.vue

 <template>
   <div class="viewBody">
+
     <div class="topMenuBar">
       <span>{{ $store.state.platformName }}</span>
       <div class="userInformationBar">
@@ -8,26 +9,18 @@
           <span class="iconfont icon-xiajiantou xiajiantou" style="font-size:18px;"></span>
         </div>
         <div style="margin-right:10px;">
-          <span>131313132</span>
+          <span>{{userName}}</span>
           <span class="iconfont icon-xiajiantou xiajiantou" style="font-size:18px;"></span>
         </div>
         <img src="../imgs/yonghu.png">
       </div>
     </div>
+
     <div class="mainBody">
       <div class="leftMenuBar">
         <el-row class="tac">
           <el-col :span="12">
-            <el-menu
-              class="el-menu-vertical-demo"
-              @open="handleOpen"
-              @close="handleClose"
-              background-color="rgb(9, 26, 69)"
-              text-color="rgb(3,156,205)"
-              active-text-color="white"
-              :unique-opened="true"
-              :router="true"
-            >
+            <el-menu class="el-menu-vertical-demo" background-color="rgb(9, 26, 69)" text-color="rgb(3,156,205)" active-text-color="white" :unique-opened="true" :router="true">
               <el-menu-item index="/homepage/mineMonitoring">
                   <i class="iconfont icon-solid-home" style="margin-right:10px;color:rgb(3,156,205);"></i>
                   <span slot="title">矿区监控</span>
@@ -41,25 +34,25 @@
                   <i class="iconfont icon-wenjianjia" style="margin-right:10px;color:rgb(3,156,205);"></i>
                   <span>生产自动化系统</span>
                 </template>
-                <el-menu-item index="3_1">系统首页</el-menu-item>
-                <el-menu-item index="3_2">实时数据</el-menu-item>
-                <el-menu-item index="3_3">历史数据</el-menu-item>
-                <el-menu-item index="3_4">报警记录</el-menu-item>
+                <el-menu-item index="/homepage/AutomationHomepage">系统首页</el-menu-item>
+                <el-menu-item index="/homepage/AutomatedNowData">实时数据</el-menu-item>
+                <el-menu-item index="/homepage/AutomationHistory">历史数据</el-menu-item>
+                <el-menu-item index="/homepage/AutomaticAlarm">报警记录</el-menu-item>
               </el-submenu>
               <el-submenu index="4">
                 <template slot="title">
                   <i class="iconfont icon-wenjian" style="margin-right:10px;color:rgb(3,156,205);"></i>
                   <span>生产报表系统</span>
                 </template>
-                <el-menu-item index="4_1">系统首页</el-menu-item>
-                <el-menu-item index="4_2">实时数据</el-menu-item>
-                <el-menu-item index="3_3">历史数据</el-menu-item>
+                <el-menu-item index="/homepage/ReportHomePage">系统首页</el-menu-item>
+                <el-menu-item index="/homepage/ReportNowData">实时数据</el-menu-item>
+                <el-menu-item index="/homepage/ReportHistory">历史数据</el-menu-item>
               </el-submenu>
-              <el-menu-item index="5">
+              <el-menu-item index="/homepage/PersonnelPositioning">
                   <i class="iconfont icon-dingwei" style="margin-right:10px;color:rgb(3,156,205);"></i>
                   <span slot="title">人员定位系统</span>
               </el-menu-item>
-              <el-menu-item index="6">
+              <el-menu-item index="/homepage/CarPositioning">
                   <i class="iconfont icon-car-fill" style="margin-right:10px;color:rgb(3,156,205);"></i>
                   <span slot="title">车辆定位系统</span>
               </el-menu-item>
@@ -68,26 +61,26 @@
                   <i class="iconfont icon-bianpo" style="margin-right:10px;color:rgb(3,156,205);"></i>
                   <span>边坡在线监测</span>
                 </template>
-                <el-menu-item index="7_1">系统首页</el-menu-item>
-                <el-menu-item index="7_2">实时数据</el-menu-item>
-                <el-menu-item index="7_3">历史数据</el-menu-item>
-                <el-menu-item index="7_4">报警记录</el-menu-item>
+                <el-menu-item index="/homepage/SlopeHomePage">系统首页</el-menu-item>
+                <el-menu-item index="/homepage/SlopeNowData">实时数据</el-menu-item>
+                <el-menu-item index="/homepage/SlopeHistory">历史数据</el-menu-item>
+                <el-menu-item index="/homepage/SlopeAlarm">报警记录</el-menu-item>
               </el-submenu>
               <el-submenu index="8">
                 <template slot="title">
                   <i class="iconfont icon-yezi" style="margin-right:10px;color:rgb(3,156,205);"></i>
                   <span>环境在线监测</span>
                 </template>
-                <el-menu-item index="8_1">系统首页</el-menu-item>
-                <el-menu-item index="8_2">实时数据</el-menu-item>
-                <el-menu-item index="8_3">历史数据</el-menu-item>
-                <el-menu-item index="8_4">报警记录</el-menu-item>
+                <el-menu-item index="/homepage/EnvironmentHomepage">系统首页</el-menu-item>
+                <el-menu-item index="/homepage/EnvironmentNowData">实时数据</el-menu-item>
+                <el-menu-item index="/homepage/EnvironmentHistory">历史数据</el-menu-item>
+                <el-menu-item index="/homepage/EnvironmentAlarm">报警记录</el-menu-item>
               </el-submenu>
-              <el-menu-item index="9">
+              <el-menu-item index="reservesHomepage">
                   <i class="iconfont icon-kuaizhuanggengduo" style="margin-right:10px;color:rgb(3,156,205);"></i>
                   <span slot="title">数字化储量管理</span>
               </el-menu-item>
-              <el-menu-item index="10">
+              <el-menu-item index="AccessHomepage">
                   <i class="iconfont icon-IOTtubiao_huabanfuben" style="margin-right:10px;color:rgb(3,156,205);"></i>
                   <span slot="title">门禁系统</span>
               </el-menu-item>
@@ -101,20 +94,25 @@
       
 
     </div>
+    
   </div>
 </template>
 
 <script>
 export default {
+  data(){
+    return{
+      userName:"qwqwqw",
+    }
+  },
   methods: {
-    handleOpen(key, keyPath) {
-      console.log(key, keyPath);
-    },
-    handleClose(key, keyPath) {
-      console.log(key, keyPath);
-    },
+    // handleOpen(key, keyPath) {
+    //   console.log(key, keyPath);
+    // },
+    // handleClose(key, keyPath) {
+    //   console.log(key, keyPath);
+    // },
   },
-  
 };
 </script>
 
@@ -156,14 +154,14 @@ export default {
   height: 21px;
 }
 .mainBody{
-    height: 100vh;
+    min-height: 100vh;
     overflow: hidden;
     display: flex;
 }
 .rightBody{
   width: 100%;
   height: 100%;
-  margin-left: -5px;
+  margin-left: -1px;
 }
 .leftMenuBar>.tac>.el-col>ul{
     width: 240px;

src/views/login.vue

@@ -89,7 +89,7 @@ export default {
             }
           })
         })
-        this.$router.push({path: 'homepage/mineMonitoring',query:{ index:this.userName}});
+        this.$router.push({path: 'homepage/mineMonitoring'});
       }
     }
   }

src/views/reservesHomepage.vue

+<template>
+  <div>
+      <span>数字化储量管理首页</span>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/views/videoSurveillance.vue

 <template>
-  <div>Video surveillance</div>
+  <div class="viewBody">
+    <iframe src="https://www.csdn.net/" class="iframeViews"></iframe>
+  </div>
 </template>
 
 <script>
@@ -9,5 +11,12 @@ export default {
 </script>
 
 <style>
-
+*{
+  margin: 0;
+  padding: 0;
+}
+.iframeViews{
+  width: 100%;
+  height: 928px;
+}
 </style>
\ No newline at end of file