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" @click="getpd">
          <strong class="textred"> {{ queueNumber ? queueNumber : 0 }}</strong>
          <span>排队任务</span>
        </div>
      </div>

      <el-dialog title="待分析任务统计表" :visible.sync="glShow" width="45%">
        <!-- 外部容器设置最大高度和滚动条 -->
        <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="分析名称"
            ></el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间"
              width="180"
            ></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="45%">
        <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="分析名称">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="180">
            </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>

      <el-dialog title="排队任务统计表" :visible.sync="PdShow" width="45%">
        <div style="max-height: 400px; overflow-y: auto">
          <el-table :data="PdData" style="width: 100%">
            <el-table-column prop="fieldName" label="风场名称" width="180">
            </el-table-column>
            <el-table-column prop="analysisName" label="分析名称">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="180">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button @click="PDClick(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 style="cursor: pointer" @click="onlinedata">在线数据</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="实时数据采集统计"
      :visible.sync="lineShow"
      width="1340px"
      :before-close="handleClose"
    >
      <el-container>
        <el-aside width="300px">
          <h1>当日实时数据</h1>
          <el-input
            placeholder="请输入内容"
            size="small"
            v-model="searchvalue"
            prefix-icon="el-icon-search"
          ></el-input>
          <div class="windbox">
            <div
              class="windlist"
              v-for="(item, index) in windList"
              :key="index"
            >
              <h3>{{ item.fieldName }}</h3>
              <p>数据类型:{{ item.dataType }}</p>
              <p>采集次数:{{ item.collectCount }} 次</p>
              <p>接入时间:{{ item.createTime }}</p>
            </div>
          </div>
        </el-aside>
        <el-main>
          <div class="inquire">
            <p>
              风场名称：
              <el-select v-model="windvalue" placeholder="请选择" size="small">
                <el-option
                  v-for="item in windoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </p>
            <p>
              转换类型：
              <el-select v-model="typevalue" placeholder="请选择" size="small">
                <el-option
                  v-for="item in typeoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </p>
            <p>
              时间范围：
              <el-date-picker
                size="small"
                v-model="value1"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </p>
            <div>
              <el-button size="small">查询</el-button>
              <el-button size="small">重置</el-button>
            </div>
          </div>

          <el-table
            :data="ListtableData"
            style="width: 100%"
            class="custom-table"
          >
            <el-table-column prop="name" label="风场名称"> </el-table-column>
            <el-table-column prop="type" label="类型" align="center">
            </el-table-column>
            <el-table-column
              prop="address"
              label="采集总天数"
              align="center"
              width="150"
            >
            </el-table-column>
            <el-table-column
              prop="count"
              label="采集总条数"
              align="center"
              width="180"
            >
            </el-table-column>
            <el-table-column prop="daytime" label="最近采集时间" align="center">
            </el-table-column>
          </el-table>
          <el-pagination class="fenye" layout="prev, pager, next" :total="50">
          </el-pagination>
        </el-main>
      </el-container>
    </el-dialog>

    <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: "",
      queueNumber: "",
      glShow: false,
      YCShow: false,
      PdShow: false,
      lineShow: false,
      dialogTableVisible: false,
      glData: [],
      FXData: [],
      PdData: [],
      tableData: [],
      maxHeight: "200",
      gridData: [],
      shujuloading: false,
      searchvalue: "",
      value1: "",
      windvalue: "",
      typevalue: "",
      windoptions: [],
      typeoptions: [],
      windList: [
        {
          fieldName: "招远风电场",
          dataType: "SCADA秒级",
          collectCount: "采集次数:600 次",
          createTime: "接入时间:2025-11-11 11:11:11",
        },
        {
          fieldName: "招远风电场",
          dataType: "SCADA秒级",
          collectCount: "采集次数:600 次",
          createTime: "接入时间:2025-11-11 11:11:11",
        },
        {
          fieldName: "招远风电场",
          dataType: "SCADA秒级",
          collectCount: "采集次数:600 次",
          createTime: "接入时间:2025-11-11 11:11:11",
        },
        {
          fieldName: "招远风电场",
          dataType: "SCADA秒级",
          collectCount: "采集次数:600 次",
          createTime: "接入时间:2025-11-11 11:11:11",
        },
        {
          fieldName: "招远风电场",
          dataType: "SCADA秒级",
          collectCount: "采集次数:600 次",
          createTime: "接入时间:2025-11-11 11:11:11",
        },
        {
          fieldName: "招远风电场",
          dataType: "SCADA秒级",
          collectCount: "采集次数:600 次",
          createTime: "接入时间:2025-11-11 11:11:11",
        },
        {
          fieldName: "招远风电场",
          dataType: "SCADA秒级",
          collectCount: "采集次数:600 次",
          createTime: "接入时间:2025-11-11 11:11:11",
        },
      ],
      YCtableColumns: [{ prop: "windFarmName" }, { prop: "createTime" }],
      YCcolumnWidths: {
        windFarmName: 130,
        createTime: 150,
      },

      ListtableData: [
        {
          name: "招远风电场",
          type: "SCADA分钟级",
          address: "985",
          count: "10000",
          daytime: "2025-11-11 11:11:11",
        },
        {
          name: "招远风电场",
          type: "SCADA分钟级",
          address: "985",
          count: "10000",
          daytime: "2025-11-11 11:11:11",
        },
        {
          name: "招远风电场",
          type: "SCADA分钟级",
          address: "985",
          count: "10000",
          daytime: "2025-11-11 11:11:11",
        },
        {
          name: "招远风电场",
          type: "SCADA分钟级",
          address: "985",
          count: "10000",
          daytime: "2025-11-11 11:11:11",
        },
        {
          name: "招远风电场",
          type: "SCADA分钟级",
          address: "985",
          count: "10000",
          daytime: "2025-11-11 11:11:11",
        },
        {
          name: "招远风电场",
          type: "SCADA分钟级",
          address: "985",
          count: "10000",
          daytime: "2025-11-11 11:11:11",
        },
        {
          name: "招远风电场",
          type: "SCADA分钟级",
          address: "985",
          count: "10000",
          daytime: "2025-11-11 11:11:11",
        },
        {
          name: "招远风电场",
          type: "SCADA分钟级",
          address: "985",
          count: "10000",
          daytime: "2025-11-11 11:11:11",
        },
        {
          name: "招远风电场",
          type: "SCADA分钟级",
          address: "985",
          count: "10000",
          daytime: "2025-11-11 11:11:11",
        },
        {
          name: "招远风电场",
          type: "SCADA分钟级",
          address: "985",
          count: "10000",
          daytime: "2025-11-11 11:11:11",
        },
      ],
    };
  },
  created() {
    this.getbacklog();
    this.ruku();
  },
  mounted() {},
  methods: {
    getbacklog() {
      queryWaitTask().then((res) => {
        this.abnormal = res.data.errCount;
        this.onrelevance = res.data.uncorrelatedCount;
        this.queueNumber = res.data.queueNumber;
      });
    },
    getwgl() {
      const arr = {
        pageSize: 999,
        analysisState: "-1",
      };
      analysisResultList(arr).then((res) => {
        this.glData = res.data.list;
        this.glShow = true;
      });
    },
    getwfx() {
      const arr = {
        pageSize: 999,
        errState: 1,
      };
      analysisResultList(arr).then((res) => {
        this.FXData = res.data.list;
        this.YCShow = true;
      });
    },
    getpd() {
      const arr = {
        pageSize: 999,
        analysisState: "10",
      };
      analysisResultList(arr).then((res) => {
        this.PdData = res.data.list;
        this.PdShow = true;
      });
    },

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

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

    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);
        });
    },
    // 在线数据
    onlinedata() {
      this.lineShow = true;
    },
    handleClose() {
      this.lineShow = false;
    },
  },
};
</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);
}

.el-aside {
  background-color: #e9e9e9;

  .el-input {
    width: 273px;
    margin: 10px 0 0 10px;
  }

  .windbox {
    height: 565px;
    overflow: hidden;
    overflow-y: auto;

    .windlist {
      margin: 10px;
      padding: 10px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);

      p {
        line-height: 20px;
      }

      margin-bottom: 10px;
      background: #fff;
    }
  }

  /* 自定义滚动条样式 */
  ::-webkit-scrollbar {
    width: 8px;
    /* 设置滚动条的宽度 */
  }

  ::-webkit-scrollbar-thumb {
    background-color: #888;
    /* 滚动条滑块的颜色 */
    border-radius: 10px;
    /* 滚动条滑块的圆角 */
    border: 2px solid #f1f1f1;
    /* 滚动条滑块的边框 */
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: #555;
    /* 滚动条滑块的悬浮颜色 */
  }

  ::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* 滚动条轨道的颜色 */
    border-radius: 10px;
    /* 滚动条轨道的圆角 */
  }
}

.el-main {
  padding-right: 0;

  .inquire {
    display: flex;

    p {
      margin-right: 10px;
    }

    .el-select {
      width: 180px;
    }

    .el-range-editor--small.el-input__inner {
      width: 240px;
    }
  }

  .el-table {
    margin: 20px 0;
  }
}

::v-deep .custom-table .el-table__row {
  height: 40px;
}

.fenye {
  margin: 20px auto;
  text-align: center;
}

h1 {
  font-size: 24px;
  font-weight: 800;
  margin-left: 10px;
  margin-top: 10px;
}

::v-deep .el-dialog {
  margin-top: 7vh !important;
}
</style>