FE-V2-BIG-DATA/src/views/inspectDetail.vue

<template>
  <div class="main">

    <Header/>
    <div class="main_t">
      <div class="main_t_t">
        <i class="main_t_t_l">当前位置：首页 &gt;</i>
        <i>安全检查</i>
      </div>
    </div>

    <div class="main_b">
      <div class="main_b_title">遗留问题</div>
      <!--查询条件-->
      <el-form :model="editForm" ref="queryParams" class="form-box" :inline="true" style="margin:20px;">
        <el-form-item label="实验室" prop="dangerId" label-width="98px">
          <el-select v-model="editForm.subId" popper-class="select-big-data" placeholder="请选择实验室">
            <el-option
                v-for="item in labList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="0">
          <el-button type="primary" @click.native.prevent="onSearch" native-type="submit">查询</el-button>
          <el-button @click="resetForm('searchForm')">重置</el-button>
        </el-form-item>
      </el-form>
      <!--列表-->
      <el-table :data="tableData"  style="width: 100%" height="250" :row-class-name="tableRowClassName">
        <el-table-column align="center" header-align='center' type="index" :index="indexMethod" label="序号" width="60"></el-table-column>
        <el-table-column align="center" header-align='center' prop="laboratoryName" label="实验室"></el-table-column>
        <el-table-column align="center" header-align='center' prop="typeName" label="安全分类"></el-table-column>
        <el-table-column align="center" header-align='center' prop="typeLevel" label="安全分级"></el-table-column>
        <el-table-column align="center" header-align='center' prop="yhMs" label="隐患名称"></el-table-column>
        <el-table-column align="center" header-align='center' prop="remark" label="检查批次"></el-table-column>
      </el-table>
      <el-pagination
          style="margin-top: 14px"
          background
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40]"
          :current-page.sync="editForm.pageNum"
          :page-size="editForm.pageSize"
          layout="total,prev, pager, next"
          :total="totalNum">
      </el-pagination>
    </div>
    <div class="main_b2">
      <div class="main_b_title">本次检查问题</div>
      <!--查询条件-->
      <el-form :model="editForm2" ref="queryParams" class="form-box" :inline="true" style="margin:20px;">
        <el-form-item label="实验室" prop="dangerId" label-width="98px">
          <el-select v-model="editForm2.subId" popper-class="select-big-data" placeholder="请选择实验室">
            <el-option
                v-for="item in labList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="0">
          <el-button type="primary" @click.native.prevent="onSearch2" native-type="submit">查询</el-button>
          <el-button @click="resetForm2('searchForm')">重置</el-button>
        </el-form-item>
      </el-form>
      <!--列表-->
      <el-table :data="tableData2"  style="width: 100%" height="250" :row-class-name="tableRowClassName">
        <el-table-column align="center" header-align='center' type="index" :index="indexMethod2" label="序号" width="60"></el-table-column>
        <el-table-column align="center" header-align='center' prop="laboratoryName" label="实验室"></el-table-column>
        <el-table-column align="center" header-align='center' prop="typeName" label="安全分类"></el-table-column>
        <el-table-column align="center" header-align='center' prop="typeLevel" label="安全分级"></el-table-column>
        <el-table-column align="center" header-align='center' prop="yhMs" label="隐患名称"></el-table-column>
        <el-table-column align="center" header-align='center' prop="isZg" label="整改状态">
          <template #default="{row}">
            <span v-if="row.isZg == 0">已整改</span>
            <span v-if="row.isZg != 0">未整改</span>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination
          style="margin-top: 14px"
          background
          @current-change="handleCurrentChange2"
          :page-sizes="[10, 20, 30, 40]"
          :current-page.sync="editForm2.pageNum"
          :page-size="editForm2.pageSize"
          layout="total,prev, pager, next"
          :total="totalNum2">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {getSubjectDict, indexCheckDetalsWzg, indexCheckDetalsYzg} from "../api/http"
import Header from '@/components/header.vue'
export default {
  components: {
    Header
  },
  data() {
    return {
      editForm:{
        deptLevel:'',//这个是登陆后，刘波给你的院校的类型
        subId:'',//实验室类型
        pageNum:1,
        pageSize:10
      },
      editForm2:{
        deptLevel:'',//这个是登陆后，刘波给你的院校的类型
        subId:'',//实验室类型
        pageNum:1,
        pageSize:10
      },
      labList:[],//实验室
      totalNum:0,
      totalNum2:0,
      tableData:[],
      tableData2:[],
      codeData:'',
    }
  },
  methods: {
    back(){
      this.$router.push('/')
    },
    tableRowClassName({ rowIndex}) {
      if (rowIndex%2 === 0) {
        return 'success-row';
      } else{

        return 'warning-row';
      }
    },

    indexMethod(index) {
      return (this.editForm.pageNum - 1) * this.editForm.pageSize + index + 1;
    },
    indexMethod2(index) {
      return (this.editForm2.pageNum - 1) * this.editForm2.pageSize + index + 1;
    },
    //请求列表
    getAjaxList:function (){
      let _this=this;

      //遗留问题
      let obj={
        'laboratoryId':this.editForm.subId,
        'id':this.codeData,
        'pageNum':this.editForm.pageNum,
        'pageSize':this.editForm.pageSize,
      }
      indexCheckDetalsWzg(obj).then((res) =>{
        if(res.code==200){
          let data = res.rows;
          if(data && data.length>0){
            _this.tableData = data;
            _this.totalNum = parseInt(res.total);
          }else{
            _this.tableData = [];
            _this.totalNum = 0;
          }
        }
      })
    },
    //请求列表
    getAjaxList2:function (){
      let _this=this;
      //已整改的
      let obj={
        'laboratoryId':this.editForm2.subId,
        'id':this.codeData,
        'pageNum':this.editForm.pageNum,
        'pageSize':this.editForm.pageSize,
      }
      indexCheckDetalsYzg(obj).then((res) =>{
        if(res.code==200){
          let data = res.rows;
          if(data && data.length>0){
            _this.tableData2 = data;
            _this.totalNum2 = parseInt(res.total);
          }else{
            _this.tableData2 = [];
            _this.totalNum2 = 0;
          }
        }
      })
    },
    getAjaxData: function () {
      let _this=this;
      //查询实验室
      getSubjectDict().then((res) =>{
        if(res.code==200){
          let data=res.data;
          _this.labList=data

        }
      })
    },
    /*查询*/
    onSearch() {

      this.editForm.pageNum =1;
      this.getAjaxList();
    },
    /*重置*/
    resetForm() {
      this.editForm.subId = "";
      this.onSearch();
    },
    /*查询*/
    onSearch2() {

      this.editForm2.pageNum =1;
      this.getAjaxList2();
    },
    /*重置*/
    resetForm2() {
      this.editForm2.subId = "";
      this.onSearch2();
    },
    handleCurrentChange(val) {
      this.editForm.pageNum = val;
      this.getAjaxList();
    },
    handleCurrentChange2(val) {
      this.editForm2.pageNum = val;
      this.getAjaxList2();
    },
  },
  mounted() {
    this.codeData=this.$route.query.key
    this.getAjaxData()
    this.getAjaxList()
    this.getAjaxList2()
  },


}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>

@function rw($px){

  @return $px*100/1920 *1vw;
}
@function rh($px){

  @return $px*100/1080 *1vh;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.main {
  width: rw(1920);
  height: rh(1080);
  /* background: url("../img/index_bg.png") no-repeat;
   background-size: 100% 100%;*/
  position: relative;
  left: 0;
  top: 0;
  z-index: 50;
  background: #062338;
  overflow: hidden;
  .main_t{
    background: #062338;
    width: rw(1852);
    position: absolute;
    left: rw(34);
    top: rh(86);
    z-index: 200;
    .main_t_t{
      margin: rh(20) 0 0 rw(18);
      >i{
        font-size: rh(16);
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
        line-height: rh(16);
      }
      >i:nth-of-type(1){

      }
      >i:nth-of-type(2){
        color: #1ED0F8;
      }
    }
  }
  .main_b{
    background: rgba(9, 55, 81, 0.6);
    padding: 0 rw(32);
    width: rw(1852);
    height: rh(442);
    //position: absolute;
    //left: rw(34);
    //top: rh(138);
    //z-index: 200;
    margin-top: rh(138);
    margin-left:rw(34);
    overflow: hidden;
    .main_b_title{
      font-size: rh(24);
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #FFFFFF;
      line-height: rh(24);
      text-align: center;
      margin-top: rh(10);
    }
  }
  .main_b_h{
    background: rgba(9, 55, 81, 0.6);
    padding: 0 rw(32);
    width: rw(1852);
    height: rh(894);
    margin-top: rh(138);
    margin-left:rw(34);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .main_b_title{
      font-size: rh(24);
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #FFFFFF;
      line-height: rh(24);
      text-align: center;
      margin-top: rh(10);
    }
  }
  .main_b2{
    background: rgba(9, 55, 81, 0.6);
    padding: 0 rw(32);
    width: rw(1852);
    height: rh(442);
    margin-left:rw(34);
    margin-top:rw(10);
    overflow: hidden;
    //position: absolute;
    //left: rw(34);
    //top: rh(588);
    //z-index: 200;
    .main_b_title{
      font-size: rh(24);
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #FFFFFF;
      line-height: rh(24);
      text-align: center;
      margin-top: rh(10);
    }
  }
}
</style>
<style lang="scss">
li{list-style:none}
i,em,b{font-style:normal;font-weight:100;}
body{margin: 0}
</style>