alertGuardian-JinNeng/src/pages/baseData/FanDataStatisticChart.vue

<template>
  <!-- 风机原始数据统计表页面 -->
  <div class="AllPage">
    <!-- 页面头部 multiple多选属性 -->
    <el-card>
      <el-space>
        <div class="search-input">
          <span class="lable">场站：</span>
          <el-select v-model="state.changZhan" placeholder="全部场站">
            <el-option
              v-for="item in changZhanArray"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-input">
          <span class="lable">型号：</span>
          <el-select v-model="state.modelId" placeholder="全部型号">
            <el-option
              v-for="item in modelList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-input">
          <span class="lable">部件：</span>
          <el-select v-model="state.components" placeholder="全部部件">
            <el-option
              v-for="item in componentList"
              :key="item.id"
              :label="item.name"
              :value="item.nemCode"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-input">
          <span class="lable">开始日期：</span>
          <el-date-picker
            v-model="state.starttime"
            type="datetime"
            placeholder="选择日期"
            popper-class="date-select"
            value-format="YYYY-MM-DD HH:mm:ss"
          >
          </el-date-picker>
        </div>
        <div class="search-input">
          <span class="lable">结束日期：</span>
          <el-date-picker
            v-model="state.endtime"
            type="datetime"
            placeholder="选择日期"
            popper-class="date-select"
            value-format="YYYY-MM-DD HH:mm:ss"
          >
          </el-date-picker>
        </div>
        <el-button type="primary" @click="getTableList">查询</el-button>
      </el-space>
    </el-card>

    <!-- 页面下部---统计表 -->
    <div class="table_all">
      <el-table
        :data="state.tableData"
        border
        :cell-class-name="tableCell"
        :header-row-class-name="tableRowClassName"
        height="100%"
        width="100%"
        @cell-click="handle"
      >
        <el-table-column prop="wtId" fixed label="风机编号" align="center" />
        <el-table-column
          :label="item.label"
          v-for="(item, index) in state.tHeard"
          :key="index"
          header-align="center"
          show-overflow-tooltip
        >
          <template #default="{ row }">
            <div class="bar">
              <div
                class="bar-percent"
                :style="{
                  width: (row?.count / (row?.count + row?.time)) * 100 + 'px',
                }"
              ></div>
              <span class="value">{{ row?.count }} 次数</span>
            </div>
            <div class="bar">
              <div
                class="bar-percent"
                :style="{
                  width: (row?.time / (row?.count + row?.time)) * 100 + 'px',
                }"
              ></div>
              <span class="value">{{ row?.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 {
  ref,
  onMounted,
  watch,
  reactive,
  computed,
  onUnmounted,
  nextTick,
} from "vue";
import {
  getAlarmCountList,
  fetchModel,
  fetchRelatePartAndAlarmType,
} from "/@/api/api.js";
import dayjs from "dayjs";
onMounted(() => {
  getequipmentmodel_list();
  getfetchRelatePart();
  getTableList();
});
const store = useStore();
const changZhanArray = computed(() => store.state.stationListAll);
const state = reactive({
  tableData: [],
  tHeard: [
    // { title: "风机编号", code: "windturbineCode" },
    // { title: "时间", code: "time" },
    // { title: "报警信息", code: "alertText" },
    // { title: "部件", code: "relatePartsText" },
  ],
  changZhan: "",
  components: "", //部件
  modelId: "", //型号
  modelListAll: {},
  fetchListAll: {},
  starttime: dayjs().add(-1, "day").format("YYYY-MM-DD HH:mm:ss"),
  endtime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
  dialogVisible: false,
});
// 机型
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];
  }
});
//部件列表
const componentList = computed(() => {
  if (state.changZhan == "") {
    return [];
  } else {
    if (state.changZhan.includes("FDC")) {
      return state.fetchListAll?.fjbj;
    } else {
      return state.fetchListAll?.gfbj;
    }
  }
});
// 获取列表数据 调用接口
function getTableList() {
  getAlarmCountList({
    stationid: state.changZhan || "",
    begin: state.starttime,
    end: state.endtime,
    alarmType: "windturbine",
    components: state.components,
    modelId: state.modelId,
  }).then((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 });
          console.log(wtItem);
          pEle[wtId].forEach((cEle) => {
            // console.log(cEle);
            let someRes = tHeard.some((findEle) => {
              return findEle.label == cEle.alertText;
            });

            if (!someRes) {
              tHeard.push({
                label: cEle.alertText,
              });
            }
            wtItem["count"] = cEle.count + 20;
            wtItem["time"] = cEle.time + 523;
          });
          tableData.push(wtItem);
        }
      });
      state.tHeard = tHeard;
      state.tableData = tableData;
    }
  });
}
// export default {
//   data() {
//     return {
//       tableData: [],
//       tHeard: [],
//       changZhan: "",
//     //   changZhanArray: [],
//       starttime: dayjs(new Date(new Date() - 1 * 24 * 60 * 60 * 1000)).format(
//         "YYYY-MM-DD"
//       ),
//       endtime: dayjs(new Date()).format("YYYY-MM-DD"),

//       // pageParam: {
//       //   pagenum: 1,
//       //   pagesize: 10,
//       //   total: 0,
//       // },
//       dialogVisible: false,
//     };
//   },

//   created() {
//     this.getTableList();
//   },

//   mounted() {
//     this.$nextTick(() => {
//       this.getChangZhan();
//     });
//   },

//   methods: {
//     //获取场站
//     getChangZhan() {
//       //   getStationinfoAll().then((res) => {
//       //     this.changZhan = res.data[0].id;
//       //     this.changZhanArray = res.data;
//       //     // console.log('changzhang>>>>>>>>>>>',res)
//       //     this.getTableList();
//       //   });
//     },
//     // 查询按钮
//     Select() {
//       this.getTableList();
//     },
//     // 对时间进行包装
//     getTime(date) {
//       var y = date.getFullYear();
//       var m = date.getMonth() + 1;
//       m = m < 10 ? "0" + m : m;
//       var d = date.getDate();
//       d = d < 10 ? "0" + d : d;
//       return y + "-" + m + "-" + d + " ";
//     },

//     // 获取列表数据 调用接口
//     getTableList() {
//       getAlarmCountList({
//         stationid: this.changZhan || "",
//         starttime: dayjs(this.starttime).format("YYYY-MM-DD"),
//         endtime: dayjs(this.endtime).format("YYYY-MM-DD"),
//       }).then((res) => {
//         console.log("列表数据》》》》》》》", res);
//         if (res && res.status === 20000) {
//           let tHeard = [];
//           let tableData = [];

//           this.tableData = res.data;

//           res.data.forEach((pEle) => {
//             for (let wtId in pEle) {
//               let wtItem = tableData.find((tableItem) => {
//                 return wtId === tableItem.wtId;
//               });
//               !wtItem && (wtItem = { wtId });
//               pEle[wtId].forEach((cEle) => {
//                 let someRes = tHeard.some((findEle) => {
//                   return findEle.parts === cEle.parts;
//                 });

//                 if (!someRes) {
//                   tHeard.push({
//                     parts: cEle.parts,
//                     label: cEle.partsName,
//                     align: "center",
//                     prop: `${cEle.parts}_Value`,
//                   });
//                 }

//                 wtItem[`${cEle.parts}_Value`] = wtItem[`${cEle.parts}_Value`]
//                   ? wtItem[`${cEle.parts}_Value`] + cEle.count
//                   : cEle.count;
//               });
//               tableData.push(wtItem);
//             }
//           });

//           this.tHeard = tHeard;
//           this.tableData = tableData;
//         }
//       });
//     },

//     // 单元格点击事件
//     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) {
//           console.log("弹窗数据》》》》》》》", res);

//           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: "所选风机暂无数据",
//             });
//           }
//         }
//       });
//     },

//     // changePage(val) {
//     //   this.pageParam.pagenum = val;
//     //   this.getTableList();
//     // },
//   },
// };
</script>

<style lang="scss" scoped>
.AllPage {
  height: 100%;
  .Head {
    display: flex;
    width: 100%;
    height: 5%;
    margin: 5px 0;
  }
  .bar {
    display: flex;
    align-items: center;
    height: 16px;
    margin: 8px 0;

    .bar-percent {
      height: 100%;
      background: #6198ff;
      margin-right: 8px;
    }
  }
}
</style>

<style lang="scss">
.table_all {
  height: calc(100% - 74px - 30px);
  padding: 10px;
  margin-top: 10px;
  background: #fff;
  .el-table {
    .el-table__row {
      td {
        cursor: pointer;

        &:first-child {
          cursor: auto;
        }
      }
    }
  }
}
</style>