Merge branch 'master' of https://gitee.com/qinnamin/large_screen

src/common/dataDetail/dataDetail_chart.vue

@@ -295,9 +295,8 @@ export default {
             arr.push(o);
 
           }
-          console.log("arr");
-          console.log(arr);
-          this.tableData=arr;
+          // console.log(arr);
+          // this.tableData=arr;
         }
         // console.log('this.tableData');
         // console.log(this.tableData);

src/components/beam_tube/scatterChart.vue

@@ -107,8 +107,8 @@ export default {
       var newArr = [];
       var newArr2 = [];
       for (let i = 0; i < 26; i++) {
-        newArr = [i, "锚索应力", this.data.bottom[i] < 30 ? true : false];
-        newArr2 = [i, "顶板离层", this.data.top[i] < 30 ? true : false];
+        newArr = [i, "锚索应力", this.data.bottom[i] < 49 ? true : false];
+        newArr2 = [i, "顶板离层", this.data.top[i] < 49 ? true : false];
         arr.push(newArr);
         arr.push(newArr2);
       }
@@ -129,7 +129,7 @@ export default {
     generateArr() {
       var arr = [];
       for (let i = 0; i < 26; i++) {
-        arr.push(parseInt(Math.random() * (40 - 10 + 1) + 10, 10));
+        arr.push(parseInt(Math.random() * (50 - 10 + 1) + 10, 10));
       }
       return arr;
     },

src/components/newMain/item2/Main.vue

@@ -51,10 +51,17 @@
     <div class="caimeiji2">
       <CaiMeiJi :ref="11" info_number="9+10"></CaiMeiJi>
     </div>
+    <div class="tongcang">
+      <div class="tong"></div>
+      <div class="tong_info">地面筒仓</div>
+    </div>
 
     <div class="bottom_left">
-      煤 <br /><br />
-      仓
+       煤 仓
+      <img
+        src="./筒仓1.png"
+        alt="煤 仓"
+      >
     </div>
 
     <div class="buttons">
@@ -335,7 +342,7 @@ export default {
 }
 .warning5 {
   top: 299px;
-  left: 576px;
+  left: 635px;
 }
 .warning6 {
   top: 22px;
@@ -347,11 +354,11 @@ export default {
 }
 .warning8 {
   top: 190px;
-  left: 700px;
+  left: 730px;
 }
 .warning9 {
   top: 165px;
-  left: 757px;
+  left: 788px;
 }
 // .warning10 {
 //   top: 490px;
@@ -389,46 +396,52 @@ export default {
   height: 17px;
 }
 .bottom_left {
-  position: absolute;
-  left: 416px;
-  top: 339px;
-  color: #fff;
-  font-size: 15px;
-  padding: 3px;
-  outline: 1px rgba(255, 255, 255, 0.3) solid;
-  text-align: center;
+  width: 67px;
+    height: 110px;
+    position: absolute;
+    left: 477px;
+    top: 261px;
+    color: #fff;
+    font-size: 12px;
+    padding: 5px;
+    text-align: center;
+}
+.bottom_left img {
+  width: 100%;
+  height: 100%;
+ 
 }
 .pidai5 {
-  left: 301px;
-  top: 314px;
-  transform: rotate(-60deg);
-  width: 80px;
-  height: 17px;
+    left: 361px;
+    top: 311px;
+    -webkit-transform: rotate(0deg);
+    transform: rotate(-65deg);
+    width: 80px;
+    height: 17px;
 }
 
 .pidai6 {
-  left: 379px;
-  top: 277px;
-  // transform: rotate(-45deg);
-  width: 80px;
-  height: 17px;
+ left: 440px;
+    top: 273px;
+    width: 60px;
+    height: 17px;
 }
 .pidai7 {
-  left: 421px;
+  left: 462px;
   top: 210px;
   transform: rotate(-90deg);
   width: 80px;
   height: 17px;
 }
 .pidai8 {
-  left: 448px;
+  left: 486px;
   top: 118px;
   transform: rotate(-60deg);
   width: 80px;
   height: 17px;
 }
 .pidai9 {
-  left: 521px;
+  left: 559px;
   top: 61px;
   width: 80px;
   height: 17px;
@@ -475,15 +488,16 @@ export default {
   left: 100px;
 }
 .tongcang {
-  width: 200px;
-  height: 220px;
-  position: absolute;
-  right: 50px;
-  bottom: 20px;
+     width: 70px;
+    height: 70px;
+    position: absolute;
+    right: 50px;
+    bottom: 36px;
+
   .tong {
-    width: 200px;
-    height: 200px;
-    background-image: url(筒仓.jpg);
+   width: 100%;
+    height: 100%;
+    background-image: url(筒仓.png);
     background-size: cover;
   }
   .tong_info {

src/components/newmain/item2/Main.vue

@@ -1,563 +0,0 @@
-<template>
-  <div id="outer">
-    <!-- 9个警告盒子 -->
-    <div class="warning_box">
-      <div class="warning_container warning1">
-        <WarningInfo :ref="0" :id="0"></WarningInfo>
-      </div>
-      <div class="warning_container warning2">
-        <WarningInfo :ref="1" :id="1"></WarningInfo>
-      </div>
-
-      <div class="warning_container warning3">
-        <WarningInfo :ref="2" :id="2"></WarningInfo>
-      </div>
-      <div class="warning_container warning4">
-        <WarningInfo :ref="3" :id="3"></WarningInfo>
-      </div>
-      <div class="warning_container warning5">
-        <WarningInfo :ref="4" :id="4"></WarningInfo>
-      </div>
-      <div class="warning_container warning6">
-        <WarningInfo :ref="5" :id="5"></WarningInfo>
-      </div>
-      <div class="warning_container warning7">
-        <WarningInfo :ref="6" :id="6"></WarningInfo>
-      </div>
-      <div class="warning_container warning8">
-        <WarningInfo :ref="7" :id="7"></WarningInfo>
-      </div>
-      <div class="warning_container warning9">
-        <WarningInfo :ref="8" :id="8"></WarningInfo>
-      </div>
-      <!-- <div class="warning_container warning10">
-        <WarningInfo :ref="9" :id="9"></WarningInfo>
-      </div>  -->
-    </div>
-    <!-- 9个转动的皮带 -->
-    <div class="pidai_box">
-      <div
-        v-for="(item, index) in 9"
-        :key="index"
-        :class="`pidai_container pidai${index + 1}`"
-      >
-        <Pidai :isStart="isStart"></Pidai>
-      </div>
-    </div>
-    <div class="caimeiji1">
-      <CaiMeiJi :ref="10" info_number="1#"></CaiMeiJi>
-    </div>
-    <!-- 采煤机2 -->
-    <div class="caimeiji2">
-      <CaiMeiJi :ref="11" info_number="9+10"></CaiMeiJi>
-    </div>
-
-    <div class="bottom_left">
-      煤 <br /><br />
-      仓
-    </div>
-
-    <div class="buttons">
-      <button class="btn1" @click="start">模拟皮带启动</button>
-      <button class="btn2" @click="close">模拟皮带停止</button>
-    </div>
-
-    <div class="xcspwt-box">
-      <div class="tipName">采煤机状态</div>
-      <ul class="msg1">
-        <li>
-          <span>割煤刀数</span>
-          <span> &nbsp;&nbsp;&nbsp; {{ shearerState[0].coalCutters }}</span>
-        </li>
-        <li>
-          <span>回采米数</span>
-          <span> &nbsp;&nbsp;&nbsp; {{ shearerState[0].miningMeters }}</span>
-        </li>
-        <li>
-          <span>出煤量</span>
-          <span
-            >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-            {{ shearerState[0].coalOutput }}</span
-          >
-        </li>
-      </ul>
-    </div>
-
-    <div class="xcspwt-box2">
-      <div class="tipName">采煤机状态</div>
-      <ul class="msg1">
-        <li>
-          <span>割煤刀数</span>
-          <span> &nbsp;&nbsp;&nbsp; {{ shearerState[1].coalCutters }}</span>
-        </li>
-        <li>
-          <span>回采米数</span>
-          <span> &nbsp;&nbsp;&nbsp; {{ shearerState[1].miningMeters }}</span>
-        </li>
-        <li>
-          <span>出煤量</span>
-          <span
-            >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-            {{ shearerState[1].coalOutput }}</span
-          >
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script>
-import WarningInfo from "./WarningInfo.vue";
-import CaiMeiJi from "./CaiMeiJi.vue";
-import Pidai from "./Pidai.vue";
-export default {
-  name: "Main",
-  components: { WarningInfo, Pidai, CaiMeiJi },
-  data() {
-    return {
-      isStart: true,
-      shearerState: [
-        {
-          coalCutters: 2,
-          miningMeters: 1300,
-          coalOutput: 2,
-        },
-        {
-          coalCutters: 2,
-          miningMeters: 1300,
-          coalOutput: 2,
-        },
-      ],
-    };
-  },
-  methods: {
-    start() {
-      if (this.isStart) {
-        this.$message.warning("不能重复启动");
-      } else {
-        this.isStart = !this.isStart;
-        for (let i = 0; i < 9; i++) {
-          this.$refs[i].init();
-        }
-      }
-    },
-    close() {
-      if (this.isStart) {
-        this.isStart = !this.isStart;
-        for (let i = 0; i < 9; i++) {
-          this.$refs[i].close();
-        }
-      }
-    },
-  },
-  mounted() {
-    let interval = setInterval(() => {
-      let temp = [];
-      for (let i = 0; i < 2; i++) {
-        let state = {};
-        state.coalCutters = this.getRandomNum(0, 10);
-        state.miningMeters = this.getRandomNum(800, 1500);
-        state.coalOutput = this.getRandomNum(0, 10);
-        temp.push(state);
-      }
-      this.shearerState = temp;
-    }, 3000);
-    this.$once("hook:beforeDestroy", () => {
-      clearInterval(interval);
-    });
-  },
-};
-</script>
-
-<style lang="less" scoped>
-#outer {
-  width: 100%;
-  height: 100%;
-  position: relative;
-
-  .warning_box {
-    position: relative;
-    margin-left: -52px;
-  }
-  .pidai_box {
-    position: relative;
-    margin-left: 160px;
-  }
-  .shexiangtou_box {
-    position: relative;
-  }
-
-  .xcspwt-box {
-    // padding-top: 15px;
-    position: absolute;
-    width: 148px;
-    height: 84px;
-    left: 20px;
-    font-size: 12px;
-    top: 32px;
-    color: #4adefd;
-    .tipName {
-      padding: 5px;
-      outline: 1px rgba(255, 255, 255, 0.3) solid;
-      text-align: center;
-    }
-    .msg1 {
-      padding: 5px;
-      outline: 1px rgba(255, 255, 255, 0.3) solid;
-    }
-    .msg1 li {
-      width: 100%;
-      height: 20px;
-      line-height: 20px;
-      color: #4adefe;
-      font-size: 12px;
-      margin-top: -1px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      cursor: default;
-    }
-    .msg1 li span {
-      color: #4adefe;
-      display: block;
-      float: left;
-    }
-    .msg1 li span:nth-of-type(1) {
-      padding: 0 5px;
-      line-height: 20px;
-      text-align: center;
-      background-size: 100% 100%;
-    }
-
-    .msg1 li span:nth-of-type(2) {
-      color: #f3db5c;
-      width: 47px;
-    }
-  }
-
-  .xcspwt-box2 {
-    // margin-left:10px;
-    // padding-top: 15px;
-    position: absolute;
-    width: 148px;
-    height: 84px;
-    left: 298px;
-    font-size: 12px;
-    top: 425px;
-    color: #4adefe;
-    .tipName {
-      padding: 5px;
-      outline: 1px rgba(255, 255, 255, 0.3) solid;
-      text-align: center;
-    }
-    .msg1 {
-      padding: 5px;
-      outline: 1px rgba(255, 255, 255, 0.3) solid;
-    }
-    .msg1 li {
-      width: 100%;
-      height: 20px;
-      line-height: 20px;
-      color: #4adefe;
-      font-size: 12px;
-      margin-top: -1px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      cursor: default;
-    }
-    .msg1 li span {
-      color: #4adefe;
-      display: block;
-      float: left;
-    }
-    .msg1 li span:nth-of-type(1) {
-      padding: 0 5px;
-      line-height: 20px;
-      text-align: center;
-      background-size: 100% 100%;
-    }
-
-    .msg1 li span:nth-of-type(2) {
-      color: #f3db5c;
-      width: 47px;
-    }
-  }
-
-  // .xcspwt-box{
-  //   height: 100px;
-  //   width: 200px;
-  //   top: 900px;
-  //   left: 20px;
-  //   color: #4adefe;
-  //   border: 1px solid #4adefe;
-  //   border-radius: 5px;
-
-  // }
-  //   .xcspwt-box li {
-  //   width: 100%;
-  //   height: 20px;
-  //   line-height: 20px;
-  //   color: #4adefe;
-  //   font-size: 18px;
-  //   margin-top: 14px;
-  //   overflow: hidden;
-  //   text-overflow: ellipsis;
-  //   white-space: nowrap;
-  //   cursor: default;
-  // }
-  //   .xcspwt-box li span {
-  //   color: #f3db5c;
-  //   display: block;
-  //   float: left;
-  // }
-}
-.warning_container {
-  width: 55px;
-  height: 154px;
-  position: absolute;
-}
-.warning1 {
-  top: 22px;
-  left: 252px;
-}
-.warning2 {
-  top: 22px;
-  left: 319px;
-}
-.warning3 {
-  top: 22px;
-  left: 385px;
-}
-.warning4 {
-  top: 22px;
-  left: 451px;
-}
-.warning5 {
-  top: 299px;
-  left: 576px;
-}
-.warning6 {
-  top: 22px;
-  left: 518px;
-}
-.warning7 {
-  top: 22px;
-  left: 585px;
-}
-.warning8 {
-  top: 190px;
-  left: 700px;
-}
-.warning9 {
-  top: 165px;
-  left: 757px;
-}
-// .warning10 {
-//   top: 490px;
-//   left: 1030px;
-// }
-.pidai_container {
-  width: 200px;
-  height: 25px;
-  position: absolute;
-}
-.pidai1 {
-  left: 22px;
-  top: 277px;
-  width: 80px;
-  height: 17px;
-}
-.pidai2 {
-  left: 121px;
-  top: 278px;
-  width: 80px;
-  height: 20px;
-}
-.pidai3 {
-  left: 180px;
-  top: 328px;
-  transform: rotate(90deg);
-  width: 80px;
-  height: 17px;
-}
-
-.pidai4 {
-  left: 234px;
-  top: 277px;
-  width: 80px;
-  height: 17px;
-}
-.bottom_left {
-  position: absolute;
-  left: 416px;
-  top: 339px;
-  color: #fff;
-  font-size: 15px;
-  padding: 3px;
-  outline: 1px rgba(255, 255, 255, 0.3) solid;
-  text-align: center;
-}
-.pidai5 {
-  left: 301px;
-  top: 314px;
-  transform: rotate(-60deg);
-  width: 80px;
-  height: 17px;
-}
-
-.pidai6 {
-  left: 379px;
-  top: 277px;
-  // transform: rotate(-45deg);
-  width: 80px;
-  height: 17px;
-}
-.pidai7 {
-  left: 421px;
-  top: 210px;
-  transform: rotate(-90deg);
-  width: 80px;
-  height: 17px;
-}
-.pidai8 {
-  left: 448px;
-  top: 118px;
-  transform: rotate(-60deg);
-  width: 80px;
-  height: 17px;
-}
-.pidai9 {
-  left: 521px;
-  top: 61px;
-  width: 80px;
-  height: 17px;
-  transform: rotate(-10deg);
-}
-.pidai10 {
-  left: 1200px;
-  top: 410px;
-  width: 80px;
-  height: 17px;
-}
-.shexiangtou_container {
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-  background-image: url(摄像头.png);
-  background-size: cover;
-  position: absolute;
-}
-.shexiangtou1 {
-  top: 200px;
-  left: 470px;
-}
-.shexiangtou2 {
-  top: 240px;
-  left: 1270px;
-}
-.shexiangtou3 {
-  top: 450px;
-  left: 860px;
-}
-.caimeiji1 {
-  width: 133px;
-  height: 200px;
-  position: absolute;
-  top: 149px;
-  left: -31px;
-}
-.caimeiji2 {
-  width: 127px;
-  height: 197px;
-  position: absolute;
-  top: 393px;
-  left: 100px;
-}
-.tongcang {
-  width: 200px;
-  height: 220px;
-  position: absolute;
-  right: 50px;
-  bottom: 20px;
-  .tong {
-    width: 200px;
-    height: 200px;
-    background-image: url(筒仓.jpg);
-    background-size: cover;
-  }
-  .tong_info {
-    text-align: center;
-    color: #fff;
-  }
-}
-
-.bottom_msg {
-  margin: 0;
-  padding: 5px;
-  outline: 1px rgba(255, 255, 255, 0.3) solid;
-  list-style: none;
-  li {
-    text-align: center;
-  }
-}
-
-.bottom_right {
-  width: 180px;
-  height: 100px;
-  position: absolute;
-  right: 540px;
-  bottom: 20px;
-  color: #fff;
-  .bottom_info {
-    padding: 5px;
-    outline: 1px rgba(255, 255, 255, 0.3) solid;
-    text-align: center;
-  }
-  .bottom_msg {
-    margin: 0;
-    padding: 5px;
-    outline: 1px rgba(255, 255, 255, 0.3) solid;
-    list-style: none;
-    .bottom_msg li {
-      text-align: center;
-      .bottom_msg li span {
-        color: #4adefe;
-      }
-    }
-  }
-}
-.buttons {
-  width: 95px;
-  height: 88px;
-  position: absolute;
-  top: 393px;
-  left: -13px;
-  button {
-    display: block;
-    background-color: rgb(226, 226, 218);
-    background-image: linear-gradient(
-      to bottom,
-      rgb(255, 255, 255) 0%,
-      rgb(38, 120, 228) 50%,
-      rgb(255, 255, 255) 100%
-    );
-    border-radius: 10px;
-    font-size: 13px;
-    font-family: "'微软雅黑','Helvetica Neue',Helvetica,Arial,sans-serif";
-    font-weight: bold;
-  }
-  .btn1 {
-    margin-left: 40px;
-    margin-top: 10%;
-    width: 100%;
-    height: 45%;
-  }
-  .btn2 {
-    margin-left: 40px;
-    margin-top: 10%;
-    width: 100%;
-    height: 45%;
-  }
-}
-</style>

src/components/process_monitoring/Main.vue

@@ -92,8 +92,11 @@
       <div class="tong_info">地面筒仓</div>
     </div>
     <div class="bottom_left">
-      煤 <br /><br />
-      仓
+      煤 仓
+      <img
+        src="./筒仓1.png"
+        alt=""
+      >
     </div>
 
     <div class="buttons">
@@ -434,15 +437,14 @@ export default {
   height: 30px;
 }
 .bottom_left {
-  width: 70px;
+  width: 95px;
   height: 200px;
   position: absolute;
-  left: 830px;
-  top: 450px;
+  left: 929px;
+  top: 344px;
   color: #fff;
-  font-size: 40px;
+  font-size: 14px;
   padding: 5px;
-  outline: 1px rgba(255, 255, 255, 0.3) solid;
   text-align: center;
 }
 .pidai5 {
@@ -530,7 +532,7 @@ export default {
   .tong {
     width: 200px;
     height: 200px;
-    background-image: url(筒仓.jpg);
+    background-image: url(筒仓.png);
     background-size: cover;
   }
   .tong_info {

src/components/tunneling/ruler.vue

@@ -1,187 +1,191 @@
 <template>
-  <div id="rulerChart" style="width: 180px;height: 300px;"></div>
+  <div
+    id="rulerChart"
+    style="width: 180px;height: 300px;"
+  ></div>
 </template>
 
 <script>
-    var TP_value = 20.3;
-    var kd = [];
-    var kd2 = []
-    var Gradient = [];
-    var leftColor = '';
-    var showValue = 20;
-    var boxPosition = [65, 0];
-    var TP_txt = ''
-    // 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据
-    for (let i = 0, len = 60; i <= len; i += 1) {
-        if (i < 10) {
-            kd.push('');
-        } else if ((i - 10) % 10 === 0) {
-            kd.push('-3');
-        } else {
-            kd.push('-1');
-        }
-    }
-
-        for (let i = 0, len = 60; i <= len; i += 1) {
-        if (i < 10) {
-            kd2.push('');
-        } else if ((i - 10) % 10 === 0) {
-            kd2.push('3');
-        } else {
-            kd2.push('1');
-        }
-    }
-    //    leftColor = Gradient[Gradient.length - 1].color;
-    // 因为柱状初始化为0，温度存在负值，所以加上负值60和空出距离10
-export default {
-data () {
-        return {
-            chartInstance: null,
-           
-            allData:null,    // 服务器返回的数据
- 
-            currentPage: 1,  //当前显示的页数， 当修改页数时， 数据动态刷新
-
-            totalPage: 0,    //一共多少也
-            timerId:null      //定时器
-        }
-    },
-    mounted () {
-        this.initChart()
+var TP_value = 20.3;
+var kd = [];
+var kd2 = [];
+var Gradient = [];
+var leftColor = "";
+var showValue = 0;
+var boxPosition = [65, 0];
+var TP_txt = "";
+// 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据
+for (let i = 0, len = 60; i <= len; i += 1) {
+  if (i < 10) {
+    kd.push("");
+  } else if ((i - 10) % 10 === 0) {
+    kd.push("-3");
+  } else {
+    kd.push("-1");
+  }
+}
 
-        this.updateChart()
-    //  对窗口大小变化的事件进行监听
-        // window.addEventListener('resize', this.screenAdapter)
+for (let i = 0, len = 60; i <= len; i += 1) {
+  if (i < 10) {
+    kd2.push("");
+  } else if ((i - 10) % 10 === 0) {
+    kd2.push("3");
+  } else {
+    kd2.push("1");
+  }
+}
+//    leftColor = Gradient[Gradient.length - 1].color;
+// 因为柱状初始化为0，温度存在负值，所以加上负值60和空出距离10
+export default {
+  data() {
+    return {
+      chartInstance: null,
 
+      allData: null, // 服务器返回的数据
 
-    },
-    // destroyed () {
-    //   clearInterval(this.timerId)
-    //     // 在组件销毁的时候, 需要将监听器取消掉
-    //     // window.removeEventListener('resize', this.screenAdapter)
+      currentPage: 1, //当前显示的页数， 当修改页数时， 数据动态刷新
 
+      totalPage: 0, //一共多少也
+      timerId: null, //定时器
+    };
+  },
+  mounted() {
+    this.initChart();
 
-    // },
-    methods: {
-        //初始化echarts实例对象
-
-
-        initChart () {
-            this.chartInstance = this.$echarts.init(document.getElementById('rulerChart'))
-    
-             //对图表对象进行鼠标事件监听
-            this.chartInstance.on('mousecver', () =>{
-                this.clearInterval(this.timerId)
-            })
-            this.chartInstance.on('mouseout', () => {
-                this.startInterval()
-            })
-        },
+    this.updateChart();
+    //  对窗口大小变化的事件进行监听
+    // window.addEventListener('resize', this.screenAdapter)
+  },
+  // destroyed () {
+  //   clearInterval(this.timerId)
+  //     // 在组件销毁的时候, 需要将监听器取消掉
+  //     // window.removeEventListener('resize', this.screenAdapter)
+
+  // },
+  methods: {
+    //初始化echarts实例对象
+
+    initChart() {
+      this.chartInstance = this.$echarts.init(
+        document.getElementById("rulerChart")
+      );
+
+      //对图表对象进行鼠标事件监听
+      this.chartInstance.on("mousecver", () => {
+        this.clearInterval(this.timerId);
+      });
+      this.chartInstance.on("mouseout", () => {
+        this.startInterval();
+      });
+    },
 
-        // async getData() {
-        //     // 请求数据 allData
-        //     const { data: ret } = await this.$http.get('hbase/getJSON')
-        //     const { data1:ret1  } = await this.$http.get('engine/start/?mode=mode1')
-        //     this.allData = ret
-        //     // 对数据排序
-        //     this.allData.sort((a,b) => {{
-        //         return a.value-b.value //从小到大排序
-        //     }})
-        //     // 每1个元素显示一页
-        //     this.totalPage = this.allData.length % 1 ===0 ? this.allData.length /1 : this.allData.length / 1 +1 
+    // async getData() {
+    //     // 请求数据 allData
+    //     const { data: ret } = await this.$http.get('hbase/getJSON')
+    //     const { data1:ret1  } = await this.$http.get('engine/start/?mode=mode1')
+    //     this.allData = ret
+    //     // 对数据排序
+    //     this.allData.sort((a,b) => {{
+    //         return a.value-b.value //从小到大排序
+    //     }})
+    //     // 每1个元素显示一页
+    //     this.totalPage = this.allData.length % 1 ===0 ? this.allData.length /1 : this.allData.length / 1 +1
 
-        //     // 获取完数据， 更新图标
-        //     this.updateChart()
+    //     // 获取完数据， 更新图标
+    //     this.updateChart()
 
-        //     // 启动定时器， 每隔三秒改变currentPage, 进而更新图表
-        //     this.startInterval()
+    //     // 启动定时器， 每隔三秒改变currentPage, 进而更新图表
+    //     this.startInterval()
 
-        // },
-        updateChart(){
-            // 每一页显示1个数据， 获取5个数据
-            // const start = (this.currentPage - 1) * 1
-            // const end = this.currentPage * 1
-            // const showData = this.allData.slice(start, end)    
-            // const showValue = showData[0].xingzouzhuangtai
- 
-            const colors = ['#5470c6','#91cc75'] 
-            const option = {
-                grid:{
-                    right:'30%',
-                    left :'20%',
-                    bottom:'5%'
-                },
-                // title: {
-                //     text: '行走状态',
-                //     color:'pink',
-                //     show: true
-                // },
-                yAxis: [{
-                    type:'value',
-                    name:'left',
-                    show: true,
-                    // data: [],
-                    min: -100,
-                    max: 100,
-                    splitNumber:20,     //坐标轴分段个数
-
-                    nameTextStyle:{
-                        borderWidth:50
-                    },
-                    nameLocation:'end',
-                    axisLine: {
-                        show: true,
-                        lineStyle:{
-                            color:colors[0],
-                            width:5     //刻度线宽度
-                        }
-                    }
-                }, {
-                    type:'value',
-                    name:'right',
-                    show: true,
-                    // data: [],
-                    min: -100,
-                    max: 100,
-                    splitNumber:20,     //坐标轴分段个数
-                    nameLocation:'end',
-                    axisLine: {
-                        show: true,
-                        lineStyle:{
-                            color:colors[1],
-                            width:5     //刻度线宽度
-                        }
-                    }
-                }],
-                xAxis: [{
-                    type:'category',
-                    show:false,
-
-                }],
-                   
-                series: [{
-                    name: 'left',
-                    type: 'scatter',
-                    // 对应上面XAxis的第一个对象配置
-                    yAxisIndex :0,
-                    // data: arrayData[1],
-                    data:[{
-                        value:showValue
-                    }],
-                    // z: 2
-                    },
-                    
-                ]}
-            this.chartInstance.setOption(option)
+    // },
+    updateChart() {
+      // 每一页显示1个数据， 获取5个数据
+      // const start = (this.currentPage - 1) * 1
+      // const end = this.currentPage * 1
+      // const showData = this.allData.slice(start, end)
+      // const showValue = showData[0].xingzouzhuangtai
+
+      const colors = ["#5470c6", "#91cc75"];
+      const option = {
+        grid: {
+          right: "30%",
+          left: "20%",
+          bottom: "5%",
         },
- 
-
-
-    }
-}
+        // title: {
+        //     text: '行走状态',
+        //     color:'pink',
+        //     show: true
+        // },
+        yAxis: [
+          {
+            type: "value",
+            name: "left",
+            show: true,
+            // data: [],
+            min: -100,
+            max: 100,
+            splitNumber: 20, //坐标轴分段个数
+
+            nameTextStyle: {
+              borderWidth: 50,
+            },
+            nameLocation: "end",
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colors[0],
+                width: 5, //刻度线宽度
+              },
+            },
+          },
+          {
+            type: "value",
+            name: "right",
+            show: true,
+            // data: [],
+            min: -100,
+            max: 100,
+            splitNumber: 20, //坐标轴分段个数
+            nameLocation: "end",
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colors[1],
+                width: 5, //刻度线宽度
+              },
+            },
+          },
+        ],
+        xAxis: [
+          {
+            type: "category",
+            show: false,
+          },
+        ],
+
+        series: [
+          {
+            name: "left",
+            type: "scatter",
+            // 对应上面XAxis的第一个对象配置
+            yAxisIndex: 0,
+            // data: arrayData[1],
+            data: [
+              {
+                value: showValue,
+              },
+            ],
+            // z: 2
+          },
+        ],
+      };
+      this.chartInstance.setOption(option);
+    },
+  },
+};
 </script>
 
 
 <style>
-
 </style>

src/views/gas/configImg/main.vue

@@ -2,8 +2,8 @@
   <div id="apppp">
     <section class="mainbox">
       <!-- 查看数据看板 -->
-      <button @click="changeWebState(1)">查看</button>
-      <button class="button2" @click="changeWebState(2)">查看</button>
+      <button @click="changeWebState(1)"></button>
+      <button class="button2" @click="changeWebState(2)"></button>
       <!-- 电机1详细数据 -->
       <div class="motor1">
         <h3>电机1:</h3>