添加谱图内容

src/views/clientDownFile/downrecord/index.vue

@@ -63,6 +63,17 @@
               <span>{{ scope.row.createTime }}</span>
             </template>
           </el-table-column>
+          <el-table-column label="操作" width="200" class-name="editClass">
+            <template slot-scope="scope">
+              <el-link
+                type="primary"
+                @click="handleLookClick(scope.row)"
+                size="small"
+                icon="el-icon-document"
+                >查看图谱</el-link
+              >
+            </template>
+          </el-table-column>
         </el-table>
         <div class="pageNation">
           <el-pagination
@@ -78,6 +89,21 @@
         </div>
       </div>
     </div>
+    <el-dialog
+      title="图谱"
+      :visible.sync="tpdialogVisible"
+      width="860px"
+      class="tpboxCharts"
+      @close="closeCharts"
+      v-if="tpdialogVisible"
+    >
+      <span v-if="tpRow.config">{{ tpRow.config.sensor.name }}</span>
+      <span v-else>{{ tpRow.configId }}</span>
+      <div id="tpEchartBox"></div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="closeCharts">关闭</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -95,6 +121,16 @@ export default {
       total: 0, //总条数
       serverOption: [{ id: -1, sensor: { name: "全部" } }], //服务器名称
       serverVal: "",
+
+      tpdialogVisible: false,
+      tpRow: "", //选中的图片当前行数据
+      tpModleData: "", //当前行的图谱数据
+      myChart: "",
+      xData4: [], //横坐标
+      lineData4: [], //纵坐标
+      yMax4: "", //y轴最大值
+      channelCrests4: [], //气体数组
+      dataPointer4: [], //气体点
     };
   },
   created() {
@@ -145,6 +181,145 @@ export default {
           console.log(err); //代码错误、请求失败捕获
         });
     },
+    handleLookClick(row) {
+      console.log(row);
+      // 判断是否存在 model 字段
+      if (row.model) {
+        // 如果有 model 字段，弹窗
+        // 这里可以进一步处理 model 数据，例如显示图谱
+        this.tpdialogVisible = true;
+        this.tpRow = row;
+        this.tpModleData = row.model;
+        this.lineData4 = this.tpModleData.channels[0].data; //纵坐标数据
+        this.yMax4 = this.tpModleData.yMax; //y轴最大值
+        this.channelCrests4 = this.tpModleData.channels[0].crests;
+        var timeSpan = 1; //时间间隔
+        for (var i = 0; i < this.tpModleData.k * timeSpan; i = i + timeSpan) {
+          this.xData4.push(i);
+        }
+        console.log(this.lineData4);
+        for (var i = 0; i < this.channelCrests4.length; i++) {
+          this.dataPointer4.push({
+            name: this.channelCrests4[i].name,
+            label: this.channelCrests4[i].j + "",
+            xAxis: this.channelCrests4[i].time,
+            yAxis: this.lineData4[this.channelCrests4[i].time],
+          });
+        }
+        console.log(this.dataPointer4);
+
+        //横坐标数据
+        this.$nextTick(() => {
+          this.getEchart4();
+        });
+      } else {
+        // 如果没有 model 字段，提示图谱数据不存在
+        this.$message({
+          showClose: true,
+          message: "暂无图谱数据",
+          type: "warning",
+        });
+      }
+    },
+    getEchart4() {
+      this.$nextTick(() => {
+        let that = this;
+        that.myChart = this.$echarts.init(
+          document.getElementById("tpEchartBox")
+        );
+        let option = {
+          // title: {
+          //   text: "图谱4",
+          //   left: "left",
+          // },
+          tooltip: {
+            trigger: "axis",
+            axisPointer: {
+              animation: false,
+            },
+          },
+          dataZoom: [
+            {
+              type: "inside",
+              start: 0,
+              end: 100,
+            },
+            {
+              start: 0,
+              end: 100,
+            },
+          ],
+          xAxis: {
+            type: "category",
+            data: this.xData4, // 把时间组成的数组接过来，放在x轴上
+            boundaryGap: false,
+            axisLabel: {
+              //interval: 0, // 显示所有刻度标签
+              showMaxLabel: true, // 确保显示最后一个刻度标签
+            },
+
+            // showMaxLabel: true,
+            name: "单位:s", // 这个设置只在末尾添加单位
+          },
+
+          yAxis: {
+            type: "value",
+            scale: true,
+            show: true, //   前提：  y轴肯定是要显示的
+            name: "单位:mV", //  你的单位写在这就可以
+
+            nameTextStyle: {
+              //  单位样式
+              color: "#000", //  字体颜色
+              fontSize: 10, //  字体大小
+              padding: [0, 28, 4, 0], //  内填充
+            },
+          },
+          series: [
+            {
+              data: this.lineData4,
+              type: "line",
+              smooth: true,
+              symbol: "none",
+              sampling: "lttb",
+              itemStyle: {
+                color: "rgb(255, 70, 131)",
+              },
+              markPoint: {
+                data: this.dataPointer4,
+                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;
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          ],
+        };
+        that.myChart.setOption(option);
+        window.addEventListener("resize", () => {
+          that.myChart.resize();
+        });
+      });
+    },
+    closeCharts() {
+      this.tpdialogVisible = false;
+      this.xData4 = []; //横坐标
+      this.lineData4 = []; //纵坐标
+      this.yMax4 = ""; //y轴最大值
+      this.channelCrests4 = []; //气体数组
+      this.dataPointer4 = []; //气体点
+    },
     //下载文件
     downFile(row) {
       // 创建一个新的a标签元素
@@ -211,4 +386,13 @@ export default {
     }
   }
 }
+.tpboxCharts {
+  .el-dialog__body {
+    height: 400px;
+    #tpEchartBox {
+      height: 380px;
+      width: 820px;
+    }
+  }
+}
 </style>