jhbigscreen/src/pages/components/ProblemmodifyList.vue

<template>
  <div class="problemmodify-list">
    <div class="head-title-tab">
      <div :class="nav == 0 ? 'head-nav active' : 'head-nav'" @click="doNav(0)">待整改({{ count['0'] }})</div>
      <div :class="nav == 1 ? 'head-nav active' : 'head-nav'" @click="doNav(1)">待复检({{ count['1'] }})</div>
      <div :class="nav == 3 ? 'head-nav active' : 'head-nav'" @click="doNav(3)">复检驳回({{ count['3'] }})</div>
      <div :class="nav == 4 ? 'head-nav active' : 'head-nav'" @click="doNav(4)">复检通过({{ count['4'] }})</div>
      <div :class="nav == 5 ? 'head-nav active' : 'head-nav'" @click="doNav(5)">整改超时({{ count['5'] }})</div>

    </div>

    <div class="data-list scroll" style="max-height:530px;overflow-y: auto;margin:12px 0px;overflow-x: hidden;"
      v-if="dataTable.length > 0" :key="elKey">
      <div v-for="(it, idx) in dataTable" :key="idx" class="data-item" :class="it.timeout ? 'time-out' : ''">
        <div class="item-left">
          <el-image ref="preview" style="width: 400px; " :preview-src-list="[it.marksPicture]"
            :src="it.marksPicture + '.1000.jpg'">
          </el-image>
        </div>
        <div class="item-right">
          <div v-if="it.timeout && it.checkState != 4" class="text-timeout"></div>
          <div class="text-state" :class="'state' + it.checkState">{{ getCheckState(it.checkState) }}</div>
          <el-row>
          <el-col :span="12" class="item-data">
            <img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">总包单位:</span>
            <div class="div-text">{{ it.deptName }}</div>
          </el-col>
          <el-col :span="12" class="item-data">
            <img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">隐患类型:</span>
            <div class="div-text">{{ getDangerType(it.dangerType) }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="item-data">
            <img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">隐患整改人:</span>
            <div class="div-text">{{ it.lordSent }}</div>
          </el-col>
          <el-col :span="12" class="item-data">
            <img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">复检人:</span>
            <div class="div-text">{{ it.recheckSend }}</div>
          </el-col>
        </el-row>
          <el-col :span="12" class="item-data">
            <img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">抄送人:</span>
            <div class="div-text">{{ it.copySend }}</div>
          </el-col>
          <template v-if="it.checkState == 4">
            <el-col :span="12" class="item-data">
              <img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">提交用户:</span>
              <div class="div-text">{{ it.createBy }}</div>
            </el-col>
            <el-col :span="8" class="item-data">
              <img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">提交时间:</span>
              <div class="div-text">{{ it.createTime | formatDate('YYYY-MM-DD') }}</div>
            </el-col>
            <el-col :span="8" class="item-data">
              <img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">截止时间:</span>
              <div class="div-text">{{ it.nickedTime | formatDate('YYYY-MM-DD') }}</div>
            </el-col>
            <el-col :span="8" class="item-data">
              <img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">完成时间:</span>
              <div class="div-text">{{ it.updateTime | formatDate('YYYY-MM-DD') }}</div>
            </el-col>
          </template>
          <template v-else>
            <el-col :span="12" class="item-data">
              <img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">提交用户:</span>
              <div class="div-text">{{ it.createBy }}</div>
            </el-col>
            <el-col :span="12" class="item-data">
              <img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">提交时间:</span>
              <div class="div-text">{{ it.createTime | formatDate('YYYY-MM-DD') }}</div>
            </el-col>
            <el-col :span="12" class="item-data">
              <img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">截止时间:</span>
              <div class="div-text">{{ it.nickedTime | formatDate('YYYY-MM-DD') }}</div>
            </el-col>
          </template>
          <el-col :span="24" class="item-data">
            <img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">隐患描述:</span>
            <div class="div-text">{{ it.workParts }}
            </div>
          </el-col>
          <el-col :span="24" class="item-data">
            <img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">整改要求:</span>
            <div class="div-text">{{ it.changeInfo }}</div>
          </el-col>
        </div>
      </div>      
    </div>
    <el-pagination v-if="dataTable.length > 0" layout="total,prev, pager, next" :hide-on-single-page="false"
            @current-change="handleCurrentChange" :total="total" :page-size="size" :current-page.sync="index"
            class="bg-pagination"></el-pagination>
    <div v-if="dataTable.length == 0" style="text-align: center;margin-top: 200px;">
      <img src="images/nodata.png" style="width: 240px;">
      <div style="text-align: center;">暂无数据</div>
    </div>

  </div>
</template>

<script>
export default {

  data() {
    return {
      projectId: 0,
      nav: 0,
      infoType: 0,
      roleType: 0,
      count: {
        "0": 0,
        "1": 0,
        "3": 0,
        "4": 0,
        "5": 0
      },
      dataTable: [],
      dicts: [],
      checkStateDicts: [],
      selDate: [],
      size: 10,
      index: 1,
      total: 0,
    };
  },

  mounted() {

  },

  methods: {
    getDangerType(v) {
      let tmps = this.dicts.filter(d => d.dictValue == v);
      return tmps.length > 0 ? tmps[0].dictLabel : '';
    },
    getCheckState(v) {
      let tmps = this.checkStateDicts.filter(d => d.dictValue == v);
      return tmps.length > 0 ? tmps[0].dictLabel : '';
    },
    handleCurrentChange(n) {
        this.index = n;
        this.getData();
    },
    doNav(n, init) {
      if (n == this.nav && !init) {
        return;
      }
      this.nav = n;   
      this.index=1;   
      this.getData()
    },
    getData(){
      let postData = {
        projectId: this.projectId,
        infoType: this.infoType,
        roleType: this.roleType
      };
      if (this.nav == 5) {
        postData.activeName = 'zgcs'
      } else {
        postData.checkState = this.nav
      }
      if (this.selDate.length > 0) {
        postData.startDate = this.$dt(this.selDate[0]).format("YYYY-MM-DD");
      }
      if (this.selDate.length > 1) {
        postData.endDate = this.$dt(this.selDate[1]).format("YYYY-MM-DD");
      }
      this.loading = true;
      this.$api.problemmodify.listSspProblemmodify(postData,this.size,this.index).then(d => {
        this.loading = false;
        this.total=d.total;
        this.dataTable = (d.rows || []).map(it => {
          if (it.updateTime) {
            let dt1 = +this.$dt(this.$dt(it.nickedTime).format("YYYY-MM-DD"));
            let dt2 = +this.$dt(this.$dt(it.updateTime).format("YYYY-MM-DD"));
            if (dt1 < dt2) {
              it.timeout = true;
            } else {
              it.timeout = false;
            }
          } else if (it.nickedTime) {
            let dt1 = +this.$dt(this.$dt(it.nickedTime).format("YYYY-MM-DD"));
            let dt2 = +this.$dt(this.$dt(new Date()).format("YYYY-MM-DD"));
            if (dt1 < dt2) {
              it.timeout = true;
            } else {
              it.timeout = false;
            }
          } else {
            it.timeout = false;
          }
          return it;
        });
        this.elKey++;
      })
    },
    loadData(infoType, roleType, selDate) {
      this.selDate = selDate;
      this.infoType = infoType;
      this.roleType = roleType;
      if (infoType == 0) {
        this.$api.dict('ssp_aqyhlx').then(d => {
          this.dicts = d || [];
        })
      } else {
        this.$api.dict('ssp_zlyhlx').then(d => {
          this.dicts = d || [];
        })
      }
      this.$api.dict('smz_ssp_checkstate').then(d => {
        this.checkStateDicts = d || [];
      });      
      if(!this.$root.project){
        return;
      }
      this.projectId = this.$root.project.id;
      if (this.projectId == 0 && this.$root.projects.length > 1) {
        this.projectId = this.$root.projects[1].id;
      }
      if (this.projectId > 0) {
        this.doNav(0, true);
        let postData = {
          projectId: this.projectId,
          infoType: this.infoType,
          roleType: this.roleType
        };
        if (this.selDate.length > 0) {
          postData.startDate = this.$dt(this.selDate[0]).format("YYYY-MM-DD");
        }
        if (this.selDate.length > 1) {
          postData.endDate = this.$dt(this.selDate[1]).format("YYYY-MM-DD");
        }
        this.$api.problemmodify.groupByInfotypeCheckState(postData).then(d => {
          for (let i = 0; i <= 5; i++) {
            this.count["" + i] = 0;
          }
          let tmps = (d.data || []).filter(it => it.infoType == this.infoType);
          tmps.forEach(it => {
            this.count["" + it.checkState] = it.id;
          })
        })
      }
    }
  },
};
</script>
<style lang="less">
.problemmodify-list {
  padding: 0 10px;

  .head-title-tab {
    padding-top: 12px;
    display: block;
    width: 100%;

    .head-nav {
      background-size: 100% 100%;
      display: inline-block;
      width: auto;
      padding: 0px 24px;
    }
  }

  .data-list {
    .data-item {
      border-bottom: solid 1px #fff;
      box-shadow: inset 7px 0px 11px 5px rgb(36 131 167 / 70%);
      display: flex;
      padding-left: 8px;

      &.time-out {
        box-shadow: inset 7px 0px 11px 5px rgb(167, 36, 36);

        .text-state {
          color: rgba(167, 36, 36, 0.6) !important;
        }
      }

      .item-left {
        display: inline-flex;
        width: 300px;
        min-height: 220px;
        align-items: center;
      }

      .text-state {
        font-size: 32px;
        position: absolute;
        color: rgba(200, 200, 200, 0.2);
        transform: rotate(45deg);
        top: 60px;
        left: calc(50% - 100px);

        &.state4 {
          color: rgba(5, 248, 5, 0.5);
        }
      }

      .item-right {
        display: inline-block;
        margin-left: 10px;
        width: calc(100% - 314px);
        position: relative;

        .sp-lbl {
          display: inline-block;
          color: aquamarine;

        }

        .text-timeout {
          position: absolute;
          right: -4px;
          font-size: 24px;
          color: #fff;
          display: block;
          padding: 20px;
          background: linear-gradient(-135deg, red, red 50%, transparent 50%, transparent 100%);
          height: 50px;
          width: 50px;

          &::after {
            content: "超时";
            transform: rotate(45deg);
            display: block;
            position: absolute;
            left: 42px;
            top: 15px;
          }
        }

        .item-data {
          display: flex;
          align-items: center;
          border-bottom: solid 1px rgba(255, 255, 255, 0.1);
          line-height: 36px;

          .div-text {
            display: inline-block;
            width: calc(100% - 100px);
            vertical-align: top;
            line-height: 24px;
            white-space: break-spaces;
            word-break: break-word;

          }
        }
      }
    }
  }
}
</style>