颜色，高度，样式修改

src/assets/css/global.css

@@ -115,3 +115,23 @@ body,
   
   /* color: #FDD000; */
 }
+.areatitle {
+  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;
+}
+.top_title {
+  border-bottom: #5ddcf8 1px solid;
+  height: 40px;
+  font-size: 18px;
+  line-height: 2;
+  padding: 5px;
+  font-weight: 500;
+  color: #4adefe;
+}

src/common/headline.vue

@@ -4,14 +4,17 @@
     <div class="right">
       <el-dropdown>
         <span class="el-dropdown-link">
-          <img src="~@/assets/avatar.png" :alt="userName" /><span class="center">{{ userName }}</span>
+          <img
+            src="~@/assets/avatar.png"
+            :alt="userName"
+          /><span class="center">{{ userName }}</span>
         </span>
         <template #dropdown>
           <el-dropdown-menu>
-            <el-dropdown-item @click="handleChange('logout')">大数据平台</el-dropdown-item>
-            <el-dropdown-item @click="handleChange('logout')">算法平台</el-dropdown-item>
-            <el-dropdown-item @click="handleChange('logout')">云平台</el-dropdown-item>
-            <el-dropdown-item @click="handleChange('logout')">退出</el-dropdown-item>
+            <el-dropdown-item @click.native="handleChange('bigdata')">大数据平台</el-dropdown-item>
+            <el-dropdown-item @click.native="handleChange('algorithm')">算法平台</el-dropdown-item>
+            <el-dropdown-item @click.native="handleChange('cloud')">云平台</el-dropdown-item>
+            <el-dropdown-item @click.native="handleChange('logout')">退出</el-dropdown-item>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
@@ -21,29 +24,51 @@
 
 <script>
 export default {
-  name:'headline',
+  name: "headline",
   methods: {
     handleChange(val) {
       switch (val) {
+        case "bigdata":
+          window.location.href = `${this.$store.state.ip}bdm/#/home`;
+          break;
+        case "algorithm":
+          window.location.href = `${this.$store.state.ip}aiplat/#/visi-dataset`;
+          break;
+        case "cloud":
+          window.location.href = `${this.$store.state.ip}mkcloud`;
+          break;
         case "logout":
-          window.location.href = "http://112.126.68.148/#/";
+          window.location.href = `${this.$store.state.ip}`;
           break;
       }
-    }
+    },
   },
   computed: {
     userName: {
       get() {
-        if(this.$store.state.name == "" | this.$store.state.name == undefined | this.$store.state.name == null) {
-          this.$store.commit("updateName", "admin");
+        if (
+          (this.$store.state.name == "") |
+          (this.$store.state.name == undefined) |
+          (this.$store.state.name == null)
+        ) {
+          let currName  =JSON.parse(
+           window.sessionStorage.getItem("user")
+         ).username || "admin";
+          this.$store.commit("updateName", currName);
         }
+        // 把username从session中取出来放到store中
+        // let currName = JSON.parse(
+        //   window.sessionStorage.getItem("user")
+        // ).username;
+        // this.$store.commit("updateName", currName);
+        
         return this.$store.state.name;
-      }
+      },
     },
     title() {
       return this.$store.state.title;
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -66,7 +91,7 @@ img {
 }
 .center {
   font-size: 20px;
-  font-weight:bold;
+  font-weight: bold;
   position: relative;
   bottom: 5px;
 }

src/common/oneline.vue

@@ -2,7 +2,7 @@
   <div>
     <div
       ref="testLine"
-      style="width: 450px; height: 200px; margin: 0px auto"
+      style="width: 450px; height: 200px; margin: 0px auto;padding-top:8px"
     ></div>
   </div>
 </template>

src/common/threeline.vue

@@ -3,7 +3,7 @@
   <div>
     <div
       ref="testLine"
-      style="width: 450px; height: 200px; margin: 0px auto"
+      style="width: 550px; height: 200px; margin: 0px auto;padding-top:8px"
     ></div>
   </div>
 </template>

src/common/twoline.vue

@@ -1,7 +1,7 @@
 <template>
 	<!-- 两条曲线封装 且需要两个websocket连接 -->
 	<div>
-		<div ref="testLine" style="width: 450px; height: 200px; margin: 0px auto"></div>
+		<div ref="testLine" style="width: 450px; height: 200px; padding-top:8px"></div>
 	</div>
 </template>
 
@@ -132,7 +132,7 @@
         },
         legend: {
           align: "left",
-          right: "10%",
+          left: "60%",
           top: "10%",
           type: "plain",
           textStyle: {

src/components/mining/monitor/error_recording.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 采煤工作面设备 的 故障记录 -->
   <div class="table-wrapper main">
-    <span class="title">故障记录</span>
+    <span class="top_title">故障记录</span>
     <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">
@@ -66,7 +66,8 @@ export default {
     background-color: rgba(9, 12, 14, 0.2);
     color: #fff;
   }
-} /* 删除表格下横线 */
+}
+ /* 删除表格下横线 */
 .table-wrapper ::v-deep .el-table::before {
   left: 0;
   bottom: 0;

src/components/mining/monitor/process_statistics.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div id="lmid">
-      <span class="title">生产统计</span>
+      <span class="top_title" style="margin-left:30px;margin-top:15px;">生产统计</span>
       <div class="center">
         <div class="middle_top_list" style="width: 220px">
           <div class="list_title">

src/components/mining/monitor/safety_statistics.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="main">
-    <span class="title">安全统计</span>
+    <span class="top_title" style="margin-left:30px;margin-top:15px;"> 安全统计</span>
     <div style="width: 400px; height: 300px">
       <el-row :gutter="10">
         <el-col class="text" :span="5" style="text-align: center">

src/components/monitor/detailedTable.vue

@@ -2,13 +2,13 @@
   <!-- 采煤工作面设备 的 故障记录 -->
   <div class="table-wrapper main">
     <el-table :data="tableData" max-height="200">
-      <el-table-column prop="serialNumber" label="测点编号" width="85">
+      <el-table-column prop="serialNumber" label="测点编号" width="130">
       </el-table-column>
-      <el-table-column prop="place" label="安装位置" width="180">
+      <el-table-column prop="place" label="安装位置" width="230">
       </el-table-column>
-      <el-table-column prop="real_time" label="实时值" width="80">
+      <el-table-column prop="real_time" label="实时值" width="160">
       </el-table-column>
-      <el-table-column prop="dataQuality" label="数据质量" width="85">
+      <el-table-column prop="dataQuality" label="数据质量" width="135">
       </el-table-column>
     </el-table>
   </div>

src/components/monitor/left.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div style="width: 100%; margin: 0 auto" class="left_003">
-      <h1 class="left_tile">基本信息</h1>
+      <span class="left_tile">基本信息</span>
       <!-- 使用for循环输出selectData 左列为属性，右列为具体值 -->
       <div v-for="(item, index) in leftData" :key="index" class="left_002">
         <div class="left_001">{{ item.name }}</div>
@@ -12,7 +12,7 @@
     <br />
 
     <div style="width: 100%; margin: 0 auto" class="left_003">
-      <p class="left_tile">区域评分</p>
+      <span class="left_tile">区域评分</span>
       <el-row :gutter="16" style="margin-top: 10px">
         <el-col :span="4" style="text-align: center"> 总分 </el-col>
         <el-col :span="20">

src/components/monitor/rightTable.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 采煤工作面设备 的 故障记录 -->
   <div class="table-wrapper main">
-    <h1 class="top_title">区域隐患</h1>
+    <span class="top_title">区域隐患</span>
     <el-table :data="tableData" max-height="420">
       <el-table-column prop="name" label="隐患名称" width="80">
       </el-table-column>

src/components/power_supply/configImg/Table.vue

@@ -1,6 +1,5 @@
 <template>
   <div id="table">
-    <h1 align="center" style="color: #4adefe">供电系统组态图</h1>
 
     <div class="header">
       <img

src/components/process_monitoring/Main.vue

@@ -1,36 +1,61 @@
 <template>
   <div id="outer">
-    <div class="title">
-      <p>生产流程整体监控</p>
-    </div>
+
     <div class="warning_box">
       <div class="warning_container warning1">
-        <WarningInfo :ref="0" :id="0"></WarningInfo>
+        <WarningInfo
+          :ref="0"
+          :id="0"
+        ></WarningInfo>
       </div>
       <div class="warning_container warning2">
-        <WarningInfo :ref="1" :id="1"></WarningInfo>
+        <WarningInfo
+          :ref="1"
+          :id="1"
+        ></WarningInfo>
       </div>
 
       <div class="warning_container warning3">
-        <WarningInfo :ref="2" :id="2"></WarningInfo>
+        <WarningInfo
+          :ref="2"
+          :id="2"
+        ></WarningInfo>
       </div>
       <div class="warning_container warning4">
-        <WarningInfo :ref="3" :id="3"></WarningInfo>
+        <WarningInfo
+          :ref="3"
+          :id="3"
+        ></WarningInfo>
       </div>
       <div class="warning_container warning5">
-        <WarningInfo :ref="4" :id="4"></WarningInfo>
+        <WarningInfo
+          :ref="4"
+          :id="4"
+        ></WarningInfo>
       </div>
       <div class="warning_container warning6">
-        <WarningInfo :ref="5" :id="5"></WarningInfo>
+        <WarningInfo
+          :ref="5"
+          :id="5"
+        ></WarningInfo>
       </div>
       <div class="warning_container warning7">
-        <WarningInfo :ref="6" :id="6"></WarningInfo>
+        <WarningInfo
+          :ref="6"
+          :id="6"
+        ></WarningInfo>
       </div>
       <div class="warning_container warning8">
-        <WarningInfo :ref="7" :id="7"></WarningInfo>
+        <WarningInfo
+          :ref="7"
+          :id="7"
+        ></WarningInfo>
       </div>
       <div class="warning_container warning9">
-        <WarningInfo :ref="8" :id="8"></WarningInfo>
+        <WarningInfo
+          :ref="8"
+          :id="8"
+        ></WarningInfo>
       </div>
       <!-- <div class="warning_container warning10">
         <WarningInfo :ref="9" :id="9"></WarningInfo>
@@ -51,10 +76,16 @@
     <!-- <div class="shexiangtou_container shexiangtou3"></div>
     </div> -->
     <div class="caimeiji1">
-      <CaiMeiJi :ref="10" info_number="1#"></CaiMeiJi>
+      <CaiMeiJi
+        :ref="10"
+        info_number="1#"
+      ></CaiMeiJi>
     </div>
     <div class="caimeiji2">
-      <CaiMeiJi :ref="11" info_number="9+10"></CaiMeiJi>
+      <CaiMeiJi
+        :ref="11"
+        info_number="9+10"
+      ></CaiMeiJi>
     </div>
     <div class="tongcang">
       <div class="tong"></div>
@@ -66,8 +97,14 @@
     </div>
 
     <div class="buttons">
-      <button class="btn1" @click="start">模拟皮带启动</button>
-      <button class="btn2" @click="close">模拟皮带停止</button>
+      <button
+        class="btn1"
+        @click="start"
+      >模拟皮带启动</button>
+      <button
+        class="btn2"
+        @click="close"
+      >模拟皮带停止</button>
     </div>
 
     <div class="xcspwt-box">
@@ -75,7 +112,7 @@
       <ul class="msg1">
         <li>
           <span>割煤刀数</span>
-          <span> &nbsp; {{ shearerState[0].coalCutters }}</span>
+          <span> &nbsp;&nbsp;&nbsp; {{ shearerState[0].coalCutters }}</span>
         </li>
         <li>
           <span>回采米数</span>
@@ -83,7 +120,7 @@
         </li>
         <li>
           <span>出煤量</span>
-          <span>&nbsp;&nbsp;&nbsp; {{ shearerState[0].coalOutput }}</span>
+          <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{ shearerState[0].coalOutput }}</span>
         </li>
       </ul>
     </div>
@@ -93,7 +130,7 @@
       <ul class="msg1">
         <li>
           <span>割煤刀数</span>
-          <span> &nbsp; {{ shearerState[1].coalCutters }}</span>
+          <span> &nbsp;&nbsp;&nbsp; {{ shearerState[1].coalCutters }}</span>
         </li>
         <li>
           <span>回采米数</span>
@@ -101,7 +138,7 @@
         </li>
         <li>
           <span>出煤量</span>
-          <span>&nbsp;&nbsp;&nbsp; {{ shearerState[1].coalOutput }}</span>
+          <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{ shearerState[1].coalOutput }}</span>
         </li>
       </ul>
     </div>
@@ -175,34 +212,22 @@ export default {
 #outer {
   width: 100%;
   height: 100%;
-  background-image: linear-gradient(
-    to right,
-    rgb(6, 19, 60) 0%,
-    rgb(1, 22, 105) 50%,
-    rgb(6, 19, 60) 100%
-  );
+  background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%),
+    linear-gradient(
+      to top,
+      rgba(255, 255, 255, 0.4) 0%,
+      rgba(0, 0, 0, 0.25) 200%
+    );
   position: relative;
-  .title {
-    position: relative;
-    height: 10%;
-    p {
-      color: #fff;
-      font-size: 40px;
-      margin: 0;
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-    }
-  }
+
 
   .warning_box {
     position: relative;
-    margin-left: 40px;
+    margin-left: 130px;
   }
   .pidai_box {
     position: relative;
-    margin-left: 40px;
+    margin-left: 130px;
   }
   .shexiangtou_box {
     position: relative;

src/components/tunneling/worklog.vue

@@ -4,8 +4,8 @@
   <div class="table-wrapper main">
     <span class="title">日志信息</span>
     <el-table :data="tableData"  max-height="260" >
-      <el-table-column prop="name" label="时间" width="240"> </el-table-column>
-      <el-table-column prop="problem" label="记录" width="280">
+      <el-table-column prop="name" label="设备名称" width="240"> </el-table-column>
+      <el-table-column prop="problem" label="状态" width="280">
       </el-table-column>
     </el-table>
   </div>

src/store/index.js

@@ -6,6 +6,7 @@ Vue.use(Vuex)
 export default new Vuex.Store({
   state: {
     websocketIP: "182.92.79.148:8081",
+    ip:"http://112.126.68.148/",
     name: "",
     title: "主界面",
 

src/views/beam_tube/configImg/index.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="main">
     <el-container>
-      <headline title="矿压检测系统图"></headline>
       <el-header>
         <div class="header">
           <div style="margin-left: -50px; margin-bottom: -100px; margin-top: -40px">
@@ -82,7 +81,7 @@ import maosuoChart from "@/components/beam_tube/maosuoChart";
 import dingbanLine from "@/components/beam_tube/dingbanLine";
 import maosuoLine from "@/components/beam_tube/maosuoLine";
 import faultAlarm from "@/components/beam_tube/faultAlarm";
-import headline from "@/common/headline"
+import headline from "@/common/headline";
 export default {
   data() {
     return {
@@ -184,7 +183,7 @@ export default {
     dingbanLine,
     maosuoLine,
     faultAlarm,
-    headline
+    headline,
   },
 };
 </script>
@@ -192,13 +191,15 @@ export default {
 <style scoped>
 .main {
   width: 100%;
-  height: 900px;
-  position: relative;
-  background-image: linear-gradient(
-    to right,
-    #06133c 0%,
-    #011669 5045 #06133c 100%
-  );
+  height: 845px;
+  background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%),
+    linear-gradient(
+      to top,
+      rgba(255, 255, 255, 0.4) 0%,
+      rgba(0, 0, 0, 0.25) 200%
+    );
+  /* 正片叠底模式。 */
+  background-blend-mode: multiply;
 }
 .header {
   position: relative;
@@ -231,7 +232,7 @@ export default {
 }
 .bottom1 {
   color: #4adefe;
-  right: 40px;
+  right: 180px;
   font-size: 20px;
   top: 330px;
   position: absolute;

src/views/compressed/configImg/configImg.vue

@@ -1,154 +1,139 @@
 <template>
   <div class="main">
-    <div><headline title="压风系统系统图"></headline></div>
     <el-container>
-      <el-header
-        ><div>
-          <img src="@/assets/img/compressed/back.png" id="imgSwitch" />
+      <el-header>
+        <div>
+          <img
+            style="margin-top:10px"
+            src="@/assets/img/compressed/back.png"
+            id="imgSwitch"
+          />
         </div>
         <div id="fan">
           <div class="fan1">
-            <ul
-              :class="{
+            <ul :class="{
                 blades: tableData[0].isStart,
                 bld: !tableData[0].isStart,
-              }"
-            >
-              <li
-                :class="[
+              }">
+              <li :class="[
                   'b1',
                   !tableData[0].isAlarm
                     ? !tableData[0].isWarning
                       ? 'green'
                       : 'red'
                     : 'red',
-                ]"
-              ></li>
-              <li
-                :class="[
+                ]"></li>
+              <li :class="[
                   'b2',
                   !tableData[0].isAlarm
                     ? !tableData[0].isWarning
                       ? 'green'
                       : 'red'
                     : 'red',
-                ]"
-              ></li>
-              <li
-                :class="[
+                ]"></li>
+              <li :class="[
                   'b3',
                   !tableData[0].isAlarm
                     ? !tableData[0].isWarning
                       ? 'green'
                       : 'red'
                     : 'red',
-                ]"
-              ></li>
+                ]"></li>
             </ul>
           </div>
           <div class="fan2">
-            <ul
-              :class="{
+            <ul :class="{
                 blades: tableData[1].isStart,
                 bld: !tableData[1].isStart,
-              }"
-            >
-              <li
-                :class="[
+              }">
+              <li :class="[
                   'b1',
                   !tableData[1].isAlarm
                     ? !tableData[1].isWarning
                       ? 'green'
                       : 'red'
                     : 'red',
-                ]"
-              ></li>
-              <li
-                :class="[
+                ]"></li>
+              <li :class="[
                   'b2',
                   !tableData[1].isAlarm
                     ? !tableData[1].isWarning
                       ? 'green'
                       : 'red'
                     : 'red',
-                ]"
-              ></li>
-              <li
-                :class="[
+                ]"></li>
+              <li :class="[
                   'b3',
                   !tableData[1].isAlarm
                     ? !tableData[1].isWarning
                       ? 'green'
                       : 'red'
                     : 'red',
-                ]"
-              ></li>
+                ]"></li>
             </ul>
           </div>
           <div class="fan3">
-            <ul
-              :class="{
+            <ul :class="{
                 blades: tableData[2].isStart,
                 bld: !tableData[2].isStart,
-              }"
-            >
-              <li
-                :class="[
+              }">
+              <li :class="[
                   'b1',
                   !tableData[2].isAlarm
                     ? !tableData[2].isWarning
                       ? 'green'
                       : 'red'
                     : 'red',
-                ]"
-              ></li>
-              <li
-                :class="[
+                ]"></li>
+              <li :class="[
                   'b2',
                   !tableData[2].isAlarm
                     ? !tableData[2].isWarning
                       ? 'green'
                       : 'red'
                     : 'red',
-                ]"
-              ></li>
-              <li
-                :class="[
+                ]"></li>
+              <li :class="[
                   'b3',
                   !tableData[2].isAlarm
                     ? !tableData[2].isWarning
                       ? 'green'
                       : 'red'
                     : 'red',
-                ]"
-              ></li>
+                ]"></li>
             </ul>
           </div>
         </div>
       </el-header>
       <el-main>
-        <el-row style="margin-top: 80px" :gutter="20">
-          <el-col :span="8"
-            ><div class="center">
+        <el-row
+          style="margin-top: 80px"
+          :gutter="20"
+        >
+          <el-col :span="8">
+            <div class="center">
               <data-table
                 title="压风机1号"
                 :tableData="tableData[0]"
-              ></data-table></div
-          ></el-col>
-          <el-col :span="8"
-            ><div class="center">
+              ></data-table>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="center">
               <data-table
                 title="压风机2号"
                 :tableData="tableData[1]"
-              ></data-table></div
-          ></el-col>
-          <el-col :span="8"
-            ><div class="center">
+              ></data-table>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="center">
               <data-table
                 title="压风机3号"
                 :tableData="tableData[2]"
-              ></data-table></div
-          ></el-col>
+              ></data-table>
+            </div>
+          </el-col>
         </el-row>
       </el-main>
     </el-container>
@@ -219,13 +204,15 @@ export default {
 <style scoped>
 .main {
   width: 100%;
-  height: 900px;
-  position: relative;
-  background-image: linear-gradient(
-    to right,
-    #06133c 0%,
-    #011669 5045 #06133c 100%
-  );
+  height: 845px;
+  background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%),
+    linear-gradient(
+      to top,
+      rgba(255, 255, 255, 0.4) 0%,
+      rgba(0, 0, 0, 0.25) 200%
+    );
+  /* 正片叠底模式。 */
+  background-blend-mode: multiply;
 }
 .center {
   width: 100%;
@@ -250,22 +237,23 @@ li {
   list-style: none;
 }
 .fan1 {
-  margin-left: 0px;
+  margin-left: 15px;
   position: absolute;
+  margin-top:-25px;
 }
 .fan2 {
-  margin-left: 470px;
-  margin-top: 0px;
+  margin-left: 520px;
+  margin-top: -25px;
   position: absolute;
 }
 .fan3 {
-  margin-left: 960px;
-  margin-top: 0px;
+  margin-left: 1040px;
+  margin-top: -25px;
   position: absolute;
 }
 #fan {
   position: absolute;
-  width: 16em;
+  width: 12em;
   height: 30em;
   left: 14em;
   top: 25em;

src/views/compressed/configImg/dataTable.vue

@@ -72,8 +72,8 @@ li {
 }
 .start {
   /* margin-left: 40px; */
-  width: 40px;
-  height: 40px;
+  width: 37px;
+  height: 37px;
   background-color: #009966;
   border-radius: 50%;
   position: absolute;
@@ -82,8 +82,8 @@ li {
 
 .stop {
   /* margin: left: 40px; */
-  width: 40px;
-  height: 40px;
+  width: 37px;
+  height: 37px;
   background-color: #ff6666;
   border-radius: 50%;
   position: absolute;

src/views/compressed/dataBoard/dataBoard.vue

@@ -24,19 +24,38 @@
         <el-col :span="8">
           <div class="top_left">
             <!-- 电机电流 -->
-            <oneline ref="current" :id="80" title="电机电流" unit="A" type="dianjidianliu_after"></oneline>
+            <oneline
+              ref="current"
+              :id="80"
+              title="电机电流"
+              unit="A"
+              type="dianjidianliu_after"
+            ></oneline>
           </div>
         </el-col>
         <el-col :span="8">
           <div class="top_center">
             <!-- 三相绕组温度 -->
-            <threeline ref="winding" :id="80" title="三相绕组温度" unit="°C" :type="windingType" :legend="windingLegand"></threeline>
+            <threeline
+              ref="winding"
+              :id="80"
+              title="三相绕组温度"
+              unit="°C"
+              :type="windingType"
+              :legend="windingLegand"
+            ></threeline>
           </div>
         </el-col>
         <el-col :span="8">
           <div class="top_right">
             <!-- 电机振动 -->
-            <oneline ref="virbrate" :id="92" title="电机振动" unit="mm/s" type="zhendong_after"></oneline>
+            <oneline
+              ref="virbrate"
+              :id="92"
+              title="电机振动"
+              unit="mm/s"
+              type="zhendong_after"
+            ></oneline>
           </div>
         </el-col>
       </el-row>
@@ -47,19 +66,40 @@
         <el-col :span="8">
           <div class="center_left">
             <!-- 压风机及风包压力 -->
-            <twoline2 ref="pressure" :id=[81,82] title="压风机及风包压力" unit="Mpa" :type="pressureType" :legend="pressureLegand"></twoline2>
+            <twoline2
+              ref="pressure"
+              :id=[81,82]
+              title="压风机及风包压力"
+              unit="Mpa"
+              :type="pressureType"
+              :legend="pressureLegand"
+            ></twoline2>
           </div>
         </el-col>
         <el-col :span="8">
           <div class="center_center">
             <!-- 压风机及风包温度 -->
-            <twoline2 ref="temperature" :id=[81,82] title="压风机及风包温度" unit="°C" :type="temperatureType" :legend="temperatureLegand"></twoline2>
+            <twoline2
+              ref="temperature"
+              :id=[81,82]
+              title="压风机及风包温度"
+              unit="°C"
+              :type="temperatureType"
+              :legend="temperatureLegand"
+            ></twoline2>
           </div>
         </el-col>
         <el-col :span="8">
           <div class="center_right">
             <!-- 电机前后轴温 -->
-            <twoline ref="bearing" :id="80" title="电机前后轴温" unit="°C" :type="bearingType" :legend="bearingLegand"></twoline>
+            <twoline
+              ref="bearing"
+              :id="80"
+              title="电机前后轴温"
+              unit="°C"
+              :type="bearingType"
+              :legend="bearingLegand"
+            ></twoline>
           </div>
         </el-col>
       </el-row>
@@ -86,9 +126,9 @@
 </template>
 
 <script>
-import oneline from '@/common/oneline'
-import twoline from '@/common/twoline'
-import threeline from '@/common/threeline'
+import oneline from "@/common/oneline";
+import twoline from "@/common/twoline";
+import threeline from "@/common/threeline";
 import faultAlarm from "./faultAlarm";
 import runningMsg from "./runningMsg";
 import runningMsg1 from "./runningMsg1";
@@ -111,17 +151,20 @@ export default {
           label: "3号压风机",
         },
       ],
-      windingType:["dianjiraozuwenduu_after","dianjiraozuwenduv_after","dianjiraozuwenduw_after"],
-      windingLegand:["U1相温度","V1相温度","W1相温度"],
-      vibrateType:["xzhou_after","yzhou_after","zzhou_after"],
-      vibrateLegand:["X轴振动","Y轴振动","Z轴振动"],
-      pressureType:["gongqiyali_after","fengbaoyali_after"],
-      pressureLegand:["压风机压力","风包压力"],
-      temperatureType:["paiqiwendu_after","fengbaowendu_after"],
-      temperatureLegand:["压风机温度","风包温度"],
-      bearingType:["dianjiqianzhouwendu_after","dianjihouzhouwendu_after"],
-      bearingLegand:["电机前轴温","电机后轴温"]
-
+      windingType: [
+        "dianjiraozuwenduu_after",
+        "dianjiraozuwenduv_after",
+        "dianjiraozuwenduw_after",
+      ],
+      windingLegand: ["U1相温度", "V1相温度", "W1相温度"],
+      vibrateType: ["xzhou_after", "yzhou_after", "zzhou_after"],
+      vibrateLegand: ["X轴振动", "Y轴振动", "Z轴振动"],
+      pressureType: ["gongqiyali_after", "fengbaoyali_after"],
+      pressureLegand: ["压风机压力", "风包压力"],
+      temperatureType: ["paiqiwendu_after", "fengbaowendu_after"],
+      temperatureLegand: ["压风机温度", "风包温度"],
+      bearingType: ["dianjiqianzhouwendu_after", "dianjihouzhouwendu_after"],
+      bearingLegand: ["电机前轴温", "电机后轴温"],
     };
   },
   methods: {
@@ -144,7 +187,7 @@ export default {
     faultAlarm,
     runningMsg,
     runningMsg1,
-    twoline2
+    twoline2,
   },
 };
 </script>
@@ -167,14 +210,16 @@ export default {
 }
 .main {
   width: 100%;
-  height: 900px;
   position: relative;
-  background-image: linear-gradient(
-    to right,
-    rgb(6, 19, 60) 0%,
-    rgb(1, 22, 105) 50%,
-    rgb(6, 19, 60) 100%
-  );
+  height: 845px;
+  background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%),
+    linear-gradient(
+      to top,
+      rgba(255, 255, 255, 0.4) 0%,
+      rgba(0, 0, 0, 0.25) 200%
+    );
+  /* 正片叠底模式。 */
+  background-blend-mode: multiply;
   /* background-color: antiquewhite; */
 }
 .header {
@@ -238,7 +283,7 @@ export default {
   /* height: 30%; */
   /* display: inline; */
   /* height: 400px; */
-  margin-top: -60px;
+  margin-top: -20px;
   display: flex;
   justify-content: space-around;
 }

src/views/compressed/dataBoard/twoline2.vue

@@ -3,7 +3,7 @@
   <div>
     <div
       ref="testLine"
-      style="width: 450px; height: 200px;margin: 0px auto"
+      style="width: 450px; height: 200px;margin: 0px auto;padding-top:8px"
     ></div>
   </div>
 </template>

src/views/drain/configImg/index.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="main">
-    <div><headline title="主排水系统系统图"></headline></div>
     <!-- 背景图片 -->
     <div>
       <img
@@ -123,27 +122,29 @@ export default {
 <style scoped>
 .main {
   width: 100%;
-  height: 900px;
-  position: relative;
-  background-image: linear-gradient(
-    to right,
-    #06133c 0%,
-    #011669 5045 #06133c 100%
-  );
+  height: 845px;
+  background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%),
+    linear-gradient(
+      to top,
+      rgba(255, 255, 255, 0.4) 0%,
+      rgba(0, 0, 0, 0.25) 200%
+    );
+  /* 正片叠底模式。 */
+  background-blend-mode: multiply;
 }
 .table1 {
-  top: 50px;
-  left: -10px;
+  top: 0px;
+  left: -1px;
   position: absolute;
 }
 .table2 {
-  top: 50px;
-  left: 460px;
+  top: 0px;
+  left: 510px;
   position: absolute;
 }
 .table3 {
-  top: 50px;
-  left: 930px;
+  top: 0px;
+  left: 1050px;
   position: absolute;
 }
 #imgSwitch {
@@ -158,91 +159,91 @@ export default {
   width: 10px;
   height: 30px;
   position: absolute;
-  top: 110px;
-  left: 62px;
+  top: 70px;
+  left: 69px;
 }
 .botton1 {
   width: 10px;
   height: 30px;
   position: absolute;
-  top: 420px;
-  left: 144px;
+  top: 375px;
+  left: 157px;
 }
 .botton2 {
   width: 15px;
   height: 15px;
   border-radius: 50%;
   position: absolute;
-  top: 423px;
-  left: 378px;
+  top: 380px;
+  left: 407px;
 }
 .botton3 {
   width: 15px;
   height: 15px;
   border-radius: 50%;
   position: absolute;
-  top: 350px;
-  left: 429px;
+  top: 308px;
+  left: 461px;
 }
 .botton4 {
   width: 10px;
   height: 30px;
   position: absolute;
-  top: 184px;
-  left: 540px;
+  top: 142px;
+  left: 580px;
 }
 .botton5 {
   width: 10px;
   height: 30px;
   position: absolute;
-  top: 420px;
-  left: 620px;
+  top: 376px;
+  left: 670px;
 }
 .botton6 {
   width: 15px;
   height: 15px;
   border-radius: 50%;
   position: absolute;
-  top: 424px;
-  left: 852px;
+  top: 380px;
+  left: 917px;
 }
 .botton7 {
   width: 15px;
   height: 15px;
   border-radius: 50%;
   position: absolute;
-  top: 351px;
-  left: 903px;
+  top: 307px;
+  left: 972px;
 }
 .botton8 {
   width: 10px;
   height: 30px;
   position: absolute;
-  top: 185px;
-  left: 1013px;
+  top: 140px;
+  left: 1090px;
 }
 .botton9 {
   width: 10px;
   height: 30px;
   position: absolute;
-  top: 420px;
-  left: 1097px;
+  top: 376px;
+  left: 1178px;
 }
 .botton10 {
   width: 15px;
   height: 15px;
   border-radius: 50%;
   position: absolute;
-  top: 423px;
-  right: 245px;
+  top: 380px;
+  right: 265px;
 }
 .botton11 {
   width: 15px;
   height: 15px;
   border-radius: 50%;
   position: absolute;
-  top: 351px;
-  right: 194px;
+  top: 306px;
+  right: 210px;
 }
 .red {
   background-color: #f90005;

src/views/drain/dataBoard/dataBoard.vue

@@ -160,12 +160,15 @@ export default {
   width: 100%;
   height: 900px;
   position: relative;
-  background-image: linear-gradient(
-    to right,
-    rgb(6, 19, 60) 0%,
-    rgb(1, 22, 105) 50%,
-    rgb(6, 19, 60) 100%
-  );
+
+  background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%),
+    linear-gradient(
+      to top,
+      rgba(255, 255, 255, 0.4) 0%,
+      rgba(0, 0, 0, 0.25) 200%
+    );
+  /* 正片叠底模式。 */
+  background-blend-mode: multiply;
   /* background-color: antiquewhite; */
 }
 .header {

src/views/drain/dataBoard/faultAlarm.vue

@@ -1,7 +1,7 @@
   <template>
   <!-- style="padding:6px;border:3px solid #96c2f1;background:#eff7ff;height:180px;margin-top:60px" -->
   <div class="table-wrapper">
-    <span class="title">故障报警</span>
+    <span class="top_title">故障报警</span>
     <el-table :data="tableData"  max-height="160">
       <el-table-column
         prop="name"
@@ -66,7 +66,7 @@ export default {
 <style lang='scss' scoped>
 .table-wrapper {
   padding-top: 20px;
-  margin-left: 90px;
+  margin-left: 80px;
   height: 80%;
   margin-top: 10px;
   ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {

src/views/drain/dataBoard/runningMsg.vue

@@ -1,6 +1,6 @@
   <template>
   <div class="table-wrapper">
-    <span class="title">运行操作</span>
+    <span class="top_title">运行操作</span>
     <el-table
       :data="tableData"
       style="width: 100%"
@@ -57,7 +57,7 @@ export default {
 <style lang='scss' scoped>
 .table-wrapper {
   padding-top: 20px;
-  margin-left: 110px;
+  margin-left: 80px;
   height: 80%;
   margin-top: 10px;
   ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {

src/views/gas/configImg/Chart.vue

@@ -2,19 +2,19 @@
   <div>
     <div class="select-veido">
       <el-select
-      style="margin-top:10px"
-      v-model="currentChartId"
-      placeholder="请选择"
-      @change="selectChart()"
-    >
-      <el-option
-        v-for="item in chartoptions"
-        :key="item.id+''"
-        :label="item.label"
-        :value="item.id"
+        style="margin-top:10px"
+        v-model="currentChartId"
+        placeholder="请选择"
+        @change="selectChart()"
       >
-      </el-option>
-    </el-select>
+        <el-option
+          v-for="item in chartoptions"
+          :key="item.id+''"
+          :label="item.label"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
     </div>
     <div
       ref="testLine"
@@ -25,9 +25,13 @@
 
 <script>
 /**
- * 浓度或流量曲线
- * @module Chart
+ * @module gas/configImg/Chart
+ * @desc 浓度或流量曲线
+ * @vue-data {Array} chartoptions - 选项：流量/浓度
+ * @vue-data {Array} gasId - 子设备Id
+ * @vue-data {Array} title - 图表标题
  */
+
 import { mapState } from "vuex";
 
 export default {
@@ -242,7 +246,6 @@ export default {
   methods: {
     /**
      * 选择浓度或流量，显示对应的数据
-     * @function selectChart
      */
     selectChart() {
       for (let i in this.chartoptions) {
@@ -281,7 +284,6 @@ export default {
     },
     /**
      * 将后端传来的数据存放在对应数组中
-     * @function addData
      * @param {Array} data 后端传来的数据
      */
     addData(data) {
@@ -327,8 +329,7 @@ export default {
       // console.log("this.xData", this.xData);
     },
     /**
-     * @function 初始化WebSocket连接
-     * @function initWebSocket
+     * 初始化WebSocket连接
      */
     initWebSocket() {
       // 连接错误
@@ -372,18 +373,14 @@ export default {
 };
 </script>
 <style scoped>
-.select-veido .el-select{
+.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;
-
-  }
+.select-veido >>> .el-input--small .el-input__inner {
+  background: none;
+}
+.select-veido >>> .el-input__inner {
+  border: 0;
+}
 </style>

src/views/gas/configImg/bottomRight.vue

@@ -7,8 +7,14 @@
 
 <script>
 /**
- * 瓦斯泵电流
- * @module bottomRight
+ * @module gas/configImg/bottomRight
+ * @desc 推移行程图
+ * @vue-data {Object} myChart - Echarts实例
+ * @vue-data {Object} option - Echarts配置项
+ * @vue-data {Array} xData - 图表横坐标
+ * @vue-data {Array} paiqidata - 排气流量
+ * @vue-data {Array} chouqidata - 抽气流量
+ * @vue-computed {String} WebsocketIp - 套接字Ip
  */
 import { mapState } from "vuex";
 
@@ -152,7 +158,6 @@ export default {
   methods: {
     /**
      * 将后端传来的数据存放在对应数组中
-     * @function addData
      * @param {Array} data 后端传来的数据
      */
     addData(data) {
@@ -196,7 +201,6 @@ export default {
     },
     /**
      * 初始化webWebSocket连接
-     * @function initWebSocket
      */
     initWebSocket() {
       // 连接错误

src/views/gas/configImg/center.vue

@@ -18,8 +18,11 @@
 
 <script>
 /**
- * 瓦斯泵参数显示
- * @module center
+ * @module gas/configImg/center
+ * @desc 瓦斯泵参数显示
+ * @vue-data {String} workTime - 瓦斯泵工作时间
+ * @vue-data {String} averagePower - 瓦斯泵平均功率
+ * @vue-data {String} gasContent - 管道瓦斯含量
  */
 export default {
   data() {

src/views/gas/configImg/centerLeft1.vue

@@ -1,7 +1,7 @@
   <template>
   <!-- style="padding:6px;border:3px solid #96c2f1;background:#eff7ff;height:180px;margin-top:60px" -->
   <div class="table-wrapper main">
-<span class="title">故障记录</span>
+<span class="top_title">故障记录</span>
     <el-table
       :data="tableData"
       max-height="160"
@@ -23,8 +23,9 @@
 </template>
 <script>
 /**
- * 瓦斯泵故障记录
- * @module centerLeft1
+ * @module gas/configImg/centerLeft1
+ * @desc 瓦斯泵故障记录
+ * @vue-data {Array} tableData - 故障记录
  */
 export default {
   data() {

src/views/gas/configImg/centerRight1.vue

@@ -1,6 +1,6 @@
   <template>
   <div class="table-wrapper main">
-    <span class="title">启停记录</span>
+    <span class="top_title">启停记录</span>
     <el-table :data="tableData" style="width: 100%" max-height="160">
       <el-table-column prop="name" label="瓦斯泵本体设备" width="180">
       </el-table-column>
@@ -12,8 +12,9 @@
 
 <script>
 /**
- * 瓦斯泵启停记录
- * @module centerRight1
+ * @module gas/configImg/centerRight1
+ * @desc 瓦斯泵启停记录
+ * @vue-data {Array} tableData - 启停记录
  */
 export default {
   data() {

src/views/gas/configImg/dianliuChart.vue

@@ -7,8 +7,13 @@
 
 <script>
 /**
- * 电机电流曲线
- * @module dianliuChart
+ * @module gas/configImg/dianliuChart
+ * @desc 电机电流曲线
+ * @vue-data {Array} xData - 横坐标
+ * @vue-data {Array} dianliudata - 电流数值
+ * @vue-data {Object} myChart - Echarts实例
+ * @vue-data {Object} option - Echarts配置项
+ * @vue-computed {String} WebsocketIp - 套接字Ip
  */
 import { mapState } from "vuex";
 

src/views/gas/configImg/index.vue

@@ -31,9 +31,10 @@
 
 <script>
 /**
- * 瓦斯抽放泵的图表显示
- * @module index
+ * @module gas/configImg/index
+ * @desc 瓦斯抽放泵的图表显示
  */
+
 import Chart from "./Chart";
 import centerLeft1 from "./centerLeft1";
 import dianliuChart from "./dianliuChart";
@@ -64,13 +65,15 @@ export default {
 <style scoped>
 .main1 {
   width: 100%;
-  height: 900px;
-  background-image: linear-gradient(
-    to right,
-    rgb(6, 19, 60) 0%,
-    rgb(1, 22, 105) 50%,
-    rgb(6, 19, 60) 100%
-  );
+  height: 845px;
+  background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%),
+    linear-gradient(
+      to top,
+      rgba(255, 255, 255, 0.4) 0%,
+      rgba(0, 0, 0, 0.25) 200%
+    );
+  /* 正片叠底模式。 */
+  background-blend-mode: multiply;
   position: relative;
 }
 .header {

src/views/gas/configImg/main.vue

@@ -1,8 +1,7 @@
 <template>
   <div id="apppp">
-    <headline title="瓦斯抽放系统图"></headline>
     <section class="mainbox">
-      
+
       <button @click="changeWebState(1)">查看</button>
       <button @click="changeWebState(2)">查看</button>
       <div class="motor1">
@@ -292,11 +291,16 @@
 </template>
 <script>
 /**
- * 瓦斯抽放系统图
- * @module main
+ * @module gas/configImg/main
+ * @desc 瓦斯抽放系统图
+ * @vue-data {Array} valvestate - 阀门状态
+ * @vue-data {Array} buttonstate - 瓦斯泵的启动/停止
+ * @vue-data {Object} tank -  水温/水位变化
+ * @vue-data {Array} waterpumpstate - 抽水泵状态
+ * @vue-computed {String} WebsocketIp - 套接字Ip
  */
 import { mapState } from "vuex";
-import headline from "@/common/headline"
+import headline from "@/common/headline";
 export default {
   data() {
     return {
@@ -377,7 +381,7 @@ export default {
   computed: {
     ...mapState(["websocketIP"]),
   },
-  components:{headline},
+  components: { headline },
   mounted() {
     let skt_motor1 = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/8`);
     this.initWebSocket(skt_motor1, "motor", 1);
@@ -387,27 +391,39 @@ export default {
     this.initWebSocket(skt_valve, "valve");
     let skt_pipe = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/41`);
     this.initWebSocket(skt_pipe, "pipe");
-    
+
     let interval = setInterval(() => {
-       // 水温 水位变化
+      // 水温 水位变化
       this.tank.temperature1 = this.getRandomNumWithDecimals(32, 40);
       this.tank.temperature2 = this.getRandomNumWithDecimals(32, 40);
-      this.tank.dept1 = this.getRandomNumWithDecimals(0.8,1.9);
-      this.tank.dept2 = this.getRandomNumWithDecimals(0.8,1.9);
+      this.tank.dept1 = this.getRandomNumWithDecimals(0.8, 1.9);
+      this.tank.dept2 = this.getRandomNumWithDecimals(0.8, 1.9);
       // 抽水泵状态
-      let pumpState1 = Math.random()>0.5?"true":"flase";
-      let pumpState2 = Math.random()>0.5?"true":"flase";
-      this.waterpumpstate=[];
+      let pumpState1 = Math.random() > 0.5 ? "true" : "flase";
+      let pumpState2 = Math.random() > 0.5 ? "true" : "flase";
+      this.waterpumpstate = [];
       this.waterpumpstate.push(pumpState1);
       this.waterpumpstate.push(pumpState2);
       // 阀门状态
-      var valveArr=[]
-      for(let i=0;i<10;i++){
-        valveArr[i]=Math.random()>0.5?"true":"flase";
-        
+      var valveArr = [];
+      for (let i = 0; i < 10; i++) {
+        valveArr[i] = Math.random() > 0.5 ? "true" : "flase";
       }
-      this.valvestate.splice(0, 10, valveArr[0], valveArr[1],valveArr[2],valveArr[3],valveArr[4],valveArr[5],valveArr[6],valveArr[7],valveArr[8],valveArr[9]);
-      
+      this.valvestate.splice(
+        0,
+        10,
+        valveArr[0],
+        valveArr[1],
+        valveArr[2],
+        valveArr[3],
+        valveArr[4],
+        valveArr[5],
+        valveArr[6],
+        valveArr[7],
+        valveArr[8],
+        valveArr[9]
+      );
+
       this.motor2.current = this.getRandomNum(0, 45);
       this.motor2.voltage = this.getRandomNum(0, 220);
       this.motor2.motortemperature = this.getRandomNum(0, 75);
@@ -418,7 +434,6 @@ export default {
       this.motor2.backshafttem = this.getRandomNum(0, 80);
       this.motor2.reducertem = this.getRandomNum(0, 85);
       this.motor2.oilpressure = this.getRandomNum(0, 200);
-
     }, 3000);
     this.$once("hook:beforeDestroy", () => {
       clearInterval(interval);
@@ -477,7 +492,7 @@ export default {
     getPipeData(data) {
       this.pipe = data[0];
     },
-     /**
+    /**
      * 初始化WebSocket连接
      * @function initWebSocket
      * @param {String} data 后端传来的数据
@@ -804,14 +819,16 @@ export default {
 #apppp {
   color: white;
   width: 1600px;
-  height: 900px;
   /* position: absolute; */
-  background-image: linear-gradient(
-    to right,
-    #06133c 0%,
-    #011669 50%,
-    #06133c 100%
-  );
+  height: 845px;
+  background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%),
+    linear-gradient(
+      to top,
+      rgba(255, 255, 255, 0.4) 0%,
+      rgba(0, 0, 0, 0.25) 200%
+    );
+  /* 正片叠底模式。 */
+  background-blend-mode: multiply;
 }
 
 h1,

src/views/mining/Monitor/CoalMining.vue

@@ -48,9 +48,12 @@
 
 <script>
 /**
- * 小车监控组件
- * @module CoalMining
- */
+   * @module mining/Monitor/CoalMining
+   * @desc 小车监控组件
+   * @vue-data {Number} carSpeed - 小车运行速度
+   * @vue-data {Number} hand - 小车左右摇臂高度
+   * @vue-computed {String} WebsocketIp - 套接字Ip
+   */
 import { mapState } from "vuex";
 export default {
   data() {
@@ -95,7 +98,6 @@ export default {
   methods: {
     /**
      * 获取小车速度、左摇臂、右摇臂高度
-     * @function getData
      * @param {String} data 后端传来的数据
      * @param {String} type 所需数据类型
      */
@@ -114,7 +116,6 @@ export default {
     },
     /**
      * 初始化webWebSocket连接
-     * @function initWebSocket
      */
     initWebSocket(websocket, type) {
       // 连接错误

src/views/mining/Monitor/Emulsion.vue

@@ -39,7 +39,10 @@
           ></div>
         </div>
       </div>
-      <div class="enter" style="width: 200px; justify-content: center">
+      <div
+        class="enter"
+        style="width: 200px; justify-content: center"
+      >
         <div class="block"></div>
       </div>
       <div class="liquid-box common-box">
@@ -55,44 +58,40 @@
           ></div>
         </div>
       </div>
-      <img class="first fan" src="~@/assets/img/fan.png" alt="" />
-      <img class="second fan" src="~@/assets/img/fan.png" alt="" />
+      <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: #f3db5c">{{ waterLevel.water }}</span
-        >cm</span
-      >
-      <span
-        >油箱油位<span style="color: #f3db5c">{{ waterLevel.oil }}</span
-        >cm</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">
-          {{ liquidFlow[1] }}cm^3/s</span
-        ></span
-      >
+      <span>水箱水位<span style="color: #f3db5c">{{ waterLevel.water }}</span>cm</span>
+      <span>油箱油位<span style="color: #f3db5c">{{ waterLevel.oil }}</span>cm</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">
+          {{ liquidFlow[1] }}cm^3/s</span></span>
     </div>
   </div>
 </template>
 
 <script>
 /**
- * 乳液自动化配比
  * @module Emulsion
+ * @desc 乳液自动化配比
+ * @vue-data {Number} totalLiquid - 液总用量
+ * @vue-data {Array.<Number>} liquidFlow - 液流量
+ * @vue-data {Array.<Number>} waterLevel - 乳化液位、油箱油位、水箱水位
+ * @vue-computed {String} WebsocketIp - 套接字Ip
  */
+
 import { mapState } from "vuex";
 export default {
   data() {
@@ -117,7 +116,6 @@ export default {
   methods: {
     /**
      * 获取乳液自动化配比相关数据
-     * @function getData
      * @param {String} data 后端传来的数据
      * @param {String} type 所需数据类型
      */
@@ -142,7 +140,6 @@ export default {
     },
     /**
      * 初始化webWebSocket连接
-     * @function initWebSocket
      */
     initWebSocket(websocket, type) {
       // 连接错误

src/views/mining/Monitor/Index.vue

@@ -34,8 +34,8 @@
 
 <script>
 /**
- * 采煤工作面系统图
- * @module index
+ * @module mining/Monitor/Index
+ * @desc 采煤工作面系统图
  */
 import Emulsion from "./Emulsion.vue";
 import errorRecording from "../../../components/mining/monitor/error_recording";
@@ -44,15 +44,6 @@ import safetyStatistics from "../../../components/mining/monitor/safety_statisti
 import CoalMining from "./CoalMining.vue";
 import bar from "./echarts/Bars.vue";
 export default {
-  /**
-   * Components 包含子组件
-   * @prop {Component} Emulsion 乳液自动化配比
-   * @prop {Component} CoalMining 小车监控组件
-   * @prop {Component} bar 支架压力监控
-   * @prop {Component} errorRecording 故障记录
-   * @prop {Component} processStatistics 生产统计
-   * @prop {Component} safetyStatistics 安全统计
-   */
   components: {
     Emulsion,
     CoalMining,
@@ -78,6 +69,7 @@ export default {
       rgba(255, 255, 255, 0.4) 0%,
       rgba(0, 0, 0, 0.25) 200%
     );
+  /* 正片叠底模式。 */
   background-blend-mode: multiply;
 }
 </style>

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

@@ -8,9 +8,13 @@
 
 <script>
 /**
- * 支架压力监控
- * @module Bars
- */
+   * @module mining/Monitor/Bars
+   * @desc 支架压力监控
+   * @vue-data {Object} myChart - Echarts实例
+   * @vue-data {Array} zhijiaId - 支架编号
+   * @vue-computed {Array} barData - 支架压力数值
+   */
+
 export default {
   name: "Bars",
   data() {
@@ -36,9 +40,9 @@ export default {
           type: "shadow",
         },
         formatter: (params) => {
-          if (params[0].data > 64) {
+          if (params[0].data > 39) {
             return params[0].marker + "压力过高:" + params[0].data;
-          } else if (params[0].data < 24) {
+          } else if (params[0].data < 26) {
             return params[0].marker + "压力过低:" + params[0].data;
           } else {
             return params[0].marker + "压力正常:" + params[0].data;
@@ -97,9 +101,9 @@ export default {
           itemStyle: {
             normal: {
               color: function (params) {
-                if (params.data > 64) {
+                if (params.data > 39) {
                   return "#FF6666";
-                } else if (params.data < 24) {
+                } else if (params.data < 26) {
                   return "#FFFF66";
                 } else {
                   return "#99CC66";

src/views/mining/envTest/externalFire.vue

@@ -1,12 +1,17 @@
 <template>
   <!-- 支架压力柱状图 -->
-  <div ref="bar" style="height: 150px; width: 400px; margin-left: 100px"></div>
+  <div
+    ref="bar"
+    style="height: 150px; width: 400px; margin-left: 100px"
+  ></div>
 </template>
 
 <script>
 /**
- * 外因火灾图表
- * @module externalFire
+ * @module mining/envTest/externalFire
+ * @desc 外因火灾图表
+ * @vue-data {Object} myChart - Echarts实例
+ * @vue-data {Object} option - Echarts配置项
  */
 export default {
   name: "Bars",

src/views/mining/envTest/index.vue

@@ -62,49 +62,95 @@
         <ul>
           <li>
             采煤机:
-            <div class="start" v-if="equipmentStatus[0]"></div>
-            <div class="stop" v-else></div>
+            <div
+              class="start"
+              v-if="equipmentStatus[0]"
+            ></div>
+            <div
+              class="stop"
+              v-else
+            ></div>
           </li>
           <li>
             胶带机:
-            <div class="start" v-if="equipmentStatus[1]"></div>
-            <div class="stop" v-else></div>
+            <div
+              class="start"
+              v-if="equipmentStatus[1]"
+            ></div>
+            <div
+              class="stop"
+              v-else
+            ></div>
           </li>
           <li>
             刮板机:
-            <div class="start" v-if="equipmentStatus[2]"></div>
-            <div class="stop" v-else></div>
+            <div
+              class="start"
+              v-if="equipmentStatus[2]"
+            ></div>
+            <div
+              class="stop"
+              v-else
+            ></div>
           </li>
         </ul>
       </div>
     </div>
     <div class="right">
-      <div class="center" style="display: flex">
+      <div
+        class="center"
+        style="display: flex"
+      >
         <span>水害</span>
         <water-storage title="工作区蓄水性"></water-storage>
         <water-level></water-level>
       </div>
-      <div class="center" style="display: flex">
+      <div
+        class="center"
+        style="display: flex"
+      >
         <span>火灾</span>
         <internal-fire></internal-fire>
         <external-fire></external-fire>
       </div>
-      <div class="center" style="display: flex">
+      <div
+        class="center"
+        style="display: flex"
+      >
         <span>气体</span>
         <div style="margin-left: 60px">
-          <pie-chart :value="18" :totalValue="30" title="O2"></pie-chart>
+          <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>
+          <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>
+          <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>
+          <pie-chart
+            :value="2.0"
+            :totalValue="6"
+            title="CO"
+          ></pie-chart>
         </div>
       </div>
-      <div class="center" style="display: flex">
+      <div
+        class="center"
+        style="display: flex"
+      >
         <span>矿压</span>
         <div style="height: 100%; width: 400px">
           <ul>
@@ -126,17 +172,28 @@
           <mine-pressure></mine-pressure>
         </div>
       </div>
-      <div class="center" style="display: flex">
+      <div
+        class="center"
+        style="display: flex"
+      >
         <span>粉尘</span>
-        <div style="margin-left: 100px; margin-top: 40px">
-          <pie-chart :value="90" title="区域评分"></pie-chart>
+        <div style="margin-left: 200px; margin-top: 40px">
+          <pie-chart
+            :value="2"
+            :totalValue="10"
+            title="质量浓度"
+          ></pie-chart>
         </div>
-        <div style="margin-left: 160px; margin-top: 40px">
-          <pie-chart :value="2" :totalValue="10" title="风速"></pie-chart>
+        <div style="margin-left: 300px; margin-top: 40px">
+          <pie-chart
+            :value="2"
+            :totalValue="10"
+            title="颗粒浓度"
+          ></pie-chart>
         </div>
-        <div style="margin-left: 240px; margin-top: 40px">
+        <!-- <div style="margin-left: 240px; margin-top: 40px">
           <pie-chart :value="40.5" title="粉尘数值"></pie-chart>
-        </div>
+        </div> -->
       </div>
     </div>
   </div>
@@ -144,8 +201,14 @@
 
 <script>
 /**
- * 采煤工作面环境监测
- * @module index
+ * @module mining/envTest/index
+ * @desc 采煤工作面环境监测
+ * @vue-data {Object} workInfo - 工作面信息
+ * @vue-data {Object} safeState - 安全状态
+ * @vue-data {Object} workCycle - 作业循环
+ * @vue-data {Object} process - 工艺进度
+ * @vue-data {Object} equipmentStatus - 设备状态
+ * @vue-data {Object} minePressure - 矿压情况
  */
 import waterStorage from "@/views/mining/envTest/waterStorage";
 import waterLevel from "@/views/mining/envTest/waterLevel";
@@ -178,11 +241,11 @@ export default {
         coal: 8,
       },
       equipmentStatus: [1, 1, 1],
-      minePressure:{
+      minePressure: {
         resistance: 0,
         state: 0,
-        compliance: 0
-      }
+        compliance: 0,
+      },
     };
   },
   mounted() {
@@ -220,7 +283,7 @@ export default {
       clearInterval(interval);
     });
   },
-   /**
+  /**
    * Components 包含子组件
    * @prop {Component} waterStorage 工作区蓄水图
    * @prop {Component} waterLevel 工作区水害图
@@ -271,7 +334,7 @@ export default {
     border-bottom: #5ddcf8 1px solid;
     height: 40px;
     width: 100%;
-    font-size: 20px;
+    font-size: 18px;
     line-height: 2;
     padding: 5px;
     font-weight: 500;
@@ -324,13 +387,13 @@ export default {
   width: 70%;
   span {
     border-bottom: #5ddcf8 1px solid;
-    height: 40px;
+    height: 37px;
     width: 50px;
-    font-size: 25px;
-    right: 550px;
-    // line-height: 2;
+    font-size: 22px;
+    right: 600px;
+    line-height: 1.7;
     // padding: 5px;
-    font-weight: 500;
+    // font-weight: 50;
     color: #4adefe;
     position: absolute;
   }

src/views/mining/envTest/internalFire.vue

@@ -5,9 +5,12 @@
 
 <script>
 /**
- * 内因火灾图表
- * @module internalFire
+ * @module mining/envTest/internalFire
+ * @desc 内因火灾图表
+ * @vue-data {Object} myChart - Echarts实例
+ * @vue-data {Object} option - Echarts配置项
  */
+
 export default {
   name: "Bars",
   data() {

src/views/mining/envTest/minePressure.vue

@@ -1,12 +1,14 @@
 <template>
-  <!-- 支架压力柱状图 -->
+  <!-- 矿压柱状图 -->
   <div ref="bar" style="height: 150px; width: 400px; margin-left: 40px"></div>
 </template>
 
 <script>
 /**
- * 瓦斯抽放系统图
- * @module main
+ * @module mining/envTest/minePressure
+ * @desc 矿压柱状图
+ * @vue-data {Object} myChart - Echarts实例
+ * @vue-data {Object} option - Echarts配置项
  */
 export default {
   name: "Bars",

src/views/mining/envTest/waterLevel.vue

@@ -5,8 +5,10 @@
 
 <script>
 /**
- * 工作区水害图
- * @module waterLevel
+ * @module mining/envTest/waterLevel
+ * @desc 工作区水害图
+ * @vue-data {Object} myChart - Echarts实例
+ * @vue-data {Object} option - Echarts配置项
  */
 export default {
   name: "Bars",
@@ -21,6 +23,7 @@ export default {
           textStyle: {
             fontWeight: "normal", //标题颜色
             color: "#4ADEFE",
+            fontSize:"20px",
           },
         },
         tooltip: {

src/views/mining/envTest/waterStorage.vue

@@ -6,8 +6,10 @@
 
 <script>
 /**
- * 工作区蓄水图
- * @module waterStorage
+ * @module mining/envTest/waterStorage
+ * @desc 工作区蓄水图
+ * @vue-data {Object} myChart - Echarts实例
+ * @vue-data {Object} option - Echarts配置项
  */
 export default {
   props: {

src/views/mining/supporting/suppEchart.vue

@@ -7,9 +7,15 @@
 
 <script>
 /**
- * 顶板压力图
- * @module suppEchart
+ * @module mining/supporting/suppEchart
+ * @desc 顶板压力图
+ * @vue-data {Object} myChart - Echarts实例
+ * @vue-data {Object} option - Echarts配置项
+ * @vue-data {Array} xData - 图表横坐标
+ * @vue-data {Array} xData - 图表纵坐标
+ * @vue-computed {String} WebsocketIp - 套接字Ip
  */
+
 import { mapState } from "vuex";
 
 export default {
@@ -19,7 +25,7 @@ export default {
       barData: [],
       currentChartId: 1,
       xData: new Array(30).fill("-"),
-      yData: new Array(30).fill("-"),
+      xData: new Array(30).fill("-"),
       count: 0,
       myChart: null,
       option: {
@@ -84,7 +90,6 @@ export default {
   methods: {
     /**
      * 获取各个支架顶板压力值
-     * @function getData
      */
     getData() {
       var count = 0;

src/views/mining/supporting/supporting.vue

@@ -18,8 +18,8 @@
 </template>
 <script>
 /**
- * 采煤工作面支护系统
- * @module supporting
+ * @module mining/supporting/supporting
+ * @desc 采煤工作面支护系统
  */
 import suppEchart from "./suppEchart";
 import tuiyiEchart from "./tuiyiEchart";

src/views/mining/supporting/tuiyiEchart.vue

@@ -7,8 +7,13 @@
 
 <script>
 /**
- * 推移行程图
- * @module tuiyiEchart
+ * @module mining/supporting/tuiyiEchart
+ * @desc 推移行程图
+ * @vue-data {Object} myChart - Echarts实例
+ * @vue-data {Object} option - Echarts配置项
+ * @vue-data {Array} xData - 图表横坐标
+ * @vue-data {Array} xData - 图表纵坐标
+ * @vue-computed {String} WebsocketIp - 套接字Ip
  */
 import { mapState } from "vuex";
 
@@ -84,7 +89,6 @@ export default {
   methods: {
     /**
      * 获取各个支架推移行程值
-     * @function getData
      */
     getData() {
       var count = 0;

src/views/monitor/configImg/configImg.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="detail">
-    <div><headline title="安全监控系统系统图"></headline></div>
     <h2>监控区域</h2>
     <el-select style="margin-top: 10px" v-model="area" @change="selectArea">
       <el-option
@@ -206,13 +205,15 @@ export default {
 <style scoped>
 .detail {
   width: 100%;
-  height: 900px;
-  position: relative;
-  background-image: linear-gradient(
-    to right,
-    #06133c 0%,
-    #011669 5045 #06133c 100%
-  );
+  height: 845px;
+  background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%),
+    linear-gradient(
+      to top,
+      rgba(255, 255, 255, 0.4) 0%,
+      rgba(0, 0, 0, 0.25) 200%
+    );
+    /* 正片叠底模式。 */
+  background-blend-mode: multiply;
 }
 .detail h2 {
   /* color: #F3DB5C;  */

src/views/monitor/configImg/safetyAssess.vue

@@ -1,6 +1,6 @@
 <template>
   <div style="padding: 6px;">
-    <h1 class="top_title">总体安全评价</h1>
+    <span class="top_title">总体安全评价</span>
     <!-- <h2>总体安全评价</h2> -->
     <el-row style="margin-left:25px">
       <el-col :span="8"

src/views/power_supply/configImg/TablePage.vue

@@ -20,13 +20,14 @@ export default {
 <style scoped>
 .com-page {
   width: 100%;
-  height: 900px;
-  background-image: linear-gradient(
-    to right,
-    rgb(6, 19, 60) 0%,
-    rgb(1, 22, 105) 50%,
-    rgb(6, 19, 60) 100%
-  );
-  position: relative;
+  height: 845px;
+  background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%),
+    linear-gradient(
+      to top,
+      rgba(255, 255, 255, 0.4) 0%,
+      rgba(0, 0, 0, 0.25) 200%
+    );
+  /* 正片叠底模式。 */
+  background-blend-mode: multiply;
 }
 </style>

src/views/power_supply/dataBoard/centerLeft1.vue

@@ -1,7 +1,7 @@
   <template>
   <!-- style="padding:6px;border:3px solid #96c2f1;background:#eff7ff;height:180px;margin-top:60px" -->
   <div class="table-wrapper main">
-    <span class="title">故障记录</span>
+    <span class="top_title">故障记录</span>
     <el-table
       :data="tableData"
       max-height="160"
@@ -9,13 +9,13 @@
       <el-table-column
         prop="name"
         label="名称"
-        width="180"
+        width="220"
       >
       </el-table-column>
       <el-table-column
         prop="problem"
         label="记录"
-        width="180"
+        width="220"
       >
       </el-table-column>
     </el-table>

src/views/power_supply/dataBoard/centerRight1.vue

@@ -1,10 +1,10 @@
   <template>
   <div class="table-wrapper main">
-    <span class="title">启停记录</span>
+    <span class="top_title">启停记录</span>
     <el-table :data="tableData" style="width: 100%" max-height="160">
-      <el-table-column prop="name" label="瓦斯泵本体设备" width="180">
+      <el-table-column prop="name" label="瓦斯泵本体设备" width="220">
       </el-table-column>
-      <el-table-column prop="problem" label="启停" width="180">
+      <el-table-column prop="problem" label="启停" width="220">
       </el-table-column>
     </el-table>
   </div>

src/views/power_supply/dataBoard/dataBoard.vue

@@ -2,7 +2,7 @@
   <div class="main1">
     <div class="header">
       <div class="select-veido">
-        <el-select 
+        <el-select
           style="margin-top: 10px"
           v-model="currentChartId"
           placeholder="请选择"
@@ -39,7 +39,7 @@
             unit="A"
             type="dianliu_after"
           ></rightChart>
-          
+
         </div>
       </div>
     </el-row>
@@ -47,7 +47,7 @@
 </template>
 
 <script>
-import oneline from '@/common/oneline'
+import oneline from "@/common/oneline";
 import centerLeft1 from "./centerLeft1";
 import centerRight1 from "./centerRight1";
 import leftChart from "@/views/power_supply/dataBoard/leftChart";
@@ -96,7 +96,7 @@ export default {
     centerRight1,
     leftChart,
     rightChart,
-    oneline
+    oneline,
   },
 };
 </script>
@@ -119,14 +119,15 @@ export default {
 }
 .main1 {
   width: 100%;
-  height: 900px;
-  position: relative;
-  background-image: linear-gradient(
-    to right,
-    rgb(6, 19, 60) 0%,
-    rgb(1, 22, 105) 50%,
-    rgb(6, 19, 60) 100%
-  );
+  height: 845px;
+  background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%),
+    linear-gradient(
+      to top,
+      rgba(255, 255, 255, 0.4) 0%,
+      rgba(0, 0, 0, 0.25) 200%
+    );
+  /* 正片叠底模式。 */
+  background-blend-mode: multiply;
 }
 .header {
   margin: 0 auto;

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

@@ -125,13 +125,14 @@ export default {
 <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%
-  );
+  height: 845px;
+  background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%),
+    linear-gradient(
+      to top,
+      rgba(255, 255, 255, 0.4) 0%,
+      rgba(0, 0, 0, 0.25) 200%
+    );
+    /* 正片叠底模式。 */
+  background-blend-mode: multiply;
 }
 </style>

src/views/tunnelling/tunnelling.vue

@@ -20,8 +20,9 @@
 
 <script>
 /**
- * 掘进系统tab标签
- * @module tunnelling
+ * @module tunnelling/tunnelling
+ * @desc 掘进系统tab标签
+ * @vue-data {String} activeName - 选中标签
  */
 import zutai from "./zutai";
 import dataStandard from "./dataStandard/dataStandard";

src/views/tunnelling/zutai.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="main1">
       
-     <el-row style="margin-top: 0px">
-    <headline title="掘进系统图"></headline>
-    </el-row>
+  
     <div class="datas">
       <div class="data_left">
         <div class="left_top">
@@ -120,9 +118,15 @@
 
 <script>
 /**
- * 掘进系统图
- * @module zutai
+ * @module tunnelling/zutai
+ * @desc 掘进系统图
+ * @vue-data {Object} myChart - Echarts实例
+ * @vue-data {Object} option - Echarts配置项
+ * @vue-data {Array} xData - 图表横坐标
+ * @vue-data {Array} xData - 图表纵坐标
+ * @vue-computed {String} WebsocketIp - 套接字Ip
  */
+
 import ruler from "@/components/tunneling/ruler.vue";
 import hard from "@/components/tunneling/hard.vue";
 import dashBoard from "@/components/tunneling/dashBoard.vue";
@@ -188,13 +192,15 @@ export default {
 .main1 {
   position: relative;
   width: 100%;
-  height: 900px;
-  background-image: linear-gradient(
-    to right,
-    rgb(6, 19, 60) 0%,
-    rgb(1, 22, 105) 50%,
-    rgb(6, 19, 60) 100%
-  );
+  height: 845px;
+  background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%),
+    linear-gradient(
+      to top,
+      rgba(255, 255, 255, 0.4) 0%,
+      rgba(0, 0, 0, 0.25) 200%
+    );
+    /* 正片叠底模式。 */
+  background-blend-mode: multiply;
   background-size: cover;
   /* height: 880px; */
   min-width: 1386px;

src/views/ventilate/configImg/configImg.vue

@@ -3,8 +3,10 @@
     <el-container>
       <el-header>
         <div class="image">
-          <h2>通风系统系统图</h2>
-          <img src="@/assets/img/风机组态图.png" />
+          <img
+            style="margin-top:15px;padding-bottom:5px; "
+            src="@/assets/img/风机组态图.png"
+          />
         </div>
       </el-header>
       <el-main>
@@ -294,13 +296,15 @@ export default {
 <style scoped>
 .main {
   width: 100%;
-  height: 900px;
-  background-image: linear-gradient(
-    to right,
-    rgb(6, 19, 60) 0%,
-    rgb(1, 22, 105) 50%,
-    rgb(6, 19, 60) 100%
-  );
+  height: 845px;
+  background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%),
+    linear-gradient(
+      to top,
+      rgba(255, 255, 255, 0.4) 0%,
+      rgba(0, 0, 0, 0.25) 200%
+    );
+  /* 正片叠底模式。 */
+  background-blend-mode: multiply;
   position: relative;
 }
 .image {

src/views/ventilate/dataBoard/dataBoard.vue

@@ -188,14 +188,15 @@ export default {
 }
 .main {
   width: 100%;
-  height: 900px;
-  position: relative;
-  background-image: linear-gradient(
-    to right,
-    rgb(6, 19, 60) 0%,
-    rgb(1, 22, 105) 50%,
-    rgb(6, 19, 60) 100%
-  );
+  height: 845px;
+  background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%),
+    linear-gradient(
+      to top,
+      rgba(255, 255, 255, 0.4) 0%,
+      rgba(0, 0, 0, 0.25) 200%
+    );
+  /* 正片叠底模式。 */
+  background-blend-mode: multiply;
   /* background-color: antiquewhite; */
 }
 .header {
@@ -273,6 +274,7 @@ export default {
 .bottom_right {
   width: 500px;
   height: 210px;
+   margin-top: -10px;
   background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
   background-size: 100%;
 }

src/views/ventilate/dataBoard/faultAlarm.vue

@@ -1,7 +1,6 @@
   <template>
-  <!-- style="padding:6px;border:3px solid #96c2f1;background:#eff7ff;height:180px;margin-top:60px" -->
   <div class="table-wrapper">
-    <span class="title">故障报警</span>
+    <span class="top_title">故障报警</span>
     <el-table :data="tableData">
       <el-table-column
         prop="name"
@@ -50,8 +49,8 @@ export default {
 </script>
 <style lang='scss' scoped>
 .table-wrapper {
-  padding-top: 20px;
-  margin-left: 90px;
+  padding-top: 15px;
+  margin-left: 60px;
   height: 80%;
   margin-top: 10px;
   ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
@@ -78,13 +77,13 @@ 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;
 }
@@ -92,6 +91,10 @@ export default {
   /* font-weight:; */
   /* padding-bottom: 15px; */
   font-size: 18px;
-  color: #4ADEFE;
+  color: #4adefe;
+}
+.table-wrapper ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
 }
 </style>

src/views/ventilate/dataBoard/runningMsg.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="table-wrapper">
-    <span class="title">运行操作</span>
+    <span class="top_title">运行操作</span>
     <el-table :data="tableData" style="width: 100%" max-height="160px">
       <el-table-column prop="name" label="瓦斯泵本体设备" width="180">
       </el-table-column>
@@ -43,10 +43,10 @@ export default {
 </script>
 <style lang="scss" scoped>
 .table-wrapper {
-  // padding-top: 20px;
-  // margin-left: 110px;
+  padding-top: 15px;
+  margin-left: 60px;
   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;