large_screen/src/views/power_supply/systemData/checkData.vue

<template>
  <!-- 查看系统的对话框 -->
  <div>
    <!-- <el-breadcrumb separator-class="el-icon-arrow-right" v-if="this.$router.currentRoute.path!='/home'">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>供电系统</el-breadcrumb-item>
      <el-breadcrumb-item >系统数据</el-breadcrumb-item>
    </el-breadcrumb> -->
    <!-- <over-view-of-sub-system  :table-data="tableData" :total="total" v-if="overViewFlag"></over-view-of-sub-system> -->
    <!-- <span style="font-size: 10px;">搜索：</span>
    <el-select v-model="currentSubSystemId" placeholder="请选择子系统" @change="selectSubsystem()" style="width: 400px">
      <el-option v-for="item in options" :key="item.id" :label="item.subSystem" :value="item.id">
      </el-option>
    </el-select> -->

    <el-table
        :data="tableData"
        style="min-width: 100%"
        border
        v-loading="dataListLoading"
    >
      <el-table-column
          prop="id"
          label="设备id"
          header-align="center"
          align="center"
          min-width="5%"
      >
      </el-table-column>
      <el-table-column
          prop="name"
          label="设备"
          header-align="center"
          align="center"
          min-width="5%">
      </el-table-column>
      <el-table-column
          prop="subEquipmentCount"
          label="子设备个数"
          header-align="center"
          align="center"
          min-width="10%">
      </el-table-column>
      <!--      <el-table-column prop="measurePointNum" label="测点个数" header-align="center" align="center" width="180">-->
      <!--      </el-table-column>-->
      <el-table-column
          label="操作"
          header-align="center"
          align="center"
          min-width="10%">
        <template slot-scope="scope">
          <el-button
              type="text"
              size="small"
              @click="handleCheck(scope.row)"
              :disabled="scope.row.subEquipmentCount == 0?true:false"
          >查看</el-button>  <!-- 这里要改，当子系统个数为0时，查看按钮不可用 -->
        </template>
      </el-table-column>
      <el-table-column
          prop="remark"
          label="备注"
          header-align="center"
          align="center"
          min-width="20%">
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <div style="display: flex;justify-content: flex-end">
      <el-pagination
          background
          @current-change="currentChange"
          @size-change="sizeChange"
          :current-page="page"
          :page-size="size"
          layout="sizes, prev, pager, next, jumper, ->, total, slot"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "checkSystem",
  props:['systemId'],
  data() {
    return {
      visible: false,
      options: [],
      tableData: [],
      page:1,  //当前第几页
      size:10, //当前每页页数
      total:100, //全部数据量
      currentSystemId: 0,
      currentSubSystemId:'',
      currentsubSystem:'',
      dataListLoading: false,
      overViewFlag: false,
    }
  },
  mounted(){
    this.currentSystemId = this.systemId
    this.getSubsystemOption()
    // this.currentSystemId = window.sessionStorage.getItem("dataList_currentSystemId");
    // this.getSubsystemOption();
    // this.currentsubSystem = this.options[0].subSystem;
    // this.currentSubSystemId = this.options[0].id;//将当前煤矿与id设置为下拉框第一个
    // this.initData();
  },
  methods: {
    selectSubsystem(){
      for (let i in this.options) {
        if (this.options[i].id == this.currentSubSystemId){
          this.currentsubSystem = this.options[i].subSystem;
          break;
        }
      }
      this.initData();
    },
    getSubsystemOption(){
      this.getRequest('/dataList/getSubsystemOptionBySystemId/?systemId=' + this.currentSystemId).then(resp=>{
        if (resp){
            console.log(resp.data)
          this.options = resp.data;
          this.currentsubSystem = this.options[0].subSystem;
          this.currentSubSystemId = this.options[0].id;//将当前煤矿与id设置为下拉框第一个
          this.initData()
        }
      });
    },
    initData(){
      this.dataListLoading = true
      this.getRequest(
          "/equipmentManage/getEquipmentInfoBySubSystemId?subSystemId=" +
          this.currentSubSystemId + "&page=" + this.page + "&size=" + this.size
      ).then((resp) => {
        if (resp.data) {
          this.tableData = resp.data.data;
          this.total = resp.data.total;
          this.overViewFlag = true;
        }
      });
      this.dataListLoading = false
      // this.currentSystemId = parseInt(this.currentSystemId);
      // this.getRequest('/dataList/getEquipmentBySubsystemId/?subsystemId=' + this.currentSubSystemId + '&page=' + this.page + '&size=' + this.size).then(resp=>{
      //     if (resp.data){
      //         this.tableData = resp.data;
      //         this.total = resp.data.size;
      //     }
      // });
      /*this.getRequest('/coalSystemManage/getSystemOverview').then(resp =>{
          if (resp.data){
              this.options[0].num = resp.data.datasize + 'G';
              this.options[1].num = resp.data.systemCount + '个';
              this.options[2].num = resp.data.subSystemCount + '个';
              this.options[3].num = resp.data.equipmentCount + '个';
          }
      })*/
    },
    // 监听 pagesize 改变的事件
    currentChange(currentPage){
      this.page=currentPage;
      this.initData();
    },
    sizeChange(currentSize) {
      this.size = currentSize;
      this.initData();
    },
    // init(id) {
    //     this.visible = true;
    // }
    handleCheck(equip) {
      window.sessionStorage.setItem("dataList_currentEquipId",equip.id); //存到sessionStorage中，下一个页面获取
      this.$router.push({
        name: 'powersupplyDataDetail',
        query: {
          equipmentId: equip.id,
          systemId: this.systemId
        }
      })
    }

  }
}
</script>


<style scoped>

</style>