采煤工作面监控页面

src/router/index.js

@@ -21,6 +21,15 @@ 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',

src/views/mining/Monitor/CoalMining.vue

@@ -0,0 +1,206 @@
+<template>
+  <div class="coal-mining">
+    <div class="value">
+      <span v-for="item in 50" :key="item">
+        {{ 51 - item }}#
+      </span>
+    </div>
+    <div class="content">
+      <div class="car" :style="{left: `${car}px`}">
+        <div class="head"></div>
+        <div class="body">
+          <div class="left-hand" :style="{transform: `rotate(${hand.left}deg)`, top: `-${hand.left / 2}px`}">
+            <img src="@/assets/img/sawtooth.png" alt="">
+          </div>
+          <div class="main">
+            <div class="gear"></div>
+            <div class="gear"></div>
+          </div>
+          <div class="right-hand" :style="{transform: `rotate(-${hand.right}deg)`, top: `-${hand.right / 2}px`}">
+            <img src="@/assets/img/sawtooth.png" alt="">
+          </div>
+        </div>
+        <div class="footer">
+          <div class="wheel"></div>
+          <div class="baffle first"></div>
+          <div class="baffle second"></div>
+          <div class="wheel"></div>
+        </div>
+
+        <span class="speed">{{ carSpeed }}m/min</span>
+        <span class="left-height">{{ (hand.left * 10).toFixed(2) }}cm</span>
+        <span class="right-height">{{ (hand.right * 10).toFixed(2) }}cm</span>
+      </div>
+    </div>
+    <div class="bottom"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      car: '',
+      carSpeed: '',
+      hand: {
+        left: 20,
+        right: 27.77
+      }
+    }
+  },
+  created() {
+    this.getdata()
+  },
+
+  methods: {
+    getdata(){
+      this.axios
+        .get(
+          "http://10.170.51.43:8082/hbase/getMpInfoByHbaseTablename/?hbasetablename=end"
+        )
+        .then((res) => {
+         
+          this.car = parseFloat(res.data[0].meijiY).toFixed(2);
+          this.carSpeed = parseFloat(res.data[0].sudu).toFixed(2);
+
+          
+        });
+
+
+    }
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.coal-mining {
+  .value {
+    font-size: 12px;
+    font-weight: bold;
+    display: flex;
+    justify-content: space-between;
+    color: yellow;
+  }
+  .content {
+    width: 270px;
+    height: 150px;
+    position: relative;
+    .car {
+      position: absolute;
+      bottom: -40px;
+      height: 100px;
+      color: palegreen;
+      .head {
+        height: 20px;
+        width: 150px;
+        margin: 0 auto;
+        background-image: url('../../../assets/img/car-head.png');
+        background-size: 100% 100%;
+      }
+      .body {
+        display: flex;
+        position: relative;
+        .left-hand {
+          position: absolute;
+          height: 20px;
+          width: 80px;
+          background-color: #F9B50C;
+          transform: rotate(20deg);
+          top: -8px;
+          img {
+            height: 50px;
+            position: absolute;
+            left: -25px;
+            top: -15px;
+          }
+        }
+        .main {
+          position: absolute;
+          left: 60px;
+          height: 40px;
+          width: 150px;
+          background-color: #F9B50C;
+          position: relative;
+          .gear:nth-child(1) {
+            position: absolute;
+            left: -5px;
+            top: -1px;
+            height: 20px;
+            width: 20px;
+            border-radius: 50%;
+            background-color: red;
+          }
+          .gear:nth-child(2) {
+            position: absolute;
+            left: 135px;
+            top: -1px;
+            height: 20px;
+            width: 20px;
+            border-radius: 50%;
+            background-color: red;
+            z-index: 1000;
+          }
+        }
+        .right-hand {
+          position: absolute;
+          left: 190px;
+          height: 20px;
+          width: 80px;
+          background-color: #F9B50C;
+          transform: rotate(-30deg);
+          top: -12px;
+          img {
+            height: 50px;
+            position: absolute;
+            right: -25px;
+            top: -15px;
+          }
+        }
+      }
+      .footer {
+        display: flex;
+        justify-content: center;
+        width: 270px;
+        .wheel {
+          height: 30px;
+          width: 30px;
+          background-color: gray;
+          border-radius: 50%;
+          margin-top: -10px;
+        }
+        .baffle {
+          height: 10px;
+          width: 8px;
+          background-color: orange;
+        }
+        .baffle.first {
+          margin-right: 30px;
+        }
+        .baffle.second {
+          margin-left: 30px;
+        }
+      }
+      .speed {
+        position: absolute;
+        top: -20px;
+        left: 100px;
+      }
+      .left-height {
+        position: absolute;
+        left: -30px;
+        top: -60px;
+      }
+      .right-height {
+        position: absolute;
+        right: -30px;
+        top: -60px;
+      }
+    }
+  }
+  .bottom {
+    height: 30px;
+    background-image: url('../../../assets/img/pipe.jpg');
+  }
+}
+</style>

src/views/mining/Monitor/Emulsion.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="emulsion common-card">
+    <h4>乳液自动化配比</h4>
+    <div class="equipment">
+      <div class="enter">
+        <span>纯水入口</span>
+        <div class="block"></div>
+      </div>
+      <div class="water-box common-box">
+        <span class="title">纯水箱</span>
+        <div class="box-wrap">
+          <span>120</span>
+          <span>90</span>
+          <span>60</span>
+          <span>30</span>
+          <div class="box" :style="{height: `${waterLevel.water / 1.5}%`}"></div>
+        </div>
+      </div>
+      <div class="enter" style="position: absolute; width: 350px; bottom: 0; left: 184px">
+        <span>水泵</span>
+        <div class="block"></div>
+      </div>
+      <div class="oil-box common-box">
+        <span class="title">油箱</span>
+        <div class="box-wrap">
+          <span>120</span>
+          <span>90</span>
+          <span>60</span>
+          <span>30</span>
+          <div class="box" :style="{height: `${waterLevel.oil / 1.5}%`}"></div>
+        </div>
+      </div>
+      <div class="enter" style="width: 200px; justify-content: center;">
+        <div class="block"></div>
+      </div>
+      <div class="liquid-box common-box">
+        <span class="title">液箱</span>
+        <div class="box-wrap">
+          <span>120</span>
+          <span>90</span>
+          <span>60</span>
+          <span>30</span>
+          <div class="box" :style="{height: `${waterLevel.liquid / 1.5}%`}"></div>
+        </div>
+      </div>
+      <img class="first fan" src="~@/assets/img/fan.png" alt="">
+      <img class="second fan" src="~@/assets/img/fan.png" alt="">
+    </div>
+    <div class="data">
+      <span>水箱水位<span style="color: orange;">{{ waterLevel.water }}</span>cm</span>
+      <span>油箱油位<span style="color: orange;">{{ waterLevel.oil }}</span>cm</span>
+      <span>液总用量 ? cm</span>
+      <span>液流量 ? cm</span>
+      <span>液位<span style="color: orange;">{{ waterLevel.liquid }}</span>cm</span>
+      <span>液流量 ? cm</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      waterLevel: {
+        water: 150,
+        oil: 30,
+        liquid: 70
+      }
+    }
+  },
+  created() {
+    this.getdata()
+  },
+
+  methods: {
+    getdata(){
+      this.axios
+        .get(
+          "http://10.170.51.43:8082/hbase/getMpInfoByHbaseTablename/?hbasetablename=end"
+        )
+        .then((res) => {
+         
+          this.waterLevel.water = res.data[0].shuiwei;
+          this.waterLevel.oil = res.data[0].youxiang;
+          this.waterLevel.liquid = res.data[0].yexiang;
+          console.log(this.waterLevel)
+          
+        });
+
+
+    }
+
+  }
+}
+</script>
+
+<style lang="scss">
+.emulsion {
+  color: rgb(0, 0, 0);
+  margin: 10px;
+  position: relative;
+  h4 {
+    margin: 10px 0;
+  }
+  .equipment {
+    display: flex;
+    position: relative;
+    .enter {
+      display: flex;
+      flex-flow: column;
+      justify-content: flex-end;
+      span {
+        padding: 0 10px;
+      }
+      .block {
+        background-color: rgba(105, 90, 205, 0.466);
+        height: 20px;
+        width: 100%;
+      }
+    }
+    .common-box {
+      display: flex;
+      flex-flow: column nowrap;
+      .title {
+        text-align: center;
+      }
+      .box-wrap {
+        background-image: linear-gradient(to right, #ffffff50, #0000005e, #ffffff50);
+        width: 100px;
+        display: flex;
+        flex-flow: column;
+        justify-content: space-evenly;
+        position: relative;
+        height: 150px;
+        span {
+          margin-left: 10px;
+        }
+        .box {
+          position: absolute;
+          width: 100%;
+          height: 20px;
+          background-color: rgba($color: blue, $alpha: .5);
+          bottom: 0;
+        }
+      }
+    }
+    .water-box {
+      .box-wrap {
+        height: 150px;
+        .box {
+          background-color: rgba($color: blue, $alpha: .5);
+        }
+      }
+    }
+    .oil-box {
+      margin-left: 50px;
+      .box-wrap {
+        height: 100px;
+        .box {
+          background-color: rgba($color: yellow, $alpha: .5);
+        }
+      }
+    }
+    .liquid-box {
+      .box-wrap {
+        height: 150px;
+        .box {
+          background-color: rgba($color: yellow, $alpha: .5);
+        }
+      }
+    }
+    .fan {
+      position: absolute;
+      height: 40px;
+      background-color: rgb(255, 255, 255);
+      border-radius: 50%;
+      left: 300px;
+      animation: turn 3s linear infinite;
+    }
+    .fan.first {
+      left: 300px;
+      bottom: -10px;
+    }
+    .fan.second {
+      left: 420px;
+      top: 65px;
+    }
+  }
+  .data {
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    margin-top: 20px;
+  }
+}
+@keyframes turn {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

src/views/mining/Monitor/Index.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="comprehensive">
+    <div class="left">
+      <div class="top">
+        <!-- 支架压力图表 -->
+        <div class="support-pressure common-card">
+          <div class="text">
+            <i :class="['el-icon-arrow-right', { 'mr': item === 2 }, { 'opacity': item === 1 }]" v-for="item in 2" :key="item+Math.random()"></i>
+            支架压力
+            <i :class="['el-icon-arrow-left', { 'mr': item === 2 }, { 'opacity': item === 2 }]" v-for="item in 2" :key="item+Math.random()"></i>
+          </div>
+          <bar></bar>
+        </div>
+        <!-- 乳化液自动配比 -->
+        <emulsion></emulsion>
+      </div>
+
+      <div class="center">
+        <!-- 焊机循环作业图 -->
+        <div class="welder-cycle common-card">
+          <div class="text">
+            <i :class="['el-icon-arrow-right', { 'mr': item === 2 }, { 'opacity': item === 1 }]" v-for="item in 2" :key="item+Math.random()"></i>
+            焊机循环作业图
+            <i :class="['el-icon-arrow-left', { 'mr': item === 2 }, { 'opacity': item === 2 }]" v-for="item in 2" :key="item+Math.random()"></i>
+          </div>
+          <lines id="welder"></lines>
+        </div>
+        <!-- 支架循环作业图 -->
+        <div class="stent-circulation common-card">
+          <div class="text">
+            <i :class="['el-icon-arrow-right', { 'mr': item === 2 }, { 'opacity': item === 1 }]" v-for="item in 2" :key="item+Math.random()"></i>
+            支架循环作业图
+            <i :class="['el-icon-arrow-left', { 'mr': item === 2 }, { 'opacity': item === 2 }]" v-for="item in 2" :key="item+Math.random()"></i>
+          </div>
+          <lines id="stent"></lines>
+        </div>
+      </div>
+
+      <div class="bottom">
+        <coal-mining></coal-mining>
+      </div>
+    </div>
+    <div class="right">
+
+    </div>
+  </div>
+</template>
+
+<script>
+
+import Emulsion from './Emulsion.vue'
+
+import CoalMining from './CoalMining.vue'
+import bar from './echarts/Bars.vue'
+import lines from './echarts/Lines.vue'
+export default {
+  components: { Emulsion, CoalMining, bar, lines },
+  data() {
+    return {
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.comprehensive {
+  display: flex;
+  height: calc(100vh - 120px);
+  .left {
+    flex-grow: 1;
+    .top,.center {
+      display: flex;
+      .text {
+        color: #fff;
+      }
+      .mr {
+        margin-left: 9px;
+      }
+      .opacity {
+        opacity: .3;
+      }
+    }
+  }
+  .right {
+    width: 80px;
+    background-image: url('~@/assets/img/right.png');
+  }
+}
+</style>

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

@@ -0,0 +1,149 @@
+<template>
+<!-- 支架压力柱状图 -->
+  <div id="bar" style="height: 250px;width: 300%"></div>
+</template>
+
+<script>
+export default {
+  name: 'Bars',
+  data(){
+    return {
+      myChart: null,
+      option: {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        color: ['red', 'green', 'yellow'],
+        legend: {
+          left: 'right',
+          icon: 'rect',
+          textStyle: {
+            color: '#000'
+          },
+          data: ['压力超限', '压力过低', '压力正常']
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            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'
+          }
+        ],
+        series: [
+          {
+            name: '压力过低',
+            type: 'bar',
+            itemStyle: {
+              normal: {
+                color: function(params){
+                  if(params.data > 64){
+                    return 'red';
+                  } else if (params.data < 24){
+                    return 'green';
+      　　　　　　} else {
+                    return 'yellow'
+                  }
+        　　　　}
+          　　}
+            },
+            barWidth: '10',
+            barCategoryGap: '5%',
+            data: [23, 66, 76, 12, 79, 42, 15, 56, 13, 29, 20, 4, 22, 12, 38, 9, 31, 66, 90, 77, 14]
+          },
+          { //这两组数据用来模拟markLine线段开关,data可以为空
+            name:'压力超限',
+            type:'line',
+            markLine:{
+              data:[
+                {
+                  name:'压力超限',
+                  yAxis:"64",
+                  itemStyle:{
+                  normal:{
+                    show: true,
+                    color:'red'
+                  }
+                },
+                }
+            ]
+          }
+        },
+        { //这两组数据用来模拟markLine线段开关,data可以为空
+          name:'压力正常',
+          type:'line',
+          markLine:{
+            data:[
+              {
+                name:'压力正常',
+                yAxis:"24",
+                itemStyle:{
+                  normal:{
+                    show:true,
+                    color:'yellow'
+                  }
+                },
+              }
+            ]
+          }
+        },
+          // {
+          //   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]
+          // },
+        ]
+      }
+    }
+  },
+  mounted() {
+    console.log(this.$echarts)
+    this.myChart = this.$echarts.init(document.getElementById('bar'));
+    this.setBar();
+  },
+  methods: {
+    setBar() {
+      this.myChart.setOption(this.option)
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

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

@@ -0,0 +1,208 @@
+<template>
+  <div :id="id" style="height: 250px;width: 300%"></div>
+</template>
+
+<script>
+export default {
+  name: 'Lines',
+  props: {
+    id: String
+  },
+  data(){
+    return {
+      myChart: null,
+      datax:[1,23,4,5,24,342,432,7,2,3,44,52,23,121,21,55,67,2,37,99,12,66,12,89,27],
+      option: {
+        tooltip: {
+          trigger: 'axis',
+        },
+        //添加标题
+        title: {
+          bottom: 0,
+          left: 'center',
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 'normal',
+            color: '#303133',
+          },
+        },
+        legend: {
+          left: 'right',
+          icon: 'rect',
+          textStyle: {
+            color: '#000'
+          }
+        },
+        xAxis: [
+          {
+            data: [
+              // '2021-09-01 00:00:00',
+              '2021-09-01 01:00:00',
+              '2021-09-01 02:00:00',
+              '2021-09-01 03:00:00',
+              '2021-09-01 04:00:00',
+              '2021-09-01 05:00:00',
+              '2021-09-01 06:00:00',
+              '2021-09-01 07:00:00',
+              '2021-09-01 08:00:00',
+              '2021-09-01 09:00:00',
+              '2021-09-01 10:00:00',
+              '2021-09-01 11:00:00',
+              '2021-09-01 12:00:00',
+              '2021-09-01 13:00:00',
+              '2021-09-01 14:00:00',
+              '2021-09-01 15:00:00',
+              '2021-09-01 16:00:00',
+              '2021-09-01 17:00:00',
+              '2021-09-01 18:00:00',
+              '2021-09-01 19:00:00',
+              '2021-09-01 21:00:00',
+              '2021-09-01 22:00:00',
+              '2021-09-01 23:00:00',
+              '2021-09-01 24:00:00',
+              // '2021-09-02 00:00:00',
+              '2021-09-02 01:00:00',
+              '2021-09-02 02:00:00',
+              '2021-09-02 03:00:00',
+              '2021-09-02 04:00:00',
+              '2021-09-02 05:00:00',
+            ],
+            type: 'category',
+            axisTick: {
+              //是否显示坐标刻度
+              show: false,
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#DCDFE6',
+              },
+            },
+            axisLabel: {
+              color: '#303133',
+              fontSize: '12',
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: '',
+            nameTextStyle: {
+              color: '#909399',
+              align: 'right',
+              fontSize: 12,
+            },
+            minInterval: 1,
+            min: 0,
+            type: 'value',
+            axisLabel: {
+              color: '#606266',
+              fontSize: '12',
+              lineHeight: '12',
+            },
+            splitLine: {
+              show: false, //不显示网格分割线
+            },
+            axisLine: {
+              show: false, //不显示y轴线
+            },
+            axisTick: {
+              //是否显示坐标刻度
+              show: false,
+            },
+            // splitArea: {
+            //   show: true,
+            //   areaStyle: {
+            //     color: ['#F2F6FC', 'transparent'],
+            //   },
+            // },
+          },
+        ],
+        grid: { top: '15%', bottom: '20%', left: '5%', right: '5%' },
+        series: [
+          {
+            type: 'line',
+            data: [1,23,4,5,24,342,432,7,2,3,44,52,23,121,21,55,67,2,37,99,12,66,12,89,27],
+            itemStyle: { color: '#409eff' },
+            yAxisIndex: 0,
+            name: '自动割煤',
+            // 图表标域，常用于标记图表中某个范围的数据，例如标出某段时间投放了广告。
+            markArea: {
+              data: [
+                [
+                  {
+                    name: '晚班',
+                    itemStyle: {
+                      color: '#282A39'
+                    },
+                    xAxis: '2021-09-01 00:00:00'
+                  }, {
+                    xAxis: '2021-09-01 08:00:00'
+                  }
+                ],
+                [
+                  {
+                    name: '早班',
+                    itemStyle: {
+                      color: '#303845'
+                    },
+                    xAxis: '2021-09-01 08:00:00'
+                  }, {
+                    xAxis: '2021-09-01 16:00:00'
+                  }
+                ],
+                [
+                  {
+                    name: '中班',
+                    itemStyle: {
+                      color: '#303845'
+                    },
+                    xAxis: '2021-09-01 16:00:00'
+                  }, {
+                    xAxis: '2021-09-01 24:00:00'
+                  }
+                ],
+                [
+                  {
+                    name: '晚班',
+                    itemStyle: {
+                      color: '#282A39'
+                    },
+                    xAxis: '2021-09-01 24:00:00'
+                  }, {
+                    xAxis: '2021-09-02 05:00:00'
+                  }
+                ]
+              ],
+              itemStyle: { color: '#f0b1f0' },
+              label: { color: '#f0b1f0' },
+            },
+          },
+          {
+            type: 'line',
+            data:  [23,12,123,114,133,122,89,939,7,24,242,532,123,14,15,224,7,2,3,434,152,23,21,211,88],
+            itemStyle: { color: '#EEEF00' },
+            yAxisIndex: 0,
+            name: '手动割煤',
+          },
+        ],
+      },
+    }
+  },
+  created(){
+
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById(this.id));
+    this.setLine();
+  },
+  methods: {
+    setLine() {
+      this.myChart.setOption(this.option)
+    },
+  }
+}
+</script>
+
+<style>
+
+</style>

src/views/mining/mining.vue

@@ -8,6 +8,9 @@
       <el-tab-pane label="数据标准" name="second">
         <dataStandard></dataStandard>
       </el-tab-pane>
+      <el-tab-pane label="系统图" name="third">
+        <router-view></router-view>
+      </el-tab-pane>
     </el-tabs>
   </div>
 
@@ -27,8 +30,12 @@
     },
     methods: {
       handleClick(tab, event) {
-        console.log(tab, event);
-      }
+                if(tab.name == "third"){
+                  this.$router.push({
+                    path: "/coal_mining/monitor"
+                  })
+                }
+            }
     },
     
     components: {