采煤工作面，环境检测

src/common/pieChart.vue

@@ -14,7 +14,7 @@ export default {
         // backgroundColor: "none;",
         title: {
           text:
-            "{a|" + this.value.toFixed(2) + "%" + "}\n{c|" + this.title + "}",
+            "{a|" + this.value.toFixed(2) +  "}\n{c|" + this.title + "}",
           // text: "{a|" + this.value + "}\n{c|'+ this.title +'}",
           x: "center",
           y: "center",
@@ -248,7 +248,7 @@ export default {
                 },
               },
               {
-                value: 100 - this.value,
+                value: this.totalValue - this.value,
                 name: "",
                 label: {
                   normal: {
@@ -321,6 +321,10 @@ export default {
       // required: true, //必要性
       default: "150px", //默认值
     },
+    totalValue: {
+      type: Number,
+      default: 100, //默认值
+    }
   },
   mounted() {
     console.log("angle", this.angle);

src/components/mining/monitor/safety_statistics.vue

@@ -4,12 +4,12 @@
     <div style="width:400px;height:300px">
       <el-row :gutter="10">
         <el-col class="text"
-          span="5"
+          :span="5"
           style="text-align: center"
         >
           总分
         </el-col>
-        <el-col span="19">
+        <el-col :span="19">
           <el-progress
             :percentage="88"
           ></el-progress>
@@ -17,13 +17,13 @@
       </el-row>
       <el-row :gutter="10">
         <el-col
-          span="5"
+          :span="5"
           style="text-align: center"
           class="text"
         >
           水害评分
         </el-col>
-        <el-col span="19">
+        <el-col :slot="19">
           <el-progress
             :percentage="88"
           ></el-progress>
@@ -31,13 +31,13 @@
       </el-row>
       <el-row :gutter="10">
         <el-col
-          span="5"
+          :span="5"
           style="text-align: center"
           class="text"
         >
           通风评分
         </el-col>
-        <el-col span="19">
+        <el-col :span="19">
           <el-progress
             :percentage="92"
           ></el-progress>

src/components/process_monitoring/Main.vue

@@ -10,6 +10,7 @@
       <div class="warning_container warning2">
         <WarningInfo :ref="1" :id="1"></WarningInfo>
       </div>
+
       <div class="warning_container warning3">
         <WarningInfo :ref="2" :id="2"></WarningInfo>
       </div>
@@ -31,28 +32,24 @@
       <div class="warning_container warning9">
         <WarningInfo :ref="8" :id="8"></WarningInfo>
       </div>
-      <div class="warning_container warning10">
+      <!-- <div class="warning_container warning10">
         <WarningInfo :ref="9" :id="9"></WarningInfo>
-      </div>
+      </div>  -->
     </div>
     <div class="pidai_box">
-      <div v-for="(item ,index) in 10" :key="index" :class="`pidai_container pidai${index+1}`"><Pidai :isStart="isStart"></Pidai></div>
-      <!-- <div class="pidai_container pidai1"><Pidai></Pidai></div>
-      <div class="pidai_container pidai2"><Pidai></Pidai></div>
-      <div class="pidai_container pidai3"><Pidai></Pidai></div>
-      <div class="pidai_container pidai4"><Pidai></Pidai></div>
-      <div class="pidai_container pidai5"><Pidai></Pidai></div>
-      <div class="pidai_container pidai6"><Pidai></Pidai></div>
-      <div class="pidai_container pidai7"><Pidai></Pidai></div>
-      <div class="pidai_container pidai8"><Pidai></Pidai></div>
-      <div class="pidai_container pidai9"><Pidai></Pidai></div>
-      <div class="pidai_container pidai10"><Pidai></Pidai></div> -->
-    </div>
-    <div class="shexiangtou_box">
-      <div class="shexiangtou_container shexiangtou1"></div>
-      <!-- <div class="shexiangtou_container shexiangtou2"></div> -->
-      <div class="shexiangtou_container shexiangtou3"></div>
+      <div
+        v-for="(item, index) in 9"
+        :key="index"
+        :class="`pidai_container pidai${index + 1}`"
+      >
+        <Pidai :isStart="isStart"></Pidai>
+      </div>
     </div>
+    <!-- <div class="shexiangtou_box">
+      <div class="shexiangtou_container shexiangtou1"></div> -->
+    <!-- <div class="shexiangtou_container shexiangtou2"></div> -->
+    <!-- <div class="shexiangtou_container shexiangtou3"></div>
+    </div> -->
     <div class="caimeiji1">
       <CaiMeiJi :ref="10" info_number="1#"></CaiMeiJi>
     </div>
@@ -63,24 +60,50 @@
       <div class="tong"></div>
       <div class="tong_info">地面筒仓</div>
     </div>
-    <div class="bottom_left">
-      <div class="bottom_info">井底煤仓料位</div>
-      <ul class="bottom_msg">
-        <li>1#煤仓料位&nbsp;&nbsp;&nbsp;XXXX</li>
-        <li>9+10煤仓料位&nbsp;&nbsp;&nbsp;XXXX</li>
-      </ul>
-    </div>
-    <div class="bottom_right">
-      <div class="bottom_info">算仓料位</div>
-      <ul class="bottom_msg">
-        <li>末煤算仓料位&nbsp;&nbsp;&nbsp;XXXX</li>
-        <li>末煤算仓料位&nbsp;&nbsp;&nbsp;XXXX</li>
-      </ul>
-    </div>
+    <div class="bottom_left">煤
+      <br/><br/>
+      仓</div>
+
     <div class="buttons">
       <button class="btn1" @click="start">模拟皮带启动</button>
       <button class="btn2" @click="end">模拟皮带停止</button>
     </div>
+
+    <div class="xcspwt-box">
+      <div class="tipName">采煤机状态</div>
+      <ul class="msg1">
+        <li>
+          <span>割煤刀数</span>
+          <span> &nbsp; 2</span>
+        </li>
+        <li>
+          <span>回采米数</span>
+          <span> &nbsp;&nbsp;&nbsp; 1300</span>
+        </li>
+        <li>
+          <span>出煤量</span>
+          <span>&nbsp;&nbsp;&nbsp; 2</span>
+        </li>
+      </ul>
+    </div>
+
+    <div class="xcspwt-box2">
+      <div class="tipName">采煤机状态</div>
+      <ul class="msg1">
+        <li>
+          <span>割煤刀数</span>
+          <span> &nbsp; 2</span>
+        </li>
+        <li>
+          <span>回采米数</span>
+          <span> &nbsp;&nbsp;&nbsp; 1300</span>
+        </li>
+        <li>
+          <span>出煤量</span>
+          <span>&nbsp;&nbsp;&nbsp; 2</span>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 
@@ -143,15 +166,142 @@ export default {
       transform: translate(-50%, -50%);
     }
   }
+
   .warning_box {
     position: relative;
+    margin-left: 40px;
   }
   .pidai_box {
     position: relative;
+    margin-left: 40px;
   }
   .shexiangtou_box {
     position: relative;
   }
+
+  .xcspwt-box {
+    // padding-top: 15px;
+    position: absolute;
+    width: 240px;
+    height: 100px;
+    left: 3px;
+    font-size: 18px;
+    top: 40px;
+    color: #4adefe;
+    .tipName {
+      padding: 5px;
+      outline: 1px rgba(255, 255, 255, 0.3) solid;
+      text-align: center;
+    }
+    .msg1 {
+      padding: 5px;
+      outline: 1px rgba(255, 255, 255, 0.3) solid;
+    }
+    .msg1 li {
+      width: 100%;
+      height: 20px;
+      line-height: 20px;
+      color: #4adefe;
+      font-size: 18px;
+      margin-top: 14px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      cursor: default;
+    }
+    .msg1 li span {
+      color: #4adefe;
+      display: block;
+      float: left;
+    }
+    .msg1 li span:nth-of-type(1) {
+      padding: 0 5px;
+      line-height: 20px;
+      text-align: center;
+      background-size: 100% 100%;
+    }
+
+    .msg1 li span:nth-of-type(2) {
+      color: #f3db5c;
+      width: 138px;
+    }
+  }
+
+  .xcspwt-box2 {
+    // padding-top: 15px;
+    position: absolute;
+    width: 240px;
+    height: 100px;
+    left: 600px;
+    font-size: 18px;
+    top: 700px;
+    color: #4adefe;
+    .tipName {
+      padding: 5px;
+      outline: 1px rgba(255, 255, 255, 0.3) solid;
+      text-align: center;
+    }
+    .msg1 {
+      padding: 5px;
+      outline: 1px rgba(255, 255, 255, 0.3) solid;
+    }
+    .msg1 li {
+      width: 100%;
+      height: 20px;
+      line-height: 20px;
+      color: #4adefe;
+      font-size: 18px;
+      margin-top: 14px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      cursor: default;
+    }
+    .msg1 li span {
+      color: #4adefe;
+      display: block;
+      float: left;
+    }
+    .msg1 li span:nth-of-type(1) {
+      padding: 0 5px;
+      line-height: 20px;
+      text-align: center;
+      background-size: 100% 100%;
+    }
+
+    .msg1 li span:nth-of-type(2) {
+      color: #f3db5c;
+      width: 138px;
+    }
+  }
+
+  // .xcspwt-box{
+  //   height: 100px;
+  //   width: 200px;
+  //   top: 900px;
+  //   left: 20px;
+  //   color: #4adefe;
+  //   border: 1px solid #4adefe;
+  //   border-radius: 5px;
+
+  // }
+  //   .xcspwt-box li {
+  //   width: 100%;
+  //   height: 20px;
+  //   line-height: 20px;
+  //   color: #4adefe;
+  //   font-size: 18px;
+  //   margin-top: 14px;
+  //   overflow: hidden;
+  //   text-overflow: ellipsis;
+  //   white-space: nowrap;
+  //   cursor: default;
+  // }
+  //   .xcspwt-box li span {
+  //   color: #f3db5c;
+  //   display: block;
+  //   float: left;
+  // }
 }
 .warning_container {
   width: 100px;
@@ -159,105 +309,122 @@ export default {
   position: absolute;
 }
 .warning1 {
-  top: 20px;
-  left: 550px;
+  top: 40px;
+  left: 250px;
 }
 .warning2 {
-  top: 20px;
-  left: 700px;
+  top: 40px;
+  left: 400px;
 }
 .warning3 {
-  top: 20px;
-  left: 850px;
+  top: 40px;
+  left: 550px;
 }
 .warning4 {
-  top: 20px;
-  left: 1000px;
+  top: 40px;
+  left: 700px;
 }
 .warning5 {
-  top: -50px;
-  right: 200px;
+  top: 420px;
+  left: 950px;
 }
 .warning6 {
-  top: -50px;
-  right: 50px;
+  top: 40px;
+  left: 850px;
 }
 .warning7 {
-  top: 270px;
-  left: 300px;
+  top: 40px;
+  left: 1000px;
 }
 .warning8 {
-  top: 480px;
-  left: 580px;
+  top: 190px;
+  left: 1200px;
 }
 .warning9 {
-  top: 480px;
-  left: 730px;
-}
-.warning10 {
-  top: 490px;
-  left: 1030px;
+  top: 160px;
+  left: 1300px;
 }
+// .warning10 {
+//   top: 490px;
+//   left: 1030px;
+// }
 .pidai_container {
   width: 200px;
   height: 30px;
   position: absolute;
 }
 .pidai1 {
-  left: 280px;
-  top: 50px;
+  left: 200px;
+  top: 350px;
   width: 150px;
   height: 30px;
 }
 .pidai2 {
-  left: 320px;
-  top: 200px;
-  transform: rotate(90deg);
-  width: 230px;
+  left: 380px;
+  top: 350px;
+  width: 200px;
   height: 30px;
 }
 .pidai3 {
-  left: 430px;
-  top: 350px;
-  width: 200px;
+  left: 525px;
+  top: 465px;
+  transform: rotate(90deg);
+  width: 150px;
   height: 30px;
 }
+
 .pidai4 {
-  left: 650px;
+  left: 610px;
   top: 350px;
-  width: 300px;
+  width: 150px;
   height: 30px;
 }
+.bottom_left {
+  width: 70px;
+  height: 200px;
+  position: absolute;
+  left: 830px;
+  top: 450px;
+  color: #fff;
+  font-size: 40px;
+  padding: 5px;
+  outline: 1px rgba(255, 255, 255, 0.3) solid;
+  text-align: center;
+}
 .pidai5 {
-  left: 150px;
-  top: 680px;
-  width: 200px;
+  left: 850px;
+  top: 420px;
+  transform: rotate(-60deg);
+  width: 120px;
   height: 30px;
 }
+
 .pidai6 {
-  left: 300px;
-  top: 540px;
-  transform: rotate(-45deg);
-  width: 300px;
+  left: 980px;
+  top: 350px;
+  // transform: rotate(-45deg);
+  width: 150px;
   height: 30px;
 }
 .pidai7 {
-  left: 580px;
-  top: 415px;
-  width: 270px;
+  left: 1100px;
+  top: 280px;
+  transform: rotate(-90deg);
+  width: 120px;
   height: 30px;
 }
 .pidai8 {
-  left: 900px;
-  top: 400px;
-  transform: rotate(-45deg);
-  width: 300px;
+  left: 1160px;
+  top: 135px;
+  transform: rotate(-60deg);
+  width: 80px;
   height: 30px;
 }
 .pidai9 {
-  left: 1200px;
-  top: 310px;
-  width: 250px;
+  left: 1260px;
+  top: 60px;
+  width: 100px;
+  transform: rotate(-10deg);
   height: 30px;
 }
 .pidai10 {
@@ -290,15 +457,15 @@ export default {
   width: 250px;
   height: 300px;
   position: absolute;
-  top: -30px;
-  left: 10px;
+  top: 200px;
+  left: 0px;
 }
 .caimeiji2 {
   width: 250px;
   height: 300px;
   position: absolute;
-  top: 500px;
-  left: 10px;
+  top: 600px;
+  left: 300px;
 }
 .tongcang {
   width: 200px;
@@ -317,28 +484,17 @@ export default {
     color: #fff;
   }
 }
-.bottom_left {
-  width: 180px;
-  height: 100px;
-  position: absolute;
-  right: 1000px;
-  bottom: 20px;
-  color: #fff;
-  .bottom_info {
-    padding: 5px;
-    outline: 1px rgba(255, 255, 255, 0.3) solid;
+
+.bottom_msg {
+  margin: 0;
+  padding: 5px;
+  outline: 1px rgba(255, 255, 255, 0.3) solid;
+  list-style: none;
+  li {
     text-align: center;
   }
-  .bottom_msg {
-    margin: 0;
-    padding: 5px;
-    outline: 1px rgba(255, 255, 255, 0.3) solid;
-    list-style: none;
-    li {
-      text-align: center;
-    }
-  }
 }
+
 .bottom_right {
   width: 180px;
   height: 100px;
@@ -356,8 +512,11 @@ export default {
     padding: 5px;
     outline: 1px rgba(255, 255, 255, 0.3) solid;
     list-style: none;
-    li {
+    .bottom_msg li {
       text-align: center;
+      .bottom_msg li span {
+        color: #4adefe;
+      }
     }
   }
 }
@@ -366,7 +525,7 @@ export default {
   height: 150px;
   // background-color: #fff;
   position: absolute;
-  top: 280px;
+  top: 520px;
   left: 20px;
   button {
     display: block;

src/views/mining/envTest/externalFire.vue

@@ -0,0 +1,179 @@
+<template>
+  <!-- 支架压力柱状图 -->
+  <div ref="bar" style="height: 150px; width: 400px; margin-left: 100px"></div>
+</template>
+
+<script>
+export default {
+  name: "Bars",
+  data() {
+    return {
+      myChart: null,
+      option: {
+        title: {
+          text: "内因火灾",
+          left: 100,
+          top: 10,
+          textStyle: {
+            fontWeight: "normal", //标题颜色
+            color: "#4ADEFE",
+          },
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   formatter: (params) => {
+        //     if (params[0].data > 64) {
+        //       return params[0].marker + "压力过高:" + params[0].data;
+        //     } else {
+        //       return params[0].marker + "压力正常:" + params[0].data;
+        //     }
+        //   },
+        // },
+        color: ["#FF6666", "#99CC66", "#FFFF66"],
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        yAxis: [
+          {
+            type: "category",
+            axisLabel: {
+              show: false,
+              color: "rgb(255,255,255)",
+              fontSize: 11,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+              color: "#fff",
+            },
+            data: [1, 2, 3],
+          },
+        ],
+        xAxis: [
+          {
+            type: "value",
+            axisLabel: {
+              show: false,
+              color: "#fff",
+              fontSize: 11,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+              color: "#fff",
+            },
+            splitLine: {
+              show: false,
+              lineStyle: {
+                type: "dotted",
+                color: "#fff",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "压力过低",
+            type: "bar",
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  if (params.data > 64) {
+                    return "#FF6666";
+                  } else if (params.data > 40) {
+                    return "#FFFF66";
+                  } else {
+                    return "#99CC66";
+                  }
+                },
+                // label: {
+                //   show: true, //开启显示
+                //   position: "top", //在上方显示
+                //   textStyle: {
+                //     //数值样式
+                //     color: function (params) {
+                //       if (params.data > 64) {
+                //         return "#FF6666";
+                //       } else {
+                //         return "#99CC66";
+                //       }
+                //     },
+                //     fontSize: 15,
+                //   },
+                // },
+              },
+            },
+            barWidth: "10",
+            barCategoryGap: "5%",
+            data: [30, 55, 70],
+          },
+          {
+            //这两组数据用来模拟markLine线段开关,data可以为空
+            name: "压力超限",
+            type: "line",
+            markLine: {
+              symbol: ["none", "none"], //去掉箭头
+              label: {
+                show: false,
+              },
+              data: [
+                {
+                  name: "压力超限",
+                  xAxis: "60",
+                  itemStyle: {
+                    normal: {
+                      show: true,
+                      color: "#FF6666",
+                    },
+                  },
+                },
+              ],
+            },
+          },
+          {
+            //这两组数据用来模拟markLine线段开关,data可以为空
+            name: "压力正常",
+            type: "line",
+            markLine: {
+              symbol: ["none", "none"], //去掉箭头
+              label: {
+                show: false,
+              },
+              data: [
+                {
+                  name: "压力正常",
+                  xAxis: "40",
+                  itemStyle: {
+                    normal: {
+                      show: true,
+                      color: "#FFFF66",
+                    },
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    console.log(this.$echarts);
+    this.myChart = this.$echarts.init(this.$refs.bar);
+    this.myChart.setOption(this.option);
+  },
+};
+</script>
+
+<style>
+</style>

src/views/mining/envTest/index.vue

@@ -0,0 +1,229 @@
+<template>
+  <div class="main">
+    <div class="left">
+      <div class="center">
+        <span class="title">工作面信息</span>
+        <ul>
+          <li>设备能力:<span class="content">0bt</span></li>
+          <li>区域人数:<span class="content">0人</span></li>
+          <li>完成率:<span class="content">0%</span></li>
+        </ul>
+      </div>
+      <div class="center">
+        <span class="title">安全状态</span>
+        <ul>
+          <li>区域状态:<span class="content">安全</span></li>
+          <li>预警区域:<span class="content">中部采煤</span></li>
+          <li>区域隐患:<span class="content">3</span></li>
+        </ul>
+      </div>
+      <div class="center">
+        <span class="title">作业循环</span>
+        <ul>
+          <li>生产状态:<span class="content">正在生产</span></li>
+          <li>日累计:<span class="content">8刀</span></li>
+          <li>总共累计:<span class="content">180刀</span></li>
+        </ul>
+      </div>
+      <div class="center">
+        <span class="title">工艺进度</span>
+        <ul>
+          <li>截割:<span class="content">15</span></li>
+          <li>割三角煤:<span class="content">5</span></li>
+          <li>xxxx:<span class="content">2</span></li>
+        </ul>
+      </div>
+      <div class="center">
+        <span class="title">设备状态</span>
+        <ul>
+          <li>
+            采煤机:
+            <div class="start" v-if="false"></div>
+            <div class="stop" v-else></div>
+          </li>
+          <li>
+            胶带机:
+            <div class="start" v-if="false"></div>
+            <div class="stop" v-else></div>
+          </li>
+          <li>
+            刮板机:
+            <div class="start" v-if="true"></div>
+            <div class="stop" v-else></div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="right">
+      <div class="center" style="display: flex">
+        <span>水害</span>
+        <water-storage title="工作区蓄水性"></water-storage>
+        <water-level></water-level>
+      </div>
+      <div class="center" style="display: flex">
+        <span>火灾</span>
+        <internal-fire></internal-fire>
+        <external-fire></external-fire>
+      </div>
+      <div class="center" style="display: flex">
+        <span>气体</span>
+        <div style="margin-left: 60px">
+          <pie-chart :value="18" :totalValue="30" title="O2"></pie-chart>
+        </div>
+        <div style="margin-left: 60px">
+          <pie-chart :value="3.0" :totalValue="30" title="CO2"></pie-chart>
+        </div>
+        <div style="margin-left: 180px">
+          <pie-chart :value="0.2" :totalValue="1" title="CH4"></pie-chart>
+        </div>
+        <div style="margin-left: 60px">
+          <pie-chart :value="2.0" :totalValue="6" title="CO"></pie-chart>
+        </div>
+      </div>
+      <div class="center" style="display: flex">
+        <span>矿压</span>
+        <div style="height: 100%; width: 400px">
+          <ul>
+            <li style="margin-top: 40px">
+              支架工作阻力
+              <div style="color: #f3db5c; margin-left: 80px">35Mpa/1200KN</div>
+            </li>
+            <li>
+              承压状态
+              <div style="color: #f3db5c; margin-left: 115px">10/128</div>
+            </li>
+            <li>
+              初撑率达标率
+              <div style="color: #f3db5c; margin-left: 80px">70%</div>
+            </li>
+          </ul>
+        </div>
+        <div style="margin-left: 120px">
+          <mine-pressure></mine-pressure>
+        </div>
+      </div>
+      <div class="center" style="display: flex">
+        <span>粉尘</span>
+        <div style="margin-left: 100px; margin-top: 40px">
+          <pie-chart :value="90" title="区域评分"></pie-chart>
+        </div>
+        <div style="margin-left: 160px; margin-top: 40px">
+          <pie-chart :value="2" :totalValue="10" title="风速"></pie-chart>
+        </div>
+        <div style="margin-left: 240px; margin-top: 40px">
+          <pie-chart :value="40.5" title="粉尘数值"></pie-chart>
+        </div>
+      </div>
+    </div>
+  </div>
+</template> 
+
+<script>
+import waterStorage from "@/views/mining/envTest/waterStorage";
+import waterLevel from "@/views/mining/envTest/waterLevel";
+import pieChart from "@/common/pieChart";
+import internalFire from "@/views/mining/envTest/internalFire";
+import externalFire from "@/views/mining/envTest/externalFire";
+import minePressure from "@/views/mining/envTest/minePressure";
+export default {
+  components: {
+    waterStorage,
+    waterLevel,
+    pieChart,
+    internalFire,
+    externalFire,
+    minePressure,
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  width: 100%;
+  height: 850px;
+  position: relative;
+  display: flex;
+  background-image: linear-gradient(
+    to right,
+    #06133c 0%,
+    #011669 5045 #06133c 100%
+  );
+}
+.left {
+  width: 30%;
+  height: 100%;
+}
+.center {
+  height: 150px;
+  margin-left: 20px;
+  background: url("../../../assets/img/tunneling/dataBg.png") no-repeat;
+  background-size: 100%;
+  margin-bottom: 15px;
+  .title {
+    border-bottom: #5ddcf8 1px solid;
+    height: 40px;
+    width: 100%;
+    font-size: 20px;
+    line-height: 2;
+    padding: 5px;
+    font-weight: 500;
+    color: #4adefe;
+    margin-left: 20px;
+  }
+  .content {
+    color: #f3db5c;
+    right: 100px;
+    position: absolute;
+  }
+  ul {
+    margin-top: 20px;
+  }
+  li {
+    width: 100%;
+    height: 100%;
+    color: #4adefe;
+    display: flex;
+    /* flex-direction: column; */
+    font-size: 18px;
+    position: relative;
+    margin-top: -10px;
+    line-height: 40px;
+    padding-left: 0px;
+  }
+  .start {
+    /* margin-left: 40px; */
+    width: 20px;
+    height: 20px;
+    background-color: #009966;
+    border-radius: 50%;
+    position: absolute;
+    right: 100px;
+  }
+
+  .stop {
+    /* margin: left: 40px; */
+    width: 20px;
+    height: 20px;
+    background-color: #ff6666;
+    border-radius: 50%;
+    position: absolute;
+    right: 100px;
+  }
+}
+.right {
+  height: 100%;
+  width: 70%;
+  span {
+    border-bottom: #5ddcf8 1px solid;
+    height: 40px;
+    width: 50px;
+    font-size: 25px;
+    right: 550px;
+    // line-height: 2;
+    // padding: 5px;
+    font-weight: 500;
+    color: #4adefe;
+    position: absolute;
+  }
+}
+</style>

src/views/mining/envTest/internalFire.vue

@@ -0,0 +1,179 @@
+<template>
+  <!-- 支架压力柱状图 -->
+  <div ref="bar" style="height: 150px; width: 400px; margin-left: 40px"></div>
+</template>
+
+<script>
+export default {
+  name: "Bars",
+  data() {
+    return {
+      myChart: null,
+      option: {
+        title: {
+          text: "内因火灾",
+          left: 100,
+          top: 10,
+          textStyle: {
+            fontWeight: "normal", //标题颜色
+            color: "#4ADEFE",
+          },
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   formatter: (params) => {
+        //     if (params[0].data > 64) {
+        //       return params[0].marker + "压力过高:" + params[0].data;
+        //     } else {
+        //       return params[0].marker + "压力正常:" + params[0].data;
+        //     }
+        //   },
+        // },
+        color: ["#FF6666", "#99CC66", "#FFFF66"],
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        yAxis: [
+          {
+            type: "category",
+            axisLabel: {
+              show: false,
+              color: "rgb(255,255,255)",
+              fontSize: 11,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+              color: "#fff",
+            },
+            data: [1, 2],
+          },
+        ],
+        xAxis: [
+          {
+            type: "value",
+            axisLabel: {
+              show: false,
+              color: "#fff",
+              fontSize: 11,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+              color: "#fff",
+            },
+            splitLine: {
+              show: false,
+              lineStyle: {
+                type: "dotted",
+                color: "#fff",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "压力过低",
+            type: "bar",
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  if (params.data > 64) {
+                    return "#FF6666";
+                  } else if (params.data > 40) {
+                    return "#FFFF66";
+                  } else {
+                    return "#99CC66";
+                  }
+                },
+                // label: {
+                //   show: true, //开启显示
+                //   position: "top", //在上方显示
+                //   textStyle: {
+                //     //数值样式
+                //     color: function (params) {
+                //       if (params.data > 64) {
+                //         return "#FF6666";
+                //       } else {
+                //         return "#99CC66";
+                //       }
+                //     },
+                //     fontSize: 15,
+                //   },
+                // },
+              },
+            },
+            barWidth: "10",
+            barCategoryGap: "5%",
+            data: [30, 55],
+          },
+          {
+            //这两组数据用来模拟markLine线段开关,data可以为空
+            name: "压力超限",
+            type: "line",
+            markLine: {
+              symbol: ["none", "none"], //去掉箭头
+              label: {
+                show: false,
+              },
+              data: [
+                {
+                  name: "压力超限",
+                  xAxis: "60",
+                  itemStyle: {
+                    normal: {
+                      show: true,
+                      color: "#FF6666",
+                    },
+                  },
+                },
+              ],
+            },
+          },
+          {
+            //这两组数据用来模拟markLine线段开关,data可以为空
+            name: "压力正常",
+            type: "line",
+            markLine: {
+              symbol: ["none", "none"], //去掉箭头
+              label: {
+                show: false,
+              },
+              data: [
+                {
+                  name: "压力正常",
+                  xAxis: "40",
+                  itemStyle: {
+                    normal: {
+                      show: true,
+                      color: "#FFFF66",
+                    },
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    console.log(this.$echarts);
+    this.myChart = this.$echarts.init(this.$refs.bar);
+    this.myChart.setOption(this.option);
+  },
+};
+</script>
+
+<style>
+</style>

src/views/mining/envTest/minePressure.vue

@@ -0,0 +1,161 @@
+<template>
+  <!-- 支架压力柱状图 -->
+  <div ref="bar" style="height: 150px; width: 400px; margin-left: 40px"></div>
+</template>
+
+<script>
+export default {
+  name: "Bars",
+  data() {
+    return {
+      myChart: null,
+      option: {
+        // title: {
+        //   text: "探孔水位/m",
+        //   left: 100,
+        //   top:10,
+        //   textStyle: {
+        //     fontWeight: "normal", //标题颜色
+        //     color: "#4ADEFE",
+        //   },
+        // },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   formatter: (params) => {
+        //     if (params[0].data > 64) {
+        //       return params[0].marker + "压力过高:" + params[0].data;
+        //     } else {
+        //       return params[0].marker + "压力正常:" + params[0].data;
+        //     }
+        //   },
+        // },
+        color: ["#FF6666", "#99CC66", "#FFFF66"],
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            axisLabel: {
+              color: "rgb（255,255,255）",
+              fontSize: 11,
+            },
+            axisLine: {
+              show: true,
+              // color: ""
+            },
+            data: ["头", "中", "尾"],
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            axisLabel: {
+              color: "#fff",
+              fontSize: 11,
+            },
+            splitLine: {
+              show: false,
+              lineStyle: {
+                type: "dotted",
+                color: "#fff",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "压力过低",
+            type: "bar",
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  if (params.data > 6) {
+                    return "#FF6666";
+                  } else if (params.data > 4) {
+                    return "#FFFF66";
+                  } else {
+                    return "#99CC66";
+                  }
+                },
+                label: {
+                  show: true, //开启显示
+                  position: "top", //在上方显示
+                  textStyle: {
+                    //数值样式
+                    color: function (params) {
+                      if (params.data > 6) {
+                        return "#FF6666";
+                      } else if (params.data > 4) {
+                        return "#FFFF66";
+                      } else {
+                        return "#99CC66";
+                      }
+                    },
+                    fontSize: 15,
+                  },
+                },
+              },
+            },
+            barWidth: "10",
+            barCategoryGap: "5%",
+            data: [7, 5.7, 3.1],
+          },
+          {
+            //这两组数据用来模拟markLine线段开关,data可以为空
+            name: "压力超限",
+            type: "line",
+            markLine: {
+              data: [
+                {
+                  name: "压力超限",
+                  yAxis: "6",
+                  itemStyle: {
+                    normal: {
+                      show: true,
+                      color: "#FF6666",
+                    },
+                  },
+                },
+              ],
+            },
+          },
+          {
+            //这两组数据用来模拟markLine线段开关,data可以为空
+            name: "压力正常",
+            type: "line",
+            markLine: {
+              data: [
+                {
+                  name: "压力正常",
+                  yAxis: "4",
+                  itemStyle: {
+                    normal: {
+                      show: true,
+                      color: "#FFFF66",
+                    },
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    console.log(this.$echarts);
+    this.myChart = this.$echarts.init(this.$refs.bar);
+    this.myChart.setOption(this.option);
+  },
+};
+</script>
+
+<style>
+</style>

src/views/mining/envTest/waterLevel.vue

@@ -0,0 +1,138 @@
+<template>
+  <!-- 支架压力柱状图 -->
+  <div ref="bar" style="height: 150px; width: 500px; margin-left:40px"></div>
+</template>
+
+<script>
+export default {
+  name: "Bars",
+  data() {
+    return {
+      myChart: null,
+      option: {
+        title: {
+          text: "探孔水位/m",
+          left: 100,
+          top:10,
+          textStyle: {
+            fontWeight: "normal", //标题颜色
+            color: "#4ADEFE",
+          },
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: (params) => {
+            if (params[0].data > 64) {
+              return params[0].marker + "压力过高:" + params[0].data;
+            } else {
+              return params[0].marker + "压力正常:" + params[0].data;
+            }
+          },
+        },
+        color: ["#FF6666", "#99CC66", "#FFFF66"],
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            axisLabel: {
+              color: "rgb（255,255,255）",
+              fontSize: 11,
+            },
+            axisLine: {
+              show: true,
+              // color: ""
+            },
+            data: [1, 2],
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            axisLabel: {
+              color: "#fff",
+              fontSize: 11,
+            },
+            splitLine: {
+              show: false,
+              lineStyle: {
+                type: "dotted",
+                color: "#fff",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "压力过低",
+            type: "bar",
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  if (params.data > 64) {
+                    return "#FF6666";
+                  } else {
+                    return "#99CC66";
+                  }
+                },
+                label: {
+                  show: true, //开启显示
+                  position: "top", //在上方显示
+                  textStyle: {
+                    //数值样式
+                    color: function (params) {
+                      if (params.data > 64) {
+                        return "#FF6666";
+                      } else {
+                        return "#99CC66";
+                      }
+                    },  
+                    fontSize: 15,
+                  },
+                },
+              },
+            },
+            barWidth: "10",
+            barCategoryGap: "5%",
+            data: [50, 55],
+          },
+          {
+            //这两组数据用来模拟markLine线段开关,data可以为空
+            name: "压力超限",
+            type: "line",
+            markLine: {
+              data: [
+                {
+                  name: "压力超限",
+                  yAxis: "60",
+                  itemStyle: {
+                    normal: {
+                      show: true,
+                      color: "#FF6666",
+                    },
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    console.log(this.$echarts);
+    this.myChart = this.$echarts.init(this.$refs.bar);
+    this.myChart.setOption(this.option);
+  },
+};
+</script>
+
+<style>
+</style>

src/views/mining/envTest/waterStorage.vue

@@ -0,0 +1,155 @@
+<template>
+  <div>
+    <div
+      ref="testLine"
+      style="width: 500px; height: 150px;"
+    ></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    unit: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      currentChartId: 1,
+      count: 0,
+      myChart: null,
+      option: {
+        color: ["#41D6C3", "#FA8072"],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: "cross",
+            label: {
+              backgroundColor: "#6a7985",
+            },
+          },
+          backgroundColor: "#fff",
+          padding: 10,
+          textStyle: {
+            fontSize: 12,
+            color: "#152934",
+            lineHeight: 24,
+          },
+          extraCssText:
+            "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 0;",
+          formatter: (params) => {
+            console.log("params", params);
+            var result = `${this.title}：${params[0].data}${this.unit} <br/>`;
+            return result;
+          },
+        },
+        grid: {
+          top: "15%",
+          left: "10%",
+          right: "10%",
+          bottom: "1%",
+          containLabel: true,
+        },
+        legend: {
+          orient: "vertical",
+          x: "left",
+          y: "top",
+          data: [],
+          textStyle: {
+            fontWeight: "normal",
+            color: "#fff",
+          },
+        },
+        yAxis: [
+          {
+            boundaryGap: [0, "100%"],
+            name: this.unit,
+            splitLine: {
+              show: false,
+              lineStyle: {
+                type: "dotted",
+                color: "rgba(155, 155, 155, 0.5)",
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: "#fff",
+              fontSize: 11,
+            },
+            axisTick: { show: false },
+            type: "value",
+          },
+        ],
+        xAxis: [
+          {
+            // type: "time", // x轴为 时间轴
+            interval: 0,
+            splitLine: { show: false },
+            axisLine: {
+              lineStyle: { width: 0 },
+            },
+            axisLabel: {
+              color: "#fff",
+              fontSize: 11,
+              // rotate: 30,
+            },
+            axisTick: { show: false },
+            boundaryGap: false,
+            data: ["1区", "2区", "3区", "4区", "5区"],
+          },
+        ],
+        title: {
+          text: this.title,
+          left:100,
+          top: 10,
+          textStyle: {
+            fontWeight: "normal", //标题颜色
+            color: "#4ADEFE",
+            fontSize: 18,
+          },
+        },
+        series: [
+          {
+            type: "line",
+            symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
+            showAllSymbol: true,
+            symbolSize: 7,
+            smooth: true,
+            lineStyle: { normal: { color: "#5AAAFA", width: 1 } },
+            areaStyle: { normal: { color: "#5AAAFA", opacity: 0.5 } },
+            tooltip: {
+              show: true,
+            },
+            data: [0.4, 0.5, 0.2, 0.1, 0.7],
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    // 先画图
+    this.myChart = this.$echarts.init(this.$refs.testLine);
+    this.myChart.setOption(this.option);
+  },
+};
+</script>
+<style scoped>
+.select-veido .el-select {
+  width: 100px;
+  margin-left: 10px;
+}
+.select-veido >>> .el-input--small .el-input__inner {
+  background: none;
+}
+.select-veido >>> .el-input__inner {
+  border: 0;
+}
+</style>

src/views/mining/mining.vue

@@ -1,44 +1,33 @@
 <template>
   <div>
     <!--标签-->
-    <el-tabs
-      v-model="activeName"
-      type="card"
-      @tab-click="handleClick"
-    >
-      <el-tab-pane
-        label="系统图"
-        name="third"
-      >
+    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+      <el-tab-pane label="系统图" name="third">
         <router-view></router-view>
       </el-tab-pane>
-      <el-tab-pane
-        label="系统数据"
-        name="first"
-      >
+      <el-tab-pane label="系统数据" name="first">
         <systemData></systemData>
       </el-tab-pane>
-      <el-tab-pane
-        label="数据标准"
-        name="second"
-      >
+      <el-tab-pane label="数据标准" name="second">
         <dataStandard></dataStandard>
       </el-tab-pane>
-
+      <el-tab-pane label="环境检测" name="fourth">
+        <envTest></envTest>
+      </el-tab-pane>
     </el-tabs>
   </div>
-
 </template>
 
 
 <script>
 import dataStandard from "./dataStandard/dataStandard";
 import systemData from "./systemData";
+import envTest from "./envTest"
 export default {
   name: "mining",
   data() {
     return {
-      activeName: "third",
+      activeName: "fourth",
       checkVisible: "false",
     };
   },
@@ -60,6 +49,7 @@ export default {
   components: {
     dataStandard,
     systemData,
+    envTest
   },
 };
 </script>

src/views/ventilate/configImg/configImg.vue

@@ -7,7 +7,7 @@
           <img src="@/assets/img/风机组态图.png" />
         </div>
       </el-header>
-      <el-main>
+      <el-main style="margin-top:-20px">
         <el-row :gutter="10">
           <el-col :span="12">
             <div class="center">