hb_sis_zhfx/src/views/malfunctionDiagnose/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"
              clearable
              placeholder="请选择"
              popper-class="select"
              @change="
                (wpId) => {
                  getProject();
                }
              "
            >
              <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="projectId"
              clearable
              placeholder="请选择"
              popper-class="select"
            >
              <el-option
                v-for="item in projectArray"
                :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="modelId"
              clearable
              placeholder="请选择"
              popper-class="select"
            >
              <el-option
                v-for="item in modelArray"
                :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="typeId"
              clearable
              placeholder="请选择"
              popper-class="select"
            >
              <el-option
                v-for="item in typeArray"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              />
            </el-select>
          </div>
        </div>
      </div>
      <div class="query-actions">
        <button class="btn green" @click="search()">查询</button>
		<button class="btn green" @click="">导入</button>
		<button class="btn green" @click="export">导出</button>
      </div>
    </div>
    <div class="df-table">
      <ComTable height="78vh" :data="tableData"></ComTable>
    </div>
    <el-dialog
      title="批量诊断"
      v-model="dialogShow"
      width="85%"
      top="10vh"
      custom-class="modal"
      :close-on-click-modal="true"
    >
      <el-table
        :data="treeData"
        style="width: 100%; height: 600px; overflow-y: scroll"
        row-key="id"
        border
        default-expand-all
        :expand-row-keys="['0']"
        :tree-props="{ children: 'children' }"
      >
        <el-table-column
          prop="name"
          label="项目名称"
          sortable
        ></el-table-column>
        <el-table-column
          prop="judegVulue"
          label="状态"
          sortable
        ></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import ComTable from "@com/coms/table/table.vue";
export default {
  // 名称
  name: "cutAnalyse",

  // 使用组件
  components: {
    ComTable,
  },

  // 数据
  data() {
    const that = this;
    return {
      isAsc: "asc",
      wpArray: [],
      wpId: "",
      projectId: "",
      projectArray: [],
      modelId: "2",
      modelArray: [
        {
          id: "2",
          value: "2",
          name: "极限学习机",
        },
        {
          id: "1",
          value: "1",
          name: "决策树分类法",
        },
      ],
      typeId: "1",
      typeArray: [
        {
          id: "1",
          value: "1",
          name: "顺时",
        },
        {
          id: "2",
          value: "2",
          name: "趋势",
        },
      ],
      dialogShow: false,
      tableData: {
        column: [
          {
            name: "风机",
            field: "wtid",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "型号",
            field: "modelid",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "评分",
            field: "judegvulue",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "操作",
            field: "cz",
            is_num: false,
            is_light: false,
            template() {
              return "<el-button type='text' style='cursor: pointer;'>详情</el-button>";
            },
            click(e, row) {
              that.getTree(row);
            },
          },
        ],
        data: [],
      },
    };
  },

  // 函数
  methods: {
    // 请求服务
    requestData() {
      let that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "powercompare/windfarmAjax",
        success(res) {
          that.wpArray = res.data;
          that.wpId = res.data[0].id;
          that.getProject();
        },
      });
    },

    // 获取期数
    getProject() {
      let that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "powercompare/projectAjax",
        data: {
          wpIds: that.wpId,
        },
        success(res) {
          that.projectArray = res.data;
          that.projectId = res.data[0].id;
          that.getTableData();
        },
      });
    },

    getTableData() {
      let that = this;
      if (!that.wpId || !that.projectId) {
        that.BASE.showMsg({
          msg: "场站与期数不可为空",
        });
      } else if (!that.modelId || !that.typeId) {
        that.BASE.showMsg({
          msg: "模型与时间类型不可为空",
        });
      } else {
        that.API.requestData({
          method: "POST",
          subUrl: "stopanalysis/stopAnalysisList",
          data: {
            wpId: that.wpId,
            isAsc: that.isAsc,
            modelId: that.modelId,
            typeId: that.typeId,
          },
          success(res) {
            that.tableData.data = res.data;
          },
        });
      }
    },
    // 获取故障诊断树
    getTree(item) {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "stopanalysis/stopAnalysisTree",
        data: {
          mainId: item.id,
          wtId: item.wtid,
          values: item.judegvulue,
        },
        success(res) {
          res.data[0].id = "0";
          that.treeData = res.data;
          that.dialogShow = true;
        },
      });
    },

    search() {
      this.getTableData();
    },
	formatJson(filterVal, jsonData) {
		return jsonData.map(v => filterVal.map(j => v[j]));
	},
	export() {
		let that = this;
		const {export_json_to_excel} = require('@tools/excel/Export2Excel.js'); // 注意这个Export2Excel路径      
		let tHeader = []; // 上面设置Excel的表格第一行的标题       
		let filterVal = []; // 上面的index、nickName、name是tableData里对象的属性key值
	
		that.tableData.column.forEach(ele => {
			if(ele.field != 'cz'){
				tHeader.push(ele.name);
				filterVal.push(ele.field);
			}
		});
		const data = that.formatJson(filterVal, that.tableData.data);
		export_json_to_excel(tHeader, data, '故障诊断'); // 最后一个是表名字
	},
  },

  created() {
    this.requestData();
  },
};
</script>

<style lang="less" scoped>
.draught-fan-list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .btn-group-tabs {
    display: flex;
    flex-direction: row;

    .photovoltaic {
      margin-left: 1.481vh;
    }
  }

  .df-table {
    border: 0.093vh solid fade(@darkgray, 50%);
    position: relative;
    overflow: auto;
    flex-grow: 1;
    margin-top: 1.481vh;

    &:before {
      content: "";
      width: 0.37vh;
      height: 0.37vh;
      background: @write;
      position: absolute;
      left: 0.278vh;
      top: 0.278vh;
    }

    tbody {
      height: calc(100vh - 166px);
    }
  }
}
</style>