修改样式+瓦斯抽放图表

src/components/gas/echart/bottom/bottomLeftChart/chart.vue

@@ -21,6 +21,7 @@ export default {
   components: {
     Echart,
   },
+  
   props: {
     cdata: {
       type: Object,
@@ -58,7 +59,7 @@ export default {
             y: "10%"
           },
           xAxis: {
-            data: [1,2,3,4,5],
+            data: newData.xData,
             axisLine: {
               lineStyle: {
                 color: "#B4B4B4"
@@ -95,7 +96,7 @@ export default {
           ],
           series: [
             {
-              name: "管道流量m³/min,",
+              name: "抽气流量m³/min,",
               type: "line",
               smooth: true,
               showAllSymbol: true,
@@ -107,11 +108,11 @@ export default {
                   color: "#F02FC2"
                 }
               },
-              data: newData.PipeFlowData
+              data: newData.chouqidata
       
             },
             {
-              name: "管道瓦斯含量%",
+              name: "排气流量",
               type: "line",
               smooth: true,
               showAllSymbol: true,
@@ -125,7 +126,7 @@ export default {
                   
                 }
               },
-              data: newData.PipeGasConcentrationData
+              data: newData.paiqidata
             },
             
           ]
@@ -135,5 +136,8 @@ export default {
       deep: true
     },
   },
+  methods:{
+},
+
 }
 </script>

src/components/gas/echart/bottom/bottomLeftChart/index.vue

@@ -5,50 +5,119 @@
 </template>
 
 <script>
-import Chart from './chart.vue'
+import { mapState } from "vuex";
+import Chart from "./chart.vue";
 export default {
-  inject:['getint','getres','getweb'],
-   computed:{
-     int(){return this.getint()},
-     res(){return this.getres()},
-     web(){return this.getweb()}
-   },
-  data () {
+  // inject:['getint','getres','getweb'],
+  //  computed:{
+  //    int(){return this.getint()},
+  //    res(){return this.getres()},
+  //    web(){return this.getweb()}
+  //  },
+  // props: ['index'],
+  data() {
     return {
+      paiqidata: new Array(30).fill("-"),
+      chouqidata: new Array(30).fill("-"),
+      xData: new Array(30).fill("-"),
       drawTiming: null,
       cdata: {
-        PipeGasConcentrationData: [],
-        PipeFlowData: []
-      }
-    }
+        paiqidata: [],
+        paiqidata: [],
+        xData:[]
+      },
+    };
+  },
+  computed: {
+    ...mapState(["websocketIP"]),
   },
   components: {
     Chart,
   },
-  mounted () {
-    this.drawTimingFn();
-  },
-  beforeDestroy () {
-    clearInterval(this.drawTiming);
-  },
+  // mounted() {
+  //   this.drawTimingFn();
+  // },
+  // beforeDestroy() {
+  //   clearInterval(this.drawTiming);
+  // },
   methods: {
-    drawTimingFn () {
-      this.setData();
-      this.drawTiming = setInterval(() => {
-        this.setData();
-      }, 10000);
+    addData(data) {
+      // console.log("data", data.map((item) => item["paiqiliuliang_after"]));
+      // 先扩展数组，然后删除多余元素
+      this.paiqidata = [
+        ...this.paiqidata,
+        ...data.map((item) => item["paiqiliuliang_after"]),
+      ].slice(1);
+      this.chouqidata = [
+        ...this.chouqidata,
+        ...data.map((item) => item["chouqiliuliang_after"]),
+      ].slice(1);
+      this.xData = [
+        ...this.xData,
+        ...data.map((item) => item["date"].split(" ")[1]),
+      ].slice(1);
+      // console.log(this.paiqidata);
+      // console.log(this.xData);
+      this.cdata.paiqidata = this.paiqidata;
+      this.cdata.paiqidata = this.chouqidata;
+      this.cdata.xData = this.xData;
+
+    },
+    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);
+        this.addData(JSON.parse(event.data));
+      };
+      // 连接关闭的回调
+      this.websocket.onclose = () => {
+        console.log(
+          "WebSocket连接关闭    状态码：" + this.websocket.readyState
+        );
+      };
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once("hook:beforeDestroy", () => {
+        this.websocket.close();
+      });
     },
-     setData () {
-      this.cdata.PipeGasConcentrationData=[],
-      this.cdata.PipeFlowData=[]
-      
-      for (let i = 0; i <= this.int; i++) {
-        this.cdata.PipeGasConcentrationData.push(this.getres()[i].Pipe.GasConcentration);
-        this.cdata.PipeFlowData.push(this.getres()[i].Pipe.Flow)
-      }
+  },
+  mounted() {
+    // 先画图
+    // this.myChart = this.$echarts.init(this.$refs.testLine);
+    // this.myChart.setOption(this.option);
+    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/35`);
+    this.initWebSocket();
+  },
+  // this.myChart.setOption(this.option);
+
+  // drawTimingFn () {
+  //   this.setData();
+  //   this.drawTiming = setInterval(() => {
+  //     this.setData();
+  //   }, 10000);
+  // },
+  //  setData () {
+  //   this.cdata.PipeGasConcentrationData=[],
+  //   this.cdata.PipeFlowData=[]
+
+  //   for (let i = 0; i <= this.int; i++) {
+  //     this.cdata.PipeGasConcentrationData.push(this.getres()[i].Pipe.GasConcentration);
+  //     this.cdata.PipeFlowData.push(this.getres()[i].Pipe.Flow)
+  //   }
 
-    }
-  }
+  // }
 };
 </script>
 

src/components/gas/echart/bottom/bottomRightChart/chart.vue

@@ -58,7 +58,7 @@ export default {
             y: "10%"
           },
           xAxis: {
-            data: [1,2,3,4,5],
+            data: newData.xData,
             axisLine: {
               lineStyle: {
                 color: "#B4B4B4"

src/components/gas/echart/bottom/bottomRightChart/index.vue

@@ -5,52 +5,85 @@
 </template>
 
 <script>
+import { mapState } from "vuex";
 import Chart from './chart.vue'
 export default {
-  inject:['getint','getres','getweb'],
-   computed:{
-     int(){return this.getint()},
-     res(){return this.getres()},
-     web(){return this.getweb()}
-   },
   data () {
     return {
+      currentData: new Array(30).fill("-"),
       drawTiming: null,
       cdata: {
-        currentData: []
+        currentData: [],
+        xData:[]
       }
     }
   },
+  computed: {
+    ...mapState(["websocketIP"]),
+  },
   components: {
     Chart,
   },
-  mounted () {
-    this.drawTimingFn();
-  },
+
   beforeDestroy () {
     clearInterval(this.drawTiming);
   },
-  methods: {
-    drawTimingFn () {
-      this.setData();
-      this.drawTiming = setInterval(() => {
-        this.setData();
-      }, 10000);
+    methods: {
+    addData(data) {
+      // console.log("data", data.map((item) => item["paiqiliuliang_after"]));
+      // 先扩展数组，然后删除多余元素
+      this.currentData = [
+        ...this.currentData,
+        ...data.map((item) => item["dianjidianliui_after"]),
+      ].slice(1);
+      this.xData = [
+        ...this.xData,
+        ...data.map((item) => item["date"].split(" ")[1]),
+      ].slice(1);
+      // console.log(this.paiqidata);
+      // console.log(this.xData);
+      this.cdata.currentData = this.paiqidata;
+      this.cdata.xData = this.xData;
+
     },
-    setData () {
-      this.cdata.currentData = [];
-      // 周数据
-      for (let i = 0; i <= this.int; i++) {
-        if(this.web==1){
-        this.cdata.currentData.push(this.getres()[i].GasPump1.MotorCurrent);
-        }
-        else{
-        this.cdata.currentData.push(this.getres()[i].GasPump2.MotorCurrent);
-        }
-      }
+    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);
+        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/8`);
+    this.initWebSocket();
+  },
 };
 </script>
 

src/views/Home.vue

@@ -2,17 +2,17 @@
   <div>
     <el-row class="tac">
       <el-col :span="2">
-        <!-- style="width: 110px;height: 800px;background-color: #000;" -->
-        <div style="width: 110px; height: 800px; background-color: #000">
+        <!-- style="width: 110px;height: 800px;background-color: #409eff;" -->
+        <div style="width: 110px; height: 800px; background-color: #409eff">
           <div
             style="
               margin-left: 20px;
-              background-color: #06235b;
+              background-color: #3f85ed;
               width: 53px;
               height: 30px;
               position: relative;
               border-radius: 5px;
-              border: 1px solid #fff;
+              border: 2px solid #fff;
             "
           >
             <span
@@ -41,12 +41,12 @@
               <el-menu-item :index="item.path">
                 <div
                   style="
-                    background-color: #06235b;
+                    background-color: #3f85ed;
                     width: 53px;
                     height: 53px;
                     position: relative;
                     border-radius: 5px;
-                    border: 1px solid #fff;
+                    border: 2px solid #fff;
                   "
                 >
                   <img
@@ -96,16 +96,16 @@
       <!-- 右侧边栏 -->
 
       <el-col :span="2">
-        <div style="width: 110px; height: 800px; background-color: #000">
+        <div style="width: 110px; height: 800px; background-color: #409eff">
           <div
             style="
               margin-left: 20px;
-              background-color: #06235b;
+              background-color: #3f85ed;
               width: 53px;
-              height: 30px;
+              height: 40px;
               position: relative;
               border-radius: 5px;
-              border: 1px solid #fff;
+              border: 1px solid #0033cc;
             "
           >
             <span
@@ -131,21 +131,21 @@
               v-for="(item, index) in $router.options.routes[1].children"
               v-if="!item.hidden"
             >
-              <el-menu-item :index="item.path">
+              <el-menu-item :index="item.path" >
                 <div
                   style="
-                    background-color: #06235b;
+                    background-color: #3f85ed;
                     width: 53px;
                     height: 53px;
                     position: relative;
                     border-radius: 5px;
-                    border: 1px solid #fff;
+                    border: 2px solid #fff;
                   "
                 >
                   <img
                     style="
-                      width: 30px;
-                      height: 30px;
+                      width: 40px;
+                      height: 40px;
                       text-align: center;
                       position: absolute;
                       left: 40%;

src/views/gas/configImg/bottomLeft.vue

@@ -1,15 +1,19 @@
 <template>
   <div id="bottomLeft">
+
     <div class="bg-color-black">
       <div class="d-flex pt-2 pl-2">
         <span>
           <icon name="chart-bar" class="text-icon"></icon>
         </span>
         <div class="d-flex">
-          <span class="fs-xl text mx-2">管道流量和瓦斯含量</span>
+          <!-- <span @click="clickFunc(1)" class="fs-xl text mx-2">管道流量 </span>&nbsp 
+          <span @click="clickFunc(2)" class="fs-xl text mx-2">瓦斯含量</span> -->
         </div>
+        <!-- <h1>123</h1> -->
       </div>
       <div>
+        <!-- <BottomLeftChart :index="index"></BottomLeftChart > -->
         <BottomLeftChart />
       </div>
     </div>
@@ -19,6 +23,17 @@
 <script>
 import BottomLeftChart from '@/components/gas/echart/bottom/bottomLeftChart'
 export default {
+  data(){
+    index:'1'
+
+  },
+  methods:{
+    // clickFunc(id){
+    //   this.index = (id == 1?'1':'2');
+    //   console.log( this.index);
+
+    // }
+  },
   props: {
     res: {
       type: Object,

src/views/gas/configImg/index.vue

@@ -4,11 +4,20 @@
       <mainview @statechange="getstate" />
     </div>
 
-    <div id="appp" v-if="webstate1 != '0'">
-      <div id="index" ref="appRef">
+    <div
+      id="appp"
+      v-if="webstate1 != '0'"
+    >
+      <div
+        id="index"
+        ref="appRef"
+      >
         <div class="bg">
           <dv-loading v-if="loading">Loading...</dv-loading>
-          <div v-else class="host-body">
+          <div
+            v-else
+            class="host-body"
+          >
             <div class="d-flex jc-center">
               <dv-decoration-10 class="dv-dec-10" />
               <div class="d-flex jc-center">
@@ -57,9 +66,7 @@
                 </div>
                 <div class="react-right mr-4 react-l-s">
                   <span class="react-after"></span>
-                  <span class="text"
-                    >{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
-                  >
+                  <span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
                 </div>
               </div>
             </div>
@@ -87,7 +94,20 @@
 
               <!-- 第四行数据 -->
               <div class="bototm-box">
+
                 <dv-border-box-13>
+                  <!-- <el-select
+                    v-model="value"
+                    placeholder="请选择"
+                  >
+                    <el-option
+                      v-for="item in options"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    >
+                    </el-option>
+                  </el-select> -->
                   <bottomLeft />
                 </dv-border-box-13>
                 <dv-border-box-12>
@@ -532,14 +552,26 @@ export default {
         this.res[this.sum - this.int].GasPump2.PumpWaterSupply = JSON.stringify(
           response.data[i].GasPump2.PumpWaterSupply
         );
-        this.res[this.sum - this.int].GasPump1.InletValveEnabled =
-          JSON.stringify(response.data[i].GasPump1.InletValveEnabled);
-        this.res[this.sum - this.int].GasPump2.InletValveEnabled =
-          JSON.stringify(response.data[i].GasPump2.InletValveEnabled);
-        this.res[this.sum - this.int].GasPump1.OutletValveEnabled =
-          JSON.stringify(response.data[i].GasPump1.OutletValveEnabled);
-        this.res[this.sum - this.int].GasPump2.OutletValveEnabled =
-          JSON.stringify(response.data[i].GasPump2.OutletValveEnabled);
+        this.res[
+          this.sum - this.int
+        ].GasPump1.InletValveEnabled = JSON.stringify(
+          response.data[i].GasPump1.InletValveEnabled
+        );
+        this.res[
+          this.sum - this.int
+        ].GasPump2.InletValveEnabled = JSON.stringify(
+          response.data[i].GasPump2.InletValveEnabled
+        );
+        this.res[
+          this.sum - this.int
+        ].GasPump1.OutletValveEnabled = JSON.stringify(
+          response.data[i].GasPump1.OutletValveEnabled
+        );
+        this.res[
+          this.sum - this.int
+        ].GasPump2.OutletValveEnabled = JSON.stringify(
+          response.data[i].GasPump2.OutletValveEnabled
+        );
         this.res[this.sum - this.int].GasPump1.PumpEnabled = JSON.stringify(
           response.data[i].GasPump1.PumpEnabled
         );
@@ -552,8 +584,11 @@ export default {
         this.res[this.sum - this.int].CoolantPump2.PumpEnabled = JSON.stringify(
           response.data[i].CoolantPump2.PumpEnabled
         );
-        this.res[this.sum - this.int].CoolingTower.TowerEnabled =
-          JSON.stringify(response.data[i].CoolingTower.TowerEnabled);
+        this.res[
+          this.sum - this.int
+        ].CoolingTower.TowerEnabled = JSON.stringify(
+          response.data[i].CoolingTower.TowerEnabled
+        );
         this.res[this.sum - this.int].HighPool.Temperature = JSON.stringify(
           response.data[i].HighPool.Temperature
         );
@@ -566,8 +601,11 @@ export default {
         this.res[this.sum - this.int].LowPool.WaterLevel = JSON.stringify(
           response.data[i].LowPool.WaterLevel
         );
-        this.res[this.sum - this.int].Pipe.PipeNegativePressure =
-          JSON.stringify(response.data[i].Pipe.PipeNegativePressure);
+        this.res[
+          this.sum - this.int
+        ].Pipe.PipeNegativePressure = JSON.stringify(
+          response.data[i].Pipe.PipeNegativePressure
+        );
         this.res[this.sum - this.int].Pipe.PumpingTemperature = JSON.stringify(
           response.data[i].Pipe.PumpingTemperature
         );
@@ -586,18 +624,36 @@ export default {
         this.res[this.sum - this.int].GasPump1.PumpTemperature = JSON.stringify(
           response.data[i].GasPump1.PumpTemperature
         );
-        this.res[this.sum - this.int].GasPump1.MotorPhaseTemperatureA =
-          JSON.stringify(response.data[i].GasPump1.MotorPhaseTemperatureA);
-        this.res[this.sum - this.int].GasPump1.MotorPhaseTemperatureB =
-          JSON.stringify(response.data[i].GasPump1.MotorPhaseTemperatureB);
-        this.res[this.sum - this.int].GasPump1.MotorPhaseTemperatureC =
-          JSON.stringify(response.data[i].GasPump1.MotorPhaseTemperatureC);
-        this.res[this.sum - this.int].GasPump1.MotorFrontShaftTemperature =
-          JSON.stringify(response.data[i].GasPump1.MotorFrontShaftTemperature);
-        this.res[this.sum - this.int].GasPump1.MotorRearShaftTemperature =
-          JSON.stringify(response.data[i].GasPump1.MotorRearShaftTemperature);
-        this.res[this.sum - this.int].GasPump1.ReducerShaftTemperature =
-          JSON.stringify(response.data[i].GasPump1.ReducerShaftTemperature);
+        this.res[
+          this.sum - this.int
+        ].GasPump1.MotorPhaseTemperatureA = JSON.stringify(
+          response.data[i].GasPump1.MotorPhaseTemperatureA
+        );
+        this.res[
+          this.sum - this.int
+        ].GasPump1.MotorPhaseTemperatureB = JSON.stringify(
+          response.data[i].GasPump1.MotorPhaseTemperatureB
+        );
+        this.res[
+          this.sum - this.int
+        ].GasPump1.MotorPhaseTemperatureC = JSON.stringify(
+          response.data[i].GasPump1.MotorPhaseTemperatureC
+        );
+        this.res[
+          this.sum - this.int
+        ].GasPump1.MotorFrontShaftTemperature = JSON.stringify(
+          response.data[i].GasPump1.MotorFrontShaftTemperature
+        );
+        this.res[
+          this.sum - this.int
+        ].GasPump1.MotorRearShaftTemperature = JSON.stringify(
+          response.data[i].GasPump1.MotorRearShaftTemperature
+        );
+        this.res[
+          this.sum - this.int
+        ].GasPump1.ReducerShaftTemperature = JSON.stringify(
+          response.data[i].GasPump1.ReducerShaftTemperature
+        );
         this.res[this.sum - this.int].GasPump2.MotorCurrent = JSON.stringify(
           response.data[i].GasPump2.MotorCurrent
         );
@@ -607,18 +663,36 @@ export default {
         this.res[this.sum - this.int].GasPump2.PumpTemperature = JSON.stringify(
           response.data[i].GasPump2.PumpTemperature
         );
-        this.res[this.sum - this.int].GasPump2.MotorPhaseTemperatureA =
-          JSON.stringify(response.data[i].GasPump2.MotorPhaseTemperatureA);
-        this.res[this.sum - this.int].GasPump2.MotorPhaseTemperatureB =
-          JSON.stringify(response.data[i].GasPump2.MotorPhaseTemperatureB);
-        this.res[this.sum - this.int].GasPump2.MotorPhaseTemperatureC =
-          JSON.stringify(response.data[i].GasPump2.MotorPhaseTemperatureC);
-        this.res[this.sum - this.int].GasPump2.MotorFrontShaftTemperature =
-          JSON.stringify(response.data[i].GasPump2.MotorFrontShaftTemperature);
-        this.res[this.sum - this.int].GasPump2.MotorRearShaftTemperature =
-          JSON.stringify(response.data[i].GasPump2.MotorRearShaftTemperature);
-        this.res[this.sum - this.int].GasPump2.ReducerShaftTemperature =
-          JSON.stringify(response.data[i].GasPump2.ReducerShaftTemperature);
+        this.res[
+          this.sum - this.int
+        ].GasPump2.MotorPhaseTemperatureA = JSON.stringify(
+          response.data[i].GasPump2.MotorPhaseTemperatureA
+        );
+        this.res[
+          this.sum - this.int
+        ].GasPump2.MotorPhaseTemperatureB = JSON.stringify(
+          response.data[i].GasPump2.MotorPhaseTemperatureB
+        );
+        this.res[
+          this.sum - this.int
+        ].GasPump2.MotorPhaseTemperatureC = JSON.stringify(
+          response.data[i].GasPump2.MotorPhaseTemperatureC
+        );
+        this.res[
+          this.sum - this.int
+        ].GasPump2.MotorFrontShaftTemperature = JSON.stringify(
+          response.data[i].GasPump2.MotorFrontShaftTemperature
+        );
+        this.res[
+          this.sum - this.int
+        ].GasPump2.MotorRearShaftTemperature = JSON.stringify(
+          response.data[i].GasPump2.MotorRearShaftTemperature
+        );
+        this.res[
+          this.sum - this.int
+        ].GasPump2.ReducerShaftTemperature = JSON.stringify(
+          response.data[i].GasPump2.ReducerShaftTemperature
+        );
         this.int++;
       }
       if (this.oldres != this.res) {
@@ -637,7 +711,7 @@ export default {
 
 <style lang="scss" scoped>
 @import "@/assets/scss/index.scss";
-@import '@/assets/scss/style.scss';
+@import "@/assets/scss/style.scss";
 #appp {
   width: 1700px;
   height: 800px;