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

<template>
  <div class="backbone">
    <div class="BOXYI" v-hasPermi="['home:performance:performanceData']">
      <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" v-hasPermi="['home:offlinedata']">
      <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>
      </div>
    </div>
    <!-- 在线 -->
    <div class="BOX" v-hasPermi="['home:onlinData']">
      <h3 class="centeredh3">
        接入数据
        <span>
          <span style="cursor: pointer" @click="onlinedata">更多</span>
        </span>
      </h3>
      <div>
        <p class="titleYC"><span>风场名称</span><span>采集状态</span></p>
        <tabroll
          :table-data="hometopdata"
          :hometoploading="hometoploading"
          :columns="hometopColumns"
          :column-widths="hometopcolumnWidths"
          :max-height="140"
        ></tabroll>
      </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">
            <el-empty
              v-if="filteredWindList.length === 0"
              :image-size="200"
            ></el-empty>
            <div
              class="windlist"
              v-for="(item, index) in filteredWindList"
              :key="index"
            >
              <h3>{{ item.windFarmName }}</h3>
              <p>数据类型: {{ item.typeName }}</p>
              <p>采集条数: {{ item.count }} 条</p>
              <p>采集时间: {{ item.latestDataTime }}</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.fieldCode"
                  :label="item.fieldName"
                  :value="item.fieldCode"
                >
                </el-option>
              </el-select>
            </p>
            <p>
              类型：
              <el-select v-model="typevalue" placeholder="请选择" size="small">
                <el-option
                  v-for="item in typeoptions"
                  :key="item.paramKey"
                  :label="item.paramValue"
                  :value="item.paramKey"
                >
                </el-option>
              </el-select>
            </p>
            <p>
              选择日期：
              <el-date-picker
                size="small"
                v-model="timeval"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="onDateChange"
              >
              </el-date-picker>
            </p>
            <div>
              <el-button size="small" @click="conditions">查询</el-button>
              <el-button size="small" @click="reset">重置</el-button>
            </div>
          </div>

          <el-table
            :data="ListtableData"
            style="width: 100%"
            class="custom-table"
            height="550"
          >
            <el-table-column prop="windFarmName" label="风场名称">
            </el-table-column>
            <el-table-column prop="typeName" label="类型" align="center">
            </el-table-column>
            <el-table-column
              prop="totalDays"
              label="采集总天数"
              align="center"
              width="150"
            >
            </el-table-column>
            <el-table-column
              prop="totalDataCount"
              label="采集总条数"
              align="center"
              width="180"
            >
            </el-table-column>
            <el-table-column
              prop="latestDataTime"
              label="最近采集时间"
              align="center"
            >
            </el-table-column>

            <el-table-column prop="canAnalysis" label="采集状态" align="center">
              <template #default="{ row }">
                {{ row.canAnalysis === 0 ? "不可分析" : "可分析" }}
              </template>
            </el-table-column>
          </el-table>
        </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,
  getWindFieldNames,
} 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: [],
      hometopdata: [],
      maxHeight: "200",
      gridData: [],
      shujuloading: false,
      hometoploading: false,
      searchvalue: "",
      timeval: [],
      windvalue: "",
      typevalue: "",
      windoptions: [],
      typeoptions: [
        {
          id: 1,
          type: "trans_type",
          typeName: "转化类型",
          paramKey: "second",
          paramValue: "SCADA秒级",
          status: 1,
        },
        {
          id: 2,
          type: "trans_type",
          typeName: "转化类型",
          paramKey: "minute",
          paramValue: "SCADA分钟级",
          status: 1,
        },
        {
          id: 3,
          type: "trans_type",
          typeName: "转化类型",
          paramKey: "fault",
          paramValue: "SCADA故障",
          status: 1,
        },
        {
          id: 4,
          type: "trans_type",
          typeName: "转化类型",
          paramKey: "warn",
          paramValue: "SCADA报警",
          status: 1,
        },
        // {
        //   id: 5,
        //   type: "trans_type",
        //   typeName: "转化类型",
        //   paramKey: "wave",
        //   paramValue: "振动",
        //   status: 1,
        // },
      ],
      windList: [],
      YCtableColumns: [{ prop: "windFarmName" }, { prop: "createTime" }],
      YCcolumnWidths: {
        windFarmName: 130,
        createTime: 150,
      },
      hometopColumns: [
        { prop: "windFarmName", label: "风场名称" },
        {
          prop: "canAnalysis",
          label: "分析状态",
        },
      ],
      hometopcolumnWidths: {
        windFarmName: 130,
        canAnalysis: 150,
      },
      ListtableData: [],
      startDate: "",
      endDate: "",

      pollInterval: null, // 轮询定时器
      pollTime: 5000, // 轮询间隔，单位：毫秒
    };
  },
  created() {
    this.getbacklog();
    this.ruku();
    // this.hometop();
  },
  computed: {
    filteredWindList() {
      return this.searchvalue
        ? this.windList.filter((item) =>
            item.windFarmName.includes(this.searchvalue),
          )
        : this.windList;
    },
  },

  // 在线版本 离线需要注释
  mounted() {
    this.startPolling();
  },
  // 在线版本 离线需要注释
  beforeDestroy() {
    this.stopPolling();
  },
  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.windsite();
      this.lineShow = true;
      // 获取在线数据
      axios.post(`/transDataWeb/windFarmDayCount/getTodayData`).then((res) => {
        this.windList = res.data.datas;
      });
      this.conditions();
    },
    // 首页top
    hometop() {
      axios
        .post("/transDataWeb/windFarmDayCount/getIndexOnlineData")
        .then((res) => {
          this.hometopdata = res.data.datas.map((item) => ({
            ...item,
            canAnalysis: item.canAnalysis === 1 ? "可分析" : "不可分析",
          }));
          this.errorCount = 0; // 请求成功时重置错误计数
        })
        .catch((err) => {
          this.errorCount++;
          if (this.errorCount < 3) {
            console.log(`请求失败（第 ${this.errorCount} 次）:`, err.message);
          }
        });
    },

    startPolling() {
      this.hometop(); // 先执行一次
      this.pollInterval = setInterval(this.hometop, this.pollTime);
    },
    stopPolling() {
      if (this.pollInterval) {
        clearInterval(this.pollInterval);
        this.pollInterval = null;
      }
    },

    conditions() {
      // 获取历史数据
      axios
        .post(`/transDataWeb/windFarmDayCount/getHistoryDataSummary`, {
          beginDate: this.startDate,
          endDate: this.endDate,
          type: this.typevalue,
          windFarmCode: this.windvalue,
        })
        .then((res) => {
          this.ListtableData = res.data.datas;
        });
    },
    reset() {
      this.startDate = "";
      this.endDate = "";
      this.typevalue = "";
      this.windvalue = "";
      this.timeval = [];
    },
    async windsite() {
      try {
        const res = await getWindFieldNames();
        this.windoptions = res.data;
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    },

    onDateChange(date) {
      if (Array.isArray(date)) {
        this.startDate = this.$formatDate(date[0]);
        this.endDate = this.$formatDate(date[1]);
        if (this.endDate < this.startDate) {
          this.endDate = this.startDate;
        }
      } else {
        this.startDate = null;
        this.endDate = null;
      }
    },
    handleClose() {
      this.lineShow = false;
      this.reset();
    },
  },
};
</script>

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

.BOXYI {
  background: var(--cockpit-panel-inner-bg, 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: var(--cockpit-accent-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: var(--cockpit-accent-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: var(--cockpit-accent-color, #4bffff);
      }

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

  h3 {
    margin-top: 5px;
    width: 100%;
  }
}

.BOX {
  background: var(--cockpit-panel-inner-bg, 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: var(--cockpit-table-header-bg, #214e5d);
  padding: 5px 0;

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

.titleJQ {
  font-size: 14px;
  background: var(--cockpit-table-header-bg, #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: var(--cockpit-table-track-bg, #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: var(--cockpit-table-track-bg, #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>