试试监测页面 微震数据标题修改

src/views/baopo/baopoData/index.vue

@@ -11,8 +11,8 @@
         header-cell-style="background-color: #08267d; color: #96dcdf;border:1px solid #409EFF;"
       >
         <el-table-column label="序号" align="center" width="60" type="index" />
-        <el-table-column label="测点编码" align="center" prop="pointcode" />
-        <el-table-column label="巷道编号" align="center" prop="blastingId" />
+        <el-table-column label="安装位置" align="center" prop="pointcode" />
+        <el-table-column label="传感器编号" align="center" prop="blastingId" />
         <!-- <el-table-column label="微震值" align="center" prop="blastingValue" /> -->
         <el-table-column label="监测时间" align="center" prop="updatetime" />
         <el-table-column label="操作" align="center" width="180">

src/views/baopo/newData/index.vue

+<template>
+  <div class="app-container">
+    <div class="box-card">
+      <div class="top-title">
+        <span class="title-text">微震实时数据</span>
+        <span>
+          <el-select v-model="nameW" placeholder="请选择" @change="nameChange">
+            <el-option
+              v-for="item in nameList"
+              :key="item"
+              :label="item"
+              :value="item">
+            </el-option>
+          </el-select>
+        </span>
+      </div>
+      <div ref="drawRose" id="chart"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Vue from "vue";
+import ElementUI from "element-ui";
+Vue.use(ElementUI);
+import * as echarts from "echarts";
+import { microseismequipmentGetName, monBlastingCurve } from "@/api/query/ym";
+
+export default {
+  data() {
+    return {
+      nameList: [],
+      chartValue: [],
+      realTime: [],
+      nameW: '',
+      tongdao:null,
+    };
+  },
+  mounted() {
+    this.getNameData();
+  },
+  methods: {
+    getNameData() {
+      microseismequipmentGetName().then(res => {
+        this.nameList = res.data;
+        this.nameW = res.data[0];
+        return this.nameW;
+      }).then((nameW) => {
+        return monBlastingCurve(nameW);
+      }).then(res => {
+        this.chartValue = res.data[0].blasting_value;
+        this.realTime = res.data[0].updatetime.replace("T", " ");
+        this.tongdao = res.data[0].blasting_id;
+        this.drawRose();
+        this.realTimeData();
+      });
+    },
+    realTimeData() {
+      let that = this;
+      setInterval(() => {
+        monBlastingCurve(this.nameW).then(res => {
+          if(res&&res.data[0]){
+            this.chartValue = res.data[0].blasting_value;
+            this.realTime = res.data[0].updatetime.replace("T", " ");
+            this.tongdao = res.data[0].blasting_id;
+            this.drawRose();
+          }else{
+            this.chartValue=[0,0,0]
+            that.$message.error(`无${that.nameW}的数据`);
+          }
+        });
+      }, 10000);
+    },
+    nameChange(val) {
+      let that = this;
+      
+      monBlastingCurve(val).then(res => {
+        if(res&&res.data[0]){
+          this.nameW = val;
+          this.chartValue = res.data[0].blasting_value;
+          this.realTime = res.data[0].updatetime.replace("T", " ");
+          this.tongdao = res.data[0].blasting_id;
+          this.drawRose();
+        }else{
+          this.chartValue=[0,0,0]
+          that.$message.error(`无${val}的数据`);
+        }
+        
+      });
+    },
+    drawRose() {
+      this.$nextTick(() => {
+        let that = this;
+        let myChart = echarts.init(document.getElementById('chart'));
+        myChart.setOption({
+          backgroundColor: "#fff",
+          grid: {
+            x: 30,
+            y: 40,
+            x2: 30,
+            y2: 20,
+            containLabel: true,
+          },
+          color: ["#ff0000", "#2e98eb", "#7B3FF6", "#1F6DFE", "#34A6FE"],
+          title: {
+            text:`通道${that.tongdao} 时间${that.realTime}`,
+            left: 15,
+            bottom: 5,
+            top: 5,
+            textStyle: {
+              color: "#000",
+              fontSize: 16,
+            },
+          },
+          tooltip: {
+            trigger: "axis",
+            axisPointer: {
+              type: "line",
+            },
+            textStyle: {
+              color: "#000",
+            },
+            formatter: function (params) {
+              let relVal = "";
+              for (let i = 0; i < params.length; i++) {
+                relVal += "监测值:" + params[i].value + "mm" + "<br/>";
+              }
+              return relVal;
+            },
+          },
+          xAxis: {
+            show: false,
+            data: this.chartValue,
+          },
+          yAxis: [
+            {
+              type: "value",
+              nameTextStyle: {
+                color: "#000",
+              },
+              scale: true,
+              min: (value) => value.min,
+              max: (value) => value.max,
+              splitLine: {
+                lineStyle: {
+                  color: "#081f52",
+                },
+              },
+              axisTick: {
+                show: false,
+                inside: true,
+              },
+              axisLine: {
+                show: false,
+              },
+              axisLabel: {
+                show: true,
+                color: "#000",
+                fontSize: 12,
+                margin: 10,
+                formatter: "{value}",
+              },
+            },
+          ],
+          series: [
+            {
+              data: this.chartValue,
+              type: "line",
+              showSymbol: false,
+              color: "#ff0000"
+            },
+          ],
+        });
+      });
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.app-container {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  .box-card {
+    width: 100%;
+    background-color: #041c58;
+    .top-title {
+      width: 100%;
+      height: 50px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      padding-left: 20px;
+      .title-text {
+        font-size: 22px;
+        font-weight: bold;
+        line-height: 30px;
+        padding-left: 10px;
+        letter-spacing: 0.1rem;
+        background-image: linear-gradient(to right, #03f2cf, #03bef1);
+        color: transparent;
+        -webkit-background-clip: text;
+      }
+    }
+  }
+}
+#chart {
+  width: 98%;
+  height: 500px;
+  margin: 0 auto;
+}
+</style>

vue.config.js

@@ -34,8 +34,8 @@ module.exports = {
 		open: true,
 		proxy: {
 			[process.env.VUE_APP_BASE_API]: {
-				// target: `http://192.168.0.103:8085/lswz`, // 线上内网
-				target: `http://192.168.3.188:8085/lswz`,
+				target: `http://192.168.0.103:8085/lswz`, // 线上内网
+				// target: `http://192.168.3.188:8085/lswz`,
 				//target: `http://192.168.3.37:8085/lswz`,
 				// target: `http://10.50.70.100:8085/lswz`,
 				changeOrigin: true,