电子巡检记录,在线巡检页面静态排版,组件封装,样式优化

package-lock.json

@@ -2314,6 +2314,14 @@
       "integrity": "sha1-3TeelPDbgxCwgpH51kwyCXZmF/0=",
       "dev": true
     },
+    "async-validator": {
+      "version": "1.8.5",
+      "resolved": "https://registry.nlark.com/async-validator/download/async-validator-1.8.5.tgz",
+      "integrity": "sha1-3D4I7B/Q3dtn5ghC8CwM0c7G1/A=",
+      "requires": {
+        "babel-runtime": "6.x"
+      }
+    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npm.taobao.org/asynckit/download/asynckit-0.4.0.tgz",
@@ -2367,6 +2375,11 @@
         "resolve": "^1.12.0"
       }
     },
+    "babel-helper-vue-jsx-merge-props": {
+      "version": "2.0.3",
+      "resolved": "https://registry.nlark.com/babel-helper-vue-jsx-merge-props/download/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+      "integrity": "sha1-Iq69OzOQIyjlEyk6jkmSs4T58bY="
+    },
     "babel-loader": {
       "version": "8.2.2",
       "resolved": "https://registry.npm.taobao.org/babel-loader/download/babel-loader-8.2.2.tgz",
@@ -2418,6 +2431,27 @@
         "@babel/helper-define-polyfill-provider": "^0.2.2"
       }
     },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npm.taobao.org/babel-runtime/download/babel-runtime-6.26.0.tgz",
+      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.nlark.com/core-js/download/core-js-2.6.12.tgz?cache=0&sync_timestamp=1624210542561&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcore-js%2Fdownload%2Fcore-js-2.6.12.tgz",
+          "integrity": "sha1-2TM9+nsGXjR8xWgiGdb2kIWcwuw="
+        },
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.nlark.com/regenerator-runtime/download/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha1-vgWtf5v30i4Fb5cmzuUBf78Z4uk="
+        }
+      }
+    },
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.nlark.com/balanced-match/download/balanced-match-1.0.2.tgz",
@@ -4063,8 +4097,7 @@
     "deepmerge": {
       "version": "1.5.2",
       "resolved": "https://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz",
-      "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M=",
-      "dev": true
+      "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M="
     },
     "default-gateway": {
       "version": "5.0.5",
@@ -4521,6 +4554,19 @@
       "integrity": "sha1-ByhYfxublw7J/62TJJZCmu91DQk=",
       "dev": true
     },
+    "element-ui": {
+      "version": "2.15.2",
+      "resolved": "https://registry.nlark.com/element-ui/download/element-ui-2.15.2.tgz",
+      "integrity": "sha1-G0xK9YKjcGHefYFGBHo08AmbUsw=",
+      "requires": {
+        "async-validator": "~1.8.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.0",
+        "deepmerge": "^1.2.0",
+        "normalize-wheel": "^1.0.1",
+        "resize-observer-polyfill": "^1.5.0",
+        "throttle-debounce": "^1.0.1"
+      }
+    },
     "elliptic": {
       "version": "6.5.4",
       "resolved": "https://registry.nlark.com/elliptic/download/elliptic-6.5.4.tgz",
@@ -7569,6 +7615,11 @@
       "integrity": "sha1-suHE3E98bVd0PfczpPWXjRhlBVk=",
       "dev": true
     },
+    "normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.nlark.com/normalize-wheel/download/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npm.taobao.org/npm-run-path/download/npm-run-path-2.0.2.tgz",
@@ -9231,6 +9282,11 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.nlark.com/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha1-DpAg3T0hAkRY1OvSfiPkAmmBBGQ="
+    },
     "resolve": {
       "version": "1.20.0",
       "resolved": "https://registry.nlark.com/resolve/download/resolve-1.20.0.tgz?cache=0&sync_timestamp=1618846903792&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fresolve%2Fdownload%2Fresolve-1.20.0.tgz",
@@ -10421,6 +10477,11 @@
         "neo-async": "^2.6.0"
       }
     },
+    "throttle-debounce": {
+      "version": "1.1.0",
+      "resolved": "https://registry.nlark.com/throttle-debounce/download/throttle-debounce-1.1.0.tgz",
+      "integrity": "sha1-UYU9o3vmihVctugns1FKPEIuic0="
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.nlark.com/through/download/through-2.3.8.tgz",

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "core-js": "^3.6.5",
     "echarts": "^4.8.0",
+    "element-ui": "^2.15.2",
     "vue": "^2.6.11",
     "vue-router": "^3.5.1"
   },

src/assets/styles/index.css

@@ -66,6 +66,7 @@ header .showTime {
     top: .225rem;
     color: rgba(255, 255, 255, 0.7);
     font-size: 0.25rem;
+    cursor: pointer;
 }
 
 .mainbox {
@@ -98,6 +99,11 @@ header .showTime {
     box-shadow: inset 0px -56px 99px 2px #03369F;
     position: relative;
     margin-bottom: .975rem;
+    cursor: pointer;
+}
+
+.mainbox .column .panel:hover {
+    /* opacity: .7 */
 }
 
 .mainbox .column .panel .light-color {
@@ -190,8 +196,9 @@ header .showTime {
 .gas-container {
     text-align: center;
     color: #fff;
-    margin-top: .5rem;
+    margin-top: .325rem;
     position: relative;
+    height: calc(11rem)
 }
 
 .gas-container h3 {
@@ -224,13 +231,22 @@ header .showTime {
     font-size: 0.25rem;
     height: 0.575rem;
     line-height: 0.575rem;
-    background: url(../../assets/images/card-bg.png);
-    background-size: cover;
+    box-shadow: inset 0 0 0.2rem 0.0125rem rgba(3, 54, 159, 1);
+    /* background: rgba(5, 37, 166, 0.26);*/
+    border: 1px solid rgba(5, 37, 166, 0.8);
     cursor: pointer;
 }
 
+.cardTabs li.active {
+    box-shadow: inset 0 0 29px 17px rgb(3 54 159);
+}
+
 .cardTabs li:first-child {
-    background: url(../../assets/images/card-bg1-active.png);
+    -webkit-border-top-left-radius: 7px;
+}
+
+.cardTabs li:last-child {
+    -webkit-border-top-right-radius: 7px;
 }
 
 .tabBox {
@@ -351,7 +367,160 @@ header .showTime {
 }
 
 
-/* 电气火灾卡片 */
+/* */
+
+.gasRecord {
+    display: flex;
+    min-width: 1024px;
+    max-width: 1920px;
+    margin: 0 auto;
+    padding: .375rem 2.5rem 0;
+}
+
+.gasRecord>.recordItem {
+    flex: 1;
+    padding: .1875rem;
+    margin: 0 .375rem;
+    box-shadow: inset 0 0 0.2rem 0.0125rem rgb(3 54 159);
+    border: 1px solid #1257c9;
+}
+
+.recordItem h3 {
+    font-size: .25rem;
+    border-bottom: 1px solid rgba(3, 54, 159, .2);
+    position: relative;
+}
+
+.recordItem h3:after {
+    position: absolute;
+    bottom: -.1625rem;
+    left: .25rem;
+    right: .25rem;
+    height: 1px;
+    content: '';
+    -webkit-transform: scaleY(.5);
+    transform: scaleY(.5);
+    background-color: #548ffd;
+}
+
+.recordItem ul {
+    display: inline-block;
+    padding: 0 .45rem
+}
+
+.recordItem ul li {
+    line-height: 2;
+    font-size: .225rem
+}
+
+.recordItem ul:first-child li {
+    text-align: right
+}
+
+.recordItem ul:last-child li {
+    text-align: left
+}
+
+
+/* 巡检时间表start */
+
+.record-container {
+    padding: 0.375rem;
+    height: calc(100vh - 2.025rem);
+    position: relative;
+}
+
+.gas-container>.timeItem {
+    width: 3.925rem;
+    display: inline-block;
+    height: 1rem;
+    line-height: 1rem;
+    text-align: center;
+    margin: 0 0.3125rem 0.45rem;
+    color: #fff;
+    font-size: 0.325rem;
+    background: rgba(18, 87, 201, 0.26);
+    border: 2px solid #548fff;
+    border-radius: 42px;
+    cursor: pointer;
+}
+
+.timeItem:hover {
+    box-shadow: inset 0 0 0.2rem 0.0125rem red;
+    background: rgba(255, 18, 18, 0.26);
+    border: 2px solid #ff1212;
+}
+
+
+/*带背景的分页按钮背景色begin*/
+
+.el-pagination.is-background .el-pager li {
+    opacity: 1;
+    background: rgba(5, 37, 166, 0.26);
+    border: 1px solid #1c47ff;
+    color: #fff;
+    /* width: .325rem;
+    height: .325rem;
+    line-height: .325rem */
+}
+
+.el-pagination.is-background .el-pager li:not(.disabled).active {
+    background-color: rgba(5, 37, 166, 1);
+    /* color: #FFF; */
+}
+
+.el-pagination.is-background .el-pager li.active {
+    cursor: default;
+}
+
+.el-pagination.is-background .el-pager li:hover {
+    color: #1c47ff;
+}
+
+.el-pagination.is-background .el-pager li:not(.disabled):hover {
+    color: #1c47ff
+}
+
+.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
+    background-color: rgba(5, 37, 166, 1);
+    color: #FFF;
+}
+
+.el-pagination.is-background .btn-next,
+.el-pagination.is-background .btn-prev,
+.el-pagination.is-background .el-pager li {
+    background: rgba(5, 37, 166, 0.26);
+    border: 1px solid #1c47ff;
+}
+
+.el-pagination .btn-next,
+.el-pagination .btn-prev {
+    color: #fff
+}
+
+.el-pagination.is-background .btn-next.disabled,
+.el-pagination.is-background .btn-next:disabled,
+.el-pagination.is-background .btn-prev.disabled,
+.el-pagination.is-background .btn-prev:disabled,
+.el-pagination.is-background .el-pager li.disabled {
+    color: #aaa
+}
+
+.el-input__inner {
+    background: rgba(5, 37, 166, 0.26);
+    border: 1px solid #1c47ff;
+    color: #fff;
+}
+
+.el-pagination__jump {
+    color: #fff;
+}
+
+
+/*带背景的分页按钮背景色end*/
+
+
+/* end */
 
 @keyframes rotatel {
     from {

src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/returnBack.vue

@@ -0,0 +1,25 @@
+<template>
+ <div class="return-back" @click="returnBack()">返回</div>
+
+</template>
+
+<script>
+export default {
+  // name: "header",
+
+  methods: {
+   returnBack(){
+        this.$router.push("/");
+   }
+  },
+  mounted() {
+   
+  },
+
+};
+</script>
+
+
+<style lang="scss" scoped>
+
+</style>

src/components/topHeader.vue

@@ -1,23 +1,27 @@
 <template>
- <header>
-      <h1>智慧安防数据分析看板</h1>
-
-      <!-- 下拉筛选 -->
-      <div class="filterSec">
-        <span>站点：</span>
-        <select name="" id="">
-          <option value="">请选择</option>
-          <option value="">站点一</option>
-          <option value="">站点一</option>
-        </select>
-      </div>
-
-      <!-- 当前时间  -->
-      <time-menu></time-menu>
-
-      <img class="time-icon" src="@/assets/images/time-icon.png" alt="" />
-    </header>
-
+  <header>
+    <h1>{{ title }}</h1>
+
+    <!-- 下拉筛选 -->
+    <div class="filterSec">
+      <span>站点：</span>
+      <select name="" id="">
+        <option value="">请选择</option>
+        <option value="">站点一</option>
+        <option value="">站点一</option>
+      </select>
+    </div>
+
+    <!-- 当前时间  -->
+    <time-menu></time-menu>
+
+    <img
+      class="time-icon"
+      @click="goRecordTime()"
+      src="@/assets/images/time-icon.png"
+      alt=""
+    />
+  </header>
 </template>
 
 <script>
@@ -27,18 +31,31 @@ export default {
   components: {
     TimeMenu,
   },
-  
-  methods: {
-   
+  data() {
+    return {
+      title: "智慧安防数据分析看板",
+    };
   },
-  mounted() {
-   
+mounted(){
+  this.navs()
+},
+  computed: {
+    
+  },
+  methods: {
+    goRecordTime() {
+      this.$router.push("/recordTime");
+    },
+    navs() {
+      switch (this.$route.name) {
+        case "recordTime":
+          return [(this.title = '电子巡检记录列表')];
+      }
+    },
   },
-
 };
 </script>
 
 
 <style lang="scss" scoped>
-
 </style>

src/main.js

@@ -3,6 +3,10 @@ import App from './App.vue'
 // 引入路由文件
 import router from './router/index'
 
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+Vue.use(ElementUI)
+
 
 
 // 引入样式
@@ -16,8 +20,6 @@ import echarts from 'echarts'
 
 Vue.prototype.$echarts = echarts
 
-
-
 Vue.config.productionTip = false
 
 new Vue({

src/pages/eleFireCard/eleFireCard.vue

@@ -3,14 +3,15 @@
     <top-header></top-header>
 
     <div class="gas-container">
-      <div class="return-back">返回</div>
+        <return-back></return-back>
+      <!-- <div class="return-back">返回</div> -->
       <h3>电气火灾监控实时信息</h3>
       <p>更新时间：2021-06-15 13:25:00</p>
 
       <div>
         <ul class="cardTabs">
-          <li  @click="Inv=0">数据列表</li>
-          <li @click="Inv=1">数据可视化</li>
+          <li class="active">数据列表</li>
+          <li @click="goEleFireData">数据可视化</li>
         </ul>
 
         <div class="tabBox fireTabs">
@@ -59,15 +60,21 @@
 
 <script>
 import topHeader from "@/components/topHeader";
+import returnBack from "@/components/returnBack";
 export default {
   name: "index",
   components: {
-    topHeader
+    topHeader,returnBack
   },
   data(){
     return{
   
     }
+  },
+  methods:{
+      goEleFireData(){
+      this.$router.push('/eleFireData')
+    }
   }
 };
 </script>

src/pages/eleFireData/eleFireData.vue

@@ -3,14 +3,14 @@
     <top-header></top-header>
 
     <div class="gas-container">
-      <div class="return-back">返回</div>
+      <return-back></return-back>
       <h3>电气火灾监控实时信息</h3>
       <p>更新时间：2021-06-15 13:25:00</p>
 
       <div>
         <ul class="cardTabs">
-          <li  @click="Inv=0">数据列表</li>
-          <li @click="Inv=1">数据可视化</li>
+          <li @click="goEleFireCard">数据列表</li>
+          <li class="active" >数据可视化</li>
         </ul>
 
         <div class="tabBox eleFire-data">
@@ -50,6 +50,7 @@
 
 <script>
 import topHeader from "@/components/topHeader";
+import returnBack from "@/components/returnBack";
 import eleCurrentChart from "./components/eleCurrentChart";
 import voltageChart from "./components/voltageChart";
 import cableTemChart from "./components/cableTemChart";
@@ -57,12 +58,17 @@ import cableTemChart from "./components/cableTemChart";
 export default {
   name: "eleFireData",
   components: {
-    topHeader,eleCurrentChart,voltageChart,cableTemChart
+    topHeader,returnBack,eleCurrentChart,voltageChart,cableTemChart
   },
   data(){
     return{
   
     }
+  },
+  methods:{
+    goEleFireCard(){
+      this.$router.push('/eleFireCard')
+    }
   }
 };
 </script>

src/pages/gasCard/gasCard.vue

@@ -3,14 +3,16 @@
     <top-header></top-header>
 
     <div class="gas-container">
-      <div class="return-back">返回</div>
+      <!-- <div class="return-back">返回</div> -->
+              <return-back></return-back>
+
       <h3>可燃气体监控实时信息</h3>
       <p>更新时间：2021-06-15 13:25:00</p>
 
       <div>
         <ul class="cardTabs">
-          <li  @click="Inv=0">数据列表</li>
-          <li @click="Inv=1">数据可视化</li>
+          <li  @click="Inv=0" :class="{'active':Inv===0}">数据列表</li>
+          <li @click="Inv=1" :class="{'active':Inv===1}">数据可视化</li>
         </ul>
 
         <div class="tabBox">
@@ -55,10 +57,11 @@
 <script>
 import topHeader from "@/components/topHeader";
 import lineChart from "./components/lineChart";
+import returnBack from "@/components/returnBack";
 export default {
   name: "index",
   components: {
-    topHeader,lineChart
+    topHeader,returnBack,lineChart
   },
   data(){
     return{

src/pages/index/index.vue

@@ -3,11 +3,10 @@
     <!-- 头部区域 -->
    <top-header></top-header>
 
-
     <!-- 首页主体start -->
     <div class="mainbox">
       <div class="column">
-        <div class="panel alarm">
+        <div class="panel alarm" @click="goEleFireCard">
           <div>
             <img src="@/assets/images/panel-icon.png" alt="" />
             <p>状态：<span>告警</span></p>
@@ -15,7 +14,7 @@
             <p class="light-color">电缆温度：51℃</p>
           </div>
         </div>
-        <div class="panel normal">
+        <div class="panel normal" @click="goGasCard" >
           <div>
             <img src="@/assets/images/gas-icon.png" alt="" />
             <p>状态：<span>正常</span></p>
@@ -24,8 +23,8 @@
           </div>
         </div>
       </div>
-      <div class="column">
-        <div class="panel">
+      <div class="column" >
+        <div class="panel"  @click="goEleFireCard">
           <div>
             <img src="@/assets/images/panel-icon.png" alt="" />
             <p>状态：<span>正常</span></p>
@@ -33,7 +32,7 @@
             <p class="light-color">电缆温度：51℃</p>
           </div>
         </div>
-        <div class="panel">
+        <div class="panel" @click="goGasCard">
           <div>
             <img src="@/assets/images/gas-icon.png" alt="" />
             <p>状态：<span>正常</span></p>
@@ -43,7 +42,7 @@
         </div>
       </div>
       <div class="column">
-        <div class="panel fault">
+        <div class="panel fault"  @click="goEleFireCard">
           <div>
             <img src="@/assets/images/panel-icon.png" alt="" />
             <p>状态：<span>故障</span></p>
@@ -51,7 +50,7 @@
             <p class="light-color">电缆温度：51℃</p>
           </div>
         </div>
-        <div class="panel">
+        <div class="panel" @click="goGasCard">
           <div>
             <img src="@/assets/images/gas-icon.png" alt="" />
             <p>状态：<span>正常</span></p>
@@ -73,6 +72,14 @@ export default {
   components: {
    topHeader
   },
+  methods:{
+    goEleFireCard(){
+       this.$router.push('/eleFireCard')
+    },
+    goGasCard(){
+       this.$router.push('/gasCard')
+    }
+  }
 
 };
 </script>

src/pages/inspectRecord/inspectRecord.vue

@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <top-header></top-header>
+
+    <div class="gas-container">
+      <return-back></return-back>
+      <!-- <div class="return-back">返回</div> -->
+      <h3>电气火灾监控信息</h3>
+      <p>更新时间：2021-06-15 13:25:00</p>
+
+      <div class="tabBox fireTabs" style="margin-bottom: 1rem">
+        <table>
+          <tr>
+            <th>供电过压告警：<span class="normal">正常</span></th>
+            <th>供电低压告警：<span class="normal">正常</span></th>
+            <th>供电过流告警：<span class="normal">正常</span></th>
+            <th>漏电告警：<span class="normal">正常</span></th>
+          </tr>
+          <tr>
+            <td>
+              <P>A相线缆温度超高：<span class="normal">正常</span></P>
+              <P>B相线缆温度超高：<span class="normal">正常</span></P>
+              <P>C相线缆温度超高：<span class="normal">正常</span></P>
+            </td>
+            <td>
+              <P>A相电压：<span class="normal">219.00</span></P>
+              <P>B相电压：<span class="normal">219.00</span></P>
+              <P>C相电压：<span class="normal">219.00</span></P>
+            </td>
+            <td>
+              <P>A相电流：<span class="normal">9.00</span></P>
+              <P>B相电流：<span class="error">3.00</span></P>
+              <P>C相电流：<span class="normal">9.00</span></P>
+            </td>
+            <td>
+              <P>A相线缆温度：<span class="normal">29.00</span></P>
+              <P>B相线缆温度：<span class="error">56.00</span></P>
+              <P>C相线缆温度：<span class="normal">29.00</span></P>
+            </td>
+          </tr>
+        </table>
+      </div>
+
+      <h3>可燃气体监控信息</h3>
+      <div class="gasRecord">
+        <div class="recordItem">
+          <h3>测试点位名称</h3>
+          <div>
+            <ul>
+              <li>可燃气体</li>
+              <li>告警状态</li>
+              <li>浓度值</li>
+            </ul>
+            <ul>
+              <li>一氧化碳</li>
+              <li class="normal"><span>正常</span></li>
+              <li>27.00</li>
+            </ul>
+          </div>
+        </div>
+        <div class="recordItem">
+          <h3>测试点位名称</h3>
+          <div>
+            <ul>
+              <li>可燃气体</li>
+              <li>告警状态</li>
+              <li>浓度值</li>
+            </ul>
+            <ul>
+              <li>一氧化碳</li>
+              <li class="normal"><span>正常</span></li>
+              <li>27.00</li>
+            </ul>
+          </div>
+        </div>
+         <div class="recordItem">
+          <h3>测试点位名称</h3>
+          <div>
+            <ul>
+              <li>可燃气体</li>
+              <li>告警状态</li>
+              <li>浓度值</li>
+            </ul>
+            <ul>
+              <li>一氧化碳</li>
+              <li class="normal"><span>正常</span></li>
+              <li>27.00</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import topHeader from "@/components/topHeader";
+import returnBack from "@/components/returnBack";
+export default {
+  name: "index",
+  components: {
+    topHeader,
+    returnBack,
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    goEleFireData() {
+      this.$router.push("/eleFireData");
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>

src/pages/recordTime/recordTime.vue

@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <top-header></top-header>
+
+    <div class="gas-container">
+      <return-back></return-back>
+      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+      <div class="timeItem" @click="goInspectDetail()">2021-06-15 08:30</div>
+            <el-pagination
+  background
+@size-change="handleSizeChange"
+  layout="prev, pager, next,jumper"
+  :total="1000">
+</el-pagination>
+    </div>
+
+
+  </div>
+
+
+</template>
+
+<script>
+import topHeader from "@/components/topHeader";
+import returnBack from "@/components/returnBack";
+export default {
+  name: "index",
+  components: {
+    topHeader,
+    returnBack,
+  },
+  data() {
+    return {
+       currentPage1: 5,
+        currentPage2: 5,
+        currentPage3: 5,
+        currentPage4: 4
+    };
+  },
+   mounted() {
+    document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳转到: ";
+  },
+  methods: {
+    goInspectDetail(){
+      this.$router.push("/inspectRecord");
+    },
+     handleSizeChange(val) {
+        console.log(`每页 ${val} 条`);
+      },
+      handleCurrentChange(val) {
+        console.log(`当前页: ${val}`);
+      }
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style >
+
+</style>

src/router/index.js

@@ -6,6 +6,8 @@ import Home from '../pages/index/index'
 import gasCard from '../pages/gasCard/gasCard'
 import eleFireCard from '../pages/eleFireCard/eleFireCard'
 import eleFireData from '../pages/eleFireData/eleFireData'
+import inspectRecord from '../pages/inspectRecord/inspectRecord'
+import recordTime from '../pages/recordTime/recordTime'
 
 
 // 1.通过Vue.use(插件), 安装插件
@@ -19,16 +21,29 @@ const routes = [{
     },
     {
         path: '/index',
-        component: Home
+        component: Home,
+        meta: { title: '站点信息页' },
     }, {
         path: '/gasCard',
-        component: gasCard
+        component: gasCard,
+        meta: { title: '电气火灾' },
     }, {
         path: '/eleFireCard',
-        component: eleFireCard
+        component: eleFireCard,
+        meta: { title: '可燃气体卡片页' },
     }, {
         path: '/eleFireData',
-        component: eleFireData
+        component: eleFireData,
+        meta: { title: '可燃气体数据展示' },
+    }, {
+        path: '/inspectRecord',
+        component: inspectRecord,
+        meta: { title: '在线巡检记录' },
+    }, {
+        path: '/recordTime',
+        name: 'recordTime',
+        component: recordTime,
+        meta: { title: '在线自动巡检记录' },
     }
 ]
 const router = new VueRouter({
@@ -39,4 +54,13 @@ const router = new VueRouter({
 })
 
 // 3.将router对象传入到Vue实例
+router.beforeEach((to, from, next) => {
+    /* 路由发生变化修改页面title */
+    if (to.meta.title) {
+        document.title = to.meta.title
+    }
+    next()
+})
+
+
 export default router