fd_dwgz_zhyw_nx/src/views/IntegratedAlarm/reliability/historyAnalyse/index.vue

<template>
  <!-- 风机原始数据统计表页面 -->
  <div class="history-analyse">
    <!-- 页面头部 multiple多选属性 -->
    <div class="form-wrapper">
      <div class="search-wrapper">
        <!-- <div class="search-item">
          <span class="label">报警类型：</span>
          <div class="search-content">
            <el-select
              v-model="state.typeVal"
              style="width: 100px"
              size="mini"
              placeholder="全部"
              popper-class="select"
              @change="changeType"
            >
              <el-option
                v-for="item in state.typeList"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              >
              </el-option>
            </el-select>
          </div>
        </div> -->
        <!-- <div class="search-item">
          <span class="label">场站：</span>
          <div class="search-content">
            <el-select
              size="mini"
              v-model="state.changZhan"
              style="width: 120px"
              @change="changeChangzhan"
              placeholder="全部场站"
            >
              <el-option
                v-for="item in changZhanArray"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </div> -->
        <!-- <div class="search-item" v-if="state.typeVal !== 'booststation'">
          <span class="label">型号：</span>
          <div class="search-content">
            <el-select
              size="mini"
              v-model="state.modelId"
              style="width: 120px"
              @change="changeModel"
              placeholder="全部型号"
            >
              <el-option
                v-for="item in modelList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </div> -->
        <div class="search-item" v-if="state.typeVal !== 'booststation'">
          <span class="label">部件：</span>
          <div class="search-content">
            <el-select
              v-model="state.components"
              style="width: 150px"
              multiple
              size="mini"
              collapse-tags
              clearable
              placeholder="全部部件"
              @change="changeComponents"
            >
              <el-option
                v-for="item in componentList"
                :key="item.id"
                :label="item.name"
                :value="item.nemCode"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="search-item" v-if="state.typeVal !== 'booststation'">
          <span class="label">报警描述：</span>
          <!-- <div class="search-content">
            <el-select
              v-model="state.alarmIds"
              style="width: 120px"
              multiple
              size="mini"
              clearable
              collapse-tags
              placeholder="全部描述"
            >
              <el-option
                v-for="item in state.alarmIdList"
                :key="item.id"
                :label="item.description"
                :value="item.alarmId"
              >
              </el-option>
            </el-select>
          </div> -->
          <div class="search-content">
            <el-select
              class="multSelectTages"
              size="mini"
              v-model="state.alarmIds"
              style="width: 300px"
              multiple
              collapse-tags
              placeholder="全部描述"
              filterable
              ref="currSelect"
            >
              <el-option
                v-for="item in state.alarmIdList"
                :key="item.alarmId"
                :label="item.description"
                :value="item.alarmId"
              >
              </el-option>
            </el-select>
          </div>
          <!-- <el-input
            v-model="state.alarmIds"
            placeholder="请输入..."
            size="mini"
          ></el-input> -->
        </div>
        <div class="search-item">
          <span class="label">日期：</span>
          <div class="search-content">
            <el-date-picker
              v-model="state.dateTime"
              size="mini"
              type="datetimerange"
              range-separator="-"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              start-placeholder="开始"
              end-placeholder="结束"
              popper-class="date-select"
            >
            </el-date-picker>
          </div>
        </div>
        <div class="btns">
          <el-button class="buttons" size="mini" round @click="getTableList"
            >查询</el-button
          >
        </div>
      </div>
    </div>

    <!-- 页面下部---统计表 -->
    <div class="table_all">
      <div class="leftContent">
        <span>{{ pageTitle }}</span>
      </div>
      <el-table
        :data="state.tableData"
        stripe
        height="calc(100% - 36px - 40px)"
        @sort-change="handleSortChange"
      >
        <!-- :height="isFullScreen ? 'height: 75vh' : 'height: 85vh'"
        :style="isFullScreen ? 'height: 75vh' : 'height: 85vh'" -->
        <el-table-column
          prop="wtname"
          label="设备编号"
          align="center"
          width="80"
        />
        <el-table-column
          :label="item.label"
          v-for="(item, index) in state.tHeard"
          :key="index"
          :prop="item"
          min-width="170"
          header-align="center"
          show-overflow-tooltip
          sortable="custom"
        >
          <!-- :sort-method="
            (a, b) => {
              return a[`${item.code}_count`] - b[`${item.code}_count`];
            }
          " -->
          <template #default="scope">
            <div class="bar">
              <!-- :style="{
                  width:
                    row[`${item.code}_count`] || row[`${item.code}_time`]
                      ? (row[`${item.code}_count`] /
                          (row[`${item.code}_count`] +
                            row[`${item.code}_time`])) *
                          100 +
                        'px'
                      : '0px',
                }" -->
              <div
                class="bar-percent"
                :style="{
                  width:
                    scope.row[`${item.code}_count`] > 0
                      ? (Math.ceil(scope.row[`${item.code}_count`]) /
                          Math.ceil(scope.column.realWidth)) *
                          100 +
                        'px'
                      : '0px',
                }"
              ></div>
              <!-- <span class="value">{{ row[`${item.code}_count`] }} 次</span> -->
              <span class="value"
                >{{ getCalcValue(scope.row[`${item.code}_count`]) }} 次</span
              >
            </div>
            <div class="bar">
              <!-- :style="{
                  width:
                    row[`${item.code}_count`] || row[`${item.code}_time`]
                      ? (row[`${item.code}_time`] /
                          (row[`${item.code}_count`] +
                            row[`${item.code}_time`])) *
                          100 +
                        'px'
                      : '0px',
                }" -->
              <div
                class="bar-percent"
                :style="{
                  width:
                    scope.row[`${item.code}_time`] > 0
                      ? (Math.ceil(scope.row[`${item.code}_time`]) /
                          Math.ceil(scope.column.realWidth)) *
                          100 +
                        'px'
                      : '0px',
                }"
              ></div>
              <!-- <span class="value">{{ row[`${item.code}_time`] }} 分钟</span> -->
              <span class="value"
                >{{ getCalcValue(scope.row[`${item.code}_time`]) }} 分钟</span
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-wrapper">
        <el-pagination
          layout="total, prev, pager, next"
          :current-page="query.page"
          :page-size="query.limit"
          :total="query.pageTotal"
          @size-change="
            (value) => {
              query.page = 1;
              query.limit = value;
              getTableList();
            }
          "
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>
    <el-dialog
      v-model="dialogVisible"
      width="80%"
      :before-close="dialogClose"
      custom-class="currentPdfDialogStyle"
    >
      <el-table
        :data="DataDetail"
        border
        :cell-class-name="tableCell"
        :header-row-class-name="tableRowClassName"
        height="600px"
        @row-click="handle"
      >
        <el-table-column prop="windturbineId" label="风机编号" align="center" />
        <el-table-column prop="alarmName" label="报警名称" align="center" />
        <el-table-column prop="alarmDate" label="时间" align="center" />
        <el-table-column prop="type" label="类型(触发/解除)" align="center">
          <template #default="scope">
            <!-- <span v-if="scope.row.type === 1">触发</span>
            <span v-if="scope.row.type === 0">解除</span> -->
            {{ scope.row.type === 1 ? "触发" : "解除" }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- <el-pagination
      small
      background
      layout="total, prev, pager, next"
      :current-page="pageParam.pagenum"
      :page-size="pageParam.pagesize"
      :total="pageParam.total"
      @current-change="changePage"
    ></el-pagination> -->
  </div>
</template>

<script setup>
import { useStore } from "vuex";
import BASE from "@tools/basicTool.js";
import dataJson from "./dataJson.json";
import dataJson2 from "../customAnalyse/dataJson.json";
import {
  ref,
  onMounted,
  watch,
  reactive,
  computed,
  onUnmounted,
  nextTick,
} from "vue";
import {
  getAlarmCountList,
  fetchModel,
  fetchRelatePartAndAlarmType,
  GetAlarmId,
  GetQuerywtalarmdesclistnew,
  getWpList,
} from "@/api/zhbj/index.js";
import dayjs from "dayjs";

const isFullScreen = ref(false);
const currSelect = ref(null);
const clickNum = ref(1);
onMounted(() => {
  const clientHeight =
    document.documentElement.clientHeight || document.body.clientHeight;
  if (clientHeight === 1080) {
    isFullScreen.value = true;
  } else {
    isFullScreen.value = false;
  }
  window.onresize = () => {
    const clientHeight =
      document.documentElement.clientHeight || document.body.clientHeight;
    isFullScreen.value = window.screen.height == clientHeight;
  };

  const parentBox = document.querySelector("#app");
  const multSelectTages = document.querySelector(".multSelectTages");
  parentBox.addEventListener("click", (event) => {
    event.stopPropagation();
    if (
      event?.target?.className?.indexOf("is-reverse") === -1 &&
      clickNum.value % 2 === 0
    ) {
      clickNum.value++;
    }
  });

  multSelectTages.addEventListener("click", (event) => {
    event.stopPropagation();
    if (clickNum.value % 2 === 0) {
      currSelect.value.blur();
    }
    clickNum.value++;
  });

  getWpArray();
  getequipmentmodel_list();
  getfetchRelatePart();
  // getTableList();
});
const pageTitle = "报警分析";
const store = useStore();
const changZhanArray = ref([]);
const windName = ref([]);

const query = reactive({
  page: 1,
  limit: 6,
  pageTotal: 0,
});
const state = reactive({
  typeVal: "windturbine",
  typeList: [
    // {
    //   label: "升压站",
    //   value: "booststation",
    // },
    // {
    //   label: "自定义",
    //   value: "custom",
    // },
    {
      label: "风机",
      value: "windturbine",
    },
    // {
    //   label: "光伏",
    //   value: "inverter",
    // },
  ],
  //   tableData: dataJson2.data.data.data,
  //   tHeard: dataJson2.data.data.title,
  tableData: [],
  tHeard: [],
  changZhan: "",
  components: ["CLX"], //部件
  modelId: "", //型号
  alarmIds: "",
  alarmIdList: [],
  modelListAll: {},
  fetchListAll: {},
  dateTime: [
    dayjs().startOf("day").format("YYYY-MM-DD HH:mm:ss"),
    dayjs().format("YYYY-MM-DD HH:mm:ss"),
  ],
  dialogVisible: false,
});

const getCalcValue = (num) => {
  if (!num) {
    return 0;
  } else {
    return Math.ceil(num);
  }
};

const changeType = (value) => {
  state.typeVal = value;
  getWpArray();
};

const getWpArray = async () => {
  const { data } = await getWpList(state.typeVal);
  changZhanArray.value = data;
  if (state.typeVal != "booststation") {
    state.changZhan = data[0]?.id;
    // getTableList();
  } else {
    state.changZhan = "";
    state.modelId = "";
  }
};
// 机型
const getequipmentmodel_list = async () => {
  const { data } = await fetchModel();
  state.modelListAll = data;
};
//所属部件
const getfetchRelatePart = async () => {
  const { data } = await fetchRelatePartAndAlarmType();
  state.fetchListAll = data;
  getAlarmId();
};
//型号列表
const modelList = [
  {
    id: "WT2000D121H85",
    name: "WT2000D121H85",
  },
  {
    id: "UP2000-130",
    name: "UP2000-130",
  },
];
// const modelList = computed(() => {
//   if (state.changZhan == "") {
//     return [];
//   } else {
//     return state.modelListAll[state.changZhan];
//   }
//   return [
//     {
//       id: "SEC-W02B-1250kW",
//       nemCode: "SEC-W02B-1250kW",
//       name: "SEC-W02B-1250kW",
//       aname: "SEC-W02B-1250kW",
//       description: "DI",
//       powerProduction: 1250,
//       windturbineManufacturerId: "SHDQ_MF",
//       photo: null,
//       unit: null,
//       cutinwindSpeed: 3,
//       ratedwindSpeed: 11,
//       cutoutwindSpeed: "25",
//       sweptArea: 5800,
//       equipmentCategory: "F",
//     },
//   ];
// });
//部件列表
const componentList = computed(() => {
  //   if (state.changZhan == "") {
  //     return [];
  //   } else {
  //     if (state.changZhan.includes("FDC")) {
  //       return state.fetchListAll?.fjbj;
  //     } else {
  //       return state.fetchListAll?.gfbj;
  //     }
  //   }
  return [
    {
      id: "1",
      category: "alertrule_category",
      nemCode: "YP",
      name: "叶片",
      orderNumber: 1,
      enable: 1,
    },
    {
      id: "2",
      category: "alertrule_category",
      nemCode: "LG",
      name: "轮毂",
      orderNumber: 2,
      enable: 1,
    },
    {
      id: "3",
      category: "alertrule_category",
      nemCode: "TJ",
      name: "塔架",
      orderNumber: 3,
      enable: 1,
    },
    {
      id: "4",
      category: "alertrule_category",
      nemCode: "JC",
      name: "机舱",
      orderNumber: 4,
      enable: 1,
    },
    {
      id: "5",
      category: "alertrule_category",
      nemCode: "KZXT",
      name: "控制系统",
      orderNumber: 5,
      enable: 1,
    },
    {
      id: "6",
      category: "alertrule_category",
      nemCode: "BJXT",
      name: "变桨系统",
      orderNumber: 6,
      enable: 1,
    },
    {
      id: "7",
      category: "alertrule_category",
      nemCode: "PHXT",
      name: "偏航系统",
      orderNumber: 7,
      enable: 1,
    },
    {
      id: "8",
      category: "alertrule_category",
      nemCode: "CLX",
      name: "齿轮箱",
      orderNumber: 8,
      enable: 1,
    },
    {
      id: "9",
      category: "alertrule_category",
      nemCode: "FDJ",
      name: "发电机",
      orderNumber: 9,
      enable: 1,
    },
    {
      id: "10",
      category: "alertrule_category",
      nemCode: "BPQ",
      name: "变频器",
      orderNumber: 10,
      enable: 1,
    },
    {
      id: "11",
      category: "alertrule_category",
      nemCode: "YYXT",
      name: "液压系统",
      orderNumber: 11,
      enable: 1,
    },
    {
      id: "12",
      category: "alertrule_category",
      nemCode: "FZXT",
      name: "辅助系统",
      orderNumber: 12,
      enable: 1,
    },
    {
      id: "13",
      category: "alertrule_category",
      nemCode: "CFXT",
      name: "测风系统",
      orderNumber: 13,
      enable: 1,
    },
    {
      id: "14",
      category: "alertrule_category",
      nemCode: "DWXT",
      name: "电网系统",
      orderNumber: 14,
      enable: 1,
    },
    {
      id: "15",
      category: "alertrule_category",
      nemCode: "TDG",
      name: "塔底柜",
      orderNumber: 15,
      enable: 1,
    },
    {
      id: "16",
      category: "alertrule_category",
      nemCode: "CDL",
      name: "传动链",
      orderNumber: 16,
      enable: 1,
    },
    {
      id: "17",
      category: "alertrule_category",
      nemCode: "QT",
      name: "其他",
      orderNumber: 17,
      enable: 1,
    },
    {
      id: "42",
      category: "alertrule_category",
      nemCode: "CGQ",
      name: "传感器",
      orderNumber: 19,
      enable: 1,
    },
    {
      id: "41",
      category: "alertrule_category",
      nemCode: "BYQ",
      name: "变压器",
      orderNumber: 18,
      enable: 1,
    },
    {
      id: "44",
      category: "alertrule_category",
      nemCode: "ZZ",
      name: "主轴",
      orderNumber: 20,
      enable: 1,
    },
  ];
});
watch(
  () => [modelList, componentList],
  (val) => {
    if (state.typeVal != "booststation") {
      let arr = val.map((item) => item.value);
      if (arr[0] && arr[0].length && arr[1] && arr[1].length) {
        // state.modelId = [arr[0][0]?.nemCode];
        let componenDefaultSelect =
          arr[1]?.find((ele) => {
            return ele.nemCode === "FDJ";
          })?.nemCode || "";
        componenDefaultSelect
          ? (state.components = ["CLX"])
          : arr[1]?.[0]?.nemCode
          ? (state.components = [arr[1]?.[0]?.nemCode])
          : (state.components = []);
        getAlarmId();
      }
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
function changeModel(val) {
  state.modelId = val;
  getAlarmId();
}
function changeComponents(val) {
  state.components = val;
  getAlarmId();
}
function changeChangzhan(val) {
  state.changZhan = val;
  if (state.typeVal != "booststation") {
    getAlarmId();
  }
}
function getAlarmId() {
  //   GetAlarmId({
  //     components: state.components,
  //     modelId: state.modelId,
  //     wpId: state.changZhan,
  //   }).then(({ data }) => {
  //     state.alarmIdList = data;
  //     state.alarmIds = [];
  //     // state.alarmIds =
  //     //   data.length <= 5
  //     //     ? data.map((item) => item.alarmId)
  //     //     : data.slice(0, 5).map((item) => item.alarmId);
  //     getTableList();
  //   });
  //   state.alarmIdList = [
  //     {
  //       alarmId: "10",
  //       description: "发电机转速大于900，并且 任意齿轮箱轴温度每分钟上升超过1.5",
  //     },
  //   ];
  //   getTableList();
  GetQuerywtalarmdesclistnew({
    components: state.components,
    modelId: state.modelId,
    wpId: state.changZhan,
  }).then(({ data }) => {
    state.alarmIdList = data;
    // state.alarmIds = [];
    state.alarmIds =
      data.length <= 5
        ? data.map((item) => item.alarmId)
        : data.slice(0, 5).map((item) => item.alarmId);

    getTableList();
  });
}

// 分页导航
const handlePageChange = (val) => {
  query.page = val;
  getTableList();
};

// 获取列表数据 调用接口
function getTableList() {
  if (state.components?.length) {
    getAlarmCountList({
      pageNum: query.page,
      pageSize: query.limit,
      stationid: state.changZhan || "",
      begin: state.dateTime[0],
      end: state.dateTime[1],
      timeType: "m",
      components: state.components,
      modelId: state.modelId,
      alarmIds: state.alarmIds,
      alarmType: state.typeVal,
    })
      .then((res) => {
        if (res && res.result.length > 0) {
          changeTableData(res.result);
          query.pageTotal = res.total;
        } else {
          state.tHeard = [];
          state.tableData = [];
        }
      })
      .catch(() => {
        //   changeTableData(dataJson)
      });
  } else {
    BASE.showMsg({
      msg: "部件至少选择一项才可查询",
    });
  }
}

const changeTableData = (res) => {
  if (res.length) {
    if (query.page === 1) {
      windName.value = [];
    }
    let tableData = [];
    let tHeard = [];
    let data = res;
    data.forEach((pEle, index) => {
      for (let wtId in pEle) {
        let wtItem = data.find((tableItem) => {
          return wtId === tableItem.windturbineId;
        });
        !wtItem && (wtItem = { wtId });
        if (pEle[wtId].length > 0) {
          pEle[wtId].forEach((cEle) => {
            let someRes = tHeard.some((findEle) => {
              return findEle.label == cEle.alertText;
            });

            if (!someRes) {
              tHeard.push({
                label: cEle.alertText,
                code: cEle.alarmid,
              });
            }
            wtItem[`${cEle.alarmid}_count`] = cEle.count || 0;
            wtItem[`${cEle.alarmid}_time`] = cEle.time || 0;
            wtItem["wtname"] = cEle.windturbineCode;
          });
        } else {
          wtItem["wtname"] = windName.value[index];
        }
        if (query.page === 1) {
          windName.value.push(wtItem["wtname"]);
        }
        tableData.push(wtItem);
      }
    });
    state.tHeard = tHeard;
    state.tableData = tableData;
  } else {
    state.tHeard = [];
    state.tableData = [];
  }
};

const handleSortChange = ({ column, prop, order }) => {
  let code = prop.code + "_count";
  state.tableData = state.tableData.slice().sort((a, b) => {
    if (order === "ascending") {
      return (a[code] || 0) - (b[code] || 0);
    } else if (order === "descending") {
      return (b[code] || 0) - (a[code] || 0);
    } else {
      return 0;
    }
  });
};

const handleSort = function (val) {
  let item = val.prop;
  let list = JSON.parse(JSON.stringify(state.tableData));
  if (val.order == "ascending") {
    state.tableData = list.sort(compare(`${item.code}_count`));
  } else if (val.order == "descending") {
    state.tableData = list.sort(compare(`${item.code}_count`)).reverse();
  }
};
//排序函数
const compare = function (property) {
  return function (a, b) {
    var value1 = a[property];
    var value2 = b[property];
    return value1 - value2;
  };
};

//     // 单元格点击事件
//     handle(row, column, event, cell) {
//       let parts =
//         this.tHeard.find((ele) => {
//           return ele.label === column.label;
//         })?.parts || "";
//       getDialogData({
//         stationid: this.changZhan || "",
//         starttime: dayjs(this.starttime).format("YYYY-MM-DD"),
//         endtime: dayjs(this.endtime).format("YYYY-MM-DD"),
//         windturbineid: row.wtId,
//         parts,
//       }).then((res) => {
//         if (res && res.status === 20000) {

//           if (res.data.length) {
//             if (column.property !== "wtId") {
//               this.DataDetail = res.data;
//               let tableArr = [];
//               res.data.forEach((currentItem) => {
//                 // if (currentItem.type === 1) {
//                 //   currentItem.type = '触发'
//                 // }
//                 // else if (currentItem.type === 0) {
//                 //   currentItem.type = '解除'
//                 // }
//                 tableArr.push(currentItem);
//               });

//               this.dialogVisible = true;
//             }
//           } else {
//             BASE.showMsg({
//               msg: "所选风机暂无数据",
//             });
//           }
//         }
//       });
//     },
</script>

<style lang="less" scoped>
.history-analyse {
  height: 100%;
  .form-wrapper ::v-deep {
    display: flex;
    flex-direction: column;
    padding-top: 10px;
    position: relative;
    .search-wrapper {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #b3b3b3;
      margin-bottom: 10px;
      margin-left: 20px;
      .search-item {
        display: flex;
        margin-right: 10px;
        max-width: 450px;
        align-items: center;
        .label {
          margin-right: 10px;
          text-align: right;
          white-space: nowrap;
          // width: 60px;
        }
        .search-content {
          flex: 1;
        }
      }
    }

    .buttons {
      background-color: rgba(5, 187, 76, 0.2);
      border: 1px solid #3b6c53;
      color: #b3b3b3;
      font-size: 14px;

      &:hover {
        background-color: rgba(5, 187, 76, 0.5);
        color: #ffffff;
      }
    }
  }
  .table_all {
    width: calc(100% - 20px);
    height: calc(100% - 53px);
    padding: 20px;
    .leftContent {
      width: 242px;
      height: 41px;
      display: flex;
      align-items: center;
      background: url("~@/assets/imgs/title_left_bg.png") no-repeat;

      span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #05bb4c;
        margin-left: 25px;
      }
    }
    .el-table {
      .el-table__row {
        td {
          cursor: pointer;

          &:first-child {
            cursor: auto;
          }
        }
      }
    }
    .pagination-wrapper :deep {
      height: 30px;
      text-align: right;
      margin-top: 10px;
    }
  }
  .bar {
    display: flex;
    align-items: center;
    height: 16px;
    margin: 8px 0;
    .bar-percent {
      height: 100%;
      background: #2169c3;
      margin-right: 8px;
    }
  }
}
</style>
<style lang="less">
.history-analyse {
  .el-select {
    .el-input__suffix {
      z-index: 500;
    }
  }
}
</style>