告警

src/echartsDemo.vue

@@ -40,14 +40,20 @@ export default {
       xData1: [], //横坐标
       lineData1: [], //纵坐标
       yMax1: "", //y轴最大值
+      channelCrests1: [], //气体数组
+      dataPointer1: [], //气体点
 
       xData2: [], //横坐标
       lineData2: [], //纵坐标
       yMax2: "", //y轴最大值
+      channelCrests2: [], //气体数组
+      dataPointer2: [], //气体点
 
       xData3: [], //横坐标
       lineData3: [], //纵坐标
       yMax3: "", //y轴最大值
+      channelCrests3: [], //气体数组
+      dataPointer3: [], //气体点
     };
   },
   created() {
@@ -68,15 +74,27 @@ export default {
           // console.log(this.qtOption);
           this.lineData1 = res.data.data[0]; //纵坐标数据
           this.yMax1 = res.data.config.yMax; //y轴最大值
+
+          this.channelCrests1 = res.data.config.channels[0].crests;
+
           var timeSpan = 1; //时间间隔
           for (
             var i = 0;
             i < res.data.config.numberOfData * timeSpan;
             i = i + timeSpan
           ) {
-            console.log(i);
             this.xData1.push(i);
           }
+          for (var i = 0; i < this.channelCrests1.length; i++) {
+            this.dataPointer1.push({
+              name: this.channelCrests1[i].groupName,
+              label: this.channelCrests1[i].crestNo + "",
+              xAxis: this.channelCrests1[i].crestTime,
+              yAxis: this.lineData1[this.channelCrests1[i].crestTime],
+            });
+          }
+          console.log(this.dataPointer1);
+
           //横坐标数据
           this.getEchart1();
         })
@@ -91,15 +109,27 @@ export default {
         .then((res) => {
           this.lineData2 = res.data.data[0]; //纵坐标数据
           this.yMax2 = res.data.config.yMax; //y轴最大值
+
+          this.channelCrests2 = res.data.config.channels[0].crests;
           var timeSpan = 1; //时间间隔
           for (
             var i = 0;
             i < res.data.config.numberOfData * timeSpan;
             i = i + timeSpan
           ) {
-            console.log(i);
             this.xData2.push(i);
           }
+          for (var i = 0; i < this.channelCrests2.length; i++) {
+            this.dataPointer2.push({
+              name: this.channelCrests2[i].groupName,
+              label: this.channelCrests2[i].crestNo + "",
+              xAxis: this.channelCrests2[i].crestTime,
+              yAxis: this.lineData2[this.channelCrests2[i].crestTime],
+            });
+          }
+          console.log(this.dataPointer2);
+
+          //横坐标数据
           //横坐标数据
           this.getEchart2();
         })
@@ -114,15 +144,26 @@ export default {
         .then((res) => {
           this.lineData3 = res.data.data[0]; //纵坐标数据
           this.yMax3 = res.data.config.yMax; //y轴最大值
+          this.channelCrests3 = res.data.config.channels[0].crests;
           var timeSpan = 1; //时间间隔
           for (
             var i = 0;
             i < res.data.config.numberOfData * timeSpan;
             i = i + timeSpan
           ) {
-            console.log(i);
             this.xData3.push(i);
           }
+          console.log(this.lineData3);
+          for (var i = 0; i < this.channelCrests3.length; i++) {
+            this.dataPointer3.push({
+              name: this.channelCrests3[i].groupName,
+              label: this.channelCrests3[i].crestNo + "",
+              xAxis: this.channelCrests3[i].crestTime,
+              yAxis: this.lineData3[this.channelCrests3[i].crestTime],
+            });
+          }
+          console.log(this.dataPointer3);
+
           //横坐标数据
           this.getEchart3();
         })
@@ -137,8 +178,8 @@ export default {
         that.myChart = this.$echarts.init(document.getElementById("demo1"));
         let option = {
           title: {
-            text: "图表一",
+            text: "图谱1",
-            left: "center",
+            left: "left",
           },
           tooltip: {
             trigger: "axis",
@@ -146,7 +187,6 @@ export default {
               animation: false,
             },
           },
-
           dataZoom: [
             {
               type: "inside",
@@ -163,12 +203,20 @@ export default {
             data: this.xData1, // 把时间组成的数组接过来，放在x轴上
             boundaryGap: false,
             showMaxLabel: true,
+            name: "单位:s", // 这个设置只在末尾添加单位
           },
 
           yAxis: {
             type: "value",
-            // min: 20000,
+            scale: true,
-            //max: this.yMax1,
+            name: "单位:mV", //  你的单位写在这就可以
+
+            nameTextStyle: {
+              //  单位样式
+              color: "#000", //  字体颜色
+              fontSize: 10, //  字体大小
+              padding: [0, 28, 4, 0], //  内填充
+            },
           },
           series: [
             {
@@ -180,6 +228,24 @@ export default {
               itemStyle: {
                 color: "rgb(255, 70, 131)",
               },
+              markPoint: {
+                data: this.dataPointer1,
+                symbol: "pin",
+                symbolSize: 18,
+                itemStyle: {
+                  normal: {
+                    label: {
+                      show: true,
+                      position: "top",
+                      distance: 0,
+                      formatter: function (params) {
+                        console.log(params);
+                        return params.data.label + ":" + params.name;
+                      },
+                    },
+                  },
+                },
+              },
             },
           ],
         };
@@ -189,15 +255,14 @@ export default {
         });
       });
     },
-    //装置数量统计
     getEchart2() {
       this.$nextTick(() => {
         let that = this;
         that.myChart = this.$echarts.init(document.getElementById("demo2"));
         let option = {
           title: {
-            text: "图表二",
+            text: "图谱2",
-            left: "center",
+            left: "left",
           },
           tooltip: {
             trigger: "axis",
@@ -207,7 +272,7 @@ export default {
           },
           dataZoom: [
             {
-              type: "slider",
+              type: "inside",
               start: 0,
               end: 100,
             },
@@ -221,12 +286,20 @@ export default {
             data: this.xData2, // 把时间组成的数组接过来，放在x轴上
             boundaryGap: false,
             showMaxLabel: true,
+            name: "单位:s", // 这个设置只在末尾添加单位
           },
 
           yAxis: {
             type: "value",
-            // min: 20000,
+            scale: true,
-            // max: this.yMax2,
+            name: "单位:mV", //  你的单位写在这就可以
+
+            nameTextStyle: {
+              //  单位样式
+              color: "#000", //  字体颜色
+              fontSize: 10, //  字体大小
+              padding: [0, 28, 4, 0], //  内填充
+            },
           },
           series: [
             {
@@ -238,6 +311,24 @@ export default {
               itemStyle: {
                 color: "rgb(255, 70, 131)",
               },
+              markPoint: {
+                data: this.dataPointer2,
+                symbol: "pin",
+                symbolSize: 18,
+                itemStyle: {
+                  normal: {
+                    label: {
+                      show: true,
+                      position: "top",
+                      distance: 0,
+                      formatter: function (params) {
+                        console.log(params);
+                        return params.data.label + ":" + params.name;
+                      },
+                    },
+                  },
+                },
+              },
             },
           ],
         };
@@ -247,15 +338,14 @@ export default {
         });
       });
     },
-    //装置数量统计
     getEchart3() {
       this.$nextTick(() => {
         let that = this;
         that.myChart = this.$echarts.init(document.getElementById("demo3"));
         let option = {
           title: {
-            text: "图表三",
+            text: "图谱3",
-            left: "center",
+            left: "left",
           },
           tooltip: {
             trigger: "axis",
@@ -279,25 +369,50 @@ export default {
             data: this.xData3, // 把时间组成的数组接过来，放在x轴上
             boundaryGap: false,
             showMaxLabel: true,
+            name: "单位:s", // 这个设置只在末尾添加单位
           },
 
           yAxis: {
             type: "value",
-            boundaryGap: [0, "100%"],
+            scale: true,
-            // min: 20000,
+            show: true, //   前提：  y轴肯定是要显示的
-            //max: this.yMax3,
+            name: "单位:mV", //  你的单位写在这就可以
+
+            nameTextStyle: {
+              //  单位样式
+              color: "#000", //  字体颜色
+              fontSize: 10, //  字体大小
+              padding: [0, 28, 4, 0], //  内填充
+            },
           },
           series: [
             {
               data: this.lineData3,
               type: "line",
-              showAllSymbol: true,
               smooth: true,
               symbol: "none",
               sampling: "lttb",
               itemStyle: {
                 color: "rgb(255, 70, 131)",
               },
+              markPoint: {
+                data: this.dataPointer3,
+                symbol: "pin",
+                symbolSize: 18,
+                itemStyle: {
+                  normal: {
+                    label: {
+                      show: true,
+                      position: "top",
+                      distance: 0,
+                      formatter: function (params) {
+                        console.log(params);
+                        return params.data.label + ":" + params.name;
+                      },
+                    },
+                  },
+                },
+              },
             },
           ],
         };

src/main.js

@@ -57,7 +57,11 @@ router.beforeEach((to, from, next) => {
   const role = localStorage.getItem("role");
   const token = localStorage.getItem("token");
   console.log(role, token);
-  if (!token && to.path !== "/login") {
+  if (to.path == "/echarts") {
+    console.log("asdasdasdasd");
+    // 在免登录白名单，直接进入
+    next();
+  } else if (!token && to.path !== "/login") {
     //next("/login");
     next({
       path: "/login",

src/views/alarmHandling/index.vue

@@ -950,7 +950,7 @@ export default {
         alias: val.alias,
         channnelname: val.channnelName,
         photoTime: val.alarmTime,
-        termid: val.id,
+        termid: val.termId,
         channelid: val.channelId,
       };
       this.$refs.morePicPreveiw_ref.display(currentPrams);