增加了mixin

src/common/headline.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="title">
+    {{title}}
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["title"]
+};
+</script>
+
+<style scoped>
+.title {
+  color: #4adefe;
+  text-align: center;
+  font-size: 30px;
+}
+</style>

src/components/mining/monitor/error_recording.vue

@@ -1,19 +1,10 @@
-  <template>
+<template>
   <!-- 采煤工作面设备 的 故障记录 -->
   <div class="table-wrapper main">
     <span class="title">故障记录</span>
-    <el-table :data="tableData">
-      <el-table-column
-        prop="name"
-        label="时间"
-        width="180"
-      >
-      </el-table-column>
-      <el-table-column
-        prop="problem"
-        label="记录"
-        width="180"
-      >
+    <el-table :data="tableData" max-height="160">
+      <el-table-column prop="name" label="时间" width="180"> </el-table-column>
+      <el-table-column prop="problem" label="记录" width="200">
       </el-table-column>
     </el-table>
   </div>
@@ -42,9 +33,23 @@ export default {
       return "background-color:#ecf5ff";
     },
   },
+  mounted() {
+    let interval = setInterval(() => {
+      let temp = {
+        name: Math.random() > 0.5 ? "1#采煤机" : "2#采煤机",
+        problem:
+          Math.random() > 0.5 ? "液压制动器过于发热" : "液压制动器制动力矩不足",
+      };
+      this.tableData.unshift(temp);
+      console.log(this.tableData);
+    }, 3000);
+    this.$once("hook:beforeDestroy", () => {
+      clearInterval(interval);
+    });
+  },
 };
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .main {
   padding: 6px;
   // border:3px solid #96c2f1;
@@ -81,19 +86,28 @@ export default {
 .table-wrapper ::v-deep .el-table th {
   background-color: transparent !important;
   border: none;
-  color: #4ADEFE;
+  color: #4adefe;
   font-size: 16px;
 }
 .table-wrapper ::v-deep .el-table td,
 .el-table th.is-leaf {
   background-color: transparent !important;
-  color: #F3DB5C;
+  color: #f3db5c;
   font-size: 15px;
   border: none;
 }
 .title {
   margin-left: -10px;
   font-size: 18px;
-  color: #4ADEFE;
+  color: #4adefe;
+}
+
+.table-wrapper ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.table-wrapper ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
+  // color: #4adefe;
+  // background-color: #f3db5c;
 }
-</style>
+</style>

src/components/mining/monitor/safety_statistics.vue

@@ -1,46 +1,29 @@
 <template>
   <div class="main">
     <span class="title">安全统计</span>
-    <div style="width:400px;height:300px">
+    <div style="width: 400px; height: 300px">
       <el-row :gutter="10">
-        <el-col class="text"
-          :span="5"
-          style="text-align: center"
-        >
+        <el-col class="text" :span="5" style="text-align: center">
           总分
         </el-col>
         <el-col :span="19">
-          <el-progress
-            :percentage="88"
-          ></el-progress>
+          <el-progress :percentage="totalScore"></el-progress>
         </el-col>
       </el-row>
       <el-row :gutter="10">
-        <el-col
-          :span="5"
-          style="text-align: center"
-          class="text"
-        >
+        <el-col :span="5" style="text-align: center" class="text">
           水害评分
         </el-col>
-        <el-col :slot="19">
-          <el-progress
-            :percentage="88"
-          ></el-progress>
+        <el-col :span="19">
+          <el-progress :percentage="waterScore"></el-progress>
         </el-col>
       </el-row>
       <el-row :gutter="10">
-        <el-col
-          :span="5"
-          style="text-align: center"
-          class="text"
-        >
+        <el-col :span="5" style="text-align: center" class="text">
           通风评分
         </el-col>
         <el-col :span="19">
-          <el-progress
-            :percentage="92"
-          ></el-progress>
+          <el-progress :percentage="airScore"></el-progress>
         </el-col>
       </el-row>
     </div>
@@ -48,11 +31,29 @@
 </template>
 
 <script>
-export default {};
+export default {
+  data() {
+    return {
+      totalScore: 0,
+      waterScore: 0,
+      airScore: 0,
+    };
+  },
+  mounted() {
+    let interval = setInterval(() => {
+      this.totalScore = this.getRandomNum(70, 100);
+      this.waterScore = this.getRandomNum(70, 100);
+      this.airScore = this.getRandomNum(70, 100);
+    }, 3000);
+    this.$once("hook:beforeDestroy", () => {
+      clearInterval(interval);
+    });
+  },
+};
 </script>
 
 <style>
-.main{
+.main {
   height: 200px;
   background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
   background-size: 100%;
@@ -60,16 +61,16 @@ export default {};
 .title {
   margin-left: 20px;
   font-size: 18px;
-  color: #4ADEFE;
+  color: #4adefe;
 }
-.el-row{
+.el-row {
   margin-top: 30px;
 }
-.text{
+.text {
   font-size: 16px;
-  color: #4ADEFE;
+  color: #4adefe;
 }
 .el-progress__text {
-	  color: #F3DB5C; 
+  color: #f3db5c;
 }
-</style>
+</style>

src/components/power_supply/configImg/Table.vue

@@ -147,9 +147,6 @@ export default {
     };
   },
   methods: {
-    getRandomNum(min, max) {
-      return Math.floor(Math.random() * (max - min + 1) + min);
-    },
     getData(data, type) {
       console.log(data[0]);
       this.load.splice(0, 1, data[0]["fuhe_after"]);

src/main.js

@@ -31,6 +31,7 @@ import 'vue-awesome/icons/chart-line.js';
 import 'vue-awesome/icons/align-left.js';
 import 'vue-awesome/icons/align-left.js';
 import Viser from 'viser-vue'
+import mixin from "./utils/mixin"
 // import httpRequest from '@/utils/httpRequest'
 Vue.component('vue-drag-resize', VueDragResize)
 Vue.component('icon', Icon);
@@ -50,6 +51,7 @@ Vue.use(VueCookie)
 Vue.use(Antd)
 Vue.use(dataV);
 Vue.use(Viser)
+Vue.mixin(mixin)
 
 // Vue.prototype.$bus = new Vue()
 new Vue({

src/utils/mixin.js

@@ -0,0 +1,10 @@
+export default {
+  methods: {
+    getRandomNum(min, max) {
+      return Math.floor(Math.random() * (max - min + 1) + min);
+    },
+    getRandomNumWithDecimals(min, max) {
+      return Number.parseFloat((Math.random() * (max - min + 1) + min).toFixed(2));
+    }
+  },
+}

src/views/Home.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-row class="tac">
-      <el-col :span="2">
+      <el-col :span="2" style="margin-top: -30px">
         <!-- style="width: 110px;height: 800px;background-color: #409eff;" -->
         <div style="width: 110px; height: 800px; background-color: white">
           <div
@@ -41,7 +41,7 @@
               <el-menu-item :index="item.path">
                 <div
                   style="
-                    background-color: #C0C0C0;
+                    background-color: #c0c0c0;
                     width: 120px;
                     height: 53px;
                     position: relative;
@@ -78,7 +78,7 @@
           </el-menu>
         </div>
       </el-col>
-      <el-col :span="20">
+      <el-col :span="20" style="margin-top: -30px">
         <!-- 展示   -->
         <iframe
           v-if="this.$route.path == '/'"
@@ -88,13 +88,10 @@
           width="1138px"
           height="680px"
         ></iframe>
-        <el-main>
-          <router-view></router-view>
-        </el-main>
-      </el-col>
+        <router-view></router-view>
+      </el-col> 
       <!-- 右侧边栏 -->
-
-      <el-col :span="2">
+      <el-col :span="2" style="margin-top: -30px">
         <div style="width: 110px; height: 800px; background-color: white">
           <div
             style="
@@ -130,10 +127,10 @@
               v-for="(item, index) in $router.options.routes[1].children"
               v-if="!item.hidden"
             >
-              <el-menu-item :index="item.path" >
+              <el-menu-item :index="item.path">
                 <div
                   style="
-                    background-color: #C0C0C0;
+                    background-color: #c0c0c0;
                     width: 120px;
                     height: 53px;
                     position: relative;
@@ -230,7 +227,6 @@ export default {
 };
 </script>
 
-
 <style scoped>
 .el-menu-vertical-demo {
   width: 1px;
@@ -243,4 +239,4 @@ export default {
         letter-spacing: 0.2em;
         cursor: pointer;
     } */
-</style>
+</style>

src/views/mining/Monitor/Emulsion.vue

@@ -67,13 +67,23 @@
         >油箱油位<span style="color: #f3db5c">{{ waterLevel.oil }}</span
         >cm</span
       >
-      <span>液总用量<span style="color: #f3db5c"> 52 cm</span></span>
-      <span>液流量<span style="color: #f3db5c"> 79 cm</span></span>
+      <span
+        >液总用量<span style="color: #f3db5c"> {{ totalLiquid }}cm</span></span
+      >
+      <span
+        >液流量<span style="color: #f3db5c">
+          {{ liquidFlow[0] }} cm^3/s</span
+        ></span
+      >
       <span
         >乳化液位<span style="color: #f3db5c">{{ waterLevel.liquid }}</span
         >cm</span
       >
-      <span>液流量<span style="color: #f3db5c"> 33 cm</span></span>
+      <span
+        >液流量<span style="color: #f3db5c">
+          {{ liquidFlow[1] }}cm^3/s</span
+        ></span
+      >
     </div>
   </div>
 </template>
@@ -83,6 +93,8 @@ import { mapState } from "vuex";
 export default {
   data() {
     return {
+      totalLiquid: 10,
+      liquidFlow: [0, 0],
       waterLevel: {
         water: 150,
         oil: 30,
@@ -156,6 +168,18 @@ export default {
     // 水箱
     let waterTank = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/57`);
     this.initWebSocket(waterTank, "waterTank");
+
+    let interval = setInterval(() => {
+      this.totalLiquid += this.getRandomNum(0, 3);
+      let temp = [];
+      for (let i = 0; i < 2; i++) {
+        temp.push(this.getRandomNum(0, 40));
+      }
+      this.liquidFlow = temp;
+    }, 3000);
+    this.$once("hook:beforeDestroy", () => {
+      clearInterval(interval);
+    });
   },
 };
 </script>
@@ -280,4 +304,4 @@ export default {
     transform: rotate(360deg);
   }
 }
-</style>
+</style>

src/views/mining/Monitor/Index.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="monitor">
-    <el-row style="margin-top: -10px" :gutter="20">
+    <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">
           <bar></bar>
@@ -30,6 +33,7 @@ import processStatistics from "../../../components/mining/monitor/process_statis
 import safetyStatistics from "../../../components/mining/monitor/safety_statistics";
 import CoalMining from "./CoalMining.vue";
 import bar from "./echarts/Bars.vue";
+import headline from "@/common/headline"
 // import lines from "./echarts/Lines.vue";
 export default {
   components: {
@@ -39,6 +43,7 @@ export default {
     errorRecording,
     processStatistics,
     safetyStatistics,
+    headline
   },
   data() {
     return {};
@@ -49,7 +54,7 @@ export default {
 <style scoped>
 .monitor {
   width: 100%;
-  height: 850px;
+  height: 900px;
   position: relative;
   background-image: linear-gradient(
     to right,
@@ -58,4 +63,4 @@ export default {
     #06133c 100%
   );
 }
-</style>
+</style>

src/views/mining/Monitor/echarts/Bars.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 支架压力柱状图 -->
-  <div id="bar" style="height: 300px; width: 600px;margin-top:10px"></div>
+  <div id="bar" style="height: 300px; width: 600px; margin-top: 10px"></div>
 </template>
 
 <script>
@@ -11,7 +11,7 @@ export default {
       myChart: null,
       option: {
         title: {
-          text: '支架压力监控',
+          text: "支架压力监控",
           padding: [5, 230],
           textStyle: {
             fontWeight: "normal", //标题颜色
@@ -34,16 +34,6 @@ export default {
           },
         },
         color: ["#FF6666", "#99CC66", "#FFFF66"],
-        // legend: {
-        //   orient: "vertical",
-        //   x: "left",
-        //   y: "top",
-        //   data: ["压力超限", "压力过低", "压力正常"],
-        //   textStyle: {
-        //     fontWeight: "normal",
-        //     color: "#fff",
-        //   },
-        // },
         legend: {
           orient: "vertical",
           left: "right",
@@ -51,7 +41,7 @@ export default {
           textStyle: {
             color: "#fff",
           },
-          data: ["压力超限", "压力过低", "压力正常"],
+          data: ["压力超限", "压力正常", "压力过低"],
         },
         grid: {
           left: "3%",
@@ -73,7 +63,6 @@ export default {
               198, 190, 180, 170, 160, 150, 140, 130, 120, 110, 100, 90, 80, 70,
               60, 50, 40, 30, 20, 10, 1,
             ],
-            
           },
         ],
         yAxis: [
@@ -94,7 +83,7 @@ export default {
         ],
         series: [
           {
-            name: "压力过低",
+            name: "数据",
             type: "bar",
             itemStyle: {
               normal: {
@@ -112,7 +101,7 @@ export default {
             barWidth: "10",
             barCategoryGap: "5%",
             data: [
-              23, 66, 76, 12, 79, 42, 15, 56, 13, 29, 20, 4, 22, 12, 38, 9, 31,
+              99, 66, 76, 12, 79, 42, 15, 56, 13, 29, 20, 4, 22, 12, 38, 9, 31,
               66, 90, 77, 14,
             ],
           },
@@ -154,34 +143,15 @@ export default {
               ],
             },
           },
-          // {
-          //   name: '压力超限',
-          //   type: 'bar',
-          //   stack: 'pass',
-          //   emphasis: {
-          //     focus: 'series'
-          //   },
-          //   itemStyle: {
-          //     color: '#FF0003'
-          //   },
-          //   barWidth: '10',
-          //   barCategoryGap: '5%',
-          //   data: [220, 182, 191, 234, 290, 330, 310, 120, 132, 101, 134, 90, 230, 210, 4, 5, 6, 3, 2, 1, 4]
-          // },
-          // {
-          //   name: '压力正常',
-          //   type: 'bar',
-          //   stack: 'pass',
-          //   emphasis: {
-          //     focus: 'series'
-          //   },
-          //   itemStyle: {
-          //     color: '#00FE03'
-          //   },
-          //   barWidth: '10',
-          //   barCategoryGap: '5%',
-          //   data: [150, 232, 201, 154, 190, 330, 4, 5, 6, 3, 2, 1, 4, 410, 120, 132, 101, 134, 90, 230, 210]
-          // },
+          {
+            name: "压力过低",
+            type: "line",
+            itemStyle: {
+              normal: {
+                color: "#FFFF66",
+              },
+            },
+          },
         ],
       },
     };
@@ -190,6 +160,23 @@ export default {
     console.log(this.$echarts);
     this.myChart = this.$echarts.init(document.getElementById("bar"));
     this.setBar();
+    let interval = setInterval(() => {
+      let chartData = [];
+      for (let i = 0; i < 21; i++) {
+        chartData.push(this.getRandomNum(0, 120));
+      }
+      this.myChart.setOption({
+        series: [
+          {
+            name: "数据",
+            data: chartData,
+          },
+        ],
+      });
+    }, 3000);
+    this.$once("hook:beforeDestroy", () => {
+      clearInterval(interval);
+    });
   },
   methods: {
     setBar() {
@@ -199,5 +186,4 @@ export default {
 };
 </script>
 
-<style>
-</style>
+<style></style>