Merge branch 'develop'

src/components/mining/monitor/error_recording.vue

@@ -0,0 +1,99 @@
+  <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-column>
+    </el-table>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        {
+          name: "1#采煤机",
+          problem: "液压制动器过于发热",
+        },
+        {
+          name: "1#采煤机",
+          problem: "液压制动器制动力矩不足",
+        },
+      ],
+    };
+  },
+  methods: {
+    headerStyle({ row, column, rowIndex, columnIndex }) {
+      return "tableStyle";
+    },
+    tableRowStyle({ row, rowIndex }) {
+      return "background-color:#ecf5ff";
+    },
+  },
+};
+</script>
+<style lang='scss' scoped>
+.main {
+  padding: 6px;
+  // border:3px solid #96c2f1;
+  height: 180px;
+  margin-top: -60px;
+  padding-left: 40px;
+  background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+}
+.table-wrapper {
+  height: 80%;
+  margin-top: 10px;
+  ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
+    background-color: rgba(9, 12, 14, 0.2);
+    color: #fff;
+  }
+} /* 删除表格下横线 */
+.table-wrapper ::v-deep .el-table::before {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 0px;
+  border: none;
+}
+.table-wrapper ::v-deep .el-table,
+.el-table__expanded-cell {
+  background-color: transparent;
+  border: none;
+}
+.table-wrapper ::v-deep .el-table tr {
+  background-color: transparent !important;
+  border: none;
+}
+.table-wrapper ::v-deep .el-table th {
+  background-color: transparent !important;
+  border: none;
+  color: #4ADEFE;
+  font-size: 16px;
+}
+.table-wrapper ::v-deep .el-table td,
+.el-table th.is-leaf {
+  background-color: transparent !important;
+  color: #F3DB5C;
+  font-size: 15px;
+  border: none;
+}
+.title {
+  margin-left: -10px;
+  font-size: 18px;
+  color: #4ADEFE;
+}
+</style>

src/components/mining/monitor/process_statistics.vue

@@ -0,0 +1,141 @@
+<template>
+<div>
+
+  <div id="lmid" >
+      <span class="title">生产统计</span>
+    <div class="center">
+      <div class="middle_top_list" style="width:220px">
+      <div class="list_title">割煤刀数
+        </br>
+        当前班刀数/计划刀数
+      </div>
+      <div class="list_num list_num1"><span class="counter-value">{{data.curr_dao}}</span>/<span class="counter-value">{{data.plan_dao}}</span></div>
+
+    </div>
+    <div class="middle_top_list">
+      <div class="list_title">回采米数
+         </br>
+         当前米数/总米数
+      </div>
+      <div class="list_num list_num2"><span class="counter-value">{{data.curr_mi}}</span>/<span class="counter-value">{{data.plan_mi}}</span>m</div>
+    </div>
+    <div class="middle_top_list" style="width:160px">
+      <div class="list_title">出煤量</div>
+      <div class="list_num list_num2"><span class="counter-value">{{data.coalnum}}</span>万吨</div>
+    </div>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+  data() {
+    return {
+      data: {
+        curr_dao: "8",
+        plan_dao: "10",
+        curr_mi: "1300",
+        plan_mi: "2000",
+        coalnum:'2.4'
+      },
+    };
+  },
+
+  mounted() {
+    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/49`);
+    this.initWebSocket();
+  },
+  methods: {
+    initWebSocket() {
+      // 连接错误
+      this.websocket.onerror = () => {
+        console.log(
+          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
+        );
+      };
+      // 连接成功
+      this.websocket.onopen = () => {
+        console.log(
+          "WebSocket连接成功    状态码：" + this.websocket.readyState
+        );
+      };
+      // 收到消息的回调
+      this.websocket.onmessage = (event) => {
+        if (JSON.parse(event.data).length) {
+          this.changeState(JSON.parse(event.data));
+        }
+      };
+      // 连接关闭的回调
+      this.websocket.onclose = () => {
+        console.log(
+          "WebSocket连接关闭    状态码：" + this.websocket.readyState
+        );
+      };
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once("hook:beforeDestroy", () => {
+        this.websocket.close();
+      });
+    },
+    changeState(data) {
+      this.data = data[0];
+    },
+    close() {
+      this.websocket.close();
+      console.log(123);
+    },
+  },
+  computed: {
+    ...mapState(["websocketIP"]),
+  },
+};
+</script>
+
+
+<style scoped>
+#lmid{
+  height: 200px;
+  
+  background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+}
+.center{
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+.title {
+  padding-top: 5px;
+  font-size: 18px;
+  color: #4ADEFE;
+  margin-left: 20px;
+}
+.middle_top_list {
+  /* float: left; */
+  width: 35.2%;
+  height: 18%;
+  margin-top: 15%;
+  margin-left: 5%;
+  text-align: center;
+  color: #4ADEFE;
+}
+.middle_top_list span {
+  color: #F3DB5C;
+}
+.list_title {
+  font-size: 18px;
+  margin-top: -25%;
+}
+/* .control{
+  margin-top: 20px;
+} */
+.list_num {
+  margin-top: 3%;
+  font-size: 16px;
+}
+.list_num span {
+  font-size: 30px;
+}
+
+</style>

src/components/mining/monitor/safety_statistics.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="main">
+    <span class="title">安全统计</span>
+    <div style="width:400px;height:300px">
+      <el-row :gutter="10">
+        <el-col class="text"
+          span="5"
+          style="text-align: center"
+        >
+          总分
+        </el-col>
+        <el-col span="19">
+          <el-progress
+            :percentage="88"
+            :format="format"
+          ></el-progress>
+        </el-col>
+      </el-row>
+      <el-row :gutter="10">
+        <el-col
+          span="5"
+          style="text-align: center"
+          class="text"
+        >
+          水害评分
+        </el-col>
+        <el-col span="19">
+          <el-progress
+            :percentage="88"
+            :format="format"
+          ></el-progress>
+        </el-col>
+      </el-row>
+      <el-row :gutter="10">
+        <el-col
+          span="5"
+          style="text-align: center"
+          class="text"
+        >
+          通风评分
+        </el-col>
+        <el-col span="19">
+          <el-progress
+            :percentage="92"
+            :format="format"
+          ></el-progress>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+.main{
+  height: 200px;
+  background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+}
+.title {
+  margin-left: 20px;
+  font-size: 18px;
+  color: #4ADEFE;
+}
+.el-row{
+  margin-top: 30px;
+}
+.text{
+  font-size: 16px;
+  color: #4ADEFE;
+}
+</style>

src/components/tunneling/lmid.vue

@@ -1,19 +1,5 @@
 <template>
   <div id="lmid">
-    <!-- <ul>
-        <li >
-            <span id="l_title">压入式风机</span>
-        </li>
-
-        <li>
-            风  量 :<span id="l_one">{{data.fengliang_after}}</span> m^3/min 
-        </li>
-
-
-        <li>
-            风  压 :<span id="l_two">{{data.fengya_after}}</span> m^3/min
-        </li>
-    </ul> -->
     <div class="middle_top_list">
       <div class="list_title">压入式风机风压</div>
       <div class="list_num list_num1"><span class="counter-value">{{data.fengliang_after}}</span>m^3/min</div>

src/views/mining/Monitor/Index.vue

@@ -1,21 +1,28 @@
 <template>
   <div class="monitor">
     <el-row :gutter="20">
-      <el-col :span="12"
-        ><div class="grid-content bg-purple">
-          <bar></bar></div
-      ></el-col>
-      <el-col :span="12"
-        ><div class="grid-content bg-purple"><emulsion></emulsion></div
-      ></el-col>
+      <el-col :span="12">
+        <div class="grid-content bg-purple">
+          <bar></bar>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div class="grid-content bg-purple">
+          <emulsion></emulsion>
+        </div>
+      </el-col>
     </el-row>
-    <el-row style="margin-top:40px"  :gutter="20">
-      <el-col :span="12"
-        ><div class="grid-content bg-purple"><lines id="welder"></lines></div
-      ></el-col>
-      <el-col :span="12"
-        ><div class="grid-content bg-purple"><lines id="stent"></lines></div
-      ></el-col>
+    <el-row
+      style="margin-top:40px"
+      :gutter="20"
+    >
+      <div class="center">
+        <processStatistics></processStatistics>
+        <errorRecording></errorRecording>
+        <safetyStatistics></safetyStatistics>
+
+      </div>
+
     </el-row>
     <el-row :gutter="10">
       <coal-mining></coal-mining>
@@ -25,12 +32,21 @@
 
 <script>
 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 lines from "./echarts/Lines.vue";
+// import lines from "./echarts/Lines.vue";
 export default {
-  components: { Emulsion, CoalMining, bar, lines },
+  components: {
+    Emulsion,
+    CoalMining,
+    bar,
+    errorRecording,
+    processStatistics,
+    safetyStatistics,
+  },
   data() {
     return {};
   },
@@ -49,4 +65,8 @@ export default {
     #06133c 100%
   );
 }
+.center {
+  display: flex;
+  justify-content: space-around;
+}
 </style>

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

@@ -1,6 +1,6 @@
 <template>
   <!-- 支架压力柱状图 -->
-  <div id="bar" style="height: 300px; width: 600px"></div>
+  <div id="bar" style="height: 300px; width: 600px;margin-top:10px"></div>
 </template>
 
 <script>
@@ -10,6 +10,14 @@ export default {
     return {
       myChart: null,
       option: {
+        title: {
+          text: '支架压力监控',
+          padding: [5, 230],
+          textStyle: {
+            fontWeight: "normal", //标题颜色
+            color: "#4ADEFE",
+          },
+        },
         tooltip: {
           trigger: "axis",
           axisPointer: {
@@ -25,12 +33,23 @@ export default {
             }
           },
         },
-        color: ["red", "green", "yellow"],
+        color: ["#FF6666", "#99CC66", "#FFFF66"],
+        // legend: {
+        //   orient: "vertical",
+        //   x: "left",
+        //   y: "top",
+        //   data: ["压力超限", "压力过低", "压力正常"],
+        //   textStyle: {
+        //     fontWeight: "normal",
+        //     color: "#fff",
+        //   },
+        // },
         legend: {
+          orient: "vertical",
           left: "right",
           icon: "rect",
           textStyle: {
-            color: "#000",
+            color: "#fff",
           },
           data: ["压力超限", "压力过低", "压力正常"],
         },
@@ -43,15 +62,34 @@ export default {
         xAxis: [
           {
             type: "category",
+            axisLabel: {
+              color: "#fff",
+              fontSize: 11,
+            },
+            axisLine: {
+              show: true,
+            },
             data: [
               198, 190, 180, 170, 160, 150, 140, 130, 120, 110, 100, 90, 80, 70,
               60, 50, 40, 30, 20, 10, 1,
             ],
+            
           },
         ],
         yAxis: [
           {
             type: "value",
+            axisLabel: {
+              color: "#fff",
+              fontSize: 11,
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: "dotted",
+                color: "#fff",
+              },
+            },
           },
         ],
         series: [
@@ -62,11 +100,11 @@ export default {
               normal: {
                 color: function (params) {
                   if (params.data > 64) {
-                    return "red";
+                    return "#FF6666";
                   } else if (params.data < 24) {
-                    return "yellow";
+                    return "#FFFF66";
                   } else {
-                    return "green";
+                    return "#99CC66";
                   }
                 },
               },
@@ -90,7 +128,7 @@ export default {
                   itemStyle: {
                     normal: {
                       show: true,
-                      color: "red",
+                      color: "#FF6666",
                     },
                   },
                 },
@@ -109,7 +147,7 @@ export default {
                   itemStyle: {
                     normal: {
                       show: true,
-                      color: "yellow",
+                      color: "#FFFF66",
                     },
                   },
                 },