large_screen/src/views/beam_tube/dataStandard/dataStandard.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-system
      :table-data="tableData"
      :total="total"
      v-if="overViewFlag"
    ></over-view-of-system> -->
    <!-- 页面主体区域 -->
<!-- 
    <span class="demonstration" style="font-size: 10px">搜索：</span>
    <el-cascader
      :options="options"
      separator=" | "
      style="width: 400px"
      :props="props"
      placeholder="请选择系统"
      clearable
      ref="cascade"
      @change="handleChange()"
    ></el-cascader> -->
    <!--      <el-button @click="searchDataByPid()" style="margin: 20px 10px"  type="primary" size="medium">查询</el-button>-->

    <el-table
    class="tableStyle"
      :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="10%"
      >
      </el-table-column>
      <el-table-column
        prop="equipmentCount"
        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
        prop="createDate"
        label="创建时间"
        header-align="center"
        align="center"
        min-width="10%"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        header-align="center"
        align="center"
        width="180"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="handleCheck(scope.row)"
            :disabled="scope.row.equipmentCount == 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>

    <!-- <checkDataquality v-if="checkVisible" ref="checkquality"></checkDataquality> -->
  </div>
</template>

<script>
import OverViewOfSystem from "@/common/dataStandard/overViewOfSystem";
export default {
  props: ["dataQualitySystemId"],
  components: { OverViewOfSystem },
  subSystem: "dataQualitySubsystem",
  data() {
    let that = this;
    return {
      options: [],
      value: [],

      tableData: [],
      props: {
        //级联选择器懒加载
        lazy: true,
        lazyLoad(node, resolve) {
          console.log({ level });
          const { level } = node;
          if (level == 0) {
            that.getAllCoal((list1) => {
              console.log(list1);
              let arr = list1.map((e) => ({ value: e.id, label: e.coal }));
              resolve(arr); // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            });
          }
          if (level == 1) {
            // value为煤矿id
            let { value } = node;
            that.getSystem(value, (list2) => {
              if (list2[0] == null) {
                let arr = list2.map((e) => ({
                  value: 0,
                  label: 0,
                  leaf: true,
                }));
                resolve(arr);
              } else {
                let arr = list2.map((e) => ({
                  value: e.id,
                  label: e.name,
                  leaf: true,
                }));
                resolve(arr);
              }
            });
          }
        },
      },
      page: 1, //当前第几页
      size: 10, //当前每页个数
      total: 100, //全部数据行数
      checkVisible: false,

      currentSystemId: "",
      currentSystem: "",
      currentCoal: "",

      dataListLoading: false,

      currOperator: "",
      currOperatorName: "",

      overViewFlag: false,
    };
  },
  mounted() {
    //获取session中的user的id和name
    this.currOperator = JSON.parse(
      window.sessionStorage.getItem("user")
    ).userId;
    this.currOperatorName = JSON.parse(
      window.sessionStorage.getItem("user")
    ).username;
    console.log(this.dataQualitySystemId);
    this.handleJump();
  },
  methods: {
    // 监听 pagesize 改变的事件
    currentChange(currentPage) {
      this.page = currentPage;
      if (this.dataQualitySystemId) {
        if (this.$refs["cascade"].checkedValue === null) {
          this.handleJump();
        } else {
          this.handleChange();
        }
      } else {
        this.handleChange();
      }
    },
    // 当每页展示数改变时
    sizeChange(currentSize) {
      this.size = currentSize;
      if (this.dataQualitySystemId) {
        if (this.$refs["cascade"].checkedValue === null) {
          this.handleJump();
        } else {
          this.handleChange();
        }
      } else {
        this.handleChange();
      }
    },
    handleCheck(row) {
      // window.sessionStorage.setItem("dataQualitySubsystemId",subsystem.id); //存到sessionStorage中，下一个页面获取
      this.$router.push({
        path: "/dataQualityDevice",
        query: {
          dataQualitySubsystemId: row.id,
        },
      });
    },

    initData() {
      this.dataListLoading = true;
      this.getRequest(
        "/subSystemManage/getSubSystemInfoByPage/?page=" +
          this.page +
          "&size=" +
          this.size +
          "&userId=" +
          this.currOperator
      ).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(`/dataQualitySubsystem/getSubsystemBySystemId/?systemId=${this.currentSystemId}&page=${this.page}&size=${this.size}`).then( resp =>{
      //   if (resp.data){
      //     console.log("resp.data",resp.data)
      //     this.tableData= resp.data;
      //     this.total = resp.data.size;
      //   }
      // })
    },
    //根据系统id去查找
    handleJump() {
      this.dataListLoading = true;
      this.getRequest(
        "/subSystemManage/getSubSystemInfoBySystemId?systemId=" +
          this.dataQualitySystemId +
          "&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;
    },
    handleChange() {
      // 如果级联选框为空,则根据页数查找
      if (
        this.$refs["cascade"].checkedValue === null ||
        this.$refs["cascade"].checkedValue.length == 0
      ) {
        this.dataListLoading = true;
        this.getRequest(
          "/subSystemManage/getSubSystemInfoByPage/?page=" +
            this.page +
            "&size=" +
            this.size +
            "&userId=" +
            this.currOperator
        ).then((resp) => {
          if (resp.data) {
            this.tableData = resp.data.data;
            this.total = resp.data.total;
            this.overViewFlag = true;
          }
          this.dataListLoading = false;
        });
      } else {
        // 否则根据系统id查找
        this.dataListLoading = true;
        this.getRequest(
          "/subSystemManage/getSubSystemInfoBySystemId?systemId=" +
            this.$refs["cascade"].getCheckedNodes()[0].value +
            "&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;
      }
    },
    // searchDataByPid() {
    //   this.currentSystemId =  this.$refs["cascade"].getCheckedNodes()[0].value
    //   this.getRequest('/dataQualitySubsystem/getSubsystemBySystemId/?systemId=' + this.currentSystemId +
    //       '&page='+ this.page + '&size='+this.size).then( resp =>{
    //     if (resp.data){
    //       this.tableData= resp.data;
    //       this.total = resp.data.size;
    //     }
    //   })
    // },
    async getAllCoal(getAllCoalcallback) {
      this.getRequest("/dataList/getAllCoal/").then((resp) => {
        if (resp.data) {
          callback(resp.data);
        }
      });
    },
    async getSystem(coalId, callback) {
      this.getRequest(
        "/coalManage/getSystemInfoByCoalId?coalId=" + coalId
      ).then((resp) => {
        if (resp.data) {
          callback(resp.data);
        }
      });
    },
  },
};
</script>

<style scoped></style>