performance-test/src/views/admin/cockpitManage/component/leftdata.vue

<template>
  <div class="backbone">
    <div class="BOXYI">
      <h3>待办任务</h3>
      <div class="BOXsan">
        <div class="YC02" @click="getwgl">
          <strong class="texyellow">
            {{ onrelevance ? onrelevance : 0 }}</strong
          >
          <span>分析异常数</span>
        </div>
        <div class="YC02" @click="getwfx">
          <strong class="textred"> {{ abnormal ? abnormal : 0 }}</strong>
          <span>失败分析数</span>
        </div>

        <div class="YC03">
          <strong class="textred"> {{ abnormal ? abnormal : 0 }}</strong>
          <span>排队任务数</span>
        </div>
      </div>

      <el-dialog title="未关联任务统计表" :visible.sync="glShow" width="40%">
        <!-- 外部容器设置最大高度和滚动条 -->
        <div style="max-height: 400px; overflow-y: auto">
          <el-table :data="glData" style="width: 100%">
            <el-table-column
              prop="fieldName"
              label="风场名称"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="analysisName"
              label="分析名称"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间"
            ></el-table-column>

            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button
                  @click="handleClick(scope.row)"
                  type="text"
                  size="small"
                  >编辑</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-dialog>

      <el-dialog title="分析异常统计表" :visible.sync="YCShow" width="40%">
        <div style="max-height: 400px; overflow-y: auto">
          <el-table :data="FXData" style="width: 100%">
            <el-table-column prop="fieldName" label="风场名称" width="180">
            </el-table-column>
            <el-table-column prop="analysisName" label="分析名称" width="180">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button
                  @click="YChandleClick(scope.row)"
                  type="text"
                  size="small"
                  >编辑</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-dialog>
    </div>

    <!-- 入库信息 -->

    <div class="BOX">
      <h3 class="centeredh3">
        入库数据
        <span>
          <span style="cursor: pointer" @click="importdata">导入数据</span>
          <span style="cursor: pointer" @click="more">更多</span>
        </span>
      </h3>
      <div>
        <p class="titleYC"><span>风场名称</span><span>入库时间</span></p>
        <tabroll
              :table-data="tableData"
          :shujuloading="shujuloading"
          :columns="YCtableColumns"
          :column-widths="YCcolumnWidths"
          :max-height="140"
        ></tabroll>

        <!-- <el-table
          :data="tableData"
          :max-height="maxHeight"
          ref="shujuscroll_Table"
          strip
          id="Tabtab"
          show-overflow-tooltip
          :header-cell-style="{ backgroundColor: 'red' }"
        >
          <el-table-column
            prop="windFarmName"
            label="风场名称"
            width="130"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="时间"
            width="150"
            show-overflow-tooltip
          >
          </el-table-column>
        </el-table> -->
      </div>
    </div>

    <el-dialog title="入库信息" width="70%" :visible.sync="dialogTableVisible">
      <el-button size="small" @click="importdata">导入数据</el-button>
      <el-table :data="gridData" style="max-height: 400px; overflow: auto">
        <el-table-column
          property="windFarmName"
          label="风场名称"
          show-overflow-tooltip
          width="150px"
        ></el-table-column>
        <el-table-column
          property="minuteTimeAreaList"
          label="SCADA分钟级"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          property="secondTimeAreaList"
          label="SCADA秒级"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          property="faultTimeAreaList"
          label="故障数据"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          property="warnTimeAreaList"
          label="报警数据"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          property="vibrationTimeAreaList"
          label="振动数据"
          show-overflow-tooltip
        ></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryWaitTask,
  getAnalysisResultStateList,
  getAnalysisResultErrStateList,
  analysisResultList,
} from "@/api/ledger.js";
import axios from "axios";
import Tabroll from "./tabroll.vue";
export default {
  // props: {
  //   maplistArr: {
  //     type: Object,
  //     default: () => ({}),
  //   },
  //   defaultdata: {
  //     type: Object,
  //     default: () => ({}),
  //   },
  // },
  components: {
    Tabroll,
  },
  data() {
    return {
      onrelevance: "",
      abnormal: "",
      glShow: false,
      YCShow: false,
      dialogTableVisible: false,
      glData: [],
      FXData: [],
      tableData: [],
      maxHeight: "200",
      gridData: [],
      shujuloading: false,
      YCtableColumns: [{ prop: "windFarmName" }, { prop: "createTime" }],
      YCcolumnWidths: {
        windFarmName: 130,
        createTime: 150,
      },
    };
  },
  created() {
    this.getbacklog();
    this.ruku();
  },
  mounted() {},
  methods: {
    getbacklog() {
      queryWaitTask().then((res) => {
        this.abnormal = res.data.errCount;
        this.onrelevance = res.data.uncorrelatedCount;
      });
    },
    getwgl() {
      const arr = {
        pageSize: 999,
        analysisState: -1,
      };
      analysisResultList(arr).then((res) => {
        this.glData = res.data.list;
        this.glShow = true;
      });
    },
    getwfx() {
      analysisResultList({ errState: 1 }).then((res) => {
        this.FXData = res.data.list;
        this.YCShow = true;
      });
    },

    handleClick(row) {
      const fieldName = row.fieldName; // 获取当前行的 fieldName 数据
      const analysisState = -1;

      // 打开新窗口
      const newWindow = window.open(
        "/home/performance/assetssMag?id=195",
        "_blank"
      );
      // 等待窗口加载完成后发送消息
      newWindow.onload = () => {
        newWindow.postMessage({ fieldName, analysisState }, "*");
      };
    },

    YChandleClick(row) {
      const fieldName = row.fieldName; // 获取当前行的 fieldName 数据
      const errState = 1;
      // 打开新窗口
      const newWindow = window.open(
        "/home/performance/assetssMag?id=195",
        "_blank"
      );
      // 等待窗口加载完成后发送消息
      newWindow.onload = () => {
        newWindow.postMessage({ fieldName, errState }, "*");
      };
    },

    more() {
      this.dialogTableVisible = true;
      axios
        .post(`/ETLapi/dataTransfer/pltIndexMore`)
        .then((res) => {
          if (res.data.code === 200) {
            this.gridData = res.data.datas.map((item) => {
              // 合并数组中的元素，用 '/' 分隔
              if (
                item.secondTimeAreaList &&
                item.secondTimeAreaList.length > 0
              ) {
                item.secondTimeAreaList = [item.secondTimeAreaList.join(" / ")];
              }
              if (item.faultTimeAreaList && item.faultTimeAreaList.length > 0) {
                item.faultTimeAreaList = [item.faultTimeAreaList.join(" / ")];
              }
              if (
                item.minuteTimeAreaList &&
                item.minuteTimeAreaList.length > 0
              ) {
                item.minuteTimeAreaList = [item.minuteTimeAreaList.join(" / ")];
              }
              if (
                item.vibrationTimeAreaList &&
                item.vibrationTimeAreaList.length > 0
              ) {
                item.vibrationTimeAreaList = [
                  item.vibrationTimeAreaList.join(" / "),
                ];
              }
              if (item.warnTimeAreaList && item.warnTimeAreaList.length > 0) {
                item.warnTimeAreaList = [item.warnTimeAreaList.join(" / ")];
              }

              return item;
            });
          }
          if (res.data.code === 500) {
            this.$message.error(res.data.message);
          }
        })
        .catch((error) => {
          console.error("Error fetching data:", error);
        });
    },
    importdata() {
      window.open(this.$router.resolve({ path: "/transition" }).href, "_blank");
    },

    ruku() {
      axios
        .post(`/ETLapi/dataTransfer/recentlyImportedSuccessful5Data`)
        .then((res) => {
          if (res.data.code === 200) {
            this.tableData = res.data.datas;
          }
          if (res.data.code === 500) {
            this.$message.error(res.data.message);
          }
        })
        .catch((error) => {
          console.error("Error fetching data:", error);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.backbone {
  width: 300px;
  color: #fff;
  border-radius: 5px;
  //   padding: 20px;
}

.BOXYI {
  background: rgba(0, 79, 95, 0.8);
  display: flex;
  flex-wrap: wrap;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 15px;
  color: #fff;
  border-radius: 5px;
  margin-bottom: 10px;
  .BOXsan {
    width: 100%;
    display: flex;
    justify-content: space-around;

    .YC01 {
      width: 154px;
      height: 60px;
      background-image: url("../../../../assets/001.png");
      background-size: 154px 60px;
      background-repeat: no-repeat;
      background-position: center;

      margin-top: 15px;
      text-align: center;

      strong {
        display: block;
        font-size: 26px;
        color: #4bffff;
      }

      span {
        display: block;
        font-size: 12px;
      }
    }

    .YC02 {
      width: 70px;
      height: 60px;
      background-image: url("../../../../assets/002.png");
      background-size: 70px 60px;
      background-repeat: no-repeat;
      background-position: center;

      margin-top: 15px;
      text-align: center;
      cursor: pointer;
      .textred {
        color: #d9001b;
      }

      .texyellow {
        color: #facd91;
      }

      strong {
        display: block;
        font-size: 26px;
        color: #4bffff;
      }

      span {
        display: block;
        font-size: 12px;
      }
    }

    .YC03 {
      width: 70px;
      height: 60px;
      background-image: url("../../../../assets/002.png");
      background-size: 70px 60px;
      background-repeat: no-repeat;
      background-position: center;

      margin-top: 15px;
      text-align: center;
      cursor: pointer;
      .textred {
        color: #d9001b;
      }

      .texyellow {
        color: #facd91;
      }

      strong {
        display: block;
        font-size: 26px;
        color: #4bffff;
      }

      span {
        display: block;
        font-size: 12px;
      }
    }
  }
  h3 {
    margin-top: 5px;
    width: 100%;
  }
}
.BOX {
  background: rgba(0, 79, 95, 0.8);
  display: flex;
  padding-left: 10px;
  flex-wrap: wrap;
  padding-bottom: 15px;
  color: #fff;
  border-radius: 5px;
  margin-bottom: 10px;
  h3 {
    margin-top: 5px;
  }
  .centeredh3 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    span {
      font-size: 12px;
      padding-right: 10px;
    }
  }
}

.Tabtab {
  font-size: 12px;
}

::v-deep.el-table__cell {
  padding: 2px 0 !important;
}

::v-deep.el-table .el-table__cell {
  padding: 2px 0 !important;
}

::v-deep.el-table--scrollable-y .el-table__body-wrapper {
  overflow-y: clip !important;
}

.titleYC {
  font-size: 14px;
  background: #214e5d;
  padding: 5px 0;

  span:nth-child(1) {
    margin: 0 70px 0 10px;
  }
}

.titleJQ {
  font-size: 14px;
  background: #214e5d;
  padding: 5px 0;

  span:nth-child(1) {
    margin: 0 15px 0 10px;
  }

  span:nth-child(2) {
    margin: 0 45px 0 30px;
  }
}

#Tabtab {
  font-size: 12px;
}

::v-deep.el-table .el-table__cell {
  padding: 2px 0 !important;
}

/* 去掉最下面的那一条线 */
.el-table::before {
  height: 0px;
}

/* 滚动条样式 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  background-color: #004f5f;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 0px;
  opacity: 0.5;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 15px;
  // background-color: rgba(0, 79, 95, 0.75);
}

// 。。。。。。。。。。。。。。。。。。。。。。。。。。
#Tabtab {
  font-size: 12px;
}

::v-deep.el-table .el-table__cell {
  padding: 2px 0 !important;
}

/* 去掉最下面的那一条线 */
.el-table::before {
  height: 0px;
}

/* 滚动条样式 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  background-color: #004f5f;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 0px;
  opacity: 0.5;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 15px;
  // background-color: rgba(0, 79, 95, 0.75);
}
</style>