修改了瓦斯抽放和主运输系统的样式

src/assets/scss/index.css

@@ -1,83 +1,56 @@
-body {
-  --width: 1226px;
-  --header-height: 50px;
-  --mainbox-height: 659px;
-}
-
-#apppp * {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-#apppp header {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  height: var(--header-height);
-  background-color: #00ffaa;
-}
-#apppp header h2 {
-  font-size: 25px;
-  text-align: center;
-  line-height: 40px;
-  color: #1900ff;
-}
-#apppp header div {
-  flex: 3;
-  font-size: 20px;
-  line-height: 40px;
-  background-color: pink;
-}
 #apppp .mainbox {
   position: relative;
   background: url(../img/gas/back1.png) no-repeat;
-  background-size: 90%;
-  background-position: 50px 50px;
-  display: flex;
-  width: var(--width);
-  left: 70px;
-  height: var(--mainbox-height);
+  background-size: contain;
+  overflow: hidden;
+  width: 1600px;
+  height: 750px;
+  color: white;
+  border: 1px solid white;
 }
 #apppp .mainbox button {
   position: absolute;
+  color: black;
+  width: 30px;
+  height: 82px;
 }
 #apppp .mainbox button:nth-child(1) {
-  background-color: pink;
-  width: 20px;
-  height: 50px;
-  left: 939px;
-  top: 314px;
+  left: 1235px;
+  top: 353px;
 }
 #apppp .mainbox button:nth-child(2) {
-  background-color: pink;
-  width: 20px;
-  height: 50px;
-  left: 939px;
-  top: 480px;
+  left: 1236px;
+  top: 592px;
 }
 #apppp .mainbox .motor1 { 
   position: absolute;
-  background-color: pink;
-  left: 1100px;
+  border: 1px solid grey;
+  border-radius: 5%;
+  /* left: 1295px; */
+  right: 35px;
   top: 0px;
-  border: 1px solid #000;
   width: 270px;
-  height: 140px;
+  height: 200px;
   display: flex;
 }
 #apppp .mainbox .motor1 h3 {
   position: absolute;
-  font-size: 12px;
+  left: 5px;
+  font-size: 15px;
 }
-#apppp .mainbox .motor1 div {
+#apppp .mainbox .motor1 div{ 
   position: relative;
-  top: 15px;
+  left: 5px;
+  margin-top: 5px;
+  top: 10px;
   display: flex;
-  font-size: 11px;
+}
+#apppp .mainbox .motor1 div section div {
+  display: flex;
+  font-size: 12px;
   margin-bottom: 5px;
 }
-#apppp .mainbox .motor1 div p {
-  border: 1px solid #000;
+#apppp .mainbox .motor1 div section div p {
   background-color: green;
   margin-right: 10px;
   margin-left: 5px;
@@ -86,31 +59,34 @@ body {
 }
 #apppp .mainbox .motor2 {
   position: absolute;
+  border: 1px solid grey;
+  border-radius: 5%;
   overflow: hidden;
-  background-color: pink;
-  left: 1100px;
-  top: 450px;
-  border: 1px solid #000;
+  /* left: 1300px; */
+  right: 30px;
+  top: 552px;
   width: 270px;
-  height: 140px;
+  height: 193px;
   display: flex;
 }
 #apppp .mainbox .motor2 h3 {
   position: absolute;
-  font-size: 12px;
+  left: 5px;
+  font-size: 15px;
 }
 #apppp .mainbox .motor2 div {
   position: relative;
+  margin-top: 5px;
+  left: 3px;
   top: 10px;
   display: flex;
 }
 #apppp .mainbox .motor2 div section div {
   display: flex;
-  font-size: 11px;
+  font-size: 12px;
   margin-bottom: 5px;
 }
 #apppp .mainbox .motor2 div section div p {
-  border: 1px solid #000;
   background-color: green;
   margin-right: 10px;
   margin-left: 5px;
@@ -120,12 +96,11 @@ body {
 #apppp .mainbox .pipeline {
   position: absolute;
   display: flex;
-  left: 500px;
+  left: 576px;
   top: 60px;
-  width: 300px;
-  height: 50px;
-  background-color: pink;
-  border: 1px solid black;
+  width: 455px;
+  height: 51px;
+  border: 1px solid white;
 }
 #apppp .mainbox .pipeline div {
   flex: 3;
@@ -139,50 +114,43 @@ body {
 }
 #apppp .mainbox .pipeline div p {
   text-align: center;
-  background-color: #00f7ff;
-  border: 1px solid black;
+  background-color: green;
   font-size: 12px;
 }
 #apppp .mainbox .waterpump {
+  border: 1px solid grey;
+  border-radius: 5%;
   position: absolute;
   overflow: hidden;
-  background-color: pink;
-  left: 280px;
-  top: 210px;
-  border: 1px solid #000;
-  width: 200px;
+  left: 327px;
+  top: 163px;
+  width: 163px;
 }
 #apppp .mainbox .waterpump h3 {
-  font-size: 15px;
-  margin-bottom: 10px;
-  margin-top: 10px;
+  font-size: 17px;
 }
 #apppp .mainbox .waterpump div {
   display: flex;
-  font-size: 10px;
-  margin-right: 20px;
-  margin-bottom: 5px;
+  font-size: 14px;
 }
 #apppp .mainbox .waterpump div p {
-  border: 1px solid #000;
-  background-color: green;
+  color: black;
   margin-left: 20px;
-  width: 5rem;
+  width: 80px;
   text-align: center;
 }
 #apppp .mainbox .waterpump div p:nth-child(1) {
-  background: url(../img/gas/button\(open\).png);
+  background-color: green;
 }
 #apppp .mainbox .waterpump div p:nth-child(2) {
-  background: url(../img/gas/button\(close\).png);
+  background-color: #E71B64;
 }
 #apppp .mainbox .tank1 {
   width: 75px;
   position: absolute;
-  background-color: #73deff;
-  border: 1px solid #000;
-  left: 130px;
-  top: 240px;
+  background-color: green;
+  left: 140px;
+  top: 278px;
 }
 #apppp .mainbox .tank1 div {
   display: flex;
@@ -191,10 +159,9 @@ body {
 #apppp .mainbox .tank2 {
   width: 75px;
   position: absolute;
-  background-color: #73deff;
-  border: 1px solid #000;
-  left: 130px;
-  top: 430px;
+  background-color: green;
+  left: 142px;
+  top: 530px;
 }
 #apppp .mainbox .tank2 div {
   display: flex;
@@ -202,11 +169,12 @@ body {
 }
 #apppp .mainbox .tower {
   position: absolute;
+  border: 1px solid grey;
+  border-radius: 5%;
   overflow: hidden;
-  background-color: pink;
   left: 150px;
-  top: 90px;
-  border: 1px solid #000;
+  top: 80px;
+  height: 30px;
   width: 140px;
 }
 #apppp .mainbox .tower div {
@@ -218,119 +186,110 @@ body {
 }
 #apppp .mainbox .tower div p {
   margin-left: 10px;
-  border: 1px solid #000;
+  color: black;
   background-color: green;
   margin-right: 1px;
   width: 50px;
   text-align: center;
 }
 #apppp .mainbox .tower div p:nth-child(1) {
-  background: url(../img/gas/button\(open\).png);
+  background-color: green;
 }
 #apppp .mainbox .tower div p:nth-child(2) {
-  background: url(../img/gas/button\(close\).png);
+  background-color: #E71B64;
 }
 #apppp .mainbox .pumps {
   position: absolute;
-  background-color: pink;
-  left: 1100px;
-  top: 300px;
-  border: 0.0125rem solid #000;
-  width: 200px;
+  border: 1px solid grey;
+  border-radius: 5%;
+  left: 1090px;
+  top: 163px;
+  width: 163px;
 }
 #apppp .mainbox .pumps h3 {
-  font-size: 15px;
-  margin-bottom: 0.1875rem;
-  margin-top: 0.1rem;
+  font-size: 17px;
 }
 #apppp .mainbox .pumps div {
   display: flex;
-  font-size: 10px;
-  margin-bottom: 0.0875rem;
+  font-size: 14px;
 }
 #apppp .mainbox .pumps div p {
-  border: 0.0125rem solid #000;
   background-color: green;
-  margin-right: 0.1rem;
+  color: black;
   margin-left: 20px;
-  width: 5rem;
+  width: 80px;
   text-align: center;
 }
 #apppp .mainbox .pumps div p:nth-child(1) {
-  background: url(../img/gas/button\(open\).png);
+  background-color: green;
 }
 #apppp .mainbox .pumps div p:nth-child(2) {
-  background: url(../img/gas/button\(close\).png);
+  background-color: #E71B64;
 }
-#apppp .mainbox .valveitem1 img {
-  width: 50px;
+#apppp .mainbox img{
+  position: relative;
+  width: 69px;
 }
 #apppp .mainbox .valveitem1 img:nth-child(1) {
-  position: relative;
-  left: 168px;
-  top: 291px;
+  position: absolute;
+  left: 165px;
+  top: 338px;
 }
 #apppp .mainbox .valveitem1 img:nth-child(2) {
-  width: 50px;
-  position: relative;
-  left: 109px;
-  top: 487px;
+  position: absolute;
+  left: 151px;
+  top: 610px;
 }
 #apppp .mainbox .valveitem2 img {
-  width: 40px;
+  position: absolute;
+  width: 54px;
+  left: 499px;
 }
 #apppp .mainbox .valveitem2 img:nth-child(1) {
-  position: relative;
-  left: 307px;
-  top: 312px;
+  top: 367px;
 }
 #apppp .mainbox .valveitem2 img:nth-child(2) {
-  position: relative;
-  left: 268px;
-  top: 373px;
+  top: 451px;
 }
 #apppp .mainbox .valveitem2 img:nth-child(3) {
-  position: relative;
-  left: 226px;
-  top: 441px;
+  top: 546px;
 }
 #apppp .mainbox .valveitem2 img:nth-child(4) {
-  position: relative;
-  left: 192px;
-  top: 501px;
+  top: 629px;
+  left: 505px;
 }
 #apppp .mainbox .valveitem4 img {
-  width: 0.85rem;
+  position: absolute;
+  width: 79px;
 }
 #apppp .mainbox .valveitem4 img:nth-child(1) {
-  position: relative;
-  width: 50px;
-  left: 494px;
-  top: 202px;
+  left: 975px;
+  top: 208px;
 }
 #apppp .mainbox .valveitem4 img:nth-child(2) {
-  width: 60px;
-  position: relative;
-  left: 278px;
-  top: 229px;
+  left: 751px;
+  top: 251px;
 }
 #apppp .mainbox .valveitem5 img {
-  width: 50px;
+  position: absolute;
+  width: 69px;
 }
 #apppp .mainbox .valveitem5 img:nth-child(1) {
-  position: relative;
-  left: 626px;
-  top: 208px;
+  left: 1318px;
+  top: 227px;
 }
 #apppp .mainbox .valveitem5 img:nth-child(2) {
-  position: relative;
-  width: 50px;
-  left: 586px;
-  top: 373px;
+  left: 1329px;
+  top: 451px;
 }
 #apppp {
-  width: 100%;
-  height: 100%;
+  color: white;
+  width: 1600px;
+  height: 750px;
   /* position: absolute; */
-  background-color: #2471ff;
+  background-image: linear-gradient(to right, #06133c 0%, #011669 50%, #06133c 100%);;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: white;
 }

src/components/process_monitoring/WarningInfo.vue

@@ -62,7 +62,12 @@ export default {
     };
   },
   mounted() {
-    this.init();
+    // this.init();
+    setInterval(() => {
+      this.infoList.forEach((item) => {
+        item.info = Math.round(Math.random()) ? "1" : "0";
+      })
+    }, 1000);
   },
   methods: {
     initWebSocket() {

src/store/index.js

@@ -5,7 +5,7 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
-    websocketIP: "10.170.34.134:8081",
+    websocketIP: "10.170.16.208:8081",
   },
   mutations: {
 

src/views/Home.vue

@@ -3,12 +3,12 @@
     <el-row class="tac">
       <el-col :span="2">
         <!-- style="width: 110px;height: 800px;background-color: #409eff;" -->
-        <div style="width: 110px; height: 800px; background-color: #409eff">
+        <div style="width: 110px; height: 800px; background-color: white">
           <div
             style="
               margin-left: 20px;
-              background-color: #3f85ed;
-              width: 53px;
+              background-color: grey;
+              width: 120px;
               height: 30px;
               position: relative;
               border-radius: 5px;
@@ -19,9 +19,9 @@
               slot="title"
               style="
                 color: #00ffff;
-                font-size: 10px;
+                font-size: 15px;
                 position: absolute;
-                top: 27%;
+                left: 25%;
                 text-align: center;
               "
               >系统列表</span
@@ -41,12 +41,12 @@
               <el-menu-item :index="item.path">
                 <div
                   style="
-                    background-color: #3f85ed;
-                    width: 53px;
+                    background-color: #C0C0C0;
+                    width: 120px;
                     height: 53px;
                     position: relative;
-                    border-radius: 5px;
-                    border: 2px solid #fff;
+                    border-radius: 10px;
+                    border: 1px solid grey;
                   "
                 >
                   <img
@@ -54,10 +54,9 @@
                       width: 30px;
                       height: 30px;
                       text-align: center;
-                      position: absolute;
-                      left: 40%;
-                      top: 39%;
-                      transform: translate(-50%, -50%);
+                      position: relative;
+                      left: 5%;
+                      top: -5%;
                     "
                     :src="imgSys[item.id]"
                     alt="图片"
@@ -65,10 +64,10 @@
                   <span
                     slot="title"
                     style="
-                      color: white;
-                      font-size: 10px;
-                      position: absolute;
-                      top: 27%;
+                      color: black;
+                      font-size: 12px;
+                      position: relative;
+                      left: 5px;
                       text-align: center;
                     "
                     >{{ item.name }}</span
@@ -96,25 +95,25 @@
       <!-- 右侧边栏 -->
 
       <el-col :span="2">
-        <div style="width: 110px; height: 800px; background-color: #409eff">
+        <div style="width: 110px; height: 800px; background-color: white">
           <div
             style="
               margin-left: 20px;
-              background-color: #3f85ed;
-              width: 53px;
-              height: 40px;
+              background-color: grey;
+              width: 120px;
+              height: 30px;
               position: relative;
               border-radius: 5px;
-              border: 1px solid #0033cc;
+              border: 2px solid #fff;
             "
           >
             <span
               slot="title"
               style="
                 color: #00ffff;
-                font-size: 10px;
+                font-size: 15px;
                 position: absolute;
-                top: 27%;
+                left: 25%;
                 text-align: center;
               "
               >应用列表</span
@@ -134,12 +133,12 @@
               <el-menu-item :index="item.path" >
                 <div
                   style="
-                    background-color: #3f85ed;
-                    width: 53px;
+                    background-color: #B3B0DC;
+                    width: 120px;
                     height: 53px;
                     position: relative;
-                    border-radius: 5px;
-                    border: 2px solid #fff;
+                    border-radius: 10px;
+                    border: 1px solid grey;
                   "
                 >
                   <img
@@ -147,10 +146,9 @@
                       width: 40px;
                       height: 40px;
                       text-align: center;
-                      position: absolute;
-                      left: 40%;
-                      top: 39%;
-                      transform: translate(-50%, -50%);
+                      position: relative;
+                      left: 1%;
+                      top: -5%;
                     "
                     :src="imgApp[item.id]"
                     alt="图片"
@@ -158,10 +156,10 @@
                   <span
                     slot="title"
                     style="
-                      color: white;
-                      font-size: 10px;
-                      position: absolute;
-                      top: 27%;
+                      color: black;
+                      font-size: 12px;
+                      position: relative;
+                      left: 2px;
                       text-align: center;
                     "
                     >{{ item.name }}</span

src/views/gas/configImg/main.vue

@@ -1,60 +1,58 @@
 <template>
   <div id="apppp">
-    <header>
-      <h2>瓦斯抽放系统</h2>
-    </header>
-
     <section class="mainbox">
       <button @click="changeWebState(1)">查看</button>
       <button @click="changeWebState(2)">查看</button>
       <div class="motor1">
         <h3>电机1:</h3>
-        <section>
-          <div>
-            电机电流
-            <p>{{ motor1.dianjidianliui_after }}A</p>
-          </div>
-          <div>
-            电机电压
-            <p>{{ motor1.dianjidianyau_after }}V</p>
-          </div>
-          <div>
-            抽放泵本体温度
-            <p>{{ buttonstate[0].temperature }}℃</p>
-          </div>
-          <div>
-            减速机轴温
-            <!-- <p>{{ motor1.reducertem }}℃</p> -->
-          </div>
-          <div>
-            油泵压力
-            <!-- <p>
-              {{ motor1.dianjidianyau_after }}
-            </p> -->
-          </div>
-        </section>
-        <section>
-          <div>
-            A相绕组温度
-            <p>{{ motor1.dianjiaxiangraozuwendu_after }}℃</p>
-          </div>
-          <div>
-            B相绕组温度
-            <p>{{ motor1.dianjibxiangraozuwendu_after }}℃</p>
-          </div>
-          <div>
-            C相绕组温度
-            <p>{{ motor1.dianjicxiangraozuwendu_after }}℃</p>
-          </div>
-          <div>
-            电机前轴温度
-            <p>{{ motor1.dianjiqianzhouwen_after }}℃</p>
-          </div>
-          <div>
-            电机后轴温度
-            <p>{{ motor1.dianjihouzhouwen_after }}℃</p>
-          </div>
-        </section>
+        <div>
+          <section>
+            <div>
+              电机电流
+              <p>{{ motor1.dianjidianliui_after }}A</p>
+            </div>
+            <div>
+              电机电压
+              <p>{{ motor1.dianjidianyau_after }}V</p>
+            </div>
+            <div>
+              抽放泵本体温度
+              <p>{{ buttonstate[0].temperature }}℃</p>
+            </div>
+            <div>
+              减速机轴温
+              <p>{{ motor1.reducertem }}℃</p>
+            </div>
+            <div>
+              油泵压力
+              <p>
+                {{ motor1.dianjidianyau_after }}
+              </p>
+            </div>
+          </section>
+          <section>
+            <div>
+              A相绕组温度
+              <p>{{ motor1.dianjiaxiangraozuwendu_after }}℃</p>
+            </div>
+            <div>
+              B相绕组温度
+              <p>{{ motor1.dianjibxiangraozuwendu_after }}℃</p>
+            </div>
+            <div>
+              C相绕组温度
+              <p>{{ motor1.dianjicxiangraozuwendu_after }}℃</p>
+            </div>
+            <div>
+              电机前轴温度
+              <p>{{ motor1.dianjiqianzhouwen_after }}℃</p>
+            </div>
+            <div>
+              电机后轴温度
+              <p>{{ motor1.dianjihouzhouwen_after }}℃</p>
+            </div>
+          </section>
+        </div>
       </div>
       <div class="motor2">
         <h3>电机2:</h3>

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

@@ -6,7 +6,7 @@
       :data-source="data"
       :scroll="{ x: 1500, y: 300 }"
     >
-    </a-table>ei
+    </a-table>
   </div>
 </template>
 <script>

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

@@ -1,12 +1,15 @@
 <template>
   <div class="analysis">
     <a-row>
-      <a-col :sm="24" :md="12" :xl="12">
+      <a-col :sm="24" :md="12" :xl="11">
         <h2 style="text-align: center">{{ this.$route.params.title }}</h2>
         <img src="@/assets/img/20211209164229.png" />
       </a-col>
-
-      <a-col :sm="24" :md="12" :xl="12">
+      <a-col :sm="24" :md="12" :xl="6"><chart :id="23" title="皮带速度" unit="m/s" /></a-col>
+      <a-col :sm="24" :md="12" :xl="5"><chart :id="24" title="驱动电机电流" unit="A" /></a-col>
+    </a-row>
+    <a-row>
+      <a-col :sm="24" :md="12" :xl="11">
         <div class="contour">
           <div style="height: 80px">
             <span class="info">
@@ -64,68 +67,14 @@
           </div>
         </div>
       </a-col>
+      <a-col :sm="24" :md="12" :xl="6"><chart :id="25" title="减速器油压" unit="Mpa" /></a-col>
+      <a-col :sm="24" :md="12" :xl="5"><chart :id="26" title="变频器功率" unit="KW" /></a-col>
     </a-row>
-
-    <a-card style="margin-top: 24px" :bordered="false">
-      <div class="salesCard">
-        <a-row>
-          <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
-            <a-card
-              :bodyStyle="{
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-              }"
-            >
-              <chart-1 ref="chart1" :id="23" />
-            </a-card>
-          </a-col>
-          <a-col :xl="12" :lg="24" :md="24" :sm="24" :xbelts="24">
-            <a-card
-              :bodyStyle="{
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-              }"
-            >
-              <chart-2 ref="chart2" :id="24" />
-            </a-card>
-          </a-col>
-        </a-row>
-        <a-row>
-          <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
-            <a-card
-              :bodyStyle="{
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-              }"
-            >
-              <chart-3 ref="chart3" :id="25" />
-            </a-card>
-          </a-col>
-          <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
-            <a-card
-              :bodyStyle="{
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-              }"
-            >
-              <chart-4 ref="chart4" :id="26" title="变频器功率" unit="KW" />
-            </a-card>
-          </a-col>
-        </a-row>
-      </div>
-    </a-card>
   </div>
 </template>
 
 <script>
-import Chart1 from "./Chart1.vue";
-import Chart2 from "./Chart2.vue";
-import Chart3 from "./Chart3.vue";
-import Chart4 from "./Chart4.vue";
+import Chart from "./Chart.vue";
 import { mapState } from "vuex";
 
 export default {
@@ -217,10 +166,7 @@ export default {
     },
   },
   components: {
-    Chart1,
-    Chart2,
-    Chart3,
-    Chart4,
+    Chart,
   },
   computed: {
     ...mapState(["websocketIP"]),
@@ -245,7 +191,10 @@ export default {
     }
   }
 }
-
+img {
+  width: 100%;
+  height: 400px;
+}
 @media screen and (max-width: 992px) {
   .extra-wrap .extra-item {
     display: none;
@@ -260,28 +209,29 @@ export default {
 
 .info {
   float: left;
-  margin: 10px;
+  margin: 30px;
 }
 
 .contour {
   outline-style: dotted;
   outline-color: gray;
-  height: 200px;
-  width: 400px;
-  margin: 20px 0px 50px 60px;
+  height: 380px;
+  width: 700px;
+  margin: 20px 0px 50px 10px;
+  text-align: center;
+  font-size: 20px;
 }
-
 .waring {
-  width: 60px;
-  height: 60px;
+  width: 80px;
+  height: 80px;
   background-color: #009966;
   border-radius: 50%;
   float: left;
 }
 
 .waring1 {
-  width: 60px;
-  height: 60px;
+  width: 80px;
+  height: 80px;
   background-color: #ff0000;
   border-radius: 50%;
   float: left;

src/views/transportation/configImg/belt/Chart4.vue → src/views/transportation/configImg/belt/Chart.vue

@@ -1,12 +1,11 @@
 <template>
-  <div ref="testLine" id="testLine" style="width: 600px; height: 300px"></div>
+  <div ref="testLine" style="width: 450px; height: 400px; margin-top: 40px" ></div>
 </template>
 
 <script>
 import { mapState } from "vuex";
 
 export default {
-  name: "DisplayDraw",
   data() {
     return {
       data: new Array(30).fill("-"),
@@ -31,7 +30,7 @@ export default {
           extraCssText:
             "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 0;",
           formatter: (params) => {
-            var result = `变频器功率：${params[0].data}${this.unit} <br/>`;
+            var result = `${this.title}：${params[0].data}${this.unit} <br/>`;
             return result;
           },
         },
@@ -72,11 +71,11 @@ export default {
             },
             axisTick: { show: false },
             boundaryGap: false,
-            data: [],
+            data: [1, 2, 3, 4],
           },
         ],
         title: {
-          text: this.title,
+          text: `${this.title}`,
           padding: [5, 230],
         },
         color: ["#41D6C3", "#5AAAFA"],
@@ -108,10 +107,23 @@ export default {
               symbolSize: 7,
               data: [{ type: "max", name: "Max" }],
             },
-            lineStyle: { normal: { color: "#5AAAFA", width: 1 } },
+            // lineStyle: { normal: { color: "#5AAAFA", width: 1 } },
+            lineStyle: {
+              width: 2,
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                {
+                  offset: 0,
+                  color: "#9effff",
+                },
+                {
+                  offset: 1,
+                  color: "#9E87FF",
+                },
+              ]),
+            },
             areaStyle: { normal: { color: "#5AAAFA", opacity: 0.5 } },
-            // connectNulls: true,
-            data: [],
+            connectNulls: true,
+            data: [1, 2, 3, 4],
           },
         ],
       },
@@ -127,14 +139,14 @@ export default {
       // 先扩展数组，然后删除多余元素
       this.data = [
         ...this.data,
-        ...data.map((item) => item["gonglv_after"]),
+        ...data.map((item) => item["pidaisudu_after"]),
       ].slice(1);
       this.xData = [
         ...this.xData,
         ...data.map((item) => item["date"].split(" ")[1]),
       ].slice(1);
-      // console.log(this.data);
-      // console.log(this.xData);
+      // console.log("data", this.data);
+      // console.log("xdata", this.xData);
       this.myChart.setOption({
         xAxis: [
           {
@@ -185,15 +197,11 @@ export default {
     // 先画图
     this.myChart = this.$echarts.init(this.$refs.testLine);
     this.myChart.setOption(this.option);
-    this.websocket = new WebSocket(
-      `ws://${this.websocketIP}/hbase/ws/belt/${this.id}`
-    );
-    this.initWebSocket();
-    this.myChart.setOption(this.option);
+    // this.websocket = new WebSocket(
+    //   `ws://${this.websocketIP}/hbase/ws/belt/${this.id}`
+    // );
+    // this.initWebSocket();
   },
 };
 </script>
 
-<style>
-</style>
-

src/views/transportation/configImg/belt/Chart1.vue

@@ -1,200 +0,0 @@
-<template>
-  <div ref="testLine" id="testLine" style="width: 600px; height: 300px"></div>
-</template>
-
-<script>
-import { mapState } from "vuex";
-const unit = "m/s";
-
-export default {
-  name: "DisplayDraw",
-  data() {
-    return {
-      data: new Array(30).fill("-"),
-      xData: new Array(30).fill("-"),
-      myChart: null,
-      option: {
-        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) => {
-            var result = `皮带速度：${params[0].data}${unit} <br/>`;
-            return result;
-          },
-        },
-        yAxis: [
-          {
-            boundaryGap: [0, "100%"],
-            name: `${unit}`,
-            splitLine: {
-              show: true,
-              lineStyle: {
-                type: "dotted",
-                color: "rgba(155, 155, 155, 0.5)",
-              },
-            },
-            axisLine: {
-              show: false,
-            },
-            axisLabel: {
-              color: "#5A6872",
-              fontSize: 11,
-            },
-            axisTick: { show: false },
-            type: "value",
-          },
-        ],
-        xAxis: [
-          {
-            // type: "time", // x轴为 时间轴
-            interval: 0,
-            splitLine: { show: false },
-            axisLine: {
-              lineStyle: { width: 0 },
-            },
-            axisLabel: {
-              color: "#5A6872",
-              fontSize: 11,
-              rotate: 30,
-            },
-            axisTick: { show: false },
-            boundaryGap: false,
-            data: [],
-          },
-        ],
-        title: {
-          text: "皮带速度",
-          padding: [5, 230],
-        },
-        color: ["#41D6C3", "#5AAAFA"],
-        series: [
-          {
-            name: `${unit}`,
-            type: "line",
-            symbol: "none",
-            markPoint: {
-              label: {
-                normal: {
-                  show: true,
-                  backgroundColor: "#fff",
-                  position: "top",
-                  color: "#5AAAFA",
-                  borderColor: "rgba(90,170,250,0.3)",
-                  borderWidth: 1,
-                  padding: 8,
-                  formatter: `{b}: {c} ${unit}`,
-                },
-              },
-              symbol: "circle",
-              itemStyle: {
-                normal: {
-                  borderColor: "rgba(90,170,250,0.3)",
-                  borderWidth: 15,
-                },
-              },
-              symbolSize: 7,
-              data: [{ type: "max", name: "Max" }],
-            },
-            lineStyle: { normal: { color: "#5AAAFA", width: 1 } },
-            areaStyle: { normal: { color: "#5AAAFA", opacity: 0.5 } },
-            // connectNulls: true,
-            data: [],
-          },
-        ],
-      },
-    };
-  },
-  computed: {
-    ...mapState(["websocketIP"]),
-  },
-  props: ["id"],
-  methods: {
-    addData(data) {
-      // console.log("data", data);
-      // 先扩展数组，然后删除多余元素
-      this.data = [
-        ...this.data,
-        ...data.map((item) => item["pidaisudu_after"]),
-      ].slice(1);
-      this.xData = [
-        ...this.xData,
-        ...data.map((item) => item["date"].split(" ")[1]),
-      ].slice(1);
-      // console.log("data", this.data);
-      // console.log("xdata", this.xData);
-      this.myChart.setOption({
-        xAxis: [
-          {
-            data: this.xData,
-          },
-        ],
-        series: [
-          {
-            name: `${unit}`,
-            data: this.data,
-          },
-        ],
-      });
-    },
-    initWebSocket() {
-      // 连接错误
-      this.websocket.onerror = () => {
-        console.log(
-          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
-        );
-      };
-      // 连接成功
-      this.websocket.onopen = () => {
-        console.log(
-          "WebSocket连接成功    状态码：" + this.websocket.readyState
-        );
-      };
-      // 收到消息的回调
-      this.websocket.onmessage = (event) => {
-        // console.log("onmessage", event);
-        if (JSON.parse(event.data).length) {
-          this.addData(JSON.parse(event.data));
-        }
-      };
-      // 连接关闭的回调
-      this.websocket.onclose = () => {
-        console.log(
-          "WebSocket连接关闭    状态码：" + this.websocket.readyState
-        );
-      };
-      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
-      this.$once("hook:beforeDestroy", () => {
-        this.websocket.close();
-      });
-    },
-  },
-  mounted() {
-    // 先画图
-    this.myChart = this.$echarts.init(this.$refs.testLine);
-    this.myChart.setOption(this.option);
-    this.websocket = new WebSocket(
-      `ws://${this.websocketIP}/hbase/ws/belt/${this.id}`
-    );
-    this.initWebSocket();
-    this.myChart.setOption(this.option);
-  },
-};
-</script>
-
-<style>
-</style>
-

src/views/transportation/configImg/belt/Chart2.vue

@@ -1,200 +0,0 @@
-<template>
-  <div ref="testLine" id="testLine" style="width: 600px; height: 300px"></div>
-</template>
-
-<script>
-import { mapState } from "vuex";
-const unit = "A";
-
-export default {
-  name: "DisplayDraw",
-  data() {
-    return {
-      data: new Array(30).fill("-"),
-      xData: new Array(30).fill("-"),
-      myChart: null,
-      option: {
-        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) => {
-            var result = `驱动电机电流：${params[0].data}${unit} <br/>`;
-            return result;
-          },
-        },
-        yAxis: [
-          {
-            boundaryGap: [0, "100%"],
-            name: `${unit}`,
-            splitLine: {
-              show: true,
-              lineStyle: {
-                type: "dotted",
-                color: "rgba(155, 155, 155, 0.5)",
-              },
-            },
-            axisLine: {
-              show: false,
-            },
-            axisLabel: {
-              color: "#5A6872",
-              fontSize: 11,
-            },
-            axisTick: { show: false },
-            type: "value",
-          },
-        ],
-        xAxis: [
-          {
-            // type: "time", // x轴为 时间轴
-            interval: 0,
-            splitLine: { show: false },
-            axisLine: {
-              lineStyle: { width: 0 },
-            },
-            axisLabel: {
-              color: "#5A6872",
-              fontSize: 11,
-              rotate: 30,
-            },
-            axisTick: { show: false },
-            boundaryGap: false,
-            data: [],
-          },
-        ],
-        title: {
-          text: "驱动电机电流",
-          padding: [5, 230],
-        },
-        color: ["#41D6C3", "#5AAAFA"],
-        series: [
-          {
-            name: `${unit}`,
-            type: "line",
-            symbol: "none",
-            markPoint: {
-              label: {
-                normal: {
-                  show: true,
-                  backgroundColor: "#fff",
-                  position: "top",
-                  color: "#5AAAFA",
-                  borderColor: "rgba(90,170,250,0.3)",
-                  borderWidth: 1,
-                  padding: 8,
-                  formatter: `{b}: {c} ${unit}`,
-                },
-              },
-              symbol: "circle",
-              itemStyle: {
-                normal: {
-                  borderColor: "rgba(90,170,250,0.3)",
-                  borderWidth: 15,
-                },
-              },
-              symbolSize: 7,
-              data: [{ type: "max", name: "Max" }],
-            },
-            lineStyle: { normal: { color: "#5AAAFA", width: 1 } },
-            areaStyle: { normal: { color: "#5AAAFA", opacity: 0.5 } },
-            // connectNulls: true,
-            data: [],
-          },
-        ],
-      },
-    };
-  },
-  computed: {
-    ...mapState(["websocketIP"]),
-  },
-  props: ["id"],
-  methods: {
-    addData(data) {
-      // console.log("data", data);
-      // 先扩展数组，然后删除多余元素
-      this.data = [
-        ...this.data,
-        ...data.map((item) => item["dianliu_after"]),
-      ].slice(1);
-      this.xData = [
-        ...this.xData,
-        ...data.map((item) => item["date"].split(" ")[1]),
-      ].slice(1);
-      // console.log(this.data);
-      // console.log(this.xData);
-      this.myChart.setOption({
-        xAxis: [
-          {
-            data: this.xData,
-          },
-        ],
-        series: [
-          {
-            name: `${unit}`,
-            data: this.data,
-          },
-        ],
-      });
-    },
-    initWebSocket() {
-      // 连接错误
-      this.websocket.onerror = () => {
-        console.log(
-          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
-        );
-      };
-      // 连接成功
-      this.websocket.onopen = () => {
-        console.log(
-          "WebSocket连接成功    状态码：" + this.websocket.readyState
-        );
-      };
-      // 收到消息的回调
-      this.websocket.onmessage = (event) => {
-        // console.log("onmessage", event);
-        if (JSON.parse(event.data).length) {
-          this.addData(JSON.parse(event.data));
-        }
-      };
-      // 连接关闭的回调
-      this.websocket.onclose = () => {
-        console.log(
-          "WebSocket连接关闭    状态码：" + this.websocket.readyState
-        );
-      };
-      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
-      this.$once("hook:beforeDestroy", () => {
-        this.websocket.close();
-      });
-    },
-  },
-  mounted() {
-    // 先画图
-    this.myChart = this.$echarts.init(this.$refs.testLine);
-    this.myChart.setOption(this.option);
-    this.websocket = new WebSocket(
-      `ws://${this.websocketIP}/hbase/ws/belt/${this.id}`
-    );
-    this.initWebSocket();
-    this.myChart.setOption(this.option);
-  },
-};
-</script>
-
-<style>
-</style>
-

src/views/transportation/configImg/belt/Chart3.vue

@@ -1,199 +0,0 @@
-<template>
-  <div ref="testLine" id="testLine" style="width: 600px; height: 300px"></div>
-</template>
-
-<script>
-import { mapState } from "vuex";
-const unit = "Mpa";
-
-export default {
-  name: "DisplayDraw",
-  data() {
-    return {
-      data: new Array(30).fill("-"),
-      xData: new Array(30).fill("-"),
-      myChart: null,
-      option: {
-        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) => {
-            var result = `减速器油压：${params[0].data}${unit} <br/>`;
-            return result;
-          },
-        },
-        yAxis: [
-          {
-            boundaryGap: [0, "100%"],
-            name: `${unit}`,
-            splitLine: {
-              show: true,
-              lineStyle: {
-                type: "dotted",
-                color: "rgba(155, 155, 155, 0.5)",
-              },
-            },
-            axisLine: {
-              show: false,
-            },
-            axisLabel: {
-              color: "#5A6872",
-              fontSize: 11,
-            },
-            axisTick: { show: false },
-            type: "value",
-          },
-        ],
-        xAxis: [
-          {
-            // type: "time", // x轴为 时间轴
-            interval: 0,
-            splitLine: { show: false },
-            axisLine: {
-              lineStyle: { width: 0 },
-            },
-            axisLabel: {
-              color: "#5A6872",
-              fontSize: 11,
-              rotate: 30,
-            },
-            axisTick: { show: false },
-            boundaryGap: false,
-            data: [],
-          },
-        ],
-        title: {
-          text: "减速器油压",
-          padding: [5, 230],
-        },
-        color: ["#41D6C3", "#5AAAFA"],
-        series: [
-          {
-            name: `${unit}`,
-            type: "line",
-            symbol: "none",
-            markPoint: {
-              label: {
-                normal: {
-                  show: true,
-                  backgroundColor: "#fff",
-                  position: "top",
-                  color: "#5AAAFA",
-                  borderColor: "rgba(90,170,250,0.3)",
-                  borderWidth: 1,
-                  padding: 8,
-                  formatter: `{b}: {c} ${unit}`,
-                },
-              },
-              symbol: "circle",
-              itemStyle: {
-                normal: {
-                  borderColor: "rgba(90,170,250,0.3)",
-                  borderWidth: 15,
-                },
-              },
-              symbolSize: 7,
-              data: [{ type: "max", name: "Max" }],
-            },
-            lineStyle: { normal: { color: "#5AAAFA", width: 1 } },
-            areaStyle: { normal: { color: "#5AAAFA", opacity: 0.5 } },
-            data: [],
-          },
-        ],
-      },
-    };
-  },
-  computed: {
-    ...mapState(["websocketIP"]),
-  },
-  props: ["id"],
-  methods: {
-    addData(data) {
-      // console.log("data", data);
-      // 先扩展数组，然后删除多余元素
-      this.data = [
-        ...this.data,
-        ...data.map((item) => item["youya_after"]),
-      ].slice(1);
-      this.xData = [
-        ...this.xData,
-        ...data.map((item) => item["date"].split(" ")[1]),
-      ].slice(1);
-      // console.log(this.data);
-      // console.log(this.xData);
-      this.myChart.setOption({
-        xAxis: [
-          {
-            data: this.xData,
-          },
-        ],
-        series: [
-          {
-            name: `${unit}`,
-            data: this.data,
-          },
-        ],
-      });
-    },
-    initWebSocket() {
-      // 连接错误
-      this.websocket.onerror = () => {
-        console.log(
-          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
-        );
-      };
-      // 连接成功
-      this.websocket.onopen = () => {
-        console.log(
-          "WebSocket连接成功    状态码：" + this.websocket.readyState
-        );
-      };
-      // 收到消息的回调
-      this.websocket.onmessage = (event) => {
-        // console.log("onmessage", event);
-        if (JSON.parse(event.data).length) {
-          this.addData(JSON.parse(event.data));
-        }
-      };
-      // 连接关闭的回调
-      this.websocket.onclose = () => {
-        console.log(
-          "WebSocket连接关闭    状态码：" + this.websocket.readyState
-        );
-      };
-      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
-      this.$once("hook:beforeDestroy", () => {
-        this.websocket.close();
-      });
-    },
-  },
-  mounted() {
-    // 先画图
-    this.myChart = this.$echarts.init(this.$refs.testLine);
-    this.myChart.setOption(this.option);
-    this.websocket = new WebSocket(
-      `ws://${this.websocketIP}/hbase/ws/belt/${this.id}`
-    );
-    this.initWebSocket();
-    this.myChart.setOption(this.option);
-  },
-};
-</script>
-
-<style>
-</style>
-

src/views/tunnelling/zutai.vue

@@ -96,7 +96,6 @@
           </section>
       </div>
     </div>
-  </div>
 </template>
 
 <script>