fd_dwgz_zhyw/src/views/HealthControl/healthManagement/temperatureAnalysis/index.vue

<template>
  <div class="draught-fan-list">
    <div class="query mg-b-8">
      <div class="query-items">
        <div class="query-item">
          <div class="lable">场站：</div>
          <div class="search-input">
            <el-select
              v-model="wpId"
              placeholder="请选择"
              popper-class="select"
              @change="getWt"
            >
              <el-option
                v-for="item in wpArray"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              />
            </el-select>
          </div>
        </div>
        <!-- <div class="query-item">
          <div class="lable">风机：</div>
          <div class="search-input">
            <el-select
              v-model="wtId"
              placeholder="请选择"
              popper-class="select"
            >
              <el-option
                v-for="item in wtArray"
                :key="item.id"
                :value="item.id"
                :label="item.nemCode"
              />
            </el-select>
          </div>
        </div> -->
        <div class="query-item">
          <div class="lable">部件类型：</div>
          <div class="search-input">
            <el-select v-model="partId" placeholder="Select" size="small">
              <el-option
                v-for="item in partArray"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <div class="query-item">
          <div class="lable">日期：</div>
          <div class="search-input">
            <el-date-picker
              v-model="recordDate"
              type="date"
              value-format="YYYY-MM-DD"
              placeholder="选择日期"
              popper-class="date-select"
            >
            </el-date-picker>
          </div>
        </div>
      </div>
      <div class="query-actions">
        <el-button class="searchColor" round size="mini" @click="getTableData"
          >搜 索</el-button
        >
      </div>
    </div>
    <el-table
      class="custom-table"
      :data="tableData"
      style="width: 100%"
      height="calc(100% - 35px)"
    >
      <el-table-column type="index" label="序号" :width="75" align="center" />
      <el-table-column
        :label="pItem.label"
        v-for="(pItem, pIndex) in tableColumnList"
        :key="pItem.id"
        align="center"
        show-overflow-tooltip
        :sortable="!pItem.children?.length"
        :sort-by="
          () => {
            tableSort(pIndex);
          }
        "
      >
        <template v-if="pItem.children?.length">
          <el-table-column
            :label="cItem.label"
            v-for="cItem in pItem.children"
            :key="cItem.id"
            align="center"
            :sortable="!cItem.children?.length"
            :sort-by="
              () => {
                tableSort(cItem.index);
              }
            "
          >
            <template #default="scope">
              <span>{{ scope.row[cItem.index] }}</span>
            </template>
          </el-table-column>
        </template>
        <template #default="scope" v-if="!pItem.children?.length">
          <span>{{ scope.row[pIndex] }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import api from "@api/economic/index.js";
import axios from "axios";
export default {
  data() {
    return {
      wpId: "",
      wtId: "",
      wpArray: [],
      wtArray: [],
      partId: "clx",
      partArray: [
        { label: "齿轮箱", value: "clx" },
        { label: "发电机", value: "fdj" },
        { label: "变桨", value: "bj" },
        { label: "主控", value: "zk" },
      ],
      tableData: [],
      recordDate: new Date().formatDate("yyyy-MM-dd"),
      tableColumnList: [],
    };
  },

  created() {
    this.getWp();
  },

  methods: {
    // 获取风场
    getWp() {
      api
        .getWpList({
          type: "-1",
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.wpArray = res.data.data;
            this.wpId = res.data.data?.[0]?.id;
            this.getWt();
          }
        });
    },

    // 获取风机
    getWt() {
      api
        .getWtList({
          wpId: this.wpId,
        })
        .then((res) => {
          if (res.code === 200) {
            this.wtArray = res.data;
            this.wtId = res.data?.[0]?.id;
            this.getTableData();
          }
        });
    },

    // 获取表格数据
    getTableData() {
      this.BASE.showLoading();
      axios({
        methods: "get",
        baseURL: process.env.VUE_APP_NEW_WISDOM,
        url: `/health/getParttemperaturesubListByWpId?wpId=${this.wpId}&recorddate=${this.recordDate}&partId=${this.partId}`,
      }).then((res) => {
        const title1 = res.data?.data?.title1 || [];
        const title2 = res.data?.data?.title2 || [];
        const excludeItem = /^风机编号$|^风机编码$/;

        let tableColumnList = [];

        title1?.forEach((ele, index) => {
          const findRes = tableColumnList.find((soleEle) => {
            return soleEle.label === ele;
          });
          if (!findRes) {
            let children = [];
            if (!excludeItem.test(ele)) {
              children.push({ id: this.getId(), label: title2[index], index });
            }
            tableColumnList.push({
              id: this.getId(),
              label: ele,
              children,
              index,
            });
          } else {
            findRes.children.push({
              id: this.getId(),
              label: title2[index],
              index,
            });
          }
        });

        this.tableData = res.data?.data?.list || [];
        this.tableColumnList = tableColumnList;
        this.BASE.closeLoading();
      });
    },

    // 生成随机 ID
    getId() {
      return String(
        new Date().getTime() + this.BASE.randomNum(1000000000, 5000000000000)
      );
    },

    tableSort(dataIndex) {
      return this.tableData.sort((a, b) => {
        const num1 = parseFloat(String(a[dataIndex]).replace(/^#/, ""));
        const num2 = parseFloat(String(b[dataIndex]).replace(/^#/, ""));
        return num1 - num2;
      });
    },
  },
};
</script>
<style lang="less" scoped>
.draught-fan-list {
  height: 100%;
  padding: 10px 20px 15px 20px;
}
.tableBox {
  width: 100%;
  overflow: auto;
}
.query-actions {
  margin-left: 0 !important;
}
button {
  margin-left: 10px;
  background: rgba(67, 81, 107, 0.3);
  border: 1px solid #274934;
  color: #b3b3b3;
}

.searchColor {
  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;
  }
}
</style>