折线图修改

src/common/dataDetail/dataDetail_chart.vue

@@ -243,8 +243,8 @@ export default {
         if (resp) {
 
           this.tableHeader = resp.data.data;
-          console.log('this.tableHeader');
-          console.log(this.tableHeader);
+          // console.log('this.tableHeader');
+          // console.log(this.tableHeader);
           this.total = resp.data.total;
         }
       });
@@ -257,8 +257,7 @@ export default {
         //    console.log(this.hbasetablename);
         // this.getRequest('/dataList/getMeasurepointInfoBySubEuipId/?SubEuipId=' + this.currentSubEquipnameId + '&page=' + this.page + '&size=' + this.size).then(resp.data=>{
         if (resp.data){
-          console.log('resp.data');
-          console.log(resp.data);
+         
           var arr = [];
           for(let i in resp.data){
             var o={

src/common/oneline.vue

@@ -56,7 +56,7 @@ export default {
           extraCssText:
             "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 0;",
           formatter: (params) => {
-            console.log("params", params);
+         
             var result = `${this.title}：${params[0].data}${this.unit} <br/>`;
             return result;
           },

src/common/pieChart.vue

@@ -327,7 +327,7 @@ export default {
     },
   },
   mounted() {
-    console.log("angle", this.angle);
+    // console.log("angle", this.angle);
     this.chart = this.$echarts.init(this.$refs.pieChart);
     this.chart.setOption(this.option);
     // 动画效果

src/common/twoline.vue

@@ -382,7 +382,8 @@
 				};
 				// 收到消息的回调
 				this.websocket.onmessage = (event) => {
-					// console.log("onmessage", event);
+					console.log("@@@@", event);
+     
 					if (JSON.parse(event.data).length) {
 						this.addData(JSON.parse(event.data));
 					}
@@ -400,6 +401,7 @@
 			},
 		},
 		mounted() {
+      console.log("@@@@", this.id);
 			// 先画图
 			this.myChart = this.$echarts.init(this.$refs.testLine);
 			this.myChart.setOption(this.option);

src/router/index.js

@@ -662,14 +662,14 @@ const router = new Router({
     },
   ],
 });
-// router.beforeEach((to, from, next) => {
-//     let token = Vue.cookie.get('token')
-//     if (!token || !/\S/.test(token)) {
-//     //   clearLoginInfo()
-//       // next({ name: 'login' })
-//         window.location.href = "http://112.126.68.148/#/"
-//     }else{
-//         next()
-//     }
-//   })
+router.beforeEach((to, from, next) => {
+    let token = Vue.cookie.get('token')
+    if (!token || !/\S/.test(token)) {
+    //   clearLoginInfo()
+      // next({ name: 'login' })
+        window.location.href = "http://112.126.68.148/#/"
+    }else{
+        next()
+    }
+  })
 export default router;

src/store/index.js

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

src/views/compressed/dataBoard/dataBoard.vue

@@ -36,7 +36,7 @@
         <el-col :span="8">
           <div class="top_right">
             <!-- 电机振动 -->
-            <threeline ref="vibrate" :id="80" title="电机振动" unit="mm/s" :type="vibrateType" :legend="vibrateLegand"></threeline>
+            <oneline ref="virbrate" :id="92" title="电机振动" unit="mm/s" type="zhendong_after"></oneline>
           </div>
         </el-col>
       </el-row>

src/views/drain/dataBoard/dataBoard.vue

@@ -24,19 +24,19 @@
         <el-col :span="8">
           <div class="top_left">
             <!-- 电机电压 -->
-            <oneline ref="voltage" :id="23" title="电机电压" unit="V" type="dianjidianya_after"></oneline>
+            <oneline ref="voltage" :id="92" title="电机电压" unit="V" type="dianya_after"></oneline>
           </div>
         </el-col>
         <el-col :span="8">
           <div class="top_center">
             <!-- 电机电流 -->
-            <oneline ref="current" :id="23" title="电机电流" unit="A" type="dianjidianliu_after"></oneline>
+            <oneline ref="current" :id="92" title="电机电流" unit="A" type="dianliu_after"></oneline>
           </div>
         </el-col>
         <el-col :span="8">
           <div class="top_right">
             <!-- 电机前后轴温 -->
-            <twoline ref="bearing" :id="23" title="电机前后轴温" unit="°C" :type="bearingType" :legand="bearingLegand"></twoline>
+            <twoline ref="bearing" :id="92" title="电机前后轴温" unit="°C" :type="bearingType" :legend="bearingLegand"></twoline>
           </div>
         </el-col>
       </el-row>
@@ -47,19 +47,19 @@
         <el-col :span="8">
           <div class="center_left">
             <!-- 电机振动 -->
-            <oneline ref="virbrate" :id="23" 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-col :span="8">
           <div class="center_center">
             <!-- 水泵出口管道压力 -->
-            <twoline ref="pressure" :id="23" title="水泵出口管道压力" unit="Mpa" :type="pressureType" :legand="pressureLegand"></twoline>
+            <twoline ref="pressure" :id="93" title="水泵出口管道压力" unit="Mpa" :type="pressureType" :legend="pressureLegand"></twoline>
           </div>
         </el-col>
         <el-col :span="8">
           <div class="center_right">
             <!-- 水仓水位 -->
-            <oneline ref="water_level" :id="23" title="水仓水位" unit="m" type="shuiwei_after"></oneline>
+            <oneline ref="water_level" :id="94" title="水仓水位" unit="m" type="shuiwei_after"></oneline>
           </div>
         </el-col>
       </el-row>

src/views/power_supply/dataBoard/dataBoard.vue

@@ -33,11 +33,13 @@
         <!-- 电机电流曲线 -->
         <div class="bottom_right">
           <rightChart
-            ref="rightChart"
-            :id="8"
-            title="瓦斯泵电流"
+            ref="current"
+            :id="92"
+            title="电机电流"
             unit="A"
+            type="dianliu_after"
           ></rightChart>
+          
         </div>
       </div>
     </el-row>
@@ -45,6 +47,7 @@
 </template>
 
 <script>
+import oneline from '@/common/oneline'
 import centerLeft1 from "./centerLeft1";
 import centerRight1 from "./centerRight1";
 import leftChart from "@/views/power_supply/dataBoard/leftChart";
@@ -93,6 +96,7 @@ export default {
     centerRight1,
     leftChart,
     rightChart,
+    oneline
   },
 };
 </script>

src/views/power_supply/dataBoard/rightChart.vue

@@ -1,21 +1,43 @@
 <template>
-  <div
-    ref="testLine"
-    style="width: 450px; height: 400px; margin: 40px auto"
-  ></div>
+  <div>
+    <div
+      ref="testLine"
+      style="width: 450px; height: 400px; margin: 20px auto"
+    ></div>
+  </div>
 </template>
 
 <script>
 import { mapState } from "vuex";
 
 export default {
+  props: {
+    title: {
+      type:String,
+      default:''
+    },
+    id:{
+      type:Number,
+      required:true
+    },
+    unit:{
+      type:String,
+      default:''
+    },
+    type:{
+      type:String,
+      required:true
+    }
+},
   data() {
     return {
-      dianliudata: new Array(30).fill("-"),
+      currentChartId: 1,
       xData: new Array(30).fill("-"),
+      yData: new Array(30).fill("-"),
       count: 0,
       myChart: null,
       option: {
+        color: ["#41D6C3", "#FA8072"],
         tooltip: {
           trigger: "axis",
           axisPointer: {
@@ -34,14 +56,32 @@ export default {
           extraCssText:
             "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 0;",
           formatter: (params) => {
+         
             var result = `${this.title}：${params[0].data}${this.unit} <br/>`;
             return result;
           },
         },
+        grid: {
+        	top: '15%',
+        	left: '10%',
+        	right: '10%',
+        	bottom: '1%',
+        	containLabel: true
+        },
+        legend: {
+          orient: "vertical",
+          x: "left",
+          y: "top",
+          data: [],
+          textStyle: {
+            fontWeight: "normal",
+            color: "#fff",
+          },
+        },
         yAxis: [
           {
             boundaryGap: [0, "100%"],
-            name: `${this.unit}`,
+            name: this.unit,
             splitLine: {
               show: true,
               lineStyle: {
@@ -79,58 +119,62 @@ export default {
           },
         ],
         title: {
-          text: `${this.title}`,
-          padding: [5, 230],
+          text: this.title,
+          padding: [5, 170],
           textStyle: {
             fontWeight: "normal", //标题颜色
             color: "#4ADEFE",
+            fontSize:15
           },
         },
-        color: ["#41D6C3", "#5AAAFA"],
+
         series: [
-          {
-            name: `${this.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} ${this.unit}`,
-                },
-              },
-              symbol: "circle",
-              itemStyle: {
-                normal: {
-                  borderColor: "rgba(90,170,250,0.3)",
-                  borderWidth: 15,
-                },
+            symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
+            showAllSymbol: true,
+            symbolSize: 0,
+            smooth: true,
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: "rgba(255, 102, 102,1)", // 线条颜色
               },
-              symbolSize: 7,
-              data: [{ type: "max", name: "Max" }],
+              borderColor: "rgba(0,0,0,.4)",
             },
-            // 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",
-                },
-              ]),
+            itemStyle: {
+              color: "rgba(255, 102, 102,1)",
+              borderColor: "#646ace",
+              borderWidth: 2,
+            },
+            tooltip: {
+              show: true,
+            },
+            areaStyle: {
+              //区域填充样式
+              normal: {
+                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(255, 102, 102,.3)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(255, 102, 102, 0)",
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(255, 102, 102, 0.5)", //阴影颜色
+                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+              },
             },
-            areaStyle: { normal: { color: "#5AAAFA", opacity: 0.5 } },
-            connectNulls: true,
             data: [],
           },
         ],
@@ -140,30 +184,40 @@ export default {
   computed: {
     ...mapState(["websocketIP"]),
   },
-  props: ["id", "title", "unit"],
   methods: {
     idChange(id) {
-      console.log("right", id);
+      // console.log("sep", id);
+      // 数据清空
+      this.xData = new Array(30).fill("-");
+      this.yData = new Array(30).fill("-");
+      // 关闭以前的websocket
+      this.websocket.close();
+      // 开启一个新的
+      this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/${this.id}`);
+      this.initWebSocket();
     },
+
     addData(data) {
-      console.log("data", data);
+      this.websocket;
+      // 先扩展数组，然后删除多余元素
+      // console.log("data", data);
       if (this.count < 30) {
         for (let i = 0; i < data.length; i++) {
-          this.dianliudata[this.count] = data[i]["dianjidianliui_after"];
+          this.yData[this.count] = data[i][this.type];
           this.xData[this.count] = data[i]["date"].split(" ")[1];
         }
         this.count++;
       } else {
         for (let i = 0; i < data.length; i++) {
           // 删除数组中的第一个项目
-          this.dianliudata.shift();
-          this.dianliudata.push(data[i]["dianjidianliui_after"]);
-
+          this.yData.shift();
+          this.yData.push(data[i][this.type[0]]);
           this.xData.shift();
           this.xData.push(data[i]["date"].split(" ")[1]);
         }
       }
       this.myChart.setOption({
+    
         xAxis: [
           {
             data: this.xData,
@@ -171,11 +225,14 @@ export default {
         ],
         series: [
           {
-            name: "A",
-            data: this.dianliudata,
+            name: this.unit,
+            data: this.yData,
           },
         ],
       });
+      // console.log("this.paiqidata", this.paiqidata);
+      // console.log("this.chouqidata", this.chouqidata);
+      // console.log("this.xData", this.xData);
     },
     initWebSocket() {
       // 连接错误
@@ -213,11 +270,20 @@ 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.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/${this.id}`);
+    this.initWebSocket();
   },
 };
 </script>
-
+<style scoped>
+.select-veido .el-select {
+  width: 100px;
+  margin-left: 10px;
+}
+.select-veido >>> .el-input--small .el-input__inner {
+  background: none;
+}
+.select-veido >>> .el-input__inner {
+  border: 0;
+}
+</style>