三机监控

src/common/pieChart.vue

@@ -333,7 +333,7 @@ export default {
     // 动画效果
     this.interval = setInterval(() => {
       this.draw();
-    }, 100);
+    }, 200);
     this.$once("hook:beforeDestroy", () => {
       clearInterval(this.interval);
     });

src/router/index.js

@@ -21,16 +21,6 @@ export default new Router({
             component: () =>
                 import('../views/mining/mining.vue'),
             hidden: false,
-            children: [{
-                path: 'monitor',
-                name: ' 采煤工作面',
-                id: 101,
-                component: () =>
-                    import('../views/mining/Monitor/Index.vue'),
-                hidden: true,
-
-            }]
-
         }, {
             path: '/coalcutter',
             name: ' 采煤机页面',

src/views/mining/machines/index.vue

@@ -0,0 +1,278 @@
+<template>
+  <div id="outer">
+    <div class="title">
+      <p style="color:#4adefe;">三机监控</p>
+    </div>
+    <img style="width: 1300px;margin-left:100px" src="./top.png" />
+    <div style="height: 50px"></div>
+    <div class="row">
+      <div class="square">
+        <img class="img" src="./sc.png" />
+        <div class="inf">
+          <div style="height: 20%;font-size: 20px;color: #4adefe;">刮板机 运行状态</div>
+          <div class="details">
+              <div>运行速度:
+              <span>
+                 {{ data.transporter_speed }}m/s
+              </span>
+             </div>
+            <div>电机功率:
+              <span>
+                {{ data.transporter_power }}W
+              </span>
+            </div>
+            <div>减速器油温:
+              <span>
+                {{ data.transporter_reducerOilTemperature }}℃
+                </span>
+              </div>
+            <div>电机电流:
+              <span>
+                {{ data.transporter_current }}A
+              </span>
+            </div>
+            <div>电机轴温:
+              <span>
+                {{ data.transporter_motorTemperature }}℃
+              </span>
+            </div>
+            <div>冷却水水压:
+             <span>
+               {{ data.transporter_pressure }}Pa
+              </span> 
+              </div>
+            <div>电机电压:
+             <span>
+               {{ data.transporter_voltage }}V
+             </span> 
+              </div>
+            <div>减速器轴温:
+              <span>
+                {{ data.transporter_reducerShaftTemperature }}℃
+              </span>
+            </div>
+            <div>冷却水水温:
+              <span>
+                {{ data.transporter_waterTemperature }}℃
+              </span>
+           </div>
+          </div>
+        </div>
+      </div>
+      <div class="square">
+        <img class="img" src="./breaker.png" />
+        <div class="inf">
+          <div style="height: 20%;font-size: 20px;color: #4adefe;">破碎机 运行状态</div>
+          <div class="details">
+             <div>运行速度:
+              <span>
+                 {{ data.transporter_speed }}m/s
+              </span>
+             </div>
+            <div>电机功率:
+              <span>
+                {{ data.transporter_power }}W
+              </span>
+            </div>
+            <div>减速器油温:
+              <span>
+                {{ data.transporter_reducerOilTemperature }}℃
+                </span>
+              </div>
+            <div>电机电流:
+              <span>
+                {{ data.transporter_current }}A
+              </span>
+            </div>
+            <div>电机轴温:
+              <span>
+                {{ data.transporter_motorTemperature }}℃
+              </span>
+            </div>
+            <div>冷却水水压:
+             <span>
+               {{ data.transporter_pressure }}Pa
+              </span> 
+              </div>
+            <div>电机电压:
+             <span>
+               {{ data.transporter_voltage }}V
+             </span> 
+              </div>
+            <div>减速器轴温:
+              <span>
+                {{ data.transporter_reducerShaftTemperature }}℃
+              </span>
+            </div>
+            <div>冷却水水温:
+              <span>
+                {{ data.transporter_waterTemperature }}℃
+              </span>
+           </div>
+          </div>
+        </div>
+      </div>
+      <div class="square">
+        <img class="img" src="./tr.png" />
+        <div class="inf">
+          <div style="height: 20%; font-size: 20px; color: #4adefe;">转载机 运行状态</div>
+          <div class="details">
+            <div>运行速度:
+              <span>
+                 {{ data.transporter_speed }} m/s
+              </span>
+             </div>
+            <div>电机功率:
+              <span>
+                {{ data.transporter_power }}W
+              </span>
+            </div>
+            <div>减速器油温:
+              <span>
+                {{ data.transporter_reducerOilTemperature }}℃
+                </span>
+              </div>
+            <div>电机电流:
+              <span>
+                {{ data.transporter_current }}A
+              </span>
+            </div>
+            <div>电机轴温:
+              <span>
+                {{ data.transporter_motorTemperature }}℃
+              </span>
+            </div>
+            <div>冷却水水压:
+             <span>
+               {{ data.transporter_pressure }}Pa
+              </span> 
+              </div>
+            <div>电机电压:
+             <span>
+               {{ data.transporter_voltage }}V
+             </span> 
+              </div>
+            <div>减速器轴温:
+              <span>
+                {{ data.transporter_reducerShaftTemperature }}℃
+              </span>
+            </div>
+            <div>冷却水水温:
+              <span>
+                {{ data.transporter_waterTemperature }}℃
+              </span>
+           </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "compressors",
+  data() {
+    return {
+      data: {
+        transporter_speed:0,
+        transporter_power:10,
+        transporter_reducerOilTemperature:30,
+        transporter_current:20,
+        transporter_motorTemperature:60,
+        transporter_pressure:20,
+        transporter_voltage:232,
+        transporter_reducerShaftTemperature:10,
+        transporter_waterTemperature:50,
+      },
+    };
+  },
+  props: {
+    url: String,
+  },
+  mounted() {
+    
+   
+  },
+  beforeDestroy() {
+    
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#outer {
+  width: 100%;
+  height: 850px;
+  background-image: linear-gradient(
+    to right,
+    rgb(6, 19, 60) 0%,
+    rgb(1, 22, 105) 50%,
+    rgb(6, 19, 60) 100%
+  );
+  position: relative;
+  .title {
+    position: relative;
+    height: 6%;
+    p {
+      color: #fff;
+      font-size: 40px;
+      margin: 0;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+  .square {
+    border: 3px solid;
+    border-color: #302b33;
+    margin-left: 200px;
+    margin-bottom: 20px;
+    margin-top: -20px
+  }
+  .container {
+    display: grid;
+    width: 1200px;
+    height: 1000px;
+    grid-template-rows: 100%;
+    grid-template-columns: 50% 50%;
+  }
+  .details {
+    display: grid;
+    height: 90%;
+    grid-template-rows: 33.3% 33.3% 33.3%;
+    grid-template-columns: 33.3% 33.3% 33.3%;
+    font-size: 18px;
+    color: #4adefe;
+    span {
+      border-radius: 0.7rem;
+      width: 2.5rem;
+      height: 2.25rem;
+      color: #f3db5c;
+    }
+  }
+  .row {
+    display: grid;
+    width: 1300px;
+    height: 600px;
+    left: 640px;
+    grid-template-rows: 33.3% 33.3% 33.3%;
+    grid-template-columns: 100%;
+  }
+  .img {
+    //border: 1px solid;
+    //border-color: #29b35e;
+    float: left;
+    border-radius: 10%;
+    width: 17%;
+    height: 100%;
+  }
+  .inf {
+    //border: 1px solid;
+    //border-color: #4729b3;
+    float: right;
+    width: 83%;
+    height: 100%;
+  }
+}
+</style>

src/views/mining/mining.vue

@@ -1,62 +1,62 @@
 <template>
   <div>
     <!--标签-->
-    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+    <el-tabs
+      v-model="activeName"
+      type="card"
+      @tab-click="handleClick"
+      :lazy="true"
+    >
       <el-tab-pane label="系统图" name="third">
-        <router-view></router-view>
+        <monitor v-if="activeName == 'third'"></monitor>
       </el-tab-pane>
       <el-tab-pane label="环境检测" name="fourth">
-        <envTest></envTest>
+        <envTest v-if="activeName == 'fourth'"></envTest>
       </el-tab-pane>
       <el-tab-pane label="支护系统" name="supporting">
-        <supporting></supporting>
+        <supporting v-if="activeName == 'supporting'"></supporting>
+      </el-tab-pane>
+      <el-tab-pane label="三机监控" name="fifth">
+        <machines v-if="activeName == 'fifth'"></machines>
       </el-tab-pane>
       <el-tab-pane label="系统数据" name="first">
-        <systemData></systemData>
+        <systemData v-if="activeName == 'first'"></systemData>
       </el-tab-pane>
       <el-tab-pane label="数据标准" name="second">
-        <dataStandard></dataStandard>
+        <dataStandard v-if="activeName == 'second'"></dataStandard>
       </el-tab-pane>
-      
     </el-tabs>
   </div>
 </template>
 
 
 <script>
-import supporting from './supporting/supporting';
+import supporting from "./supporting/supporting";
 import dataStandard from "./dataStandard/dataStandard";
 import systemData from "./systemData";
-import envTest from "./envTest"
-
+import envTest from "./envTest";
+import Monitor from "./Monitor/Index.vue";
+import machines from "./machines";
 export default {
   name: "mining",
   data() {
     return {
-      activeName: "fourth",
+      activeName: "fifth",
       checkVisible: "false",
     };
   },
-  mounted() {
-    this.$router.push({
-      path: "/coal_mining/monitor",
-    });
-  },
+  mounted() {},
   methods: {
-    handleClick(tab, event) {
-      if (tab.name == "third") {
-        this.$router.push({
-          path: "/coal_mining/monitor",
-        });
-      }
-    },
+    handleClick(tab, event) {},
   },
 
   components: {
     dataStandard,
     systemData,
     supporting,
-    envTest
+    envTest,
+    Monitor,
+    machines
   },
 };
 </script>

src/views/transportation/configImg/analysis/Analysis.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="analysis">
+  <div>
     <a-card :bordered="true" :bodyStyle="{padding:'0'}">
       <a-row style="margin: 0 -12px">
         <a-col
@@ -123,26 +123,15 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.chart-card{
-  width: 330px;
-}
-.extra-wrap {
-  .extra-item {
-    display: inline-block;
-    margin-right: 24px;
-    a:not(:first-child) {
-      margin-left: 24px;
-    }
-  }
-}
-@media screen and (max-width: 992px) {
-  .extra-wrap .extra-item {
-    display: none;
-  }
-}
-@media screen and (max-width: 576px) {
-  .extra-wrap {
-    display: none;
-  }
+.main {
+  width: 100%;
+  height: 850px;
+  position: relative;
+  /* display: flex; */
+  background-image: linear-gradient(
+    to right,
+    #06133c 0%,
+    #011669 5045 #06133c 100%
+  );
 }
 </style>