windLifecontrolPro/src/views/IntegratedAlarm/reliability/customAnalyse/index.vue

<template>
  <div class="custom-analyse">
    <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
              size="mini"
              v-model="state.components"
              style="width: 120px"
              multiple
              collapse-tags
              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
              size="mini"
              v-model="state.alarmIds"
              style="width: 120px"
              multiple
              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>
        <div class="search-item">
          <span class="label">开始日期：</span>
          <div class="search-content">
            <el-date-picker
              size="mini"
              v-model="state.starttime"
              type="datetime"
              placeholder="选择日期"
              value-format="YYYY-MM-DD HH:mm:ss"
              popper-class="date-select"
            >
            </el-date-picker>
          </div>
        </div>
        <div class="search-item">
          <span class="label">结束日期：</span>
          <div class="search-content">
            <el-date-picker
              size="mini"
              v-model="state.endtime"
              type="datetime"
              placeholder="选择日期"
              value-format="YYYY-MM-DD HH:mm:ss"
              popper-class="date-select"
            >
            </el-date-picker>
          </div>
        </div>
        <div class="btns">
          <el-button round size="mini" class="buttons" @click="getTableList"
            >查询</el-button
          >
        </div>
      </div>
    </div>

    <!-- 页面下部---统计表 -->
    <div class="table_all">
      <div class="leftContent" :data-type="$store.state.moreSty">
        <span>{{ pageTitle }}</span>
      </div>
      <!--     @cell-click="handle" -->
      <el-table
        :data="state.tableData"
        style="height: calc(100% - 60px)"
        stripe
        @sort-change="handleSort"
      >
        <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"
        >
          <template #default="scope">
            <div class="bar">
                <!-- :style="{
                  width:
                    row[`${item.code}_count`] && row[`${item.code}_time`]
                      ? (Math.ceil(row[`${item.code}_count`]) /
                          (Math.ceil(row[`${item.code}_count`]) +
                            Math.ceil(row[`${item.code}_time`]))) *
                          100 +
                        'px'
                      : '0px',
                }" -->
              <div
                class="bar-percent"
                :style="{width: (Math.ceil(scope.row[`${item.code}_count`]) / 
                Math.ceil(scope.column.realWidth))*100 + 'px'}"
              ></div>
              <!-- <span class="value">{{ row[`${item.code}_count`] }} 次数</span> -->
              <span class="value">{{ Math.ceil(scope.row[`${item.code}_count`]) }} 次数</span>
              <!-- <span class="value">{{ showRow(scope) }} 次数</span> -->
            </div>
            <div class="bar">
                <!-- :style="{
                  width:
                    row[`${item.code}_count`] && row[`${item.code}_time`]
                      ? (Math.ceil(row[`${item.code}_time`]) /
                          (Math.ceil(row[`${item.code}_count`]) +
                            Math.ceil(row[`${item.code}_time`]))) *
                          100 +
                        'px'
                      : '0px',
                }" -->
              <div
                class="bar-percent"
                :style="{width: (Math.ceil(scope.row[`${item.code}_time`]) / 
                Math.ceil(scope.column.realWidth))*100 + 'px'}"
              ></div>
              <!-- <span class="value">{{ row[`${item.code}_time`] }} 分钟</span> -->
              <span class="value">{{ Math.ceil(scope.row[`${item.code}_time`]) }} 分钟</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </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 {
  ref,
  onMounted,
  watch,
  reactive,
  computed,
  onUnmounted,
  nextTick,
} from "vue";
import {
  getWarningCountList,
  fetchModel,
  fetchRelatePartAndAlarmType,
  GetAlarmIdCustom,
  getWpList,
} from "@/api/zhbj/index.js";
import dayjs from "dayjs";
onMounted(() => {
  getWpArray();
  getequipmentmodel_list();
  getfetchRelatePart();
//   state.tHeard = dataJson.data.data.title;
//   state.tableData = dataJson.data.data.data;
    changeTableData(dataJson.data.data.dataList)
  // getTableList();
});
const pageTitle = "预警分析";
const store = useStore();
const changZhanArray = ref([]);
const state = reactive({
  typeVal: "windturbine",
  typeList: [
    // {
    //   label: "升压站",
    //   value: "booststation",
    // },
    // {
    //   label: "自定义",
    //   value: "custom",
    // },
    {
      label: "风机",
      value: "windturbine",
    },
    // {
    //   label: "光伏",
    //   value: "inverter",
    // },
  ],
  tableData: [],
  tHeard: [],
  changZhan: "",
  components: "", //部件
  modelId: "", //型号
  alarmIds: "",
  alarmIdList: [],
  modelListAll: {},
  fetchListAll: {},
  starttime: dayjs().startOf("day").format("YYYY-MM-DD HH:mm:ss"),
  endtime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
  dialogVisible: false,
});

// :style="showSty(scope, '_count')"
// :style="showSty(scope, '_time')"

const showSty = (scope, type) =>{
  let str = ""
  let num = (Math.ceil(scope.row[`${item.code}${type}`]) / 
                Math.ceil(scope.column.realWidth))*100
  return str = "width:" + num + 'px'
}

const changeType = async (value) => {
  state.typeVal = value;
  state.tHeard = [];
  if (value == "windturbine") {
    state.components = "FDJ";
  } else {
    state.components = "";
  }
  state.alarmIds = "";
  state.alarmIdList = [];

  state.tableData = [];
  getWpArray();
};

const showRow = (row) => {
    debugger
}

const getWpArray = async () => {
  const { data } = await getWpList(state.typeVal);
  changZhanArray.value = data;

  state.changZhan =
    state.typeVal == "windturbine" ? "GJNY_SXGS_FSG_FDC_STA" : data[0]?.id;
};
// 机型
const getequipmentmodel_list = async () => {
  const { data } = await fetchModel();
  state.modelListAll = data;
};
//所属部件
const getfetchRelatePart = async () => {
  const { data } = await fetchRelatePartAndAlarmType();
  state.fetchListAll = data;
};
//型号列表
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) => {
    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 = [componenDefaultSelect])
        : 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;
  getAlarmId();
}
function getAlarmId() {
  GetAlarmIdCustom({
    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();
}
// 获取列表数据 调用接口
function getTableList() {
  if (state.components?.length || state.typeVal === "booststation") {
    getWarningCountList({
      stationid: state.changZhan || "",
      begin: state.starttime,
      end: state.endtime,
      timeType: "m",
      components: state.typeVal === "booststation" ? [] : state.components,
      modelId: state.modelId,
      alarmIds: state.alarmIds,
      deviceType: state.typeVal,
    }).then((res) => {
      changeTableData(res)
    });
  } else {
    BASE.showMsg({
      msg: "部件至少选择一项才可查询",
    });
  }
}

const changeTableData = (res) => {
    if (res.length) {
        let tableData = [];
        let tHeard = [];
        let data = res;
        data.forEach((pEle) => {
          for (let wtId in pEle) {
            let wtItem = data.find((tableItem) => {
              return wtId === tableItem.windturbineId;
            });
            !wtItem && (wtItem = { wtId });
            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;
              wtItem[`${cEle.alarmid}_time`] = cEle.time;
              wtItem["wtname"] = cEle.windturbineCode;
            });
            tableData.push(wtItem);
          }
        });
        state.tHeard = tHeard;
        state.tableData = tableData;
      } else {
        state.tHeard = [];
        state.tableData = [];
      }
}

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>
.custom-analyse {
  height: 100%;
  padding-bottom: 10px;
  .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% - 130px);
    padding: 20px;
    .leftContent[data-type~="greenSty"] {
      background: url("~@/assets/imgs/title_left_bg1.png") no-repeat;
    }
    .leftContent[data-type~="blueSty"] {
      background: url("~@/assets/imgs/title_left_bg.png") no-repeat;
    }
    .leftContent {
      width: 242px;
      height: 41px;
      display: flex;
      align-items: center;

      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;
          }
        }
      }
    }
  }
  .bar {
    display: flex;
    align-items: center;
    height: 16px;
    margin: 8px 0;
    .bar-percent {
      height: 100%;
      background: #2169c3;
      margin-right: 8px;
    }
  }
}
</style>