cac-fronted/src/views/homePage/clamp/index.vue

<template>
  <div class="clampBox">
    <!-- <div class="tendencyChartText" @click="tendencyChartChange()">趋势图</div> -->
    <h3>{{ pageCardTitle }}</h3>
    <div class="cardContent">
      <el-table
        :data="clmpData"
        height="100%"
        border
        highlight-current-row
        size="mini"
        @row-click="handleRowClick"
      >
        <el-table-column prop="id" label="id" width="50"> </el-table-column>
        <!-- <el-table-column prop="jgName" label="间隔"> </el-table-column> -->
        <el-table-column prop="zsbName" label="主设备名称"> </el-table-column>
        <el-table-column prop="name" label="名称"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { monitoringListApi, getDetailApi } from "@/utils/api/index";
export default {
  name: "clamp",
  data() {
    return {
      pageCardTitle: "铁芯",
      clmpData: [],
      // 趋势图信息
      tendencyChartTitle: "",
      legendData: [],
      xAxisData: [],
      seriesData: [],
      chartBackground: [
        "238,102,102",
        "145,204,117",
        "250,200,88",
        "115,192,222",
        "59,162,114",
        "252,132,82",
        "154,96,180",
        "234,124,204",
        "3,188,255",
      ],
    };
  },
  created() {
    this.getclampdata();
  },
  methods: {
    getclampdata() {
      monitoringListApi({
        typeId: 2,
      })
        .then((res) => {
          console.log(res);
          this.clmpData = res.data.content;
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //点击当前行
    //点击当前行
    handleRowClick(row) {
      console.log(row); // 这里会打印出被点击的行的数据

      this.tendencyChartTitle = "";
      this.legendData = [];
      this.xAxisData = [];
      this.seriesData = [];
      this.tendencyChartTitle = row.name;
      getDetailApi({
        id: row.id,
        pageNum: this.page,
        pageSize: this.pageSize,
      })
        .then((res) => {
          console.log(res);
          if (res.success) {
            console.log(res);
            let pointsData = res.data.points;
            this.xAxisData = res.data.content.map(
              (item) => item.acquisitionTime
            );

            for (var i = 0; i < pointsData.length; i++) {
              console.log(pointsData[i]);
              console.log(pointsData[i].fieldDesc);
              this.seriesData.push({
                name: pointsData[i].fieldDesc,
                type: "line",
                data: pointsData[i].data,
                areaStyle: {
                  normal: {
                    // 填充色渐变
                    color: new this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: "rgba(" + this.chartBackground[i] + ",0.3)",
                        },
                        {
                          offset: 0.5,
                          color: "rgba(" + this.chartBackground[i] + ",0.1)",
                        },
                        { offset: 1, color: "rgba(58, 167, 255,0)" },
                      ]
                    ),
                  },
                },
                // 曲线柔和
                smooth: true,
                itemStyle: {
                  normal: {
                    lineStyle: {
                      width: 3,
                    },
                  },
                },
              });
              this.legendData.push(pointsData[i].fieldDesc);
            }
            console.log(this.legendData);
            console.log(this.xAxisData);
            console.log(this.seriesData);
            this.$emit(
              "dataDispose",
              this.legendData,
              this.xAxisData,
              this.seriesData,
              this.tendencyChartTitle
            );
            // this.handleSearch();
          } else {
            this.$message({
              showClose: true,
              message: res.errorMsg,
              type: "error",
            });
          }
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
  },
};
</script>

<style lang="less">
.clampBox {
  background: url(../../../assets/card2Bg.png) no-repeat center;
  background-size: 100% 100%;
  position: relative;
  height: 280px;
  margin-bottom: 10px;
  h3 {
    height: 50px;
    line-height: 50px;
    padding: 0px 60px 0px 20px;
    box-sizing: border-box;
    color: #03bcff;
    font-weight: normal;
    text-align: left;
    display: flex;
    font-size: 16px;
    justify-content: space-between;
    align-items: center;
  }
  .tendencyChartText {
    writing-mode: vertical-lr;
    position: absolute;
    right: 8px;
    top: 15px;
    color: #fff;
    font-weight: normal;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0px;
    text-align: left;
    cursor: pointer;
    &:hover {
      color: #03bcff;
    }
  }
  .cardContent {
    padding: 10px !important;
    box-sizing: border-box;
    height: calc(100% - 52px);
    .el-table--mini .el-table__cell {
      padding: 3px 0;
      text-align: center;
      color: #03bcff;
    }
    .el-table td.el-table__cell,
    .el-table th.el-table__cell.is-leaf {
      border-bottom: 1px solid #03bcff;
    }
    .el-table--border .el-table__cell {
      border-right: 1px solid #03bcff;
    }
    .el-table {
      border: 1px solid #03bcff;
      background-color: transparent; /* 设置为透明背景 */
      tr {
        background-color: transparent; /* 设置为透明背景 */
      }
      th.el-table__cell {
        background-color: transparent; /* 设置为透明背景 */
      }
    }
    .el-table__row,
    .el-table__body-wrapper {
      background-color: transparent; /* 确保行和单元格也是透明的 */
    }
  }
  .el-table::before {
    height: 0px;
  }
  .el-table--border::after,
  .el-table--group::after {
    width: 0px;
  }
  .el-table--border th.el-table__cell.gutter:last-of-type {
    //background: #03bcff !important;
    border-bottom: 1px solid #03bcff;
  }
  .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
    background-color: #296479;
    cursor: pointer;
  }
  .el-table__body tr.current-row > td.el-table__cell {
    background-color: #296479;
  }
  ::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
  }
  ::-webkit-scrollbar-thumb {
    background-color: #03bcff;
    /* 关键代码 */
    border-radius: 32px;
  }
  /* 滚动条轨道 */
  ::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 32px;
  }
}
</style>